import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from "recharts";

// ─────────────────────────────────────────────────────────────────────────────
// ROI Replay — Metrix Inc. (CRM software)
// GoldPoint ROI Framework · 36 months · 2003–2005
// Documented earned-value report card — real figures.
// ValueLogics.ai LLC
// ─────────────────────────────────────────────────────────────────────────────

const NAVY  = "#0F1E3C";
const TEAL  = "#0D9488";
const BLUE  = "#1D4ED8";
const AMBER = "#D97706";
const GREEN = "#15803D";
const GRAY  = "#64748B";

const TOTAL = 3224640; // documented three-year earned value

const ANNUAL = [
  { year: "2003", value: 72000  },
  { year: "2004", value: 288000 },
  { year: "2005", value: 192000 },
];

// 36-month cumulative earned value to the documented total
const data = Array.from({ length: 36 }, (_, idx) => {
  const m = idx + 1;
  const year = 2003 + Math.floor(idx / 12);
  return {
    month: m,
    label: idx % 12 === 0 ? String(year) : "",
    cum: Math.round(TOTAL * (m / 36)),
  };
});

function KPI({ label, value, sub, color = GREEN }) {
  return (
    <div style={{ background: "#F8FAFC", borderRadius: 8, padding: "12px 16px", flex: 1 }}>
      <div style={{ fontSize: 10, color: GRAY, marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 700, color }}>{value}</div>
      {sub && <div style={{ fontSize: 10, color: GRAY, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

export default function ROIReplayMetrix() {
  return (
    <div style={{ padding: 24, maxWidth: 720, margin: "0 auto",
      fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", background: "#fff" }}>

      <div style={{ border: "1px solid #E2E8F0", borderRadius: 12, overflow: "hidden" }}>

        {/* Header */}
        <div style={{ background: NAVY, padding: "16px 22px",
          display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ fontSize: 10, color: "#93C5FD", letterSpacing: ".07em",
              marginBottom: 4, fontFamily: "monospace" }}>
              ROI REPLAY · MTX-001 · earned value report card
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, color: "#FFFFFF", marginBottom: 2 }}>
              Metrix Inc. — CRM software
            </div>
            <div style={{ fontSize: 12, color: "#94A3B8" }}>
              GoldPoint ROI Framework · 36 months · 2003–2005
            </div>
          </div>
          <span style={{ background: "#D1FAE5", color: GREEN, fontSize: 11, fontWeight: 700,
            padding: "4px 12px", borderRadius: 20, whiteSpace: "nowrap" }}>
            Documented ✓
          </span>
        </div>

        {/* Headline KPIs */}
        <div style={{ padding: "16px 22px", display: "flex", gap: 12 }}>
          <KPI label="Earned value" value={`$${TOTAL.toLocaleString()}`} sub="3-year documented" color={GREEN} />
          <KPI label="ROI" value=">1,000%" sub="GoldPoint ROI Framework" color={AMBER} />
          <KPI label="Period" value="36 mo" sub="2003–2005" color={NAVY} />
        </div>

        {/* Per-year earned value */}
        <div style={{ padding: "0 22px 4px", display: "flex", gap: 12 }}>
          {ANNUAL.map((a) => (
            <KPI key={a.year} label={`Earned value · ${a.year}`}
              value={`$${(a.value / 1000).toLocaleString()}K`} color={TEAL} />
          ))}
        </div>

        {/* Cumulative earned value chart */}
        <div style={{ padding: "16px 22px 8px" }}>
          <div style={{ fontSize: 11, color: GRAY, marginBottom: 8 }}>Cumulative earned value</div>
          <div style={{ height: 260 }}>
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={data} margin={{ top: 6, right: 18, bottom: 0, left: 4 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#F1F5F9" />
                <XAxis dataKey="label" tick={{ fontSize: 11, fill: GRAY }} interval={0} />
                <YAxis tick={{ fontSize: 10, fill: GRAY }}
                  tickFormatter={(v) => "$" + (v / 1000000).toFixed(1) + "M"} />
                <Tooltip
                  formatter={(v) => ["$" + v.toLocaleString(), "Earned value"]}
                  labelFormatter={(_, p) => (p && p[0] ? "Month " + p[0].payload.month : "")}
                  contentStyle={{ fontSize: 11, borderRadius: 8 }} />
                <ReferenceLine x="2004" stroke={AMBER} strokeDasharray="4 2"
                  label={{ value: "2004", fontSize: 9, fill: AMBER, position: "top" }} />
                <ReferenceLine x="2005" stroke={AMBER} strokeDasharray="4 2"
                  label={{ value: "2005", fontSize: 9, fill: AMBER, position: "top" }} />
                <Line type="monotone" dataKey="cum" name="Earned value"
                  stroke={GREEN} strokeWidth={2.5} fill="rgba(21,128,61,0.08)"
                  dot={false} activeDot={{ r: 4 }} />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* Footer */}
        <div style={{ padding: "12px 22px", background: "#F8FAFC",
          borderTop: "1px solid #E2E8F0", display: "flex",
          justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontSize: 10, color: GRAY }}>
            ValueLogics.ai LLC · ROI Replay · GoldPoint ROI Framework earned value report card
          </div>
          <div style={{ fontSize: 10, color: BLUE, fontFamily: "monospace" }}>
            /roi-replay/MTX-001
          </div>
        </div>

      </div>
    </div>
  );
}