// Resumen page: KPIs + ingresos chart + métodos donut + alta reciente

const KpiTile = ({ label, value, delta, deltaTone, icon }) => (
  <div className="kpi-tile">
    <div className="label">{icon}{label}</div>
    <div className="value">{value}</div>
    <div className={`delta delta-${deltaTone}`}>
      {deltaTone === "pos" ? "▲" : "▼"} {delta}
    </div>
  </div>
);

const IncomeChart = () => {
  // 12 weekly points
  const data = [38, 36, 42, 40, 48, 46, 54, 50, 58, 62, 68, 72];
  const max = 80, min = 20, h = 160, w = 520;
  const stepX = w / (data.length - 1);
  const norm = v => h - ((v - min) / (max - min)) * (h - 16) - 8;
  const points = data.map((v, i) => [i * stepX, norm(v)]);
  const path = points.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
  const fill = path + ` L${w},${h} L0,${h} Z`;
  return (
    <div className="card" style={{ display: "flex", flexDirection: "column" }}>
      <div className="card-head">
        <h3>Ingresos · últimas 12 semanas</h3>
        <div className="opts">
          <button className="tab active" style={{ fontSize: 11 }}>12s</button>
          <button className="tab" style={{ fontSize: 11 }}>3m</button>
          <button className="tab" style={{ fontSize: 11 }}>1a</button>
        </div>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: "100%", height: 180 }}>
        <defs>
          <linearGradient id="incFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#9B30EA" stopOpacity="0.45"/>
            <stop offset="100%" stopColor="#9B30EA" stopOpacity="0"/>
          </linearGradient>
          <linearGradient id="incStroke" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#9B30EA"/>
            <stop offset="100%" stopColor="#72B8F8"/>
          </linearGradient>
        </defs>
        {[0.25, 0.5, 0.75].map((p, i) => (
          <line key={i} x1="0" x2={w} y1={h * p} y2={h * p}
                stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
        ))}
        <path d={fill} fill="url(#incFill)"/>
        <path d={path} fill="none" stroke="url(#incStroke)" strokeWidth="2.5"
              strokeLinecap="round" strokeLinejoin="round"/>
        {points.map(([x, y], i) => i === points.length - 1 && (
          <g key={i}>
            <circle cx={x} cy={y} r="6" fill="#0B1027" stroke="#8B5BFF" strokeWidth="2"/>
            <circle cx={x} cy={y} r="2.5" fill="#8B5BFF"/>
          </g>
        ))}
      </svg>
      <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", marginTop: 6 }}>
        {["S1","S2","S3","S4","S5","S6","S7","S8","S9","S10","S11","S12"].map(l => <span key={l}>{l}</span>)}
      </div>
    </div>
  );
};

const MethodsDonut = () => {
  const segs = [
    { label: "Tarjeta",       pct: 60, color: "#6E3CFF" },
    { label: "Transferencia", pct: 30, color: "#72B8F8" },
    { label: "Efectivo",      pct: 10, color: "#9B30EA" },
  ];
  const C = 2 * Math.PI * 14;
  let off = 0;
  return (
    <div className="card">
      <div className="card-head">
        <h3>Métodos de pago</h3>
        <span className="pill pill-neutral" style={{ background: "var(--bg-3)" }}>30 días</span>
      </div>
      <div className="donut-row">
        <svg viewBox="0 0 36 36">
          <circle cx="18" cy="18" r="14" fill="none" stroke="#1B2247" strokeWidth="6"/>
          {segs.map((s, i) => {
            const len = (s.pct / 100) * C;
            const dash = `${len} ${C - len}`;
            const dashoff = -off;
            off += len;
            return (
              <circle key={i} cx="18" cy="18" r="14" fill="none"
                      stroke={s.color} strokeWidth="6"
                      strokeDasharray={dash} strokeDashoffset={dashoff}
                      transform="rotate(-90 18 18)"
                      strokeLinecap="butt"/>
            );
          })}
          <text x="18" y="18.5" textAnchor="middle" fontFamily="var(--font-display)"
                fontSize="6" fontWeight="700" fill="#F5F6FB">100%</text>
        </svg>
        <div className="legend">
          {segs.map(s => (
            <div className="row" key={s.label}>
              <span className="left"><span className="dot" style={{ background: s.color }}/>{s.label}</span>
              <b>{s.pct}%</b>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const RecentSignups = () => {
  const rows = [
    { name: "María Beltrán",   plan: "Mensual · Guitarra",   when: "hace 2 h",  status: "success" },
    { name: "Javier Olmedo",   plan: "Mensual · Solfeo",     when: "hace 5 h",  status: "success" },
    { name: "Lucía Romero",    plan: "Trimestral · Piano",   when: "ayer",      status: "warning" },
    { name: "Alba Ferreira",   plan: "Mensual · Coro",       when: "hace 2 d",  status: "success" },
    { name: "Pablo Cifuentes", plan: "Mensual · Solfeo",     when: "hace 3 d",  status: "danger" },
  ];
  const labels = { success: "Activo", warning: "Pendiente", danger: "Cobro fallido" };
  return (
    <div className="card">
      <div className="card-head">
        <h3>Altas recientes</h3>
        <button className="tab" style={{ fontSize: 11 }}>Ver todo</button>
      </div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 12, padding: "10px 0",
            borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none"
          }}>
            <Avatar name={r.name} size={32}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{r.name}</div>
              <div style={{ fontSize: 11, color: "var(--fg-3)" }}>{r.plan} · {r.when}</div>
            </div>
            <Pill tone={r.status}>{labels[r.status]}</Pill>
          </div>
        ))}
      </div>
    </div>
  );
};

const ResumenPage = () => (
  <div className="page">
    <div className="page-head">
      <div>
        <h1>Resumen</h1>
        <p className="lede">Esto es lo que está pasando en Academia Hortaleza este mes.</p>
      </div>
      <div className="actions">
        <Btn variant="secondary" icon={Icons.Down}>Mayo 2026</Btn>
        <Btn variant="primary" icon={Icons.Plus}>Añadir cliente</Btn>
      </div>
    </div>

    <div className="kpis">
      <KpiTile label="Ingresos del mes" value="32.540 €" delta="+12,5% vs abril" deltaTone="pos" icon={Icons.Coin}/>
      <KpiTile label="Cobros exitosos"  value="1.248"     delta="+8,3% vs abril"  deltaTone="pos" icon={Icons.Check}/>
      <KpiTile label="Cobros fallidos"  value="14"        delta="−5 vs abril"      deltaTone="pos" icon={Icons.X}/>
      <KpiTile label="Nuevos clientes"  value="156"       delta="−1,8% vs abril"   deltaTone="neg" icon={Icons.Users}/>
    </div>

    <div className="two-up">
      <IncomeChart/>
      <MethodsDonut/>
    </div>

    <RecentSignups/>
  </div>
);

Object.assign(window, { ResumenPage });