/* global React, SaoriIcons, SaoriShell */
const IcR = SaoriIcons;

/* ============================================================
   Small SVG chart primitives
   ============================================================ */
function AreaLineChart({ data, w = 720, h = 220, color = '#6E56F7', color2 = '#C2B0FB' }) {
  // data: array of arrays of numbers, one per series. First series highlighted.
  const series = data;
  const all = series.flat();
  const max = Math.max(...all) * 1.15;
  const padding = { l: 38, r: 12, t: 16, b: 28 };
  const innerW = w - padding.l - padding.r;
  const innerH = h - padding.t - padding.b;
  const n = series[0].length;

  const x = (i) => padding.l + (i / (n - 1)) * innerW;
  const y = (v) => padding.t + (1 - v / max) * innerH;

  const linePath = (s) => s.map((v, i) => `${i === 0 ? 'M' : 'L'} ${x(i)} ${y(v)}`).join(' ');
  const areaPath = (s) => linePath(s) + ` L ${x(n - 1)} ${padding.t + innerH} L ${x(0)} ${padding.t + innerH} Z`;

  const yTicks = [0, max * 0.25, max * 0.5, max * 0.75, max];
  const days = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
  const labels = Array.from({ length: n }, (_, i) => i % Math.ceil(n / 7) === 0 ? days[Math.floor(i / Math.ceil(n / 7)) % 7] : null);

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.25"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {/* gridlines */}
      {yTicks.map((t, i) => (
        <g key={i}>
          <line x1={padding.l} x2={w - padding.r} y1={y(t)} y2={y(t)} stroke="#ECECF3" strokeWidth="1"/>
          <text x={padding.l - 8} y={y(t) + 3} fontSize="10" fill="#94A3B8" textAnchor="end">{Math.round(t)}</text>
        </g>
      ))}
      {/* secondary series (comparison) */}
      {series[1] && <path d={linePath(series[1])} fill="none" stroke={color2} strokeWidth="1.8" strokeDasharray="3 4" />}
      {/* primary */}
      <path d={areaPath(series[0])} fill="url(#areaGrad)" />
      <path d={linePath(series[0])} fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
      {series[0].map((v, i) => (
        <circle key={i} cx={x(i)} cy={y(v)} r={i === series[0].length - 1 ? 4 : 0} fill={color} stroke="#fff" strokeWidth="2"/>
      ))}
      {/* x labels */}
      {labels.map((l, i) => l ? (
        <text key={i} x={x(i)} y={h - 8} fontSize="10.5" fill="#94A3B8" textAnchor="middle">{l}</text>
      ) : null)}
    </svg>
  );
}

function BarChart({ data, w = 320, h = 200 }) {
  // data: [{label, value, color}]
  const max = Math.max(...data.map(d => d.value)) * 1.15;
  const padding = { l: 28, r: 10, t: 10, b: 24 };
  const innerW = w - padding.l - padding.r;
  const innerH = h - padding.t - padding.b;
  const bw = innerW / data.length;
  const y = (v) => padding.t + (1 - v / max) * innerH;

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h}>
      {[0, 0.5, 1].map((p, i) => (
        <line key={i} x1={padding.l} x2={w - padding.r} y1={padding.t + p * innerH} y2={padding.t + p * innerH} stroke="#ECECF3"/>
      ))}
      {data.map((d, i) => {
        const bx = padding.l + i * bw + bw * 0.18;
        const bH = innerH - (y(d.value) - padding.t);
        return (
          <g key={i}>
            <rect x={bx} y={y(d.value)} width={bw * 0.64} height={bH} rx="4" fill={d.color || '#6E56F7'}/>
            <text x={bx + bw * 0.32} y={h - 8} fontSize="10.5" fill="#6B7280" textAnchor="middle">{d.label}</text>
          </g>
        );
      })}
    </svg>
  );
}

