"use client";

import Link from "next/link";
import { AppShell } from "@/components/app-shell";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { DigestListPanel } from "@/components/digests/digest-list-panel";
import { DigestSearchPanel } from "@/components/digests/digest-search-panel";
import { DigestUploadDialog } from "@/components/digests/digest-upload-dialog";
import { useDigestPending } from "@/lib/api/digests";

/**
 * Digests radar page (X12) — a SECONDARY discovery layer ABOVE the citation
 * corpora. Deliberately a SEPARATE page from /precedents to keep the
 * authoritative/secondary boundary visible: a digest POINTS at a ruling, it is
 * never cited in a decision (INV-DIG1) and never extracts halachot (INV-DIG2).
 *
 * Two tabs:
 *   - יומונים — browse + upload + link to the underlying ruling
 *   - חיפוש — semantic radar search
 */

function PendingBadge() {
  const { data } = useDigestPending();
  const n = data?.count ?? 0;
  if (!n) return null;
  return (
    <Badge
      variant="outline"
      className="ms-1 bg-gold-wash text-gold-deep border-gold/40 text-[0.65rem]"
    >
      {n} ממתינים
    </Badge>
  );
}

export default function DigestsPage() {
  return (
    <AppShell>
      <section className="space-y-6">
        <header className="space-y-2">
          <nav className="text-[0.78rem] text-ink-muted">
            <Link href="/" className="hover:text-gold-deep">בית</Link>
            <span aria-hidden> · </span>
            <span className="text-navy">יומונים</span>
          </nav>
          <h1 className="text-navy mb-0">יומונים (רדאר)</h1>
          <p className="text-ink-muted text-sm max-w-3xl leading-relaxed">
            שכבת-גילוי משנית — מצביע-לא-מצוטט (X12). מאתרת פסיקה רלוונטית ומפנה
            אליה; אינה מקור-אמת לציטוט. סיכומי &quot;כל יום&quot; (עפר טויסטר):
            כל יומון <strong>מצביע</strong> על פסק הדין המקורי — כשהפסק רלוונטי,
            מעלים אותו לספריית הפסיקה ומצטטים משם.
          </p>
        </header>

        {/* prominent dashed-gold upload area (mockup 10 `.upload`) */}
        <div className="flex items-center gap-4 rounded-lg border-[1.5px] border-dashed border-gold bg-surface px-5 py-4">
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gold-wash text-gold-deep text-xl">
            ↑
          </div>
          <div className="min-w-0">
            <span className="block text-navy font-semibold text-[0.92rem]">העלאת יומון</span>
            <span className="text-[0.78rem] text-ink-muted">
              בחר קובץ יומון &quot;כל יום&quot; — PDF · עד 20MB
            </span>
          </div>
          <div className="ms-auto">
            <DigestUploadDialog
              trigger={
                <button className="rounded-lg bg-gold px-4 py-2 text-sm font-semibold text-white hover:bg-gold-deep">
                  בחר קובץ
                </button>
              }
            />
          </div>
        </div>

        <Tabs defaultValue="list" dir="rtl">
          <TabsList className="flex w-full justify-start gap-1 rounded-none border-0 border-b border-rule bg-transparent p-0 h-auto">
            {[
              { value: "list", label: "יומונים", pill: <PendingBadge /> },
              { value: "search", label: "חיפוש", pill: null },
            ].map((t) => (
              <TabsTrigger
                key={t.value}
                value={t.value}
                className="rounded-none border-0 border-b-2 border-transparent bg-transparent px-4 py-2.5 -mb-px text-sm font-medium text-ink-muted shadow-none data-[state=active]:border-gold data-[state=active]:bg-transparent data-[state=active]:font-semibold data-[state=active]:text-navy data-[state=active]:shadow-none"
              >
                {t.label}
                {t.pill}
              </TabsTrigger>
            ))}
          </TabsList>

          <TabsContent value="list" className="mt-5">
            <DigestListPanel />
          </TabsContent>

          <TabsContent value="search" className="mt-5">
            <DigestSearchPanel />
          </TabsContent>
        </Tabs>
      </section>
    </AppShell>
  );
}