import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { StatusBadge } from "@/components/cases/status-badge";
import { SyncIndicator } from "@/components/cases/sync-indicator";
import { CaseArchiveAction } from "@/components/cases/case-archive-action";
import { CreateRepoButton } from "@/components/cases/create-repo-button";
import {
  PRACTICE_AREA_LABELS,
  APPEAL_SUBTYPE_LABELS,
} from "@/lib/practice-area";
import type { CaseDetail } from "@/lib/api/cases";

function formatDate(iso?: string | null) {
  if (!iso) return "—";
  try {
    return new Date(iso).toLocaleDateString("he-IL", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  } catch {
    return iso ?? "—";
  }
}

export function CaseHeader({ data }: { data?: CaseDetail }) {
  return (
    <Card className="bg-surface border-rule shadow-sm">
      <CardContent className="px-6 py-5">
        <nav className="text-[0.78rem] text-ink-muted mb-3 flex items-center gap-2">
          <Link href="/" className="hover:text-gold-deep">בית</Link>
          <span aria-hidden>·</span>
          <span>תיקי ערר</span>
          <span aria-hidden>·</span>
          <span className="text-navy tabular-nums">{data?.case_number ?? "…"}</span>
        </nav>

        <div className="flex items-start justify-between gap-6 flex-wrap">
          <div className="space-y-2">
            <div className="flex items-center gap-3 flex-wrap">
              <span className="font-display text-[2rem] font-black text-navy leading-none tabular-nums">
                ערר {data?.case_number ?? "—"}
              </span>
              {data?.status && <StatusBadge status={data.status} />}
              {data?.archived_at && (
                <Badge
                  variant="outline"
                  className="rounded-full px-2.5 py-0.5 text-[0.72rem] font-medium bg-ink-muted/10 text-ink-muted border-ink-muted/30"
                >
                  בארכיון
                </Badge>
              )}
              {data?.practice_area && (
                <Badge
                  variant="outline"
                  className="rounded-full px-2.5 py-0.5 text-[0.72rem] font-medium bg-gold-wash text-gold-deep border-gold/40"
                >
                  {PRACTICE_AREA_LABELS[data.practice_area]}
                  {data.appeal_subtype && data.appeal_subtype !== "unknown" && (
                    <> · {APPEAL_SUBTYPE_LABELS[data.appeal_subtype]}</>
                  )}
                </Badge>
              )}
              {data?.case_number && (
                <CaseArchiveAction
                  caseNumber={data.case_number}
                  archivedAt={data.archived_at}
                />
              )}
              <CreateRepoButton data={data} />
            </div>
            <h1 className="text-navy text-xl font-bold leading-snug max-w-2xl mb-0">
              {data?.title ?? "טוען…"}
            </h1>
            {data?.subject && (
              <p className="text-ink-muted text-sm max-w-2xl leading-relaxed">
                {data.subject}
              </p>
            )}
          </div>

          <dl className="grid grid-cols-2 gap-x-6 gap-y-1 text-sm">
            <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
              תאריך דיון
            </dt>
            <dd className="text-ink-soft tabular-nums">{formatDate(data?.hearing_date)}</dd>
            <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
              עודכן
            </dt>
            <dd className="text-ink-soft tabular-nums">{formatDate(data?.updated_at)}</dd>
            <dt className="text-ink-muted text-[0.72rem] uppercase tracking-wider">
              סנכרון
            </dt>
            <dd><SyncIndicator caseNumber={data?.case_number} /></dd>
          </dl>
        </div>
      </CardContent>
    </Card>
  );
}