"use client";

import { Skeleton } from "@/components/ui/skeleton";
import { useLibraryStats } from "@/lib/api/precedent-library";
import { practiceAreaLabel } from "./practice-area";

function StatCard({ label, value, accent }: { label: string; value: number | string; accent?: boolean }) {
  return (
    <div
      className={`
        rounded-lg border p-5 bg-surface shadow-sm
        ${accent ? "border-gold bg-gold-wash/40" : "border-rule"}
      `}
    >
      <div className="text-[0.78rem] text-ink-muted mb-1">{label}</div>
      <div className={`text-3xl font-bold tabular-nums ${accent ? "text-gold-deep" : "text-navy"}`}>
        {value}
      </div>
    </div>
  );
}

export function LibraryStatsPanel() {
  const { data, isPending, error } = useLibraryStats();

  if (error) {
    return (
      <div className="rounded bg-danger-bg border border-danger/40 px-6 py-5 text-danger text-center">
        {error.message}
      </div>
    );
  }

  if (isPending || !data) {
    return (
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-28 w-full" />)}
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <StatCard label="פסיקה בקורפוס" value={data.precedents_total} />
        <StatCard label="הלכות בסך הכל" value={data.halachot_total} />
        <StatCard
          label="ממתינות לאישור" value={data.halachot_pending}
          accent={data.halachot_pending > 0}
        />
        <StatCard label="מאושרות (זמינות לסוכנים)" value={data.halachot_approved} />
      </div>

      <div className="grid md:grid-cols-2 gap-4">
        <div className="rounded-lg border border-rule bg-surface p-5">
          <h3 className="text-navy font-semibold mb-3">פילוח לפי תחום</h3>
          {data.by_practice_area.length === 0 ? (
            <p className="text-ink-muted text-sm">אין נתונים</p>
          ) : (
            <ul className="space-y-2">
              {data.by_practice_area.map((row) => (
                <li key={row.practice_area || "—"} className="flex items-center gap-2 text-sm">
                  <span className="text-ink">{practiceAreaLabel(row.practice_area || null)}</span>
                  <span className="ms-auto tabular-nums text-navy font-semibold">{row.count}</span>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="rounded-lg border border-rule bg-surface p-5">
          <h3 className="text-navy font-semibold mb-3">פילוח לפי רמת תקדים</h3>
          {data.by_precedent_level.length === 0 ? (
            <p className="text-ink-muted text-sm">אין נתונים</p>
          ) : (
            <ul className="space-y-2">
              {data.by_precedent_level.map((row) => (
                <li key={row.precedent_level || "—"} className="flex items-center gap-2 text-sm">
                  <span className="text-ink">{row.precedent_level || "—"}</span>
                  <span className="ms-auto tabular-nums text-navy font-semibold">{row.count}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}