import Link from "next/link";
import { Card, CardHeader, CardTitle } from "@/components/ui/Card";
import { EmptyState } from "@/components/shared/EmptyState";
import { cn } from "@/lib/utils/cn";
import type { DomesticAnswerAdminRow } from "@/lib/queries/domestic-admin-queries";

interface DomesticAnswersPanelProps {
  questionId: string;
  questionCode: string;
  versions: Array<{
    id: string;
    versionNumber: number;
    answerCount: number;
  }>;
  selectedVersionId: string | null;
  rows: DomesticAnswerAdminRow[];
  total: number;
}

export function DomesticAnswersPanel({
  questionId,
  questionCode,
  versions,
  selectedVersionId,
  rows,
  total,
}: DomesticAnswersPanelProps) {
  const base = `/admin/domestic/questions/${questionId}`;

  return (
    <div id="responses" className="scroll-mt-24">
    <Card>
      <CardHeader>
        <CardTitle>Individual responses</CardTitle>
        <span className="font-mono text-[13px] font-bold">{total}</span>
      </CardHeader>

      {versions.some((v) => v.answerCount > 0) && (
        <div className="flex flex-wrap gap-2 border-b border-border px-5 pb-3">
          <Link
            href={base}
            className={cn(
              "rounded-full border px-3 py-1 text-[12px] font-semibold",
              !selectedVersionId
                ? "border-primary bg-[#EFF6FF] text-primary"
                : "border-border text-muted hover:border-primary/40"
            )}
          >
            All versions
          </Link>
          {versions
            .filter((v) => v.answerCount > 0)
            .map((v) => (
              <Link
                key={v.id}
                href={`${base}?version=${v.id}`}
                className={cn(
                  "rounded-full border px-3 py-1 text-[12px] font-semibold",
                  selectedVersionId === v.id
                    ? "border-primary bg-[#EFF6FF] text-primary"
                    : "border-border text-muted hover:border-primary/40"
                )}
              >
                v{v.versionNumber} ({v.answerCount})
              </Link>
            ))}
        </div>
      )}

      {total === 0 ? (
        <EmptyState
          className="py-10"
          title="No responses yet"
          description={`Participants haven't answered ${questionCode} yet.`}
        />
      ) : (
        <>
          <div className="overflow-x-auto">
            <table className="w-full text-left text-[13px]">
              <thead className="border-b border-border bg-[#F8FAFC] text-[11.5px] uppercase tracking-wide text-muted">
                <tr>
                  <th className="px-5 py-3 font-bold">Answered</th>
                  <th className="px-5 py-3 font-bold">Response</th>
                  <th className="px-5 py-3 font-bold">Version</th>
                  <th className="px-5 py-3 font-bold">Participant</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {rows.map((r) => (
                  <tr key={r.id} className="align-top">
                    <td className="whitespace-nowrap px-5 py-3 text-muted">
                      {new Date(r.answeredAt).toLocaleString()}
                    </td>
                    <td className="px-5 py-3 font-semibold">{r.answerText}</td>
                    <td className="whitespace-nowrap px-5 py-3 font-mono text-[12px]">
                      v{r.versionNumber}
                      {r.revision > 1 && (
                        <span className="ml-1 text-muted">rev {r.revision}</span>
                      )}
                    </td>
                    <td className="px-5 py-3 text-[12.5px] text-muted">
                      {r.participantLabel}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {total > rows.length && (
            <p className="border-t border-border px-5 py-3 text-[12px] text-muted">
              Showing latest {rows.length} of {total} responses.
            </p>
          )}
        </>
      )}
    </Card>
    </div>
  );
}