import { Card, CardContent } from "@/components/ui/card";
import type { Case } from "@/lib/api/cases";

type Bucket = {
  label: string;
  caption: string;
  value: number;
  tone: "navy" | "gold" | "warn" | "success";
};

const TONE_STYLES: Record<Bucket["tone"], string> = {
  navy:    "before:bg-navy  text-navy",
  gold:    "before:bg-gold  text-gold-deep",
  warn:    "before:bg-warn  text-warn",
  success: "before:bg-success text-success",
};

function bucketize(cases: Case[] | undefined): Bucket[] {
  const c = cases ?? [];
  const inProgress = c.filter((x) =>
    ["processing", "documents_ready", "analyst_verified", "research_complete", "outcome_set", "brainstorming", "direction_approved", "analysis_enriched", "ready_for_writing"].includes(x.status),
  ).length;
  const drafting = c.filter((x) =>
    ["drafting", "qa_review", "drafted"].includes(x.status),
  ).length;
  const done = c.filter((x) =>
    ["exported", "reviewed", "final"].includes(x.status),
  ).length;

  return [
    { label: "סה״כ תיקי ערר", caption: "בכל הסטטוסים",   value: c.length,    tone: "navy"    },
    { label: "בהכנה",         caption: "מסמכים וניתוח",  value: inProgress,  tone: "gold"    },
    { label: "בכתיבה",        caption: "טיוטות ו-QA",    value: drafting,    tone: "warn"    },
    { label: "מוכנים",        caption: "יוצאו או סופיים", value: done,        tone: "success" },
  ];
}

export function KPICards({ cases, loading }: { cases?: Case[]; loading?: boolean }) {
  const buckets = bucketize(cases);

  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      {buckets.map((b) => (
        <Card
          key={b.label}
          className={`
            relative overflow-hidden bg-surface shadow-sm border-rule
            before:content-[''] before:absolute before:top-0 before:right-0 before:h-full before:w-[3px]
            ${TONE_STYLES[b.tone]}
          `}
        >
          <CardContent className="px-5 py-4 flex flex-col gap-1">
            <span className="text-[0.72rem] uppercase tracking-[0.08em] text-ink-muted">
              {b.label}
            </span>
            <span className="font-display text-[2.3rem] font-black leading-none">
              {loading ? "—" : b.value}
            </span>
            <span className="text-[0.78rem] text-ink-muted mt-0.5">{b.caption}</span>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}