function Donut({ segments, size = 160 }) {
  const total = segments.reduce((a, s) => a + s.value, 0);
  const r = size / 2 - 12;
  const cx = size / 2, cy = size / 2;
  let acc = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="#F0F0F8" strokeWidth="18"/>
      {segments.map((s, i) => {
        const start = (acc / total) * 2 * Math.PI - Math.PI / 2;
        acc += s.value;
        const end = (acc / total) * 2 * Math.PI - Math.PI / 2;
        const large = end - start > Math.PI ? 1 : 0;
        const x1 = cx + r * Math.cos(start);
        const y1 = cy + r * Math.sin(start);
        const x2 = cx + r * Math.cos(end);
        const y2 = cy + r * Math.sin(end);
        return (
          <path key={i}
            d={`M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`}
            stroke={s.color} strokeWidth="18" fill="none" strokeLinecap="butt"
          />
        );
      })}
      <text x={cx} y={cy - 4} fontSize="22" fontWeight="600" fill="#0F172A" textAnchor="middle" letterSpacing="-0.02em">{total}</text>
      <text x={cx} y={cy + 14} fontSize="10.5" fill="#6B7280" textAnchor="middle">Total</text>
    </svg>
  );
}

/* ============================================================
   PANTALLA — Reportes
   ============================================================ */
