import { redirect } from "next/navigation";
import Link from "next/link";
import { isAdminSession, hasPermission, getAllPermissions } from "@/lib/adminAuth";
import { getClientList } from "@/lib/clientList";
import { AdminNavLinks } from "@/components/admin/AdminNavLinks";
import { AdminPageHeader } from "@/components/admin/AdminPageHeader";
import { AdminEmptyState } from "@/components/admin/AdminEmptyState";
import { AdminOrderSearchBox } from "@/components/admin/AdminOrderSearchBox";
import { AdminPagination } from "@/components/admin/AdminPagination";
import { NewClientForm } from "@/components/admin/NewClientForm";
import { formatDateDE } from "@/lib/orderConstants";

export const dynamic = "force-dynamic";

export default async function AdminClientsPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; page?: string }>;
}) {
  if (!(await isAdminSession())) redirect("/de/login?next=%2Fde%2Fadmin%2Fclients");

  if (!(await hasPermission("clients_view"))) redirect("/de/account");

  const permissions = await getAllPermissions();
  const { q = "", page: pageParam } = await searchParams;
  const page = Math.max(1, parseInt(pageParam || "1", 10) || 1);

  const { clients, total, totalPages } = await getClientList({ q, page });

  function buildHref(targetPage: number) {
    const params = new URLSearchParams();
    if (q) params.set("q", q);
    if (targetPage > 1) params.set("page", String(targetPage));
    const qs = params.toString();
    return `/de/admin/clients${qs ? `?${qs}` : ""}`;
  }

  return (
    <main className="px-6 pt-4 pb-24 max-w-5xl mx-auto">
      <AdminNavLinks permissions={permissions} />
      <AdminPageHeader title="Kunden" subtitle={`${total} insgesamt`} />

      <div className="flex flex-wrap items-center gap-3 mb-6">
        <AdminOrderSearchBox placeholder="Name, E-Mail oder Geburtsdatum (z. B. 12.05) suchen…" />
        <a
          href="/api/admin/clients/export"
          className="text-xs border border-white/30 rounded-lg px-3.5 py-1.5 hover:border-white transition-colors shrink-0"
        >
          CSV exportieren
        </a>
      </div>

      {permissions.client_accounts && <NewClientForm />}

      {clients.length === 0 ? (
        <AdminEmptyState message={q ? "Keine Treffer." : "Noch keine Kunden."} />
      ) : (
        <>
          <div className="flex flex-col gap-3">
            {clients.map((c) => (
              <Link
                key={String(c._id)}
                href={`/de/admin/clients/${c._id}`}
                className="flex items-center justify-between gap-3 bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 hover:border-white/25 transition-colors"
              >
                <div className="flex items-center gap-3 min-w-0">
                  {c.avatarPath ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={`/api/avatars/${c._id}/${c.avatarPath}`}
                      alt=""
                      className="w-10 h-10 rounded-full object-cover border border-white/15 shrink-0"
                    />
                  ) : (
                    <div className="w-10 h-10 rounded-full border border-white/15 bg-white/5 flex items-center justify-center text-sm text-[var(--rk-ink-muted)] shrink-0">
                      {c.firstName?.[0]?.toUpperCase() ?? c.name?.[0]?.toUpperCase() ?? "?"}
                    </div>
                  )}
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-[var(--rk-ink)] truncate flex items-center gap-2 flex-wrap">
                      {c.name}
                      {(c.tags || []).map((tag) => (
                        <span
                          key={tag}
                          className="text-[0.6rem] font-normal uppercase tracking-[0.06em] border border-white/15 rounded-full px-2 py-0.5 text-[var(--rk-ink-muted)]"
                        >
                          {tag}
                        </span>
                      ))}
                    </p>
                    <p className="text-xs text-[var(--rk-ink-muted)] mt-0.5 truncate">
                      {c.email}
                      {c.birthDate && <> · {formatDateDE(c.birthDate)}</>}
                    </p>
                  </div>
                </div>
                <div className="text-right shrink-0">
                  <p className="text-xs text-[var(--rk-ink-muted)]">
                    {c.orderCount} Auftr{c.orderCount === 1 ? "ag" : "äge"}
                  </p>
                  {c.orderCount > 1 && (
                    <span className="inline-block mt-0.5 text-[0.65rem] uppercase tracking-[0.08em] border border-emerald-400/40 text-emerald-400 rounded-full px-2 py-0.5">
                      Stammkunde
                    </span>
                  )}
                  {!c.verified && <p className="text-[0.65rem] text-amber-400 mt-0.5">nicht verifiziert</p>}
                  {c.deletionRequestedAt && <p className="text-[0.65rem] text-red-400 mt-0.5">Löschung beantragt</p>}
                </div>
              </Link>
            ))}
          </div>
          <AdminPagination page={page} totalPages={totalPages} buildHref={buildHref} />
        </>
      )}
    </main>
  );
}