"use client";

import Link from "next/link";
import { AppShell } from "@/components/app-shell";
import { KPICards } from "@/components/cases/kpi-cards";
import { StatusDonut } from "@/components/cases/status-donut";
import { CasesTable } from "@/components/cases/cases-table";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useCases } from "@/lib/api/cases";

export default function HomePage() {
  const { data, isPending, error } = useCases(true);

  return (
    <AppShell>
      <section className="space-y-8">
        <header className="flex items-end justify-between gap-6 flex-wrap">
          <div className="space-y-1.5">
            <div className="text-[0.75rem] uppercase tracking-[0.12em] text-gold-deep">
              ועדת ערר לתכנון ובנייה · ירושלים
            </div>
            <h1 className="text-navy">עוזר משפטי</h1>
            <p className="text-ink-muted text-base max-w-2xl leading-relaxed">
              לוח בקרה לניהול תיקי ערר, ניתוח סגנון, וכתיבת החלטות לפי ארכיטקטורת
              12 הבלוקים.
            </p>
          </div>
          <Button asChild className="bg-navy hover:bg-navy-soft text-parchment">
            <Link href="/cases/new">+ תיק חדש</Link>
          </Button>
        </header>

        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />

        <KPICards cases={data} loading={isPending} />

        <div className="grid gap-6 lg:grid-cols-[1fr_auto]">
          <Card className="bg-surface border-rule shadow-sm">
            <CardContent className="px-6 py-5">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-navy text-xl mb-0">רשימת תיקים</h2>
                <span className="text-[0.72rem] uppercase tracking-[0.08em] text-ink-muted">
                  מעודכן חי
                </span>
              </div>
              <CasesTable cases={data} loading={isPending} error={error} />
            </CardContent>
          </Card>

          <Card className="bg-surface border-rule shadow-sm lg:w-[320px]">
            <CardContent className="px-6 py-5">
              <h2 className="text-navy text-lg mb-4">פיזור סטטוסים</h2>
              <StatusDonut cases={data} />
            </CardContent>
          </Card>
        </div>
      </section>
    </AppShell>
  );
}