"use client";

import React from "react";
import type { AgingReport } from "./agingApi";

interface Props {
  report: AgingReport;
}

const card = (
  label: string,
  value: number | string,
  gradient: string,
  icon: string,
) => ({ label, value, gradient, icon });

export function AgingSummaryCards({ report }: Props) {
  const s = report.summary;

  const cats = Object.entries(s.byCategory); // [["Re-certification", 65], ...]

  const catGradient = (name: string): string => {
    if (name.includes("Re-cert"))
      return "linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%)";
    if (name.includes("1st"))
      return "linear-gradient(135deg, #0891b2 0%, #06b6d4 100%)";
    if (name.includes("2nd"))
      return "linear-gradient(135deg, #0e7490 0%, #22d3ee 100%)";
    return "linear-gradient(135deg, #6366f1 0%, #818cf8 100%)";
  };

  const cards = [
    card(
      "Total Due",
      s.total.toLocaleString(),
      "linear-gradient(135deg, #4A0080 0%, #8B14D4 100%)",
      "📊",
    ),
    ...cats.map(([name, n]) =>
      card(name, n.toLocaleString(), catGradient(name), "🔄"),
    ),
    card(
      "Expired",
      s.expired.toLocaleString(),
      "linear-gradient(135deg, #b91c1c 0%, #ef4444 100%)",
      "⚠️",
    ),
    card(
      "Expiring ≤ 90 days",
      s.expiringWithin90.toLocaleString(),
      "linear-gradient(135deg, #b45309 0%, #f59e0b 100%)",
      "⏳",
    ),
  ];

  const byStandard = Object.entries(s.byStandard).sort((a, b) => b[1] - a[1]);

  return (
    <div style={{ marginBottom: 16 }}>
      {/* Meta line */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          marginBottom: 12,
          color: "#4A0080",
          fontWeight: 800,
          fontSize: 15,
        }}
      >
        <span style={{ fontSize: 18 }}>🗂️</span>
        <span>
          Certification Report
          {report.meta.category ? ` — ${report.meta.category}` : ""} —{" "}
          {report.meta.period_label}
        </span>
        <span
          style={{
            marginLeft: "auto",
            fontSize: 11,
            color: "#94a3b8",
            fontWeight: 500,
          }}
        >
          Source: {report.meta.source_filter} · Generated{" "}
          {report.meta.generated_at.slice(0, 10)}
        </span>
      </div>

      {/* Cards */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
          gap: 12,
        }}
      >
        {cards.map((c) => (
          <div
            key={c.label}
            style={{
              background: c.gradient,
              color: "#fff",
              padding: "14px 16px",
              borderRadius: 12,
              display: "flex",
              alignItems: "center",
              gap: 12,
              boxShadow: "0 4px 14px rgba(0,0,0,0.10)",
              minWidth: 0,
            }}
          >
            <div
              style={{
                width: 40,
                height: 40,
                background: "rgba(255,255,255,0.18)",
                borderRadius: 10,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                flexShrink: 0,
                fontSize: 20,
              }}
            >
              {c.icon}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
              <span
                style={{
                  fontSize: 11,
                  fontWeight: 700,
                  opacity: 0.92,
                  textTransform: "uppercase",
                  letterSpacing: 0.4,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                {c.label}
              </span>
              <span
                style={{
                  fontSize: 22,
                  fontWeight: 800,
                  fontFamily: "'IBM Plex Mono', monospace",
                  lineHeight: 1.1,
                }}
              >
                {c.value}
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* By standard mini breakdown */}
      {byStandard.length > 0 && (
        <div
          style={{
            marginTop: 12,
            display: "flex",
            flexWrap: "wrap",
            gap: 8,
            alignItems: "center",
          }}
        >
          <span
            style={{
              fontSize: 11,
              fontWeight: 700,
              color: "#94a3b8",
              textTransform: "uppercase",
              letterSpacing: 0.4,
            }}
          >
            By Standard
          </span>
          {byStandard.map(([name, n]) => (
            <span
              key={name}
              style={{
                padding: "4px 10px",
                borderRadius: 999,
                background: "#f1f5f9",
                border: "1px solid #e2e8f0",
                fontSize: 12,
                fontWeight: 600,
                color: "#475569",
              }}
            >
              {name}: {n}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

export default AgingSummaryCards;