import Link from "next/link";
import { notFound } from "next/navigation";
import { FormBuilder, SubmissionsTable } from "@/components/features/forms";
import { Card, EmptyState, PageHeader, Pagination, StatusBadge, buttonClass } from "@/components/ui";
import type { DashboardKind } from "@/lib/authz/context";
import { requireDashboard } from "@/lib/authz/guard";
import { AuthError } from "@/lib/authz/errors";
import { cn } from "@/lib/utils";
import { getFormDetail, listSubmissions, SUBMISSION_PAGE_SIZE, SUBMISSION_STATUSES, type SubmissionStatusName } from "@/lib/services/forms";

const first = (v: string | string[] | undefined) => (Array.isArray(v) ? v[0] : v);
const asStringArray = (v: unknown): string[] => (Array.isArray(v) ? v.filter((x): x is string => typeof x === "string") : []);

export async function FormScreen({ kind, formId, searchParams }: { kind: Extract<DashboardKind, "admin">; formId: string; searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  await requireDashboard(kind);
  let d;
  try { d = await getFormDetail(formId); } catch (e) { if (e instanceof AuthError) notFound(); throw e; }
  const sp = await searchParams;
  const { form, perms, fields, counts } = d;
  const tabs: Array<[string, string]> = [];
  if (perms.submissions) tabs.push(["submissions", "Submissions"]);
  if (perms.manage) tabs.push(["builder", "Fields & settings"]);
  const tab = tabs.find(([k]) => k === first(sp.tab))?.[0] ?? tabs[0]?.[0];
  if (!tab) notFound();
  const path = `/dashboard/${kind}/forms/${form.id}`;
  const statusFilter = SUBMISSION_STATUSES.find((s) => s === first(sp.status)) as SubmissionStatusName | undefined;
  const page = Math.max(1, Number.parseInt(first(sp.page) ?? "1", 10) || 1);

  let submissions: Awaited<ReturnType<typeof listSubmissions>> | null = null;
  if (tab === "submissions") {
    try { submissions = await listSubmissions(formId, { status: statusFilter, page }); } catch (e) { if (e instanceof AuthError) notFound(); throw e; }
  }
  const href = (p: number) => `${path}?tab=submissions${statusFilter ? `&status=${statusFilter}` : ""}&page=${p}`;

  return (
    <>
      <p className="text-xs text-muted-foreground"><Link href={`/dashboard/${kind}/forms`} className="hover:underline">Forms</Link></p>
      <PageHeader title={form.name} description={form.slug} actions={<StatusBadge value={form.status} />} />
      <nav aria-label="Form sections" className="mb-4 flex gap-1 border-b border-border">
        {tabs.map(([k, label]) => (
          <Link key={k} href={`${path}?tab=${k}`} aria-current={tab === k ? "page" : undefined} className={cn("-mb-px border-b-2 px-3 py-2 text-sm", tab === k ? "border-primary font-medium" : "border-transparent text-muted-foreground hover:text-foreground")}>{label}</Link>
        ))}
      </nav>

      {tab === "submissions" && submissions ? (
        <Card>
          <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-3">
            <div className="flex flex-wrap gap-1 text-sm" role="group" aria-label="Filter by status">
              <Link href={`${path}?tab=submissions`} aria-current={!statusFilter ? "true" : undefined} className={buttonClass(!statusFilter ? "primary" : "secondary")}>All</Link>
              {SUBMISSION_STATUSES.map((s) => (
                <Link key={s} href={`${path}?tab=submissions&status=${s}`} aria-current={statusFilter === s ? "true" : undefined} className={buttonClass(statusFilter === s ? "primary" : "secondary")}>{s.charAt(0) + s.slice(1).toLowerCase()} ({counts[s] ?? 0})</Link>
              ))}
            </div>
            <a href={`/api/forms/${form.id}/export${statusFilter ? `?status=${statusFilter}` : ""}`} className={buttonClass("secondary")} download>Export CSV</a>
          </div>
          {submissions.rows.length === 0 ? <EmptyState title="No submissions" description="Submissions appear here when visitors complete the form." /> : (
            <SubmissionsTable
              key={submissions.rows.map((r) => r.id + r.status).join()}
              formId={form.id} fields={submissions.fields} canManage={submissions.canManage}
              rows={submissions.rows.map((r) => ({ id: r.id, status: r.status, data: (r.data && typeof r.data === "object" && !Array.isArray(r.data) ? r.data : {}) as Record<string, unknown>, consentGiven: r.consentGiven, createdAt: r.createdAt.toISOString() }))}
            />
          )}
          <Pagination page={submissions.page} total={submissions.total} pageSize={SUBMISSION_PAGE_SIZE} buildHref={href} />
        </Card>
      ) : null}

      {tab === "builder" ? (
        <FormBuilder
          key={form.updatedAt.toISOString()}
          base={`/dashboard/${kind}`} formId={form.id} siteId={form.siteId} status={form.status === "PAUSED" ? "PAUSED" : "ACTIVE"} canManage={perms.manage}
          submissionCount={Object.values(counts).reduce((a, b) => a + b, 0)}
          initial={{ name: form.name, slug: form.slug, fields, notifyEmails: asStringArray(form.notifyEmails), consentText: form.consentText ?? "", successMessage: form.successMessage ?? "", retentionDays: form.retentionDays }}
        />
      ) : null}
    </>
  );
}