/* DashboardArea.jsx — workspace principal
   Equivalente del "ChatArea" en un kit de chat: aloja los KPIs,
   el chart de carga térmica y el detalle del equipo seleccionado. */

function KpiCard({ label, value, delta, deltaKind = 'neutral' }) {
  const deltaColor = {
    up:      'var(--success)',
    down:    'var(--danger)',
    warn:    'var(--warning)',
    neutral: 'var(--fg-muted)',
  }[deltaKind];
  return (
    <div className="ax-kpi">
      <div className="eyebrow">{label}</div>
      <div className="ax-kpi__value mono">{value}</div>
      {delta && <div className="ax-kpi__delta" style={{ color: deltaColor }}>{delta}</div>}
    </div>
  );
}

function LoadChart() {
  // 24 h en pasos de 2 h
  const cooling = [62,60,58,57,59,64,72,80,86,88,84,76];
  const heating = [40,42,44,46,44,42,38,36,34,34,36,38];
  const w = 480, h = 160, p = 24;
  const x = i => p + (i * (w - p*2) / (cooling.length - 1));
  const y = v => h - p - ((v / 100) * (h - p*2));
  const line = arr => arr.map((v,i)=> `${i?'L':'M'}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
  const area = arr => `${line(arr)} L${x(arr.length-1)},${h-p} L${x(0)},${h-p} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="ax-chart" role="img" aria-label="Carga térmica últimas 24 horas">
      <defs>
        <linearGradient id="cool" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#00A4D6" stopOpacity="0.22"/>
          <stop offset="100%" stopColor="#00A4D6" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <line x1={p} y1={h-p} x2={w-p} y2={h-p} stroke="var(--border)" />
      <path d={area(cooling)} fill="url(#cool)" />
      <path d={line(cooling)} fill="none" stroke="var(--brand-primary)" strokeWidth="2"/>
      <path d={line(heating)} fill="none" stroke="var(--warning)" strokeWidth="2" strokeDasharray="3 3"/>
    </svg>
  );
}

function DashboardArea({ unit }) {
  return (
    <main className="ax-workspace">
      <header className="ax-workspace__top">
        <div>
          <span className="eyebrow">Resumen · Turno actual</span>
          <h1>Operación de hoy</h1>
        </div>
        <div className="ax-workspace__actions">
          <button className="ax-btn ax-btn--ghost">Exportar</button>
          <button className="ax-btn ax-btn--primary">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
            Nueva orden
          </button>
        </div>
      </header>

      <section className="ax-kpis">
        <KpiCard label="Equipos en línea" value="142 / 148" delta="↑ 2 vs ayer" deltaKind="up" />
        <KpiCard label="Órdenes abiertas"  value="11"        delta="3 críticas" deltaKind="warn" />
        <KpiCard label="Eficiencia media"  value="91.4%"     delta="↑ 0.6 pp" deltaKind="up" />
        <KpiCard label="Consumo eléctrico" value="2,318 kWh" delta="↓ 4.2% vs semana" deltaKind="down" />
      </section>

      <section className="ax-card">
        <header className="ax-card__head">
          <div>
            <span className="eyebrow">Carga térmica · 24 h</span>
            <h3 className="ax-card__title">Cooling vs heating mode</h3>
          </div>
          <div className="ax-legend">
            <span><i style={{ background: 'var(--brand-primary)' }} /> Cooling</span>
            <span><i style={{ background: 'var(--warning)' }} /> Heating</span>
          </div>
        </header>
        <LoadChart />
      </section>

      <EquipmentCard unit={unit} />
    </main>
  );
}

window.DashboardArea = DashboardArea;
window.KpiCard = KpiCard;