import { Card } from "@/components/ui/card";
import { AnimatedCounter } from "@/components/ui/animated-counter";
import { cn } from "@/lib/utils";
import type { KPISet } from "@/lib/types";

export function KpiHighlights({ kpis, className }: { kpis: KPISet; className?: string }) {
  return (
    <section className={cn("grid w-full gap-2.5 xl:grid-cols-2", className)}>
      <Card className="enter-fade-up min-h-[116px] border-[#db822c] !bg-[linear-gradient(155deg,#f7a043_0%,#f28f32_56%,#e58124_100%)] p-3 text-white shadow-[0_20px_32px_-22px_rgba(189,101,26,0.9)] transition duration-300 hover:-translate-y-0.5 hover:shadow-[0_26px_40px_-26px_rgba(189,101,26,0.95)]">
        <p className="caption text-[10px] uppercase tracking-[0.2em] text-white">Emails Sent</p>
        <p className="mt-1 text-[58px] font-black leading-[0.85] tracking-tight text-white">
          <AnimatedCounter value={kpis.total_emails_sent} />
        </p>
      </Card>

      <Card
        className="enter-fade-up min-h-[116px] border-[#d8e4f3] bg-[linear-gradient(150deg,#ffffff_0%,#f2f8ff_100%)] p-3 transition duration-300 hover:-translate-y-0.5 hover:border-[#c8dbef]"
        style={{ ["--enter-delay" as string]: "60ms" }}
      >
        <p className="caption text-[10px] uppercase tracking-[0.2em] text-slate-500">Opened</p>
        <div className="mt-1 flex items-end gap-3">
          <p className="text-[58px] font-black leading-[0.85] tracking-tight text-slate-900">
            <AnimatedCounter value={kpis.total_opened} />
          </p>
          <p className="mb-1 rounded-full bg-[#fff4e8] px-2 py-0.5 text-sm font-semibold text-[#d9852c]">
            <AnimatedCounter
              value={kpis.open_rate * 100}
              format="decimal"
              decimals={1}
              suffix="%"
              durationMs={700}
            />
          </p>
        </div>
      </Card>
    </section>
  );
}

export function KpiCards({ kpis }: { kpis: KPISet }) {
  const cards = [
    { label: "Total Opens", value: kpis.total_opens, accent: "#2663AC", isPercent: false },
    {
      label: "Clicked",
      value: kpis.total_clicked,
      sub: kpis.ctr,
      accent: "#F7993A",
      badgeClassName: "bg-[#fff4e8] text-[#d9852c]",
      isPercent: false,
    },
    { label: "Total Clicks", value: kpis.total_clicks, accent: "#2663AC", isPercent: false },
    { label: "CTOR", value: kpis.ctor, accent: "#F7993A", isPercent: true },
  ];

  return (
    <section className="grid gap-2.5 sm:grid-cols-2 xl:grid-cols-4">
      {cards.map((card, index) => (
        <Card
          key={card.label}
          className="enter-fade-up group relative min-h-[102px] overflow-hidden border-[#d8e4f3] bg-[linear-gradient(145deg,#ffffff_0%,#f6fbff_82%)] p-3 transition duration-300 hover:-translate-y-0.5 hover:border-[#c8dbef]"
          style={{ ["--enter-delay" as string]: `${120 + index * 40}ms` }}
        >
          <div
            className="pointer-events-none absolute -right-10 -top-10 h-20 w-20 rounded-full opacity-20 blur-2xl"
            style={{ backgroundColor: card.accent }}
          />
          <div className="absolute left-0 top-0 h-1 w-full" style={{ backgroundColor: card.accent }} />
          <p className="caption text-[10px] uppercase tracking-[0.18em] text-slate-500">{card.label}</p>
          {card.sub !== undefined ? (
            <div className="mt-1 flex items-end gap-3">
              <p className="text-[52px] font-black leading-[0.86] tracking-tight text-slate-900">
                <AnimatedCounter
                  value={card.isPercent ? card.value * 100 : card.value}
                  durationMs={760}
                  format={card.isPercent ? "decimal" : "integer"}
                  decimals={card.isPercent ? 1 : 0}
                  suffix={card.isPercent ? "%" : ""}
                />
              </p>
              <p
                className={cn(
                  "mb-1 rounded-full px-2 py-0.5 text-sm font-semibold",
                  card.badgeClassName,
                )}
              >
                <AnimatedCounter
                  value={card.sub * 100}
                  format="decimal"
                  decimals={1}
                  suffix="%"
                  durationMs={640}
                />
              </p>
            </div>
          ) : (
            <p className="mt-1 text-[52px] font-black leading-[0.86] tracking-tight text-slate-900">
              <AnimatedCounter
                value={card.isPercent ? card.value * 100 : card.value}
                durationMs={760}
                format={card.isPercent ? "decimal" : "integer"}
                decimals={card.isPercent ? 1 : 0}
                suffix={card.isPercent ? "%" : ""}
              />
            </p>
          )}
        </Card>
      ))}
    </section>
  );
}
