function DashboardPanel({ onSchedule }) {
  const { Card, Metric, Badge, Button } = window.NeoGasDesignSystem_054cde;

  const weeks = [62, 70, 58, 81, 74, 90, 86, 96, 88, 102, 110, 126];
  const max = Math.max(...weeks);

  const schedule = [
    { day: 'Lun', date: '16 jun', status: 'Completada', tone: 'success', kg: '210 kg' },
    { day: 'Mié', date: '18 jun', status: 'Programada', tone: 'sage', kg: '~ 240 kg' },
    { day: 'Vie', date: '20 jun', status: 'Programada', tone: 'sage', kg: '~ 230 kg' },
    { day: 'Sáb', date: '21 jun', status: 'En pausa', tone: 'warning', kg: '—' },
  ];

  return (
    <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 22 }}>
      {/* Metric row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
        <Card tone="moss"><Metric value="12.6" unit="kW" label="energía devuelta hoy" tone="dark" /></Card>
        <Card tone="cream"><Metric value="440" unit="t" label="residuo desviado · año" trend="+8%" /></Card>
        <Card tone="cream"><Metric value="−38" unit="%" label="costo energético" trend="−38%" /></Card>
        <Card tone="sage"><Metric value="100" unit="%" label="renovable" /></Card>
      </div>

      {/* Chart + schedule */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 18 }}>
        <Card tone="cream" elevated>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, color: 'var(--forest-moss)', margin: '6px 0 0' }}>Tu círculo, creciendo</h3>
            </div>
            <Badge tone="clay">kWh / semana</Badge>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 150, marginTop: 22 }}>
            {weeks.map((v, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{
                  width: '100%', height: `${(v / max) * 100}%`,
                  background: i === weeks.length - 1 ? 'var(--clay)' : 'var(--sage)',
                  borderRadius: 'var(--radius-sm)',
                }} />
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--text-muted)' }}>{i + 1}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, height: 6, borderRadius: 'var(--radius-pill)', background: 'linear-gradient(90deg, var(--clay) 0%, var(--sage) 50%, var(--forest-moss) 100%)' }} />
        </Card>

        <Card tone="cream" elevated>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 20, color: 'var(--forest-moss)', margin: 0 }}>Recolección</h3>
            <Button variant="ghost" size="sm" onClick={onSchedule}>Editar</Button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {schedule.map((s) => (
              <div key={s.date} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                background: 'var(--surface-sunken)', borderRadius: 'var(--radius-md)', padding: '11px 14px',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 36 }}>
                    <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, color: 'var(--forest-moss)' }}>{s.day}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)' }}>{s.date.split(' ')[0]}</span>
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-body)' }}>{s.kg}</span>
                </div>
                <Badge tone={s.tone}>{s.status}</Badge>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}