function ScreenReportes() {
  const [range, setRange] = React.useState('7d');

  // Synthetic but consistent datasets
  const convData = [
    [22, 28, 26, 34, 31, 40, 38, 44, 42, 48, 52, 49, 56, 58],
    [18, 22, 20, 26, 24, 28, 30, 32, 34, 36, 35, 38, 39, 42],
  ];

  const channels = [
    { label: 'WhatsApp', value: 312, color: '#22C55E' },
    { label: 'Messenger', value: 148, color: '#3B82F6' },
    { label: 'Instagram', value: 96, color: '#EC4899' },
    { label: 'Email', value: 74, color: '#64748B' },
    { label: 'Web', value: 38, color: '#7C5CF2' },
  ];

  const funnel = [
    { label: 'Conversaciones',          value: 668, pct: 100, color: '#C2B0FB' },
    { label: 'Leads cualificados',      value: 284, pct: 42,  color: '#9C82F7' },
    { label: 'Cotizaciones enviadas',   value: 196, pct: 29,  color: '#7C5CF2' },
    { label: 'Reservas confirmadas',    value: 92,  pct: 14,  color: '#6E56F7' },
    { label: 'Reservas pagadas',        value: 78,  pct: 12,  color: '#5B45D6' },
  ];

  const agents = [
    { name: 'Agente IA',     role: 'Agente IA',    handled: 412, resp: '12 s', csat: 4.7, color: '#7C5CF2' },
    { name: 'Marta López',  role: 'Recepción',    handled: 168, resp: '3 min', csat: 4.8, color: '#F472B6' },
    { name: 'Carlos R.',    role: 'Reservas',     handled: 142, resp: '4 min', csat: 4.6, color: '#22D3EE' },
    { name: 'Andrea Solís', role: 'Eventos',      handled: 96,  resp: '6 min', csat: 4.5, color: '#FB923C' },
    { name: 'Luis Méndez',  role: 'Recepción',    handled: 81,  resp: '5 min', csat: 4.4, color: '#34D399' },
  ];

  const topics = [
    { label: 'Reservas habitación', value: 312, color: '#7C5CF2' },
    { label: 'Tarifas y precios',   value: 184, color: '#9C82F7' },
    { label: 'Servicios hotel',     value: 96,  color: '#22C55E' },
    { label: 'Virtualia Restaurant',  value: 62,  color: '#EA7A2C' },
    { label: 'Eventos y bodas',     value: 38,  color: '#EC4899' },
    { label: 'Quejas / soporte',    value: 14,  color: '#DC2626' },
  ];

  // Heatmap data (7 days × 24 hours)
  const heatRng = (d, h) => {
    const v = Math.sin((h - 6) / 4) * 0.5 + 0.5;
    const dayBoost = d === 5 || d === 6 ? 1.4 : 1;
    const dip = (h < 6 || h > 23) ? 0.1 : 1;
    return Math.max(0, Math.min(1, v * dayBoost * dip + Math.random() * 0.15));
  };
  const days = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];

  return (
    <div className="page fade-in">
      <div className="page-header__row">
        <div className="page-header">
          <h1>Reportes</h1>
          <p>Métricas comerciales y operativas · Hotel Demo · datos ficticios</p>
        </div>
        <div className="page-header__actions">
          <div className="report-tabs">
            {[['24h','24 h'], ['7d','7 días'], ['30d','30 días'], ['90d','90 días']].map(([k, l]) => (
              <div key={k} className={'report-tab' + (range === k ? ' report-tab--active' : '')} onClick={() => setRange(k)}>{l}</div>
            ))}
          </div>
          <button type="button" className="btn btn--ghost"><IcR.Calendar size={14}/> Rango personalizado</button>
          <button type="button" className="btn btn--secondary"><IcR.ArrowDown size={14}/> Exportar</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="kpis" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi">
          <div className="kpi__top"><div className="kpi__label">Conversaciones totales</div><div className="kpi__icon"><IcR.MessageSquare size={16}/></div></div>
          <div className="kpi__value">668</div>
          <div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcR.ArrowUp size={12}/>22% <span className="kpi__sub">vs período anterior</span></div></div>
        </div>
        <div className="kpi">
          <div className="kpi__top"><div className="kpi__label">Tiempo de respuesta IA</div><div className="kpi__icon" style={{ background: 'var(--mint-50)', color: 'var(--mint-600)' }}><IcR.Clock size={16}/></div></div>
          <div className="kpi__value">12 s</div>
          <div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcR.ArrowDown size={12}/>-4 s <span className="kpi__sub">más rápido</span></div></div>
        </div>
        <div className="kpi">
          <div className="kpi__top"><div className="kpi__label">Tasa de conversión</div><div className="kpi__icon" style={{ background: 'var(--sky-50)', color: 'var(--sky-600)' }}><IcR.Sparkles size={16}/></div></div>
          <div className="kpi__value">11.7%</div>
          <div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcR.ArrowUp size={12}/>1.4 pts <span className="kpi__sub">vs anterior</span></div></div>
        </div>
        <div className="kpi">
          <div className="kpi__top"><div className="kpi__label">CSAT promedio</div><div className="kpi__icon" style={{ background: 'var(--amber-50)', color: 'var(--amber-600)' }}><IcR.Star size={16}/></div></div>
          <div className="kpi__value">4.7<span style={{ fontSize: 18, color: 'var(--text-muted)' }}> / 5</span></div>
          <div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcR.ArrowUp size={12}/>0.2 <span className="kpi__sub">vs anterior</span></div></div>
        </div>
      </div>

      {/* Volume + Channels */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
        <div className="chart-card">
          <div className="chart-card__head">
            <div>
              <div className="chart-card__title">Volumen de conversaciones</div>
              <div className="chart-card__sub">Últimos 14 días · vs período anterior</div>
            </div>
            <div className="chart-legend">
              <div className="chart-legend__item"><span className="chart-legend__swatch" style={{ background: '#6E56F7' }}/>Este período</div>
              <div className="chart-legend__item"><span className="chart-legend__swatch" style={{ background: '#C2B0FB' }}/>Anterior</div>
            </div>
          </div>
          <AreaLineChart data={convData} h={240} />
        </div>

        <div className="chart-card">
          <div className="chart-card__head">
            <div>
              <div className="chart-card__title">Por canal</div>
              <div className="chart-card__sub">Distribución total</div>
            </div>
          </div>
          <div className="donut-wrap">
            <Donut segments={channels} size={160}/>
            <div className="donut-legend">
              {channels.map(c => {
                const total = channels.reduce((a, s) => a + s.value, 0);
                const pct = Math.round((c.value / total) * 100);
                return (
                  <div key={c.label} className="donut-legend__row">
                    <span style={{ width: 10, height: 10, borderRadius: 3, background: c.color }}/>
                    <span className="text-md">{c.label}</span>
                    <span className="fw-600">{pct}%</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Funnel + Topics */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
        <div className="chart-card">
          <div className="chart-card__head">
            <div>
              <div className="chart-card__title">Embudo comercial</div>
              <div className="chart-card__sub">De conversación a reserva pagada</div>
            </div>
            <span className="badge badge--violet">11.7% conversión global</span>
          </div>
          <div>
            {funnel.map((f, i) => (
              <div key={f.label} className="funnel-step">
                <div className="numbered__num">{i + 1}</div>
                <div className="col" style={{ gap: 6 }}>
                  <div className="row row--between">
                    <span className="text-md fw-500">{f.label}</span>
                    <span className="text-sm muted">{f.pct}% del total</span>
                  </div>
                  <div className="funnel-bar">
                    <div className="funnel-bar__fill" style={{ width: f.pct + '%', background: `linear-gradient(90deg, ${f.color}, ${f.color}AA)` }}/>
                  </div>
                </div>
                <span className="text-md fw-600" style={{ minWidth: 56, textAlign: 'right' }}>{f.value}</span>
                {i > 0 && (
                  <span className="pill pill--violet" style={{ minWidth: 64, justifyContent: 'center' }}>
                    {Math.round((funnel[i].value / funnel[i-1].value) * 100)}%
                  </span>
                )}
                {i === 0 && <span className="pill" style={{ minWidth: 64, justifyContent: 'center' }}>—</span>}
              </div>
            ))}
          </div>
        </div>

        <div className="chart-card">
          <div className="chart-card__head">
            <div>
              <div className="chart-card__title">Temas detectados por IA</div>
              <div className="chart-card__sub">Intención principal de cada conversación</div>
            </div>
          </div>
          <div className="col gap-12">
            {topics.map(t => {
              const max = topics[0].value;
              const pct = (t.value / max) * 100;
              return (
                <div key={t.label} className="col gap-6">
                  <div className="row row--between">
                    <span className="text-md fw-500">{t.label}</span>
                    <span className="text-sm muted">{t.value}</span>
                  </div>
                  <div className="progress-track">
                    <div className="progress-fill" style={{ width: pct + '%', background: t.color }}/>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Agent leaderboard + Campaigns */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div className="chart-card">
          <div className="chart-card__head">
            <div>
              <div className="chart-card__title">Desempeño por agente</div>
              <div className="chart-card__sub">Volumen, tiempo de respuesta y CSAT</div>
            </div>
            <button type="button" className="btn btn--ghost btn--sm">Ver todos</button>
          </div>
          <div>
            {agents.map((a, i) => (
              <div key={a.name} className="leaderboard-row">
                <div className={'leaderboard-row__rank leaderboard-row__rank--' + (i + 1)}>#{i + 1}</div>
                <div className="avatar" style={{ background: a.color, width: 36, height: 36 }}>
                  {a.name.split(' ').map(p => p[0]).join('').slice(0, 2)}
                </div>
                <div className="col">
                  <span className="fw-600 text-md">{a.name}</span>
                  <span className="muted text-sm">{a.role} · {a.handled} conversaciones</span>
                </div>
                <div className="col" style={{ alignItems: 'flex-end', minWidth: 70 }}>
                  <span className="text-md fw-500">{a.resp}</span>
                  <span className="muted text-sm">respuesta</span>
                </div>
                <span className="badge badge--amber" style={{ minWidth: 64, justifyContent: 'center' }}>
                  <IcR.Star size={11}/> {a.csat}
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className="chart-card">
          <div className="chart-card__head">
            <div>
              <div className="chart-card__title">Campañas con mejor rendimiento</div>
              <div className="chart-card__sub">CTR y conversión en últimos 30 días</div>
            </div>
          </div>
          <div className="col gap-14">
            {[
              { name: 'Promo temporada baja',     ctr: 24.6, conv: 9.1, leads: 142, tone: 'peach' },
              { name: 'Clientes frecuentes VIP',  ctr: 31.2, conv: 14.8, leads: 86,  tone: 'amber' },
              { name: 'Fin de semana romántico',  ctr: 19.4, conv: 7.2,  leads: 64,  tone: 'rose' },
              { name: 'Post-estancia · reseña',   ctr: 42.8, conv: 28.5, leads: 38,  tone: 'sky' },
            ].map(c => (
              <div key={c.name} style={{ padding: 14, border: '1px solid var(--border)', borderRadius: 12, background: 'var(--surface)' }}>
                <div className="row row--between" style={{ marginBottom: 10 }}>
                  <div className="row gap-10">
                    <div className={'icon-chip icon-chip--' + c.tone}><IcR.Megaphone size={14}/></div>
                    <span className="fw-600 text-md">{c.name}</span>
                  </div>
                  <span className="muted text-sm">{c.leads} leads</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <div className="col gap-4">
                    <span className="muted text-sm">CTR</span>
                    <div className="progress-track"><div className="progress-fill" style={{ width: (c.ctr / 50 * 100) + '%', background: 'var(--violet-500)' }}/></div>
                    <span className="text-sm fw-600">{c.ctr}%</span>
                  </div>
                  <div className="col gap-4">
                    <span className="muted text-sm">Conversión</span>
                    <div className="progress-track"><div className="progress-fill" style={{ width: (c.conv / 30 * 100) + '%', background: '#22C55E' }}/></div>
                    <span className="text-sm fw-600">{c.conv}%</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Heatmap */}
      <div className="chart-card">
        <div className="chart-card__head">
          <div>
            <div className="chart-card__title">Actividad por hora y día</div>
            <div className="chart-card__sub">Volumen de conversaciones — útil para programar campañas y staffing</div>
          </div>
          <div className="chart-legend">
            <span className="text-sm muted">Menos</span>
            {[0.1, 0.3, 0.5, 0.7, 0.9].map(o => (
              <span key={o} style={{ width: 14, height: 14, borderRadius: 3, background: `rgba(110,86,247,${o})` }}/>
            ))}
            <span className="text-sm muted">Más</span>
          </div>
        </div>
        <div className="heatmap">
          <div />
          {Array.from({ length: 24 }, (_, h) => (
            <div key={h} className="heatmap__hour">{h % 3 === 0 ? h : ''}</div>
          ))}
          {days.map((d, di) => (
            <React.Fragment key={d}>
              <div className="heatmap__day">{d}</div>
              {Array.from({ length: 24 }, (_, h) => {
                const v = heatRng(di, h);
                return <div key={h} className="heatmap__cell" style={{ background: v < 0.04 ? '#F4F4F8' : `rgba(110,86,247,${0.1 + v * 0.8})` }}/>;
              })}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* AI insights */}
      <div className="chart-card">
        <div className="chart-card__head">
          <div className="row gap-10">
            <div className="icon-chip icon-chip--violet icon-chip--lg"><IcR.Sparkles size={17}/></div>
            <div>
              <div className="chart-card__title">Insights de IA</div>
              <div className="chart-card__sub">Patrones detectados automáticamente esta semana</div>
            </div>
          </div>
          <span className="badge badge--violet">3 nuevos</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
            { icon: IcR.ArrowUp,    tone: 'mint',  t: 'WhatsApp creció 22% en consultas de fin de semana', d: 'Sugerencia: activar respuestas rápidas para tarifas.' },
            { icon: IcR.Clock,      tone: 'peach', t: 'Pico de mensajes entre 18:00 y 21:00', d: 'Recomendado: reforzar staffing humano en ese horario.' },
            { icon: IcR.Heart,      tone: 'rose',  t: 'Post-estancia genera 28% conversión a reseñas', d: 'Activa esta campaña por defecto para nuevas reservas.' },
          ].map((insight, i) => (
            <div key={i} style={{ padding: 14, background: 'var(--surface-2)', borderRadius: 12, border: '1px solid var(--border)' }}>
              <div className={'icon-chip icon-chip--lg icon-chip--' + insight.tone} style={{ marginBottom: 10 }}><insight.icon size={16}/></div>
              <div className="fw-600 text-md" style={{ marginBottom: 6 }}>{insight.t}</div>
              <div className="muted text-sm" style={{ lineHeight: 1.5 }}>{insight.d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.ScreenReportes = ScreenReportes;
window.SaoriCharts = { AreaLineChart, BarChart, Donut };