import Link from "next/link";
import { desc } from "drizzle-orm";
import { Plus, Users } from "@/components/ui/icons";
import { Topbar } from "@/components/shell/topbar";
import { Panel } from "@/components/ui/panel";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar } from "@/components/ui/avatar";
import { EmptyState } from "@/components/ui/empty-state";
import { db } from "@/lib/db";
import { clientAccount } from "@/lib/db/schema";
import { formatDate } from "@/lib/format";

const PLAN_LABELS: Record<string, string> = {
  presence: "Presence",
  developpement: "Developpement",
  ecommerce: "E-commerce",
};

const STATUS_TONES: Record<string, "success" | "warning" | "danger" | "muted"> = {
  actif: "success",
  suspendu: "warning",
  annule: "danger",
};

const STATUS_LABELS: Record<string, string> = {
  actif: "Actif",
  suspendu: "Suspendu",
  annule: "Annule",
};

export default async function AdminClientsPage() {
  const clients = await db
    .select()
    .from(clientAccount)
    .orderBy(desc(clientAccount.createdAt));

  return (
    <>
      <Topbar
        title="Clients"
        subtitle={`${clients.length} compte${clients.length > 1 ? "s" : ""}`}
        trailing={
          <Link href="/atelier-novelia/clients/nouveau">
            <Button variant="primary" size="sm">
              <Plus className="size-3.5" />
              Nouveau client
            </Button>
          </Link>
        }
      />

      <div className="pt-6">
        <Panel>
          {clients.length === 0 ? (
            <EmptyState
              icon={Users}
              title="Aucun client"
              description="Provisionnez votre premier client pour le voir apparaitre ici."
              action={
                <Link href="/atelier-novelia/clients/nouveau">
                  <Button variant="primary" size="sm">
                    <Plus className="size-3.5" />
                    Provisionner un client
                  </Button>
                </Link>
              }
            />
          ) : (
            <>
              <div className="hidden md:block overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="text-xxs uppercase tracking-wider text-text-faint border-b border-border">
                      <th className="text-left font-medium px-6 py-3">Entreprise</th>
                      <th className="text-left font-medium px-6 py-3">Contact</th>
                      <th className="text-left font-medium px-6 py-3">Plan</th>
                      <th className="text-left font-medium px-6 py-3">Depuis</th>
                      <th className="text-right font-medium px-6 py-3 pr-6">Statut</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {clients.map((c) => (
                      <tr key={c.id} className="hover:bg-stone-900/[0.03] transition-colors cursor-pointer">
                        <td className="px-6 py-3.5">
                          <Link href={`/atelier-novelia/clients/${c.id}`} className="flex items-center gap-3 outline-none focus-visible:ring-2 focus-visible:ring-accent rounded-md">
                            <Avatar initials={c.companyName.slice(0, 2)} variant="client" size="sm" />
                            <div className="min-w-0">
                              <div className="text-sm font-medium text-text truncate">{c.companyName}</div>
                              <div className="text-xxs text-text-faint truncate">{c.id.slice(0, 8)}</div>
                            </div>
                          </Link>
                        </td>
                        <td className="px-6 py-3.5 text-text-muted">
                          <div className="text-sm text-text">{c.contactName}</div>
                          <div className="text-xxs text-text-dim">{c.contactEmail}</div>
                        </td>
                        <td className="px-6 py-3.5 text-text-muted">{PLAN_LABELS[c.plan] ?? c.plan}</td>
                        <td className="px-6 py-3.5 text-text-muted">{formatDate(c.createdAt.toISOString())}</td>
                        <td className="px-6 py-3.5 text-right pr-6">
                          <Badge tone={STATUS_TONES[c.status] ?? "muted"} dot>
                            {STATUS_LABELS[c.status] ?? c.status}
                          </Badge>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <ul className="md:hidden divide-y divide-border">
                {clients.map((c) => (
                  <li key={c.id}>
                    <Link
                      href={`/atelier-novelia/clients/${c.id}`}
                      className="block px-4 py-4 hover:bg-stone-900/[0.03] transition-colors"
                    >
                      <div className="flex items-center gap-3 mb-2">
                        <Avatar initials={c.companyName.slice(0, 2)} variant="client" size="sm" />
                        <div className="min-w-0 flex-1">
                          <div className="text-sm font-medium text-text truncate">{c.companyName}</div>
                          <div className="text-xxs text-text-dim truncate">{c.contactEmail}</div>
                        </div>
                        <Badge tone={STATUS_TONES[c.status] ?? "muted"} dot>
                          {STATUS_LABELS[c.status] ?? c.status}
                        </Badge>
                      </div>
                      <div className="flex items-center justify-between text-xs text-text-dim">
                        <span>{PLAN_LABELS[c.plan] ?? c.plan}</span>
                        <span>Depuis le {formatDate(c.createdAt.toISOString())}</span>
                      </div>
                    </Link>
                  </li>
                ))}
              </ul>
            </>
          )}
        </Panel>
      </div>
    </>
  );
}