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

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 ?? [];
  /* Buckets derive from the SSoT phases: "בהכנה" = everything from processing
   * through direction-approval (intake-after-new + prep + thinking). */
  const inProgress = c.filter((x) => {
    const p = phaseOf(x.status);
    return x.status === "processing" || p === "prep" || p === "thinking";
  }).length;
  const drafting = c.filter((x) => phaseOf(x.status) === "writing").length;
  const done = c.filter((x) => phaseOf(x.status) === "done").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-3 flex flex-col gap-0.5">
            <span className="text-[0.72rem] uppercase tracking-[0.08em] text-ink-muted">
              {b.label}
            </span>
            <span className="font-display text-[1.7rem] font-black leading-none">
              {loading ? "—" : b.value}
            </span>
            <span className="text-[0.74rem] text-ink-muted">{b.caption}</span>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}