// Reporting — Operational cockpit · bottleneck detection (Step 5)

const Reporting = ({ onNav }) => {
  const D = window.BW_DATA;
  const [range, setRange] = useState('30d');

  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 20, gap: 24 }}>
        <div>
          <div className="brand-eyebrow" style={{ marginBottom: 10 }}>Operaciones · Insights</div>
          <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 600, fontSize: 28, margin: 0, letterSpacing:'-0.02em', color:'var(--brand-navy)', lineHeight: 1.1 }}>Reporting</h1>
          <div className="accent-line" style={{ marginTop: 14 }}/>
          <div style={{ fontSize: 13, color:'var(--color-text-secondary)', marginTop: 14 }}>
            Detección automática de cuellos de botella y análisis de rendimiento operativo.
          </div>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <div className="seg">
            {[['7d','7 días'],['30d','30 días'],['3m','3 meses'],['custom','Personalizado']].map(([id,l])=>(
              <button key={id} className={range===id?'active':''} onClick={()=>setRange(id)}>{l}</button>
            ))}
          </div>
          <button className="btn"><I.Download size={14}/> Exportar PDF</button>
          <button className="btn"><I.Send size={14}/> Compartir</button>
        </div>
      </div>

      {/* KPI row */}
      <div className="kpis" style={{ marginBottom: 16 }}>
        {[
          { label:'Solicitudes resueltas',   value:'1.412',   delta:'+18%',    dir:'up',   sub:'vs. período anterior' },
          { label:'Tiempo medio resolución', value:'2h 14m',  delta:'−12 min', dir:'down', sub:'desde apertura a cierre' },
          { label:'SLA cumplido',            value:'87%',     delta:'+3.4pp',  dir:'up',   sub:'visitas dentro de ventana' },
          { label:'Satisfacción media',      value:'4.6',     delta:'+0.2',    dir:'up',   sub:'estrellas (n=142)' },
        ].map((k,i)=>(
          <div className="kpi" key={i}>
            <div className="label">{k.label}</div>
            <div className="value">{k.value}</div>
            <div className={'delta ' + k.dir}>
              {k.dir==='up' ? <I.ArrowUp size={12}/> : <I.ArrowDown size={12}/>}
              {k.delta} <span style={{ color:'var(--color-text-muted)', marginLeft: 2 }}>· {k.sub}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Bottleneck detection panel — centerpiece */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head">
          <div>
            <div className="card-title" style={{ display:'flex', alignItems:'center', gap: 8 }}>
              <I.Sparkle size={15} style={{ color:'var(--color-accent)' }}/> Cuellos de botella detectados
            </div>
            <div className="card-sub">5 incidencias operativas requieren atención · análisis IA actualizado hace 12 min</div>
          </div>
          <button className="btn btn-sm"><I.Refresh size={13}/> Re-analizar</button>
        </div>
        <div>
          {D.INSIGHTS.map((ins, i) => <BottleneckRow key={ins.id} ins={ins} first={i===0} onNav={onNav}/>)}
        </div>
      </div>

      {/* Funnel + Avg time by stage */}
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 16, marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <div><div className="card-title">Embudo · Solicitud → Resolución</div><div className="card-sub">Drop-off por etapa · últimos 30 días</div></div>
          </div>
          <div className="card-body">
            <Funnel/>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div><div className="card-title">Tiempo medio por etapa</div><div className="card-sub">Horas · vs. SLA objetivo</div></div>
          </div>
          <div className="card-body">
            <StageTimes/>
          </div>
        </div>
      </div>

      {/* Heat-map + Top technicians */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16, marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <div><div className="card-title">Volumen por categoría × día</div><div className="card-sub">Tickets recibidos · última semana</div></div>
          </div>
          <div className="card-body">
            <HeatMap/>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div><div className="card-title">Top técnicos · rendimiento</div><div className="card-sub">Por completados, rating y SLA</div></div>
            <button className="btn btn-sm btn-ghost" onClick={()=>onNav && onNav('technicians')}>Ver todos →</button>
          </div>
          <div style={{ overflow:'hidden' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Técnico</th>
                  <th style={{ width: 90 }}>Compl.</th>
                  <th style={{ width: 70 }}>Rating</th>
                  <th style={{ width: 70 }}>SLA</th>
                  <th style={{ width: 70 }}>Decline</th>
                </tr>
              </thead>
              <tbody>
                {D.TECHNICIANS.slice().sort((a,b)=>b.completed-a.completed).slice(0,5).map(t => (
                  <tr key={t.id}>
                    <td>
                      <div style={{ fontWeight: 500 }}>{t.contact}</div>
                      <div style={{ fontSize: 11.5, color:'var(--color-text-muted)' }}>{t.company}</div>
                    </td>
                    <td><span className="num">{t.completed}</span></td>
                    <td>
                      <span style={{ display:'inline-flex', alignItems:'center', gap: 3, fontFamily:'var(--font-mono)', fontWeight: 600, fontSize: 13 }}>
                        <I.Star size={11} style={{ color:'var(--color-warning)', fill:'var(--color-warning)' }}/>{t.rating}
                      </span>
                    </td>
                    <td><span className="num">{t.slaMin}m</span></td>
                    <td><span className="num" style={{ color: t.completed > 100 ? 'var(--color-success)' : 'var(--color-text-secondary)' }}>{Math.round((1 - t.rating/5) * 18)}%</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Categoría analysis */}
      <div className="card">
        <div className="card-head">
          <div><div className="card-title">Análisis por categoría</div><div className="card-sub">Volumen, tiempo, resolución IA y satisfacción</div></div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 32 }}></th>
              <th>Categoría</th>
              <th style={{ width: 90 }}>Volumen</th>
              <th style={{ width: 130 }}>Tiempo medio</th>
              <th style={{ width: 200 }}>Tasa resolución IA</th>
              <th style={{ width: 110 }}>Satisfacción</th>
              <th style={{ width: 80 }}>Tendencia</th>
            </tr>
          </thead>
          <tbody>
            {CATEGORY_ROWS.map(c => {
              const cat = D.PM_CATEGORIES[c.cat] || { color:'var(--color-text-muted)', bg:'var(--color-surface-2)', icon:'Sparkle' };
              const CatIc = I[cat.icon] || I.Sparkle;
              return (
                <tr key={c.cat}>
                  <td>
                    <span style={{ width: 26, height: 26, borderRadius: 6, background: cat.bg, color: cat.color, display:'inline-grid', placeItems:'center' }}>
                      <CatIc size={13}/>
                    </span>
                  </td>
                  <td><span style={{ fontWeight: 500 }}>{c.cat}</span></td>
                  <td><span className="num">{c.volume}</span></td>
                  <td><span className="num">{c.time}</span></td>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                      <div style={{ flex: 1, height: 6, background:'var(--color-border)', borderRadius: 3, overflow:'hidden' }}>
                        <div style={{ width:`${c.ai}%`, height:'100%', background: c.ai >= 70 ? 'var(--color-success)' : c.ai >= 40 ? 'var(--color-warning)' : 'var(--color-danger)' }}/>
                      </div>
                      <span className="num" style={{ minWidth: 36, textAlign:'right', fontWeight: 600 }}>{c.ai}%</span>
                    </div>
                  </td>
                  <td>
                    <div style={{ display:'inline-flex', alignItems:'center', gap: 4 }}>
                      <I.Star size={11} style={{ color:'var(--color-warning)', fill:'var(--color-warning)' }}/>
                      <span className="num" style={{ fontWeight: 600 }}>{c.sat}</span>
                    </div>
                  </td>
                  <td>
                    <span style={{
                      fontSize: 11.5, fontWeight: 600,
                      color: c.trend.startsWith('−') ? 'var(--color-success)' : c.trend.startsWith('+') && c.cat!=='Plagas' && c.cat!=='Carpintería' ? 'var(--color-success)' : 'var(--color-danger)',
                    }}>
                      {c.trend.startsWith('−') ? <I.ArrowDown size={10} style={{ verticalAlign:'middle' }}/> : <I.ArrowUp size={10} style={{ verticalAlign:'middle' }}/>}
                      {c.trend}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ─────────── Bottleneck row ───────────

const BottleneckRow = ({ ins, first, onNav }) => {
  const Ic = I[ins.icon] || I.AlertTriangle;
  const tone = ins.sev === 'high'
    ? { bg:'var(--color-danger-light)',  fg:'var(--color-danger)',  label:'Alto'  }
    : ins.sev === 'medium'
    ? { bg:'var(--color-warning-light)', fg:'var(--color-warning)', label:'Medio' }
    : { bg:'var(--color-surface-2)',     fg:'var(--color-text-secondary)', label:'Bajo' };
  return (
    <div style={{
      display:'flex', alignItems:'flex-start', gap: 14,
      padding:'14px 20px',
      borderTop: first ? 'none' : '1px solid var(--color-border)',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8, flex:'0 0 36px',
        background: tone.bg, color: tone.fg,
        display:'grid', placeItems:'center',
      }}>
        <Ic size={16}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 4 }}>
          <span style={{
            fontSize: 9.5, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase',
            padding:'2px 6px', borderRadius: 4,
            background: tone.bg, color: tone.fg,
          }}>{tone.label}</span>
          <span style={{ fontFamily:'var(--font-mono)', fontSize: 11.5, color: tone.fg, fontWeight: 600 }}>{ins.metric}</span>
        </div>
        <div style={{ fontSize: 14, fontWeight: 600, color:'var(--color-text-primary)', marginBottom: 3 }}>{ins.title}</div>
        <div style={{ fontSize: 12.5, color:'var(--color-text-secondary)', lineHeight: 1.5 }}>{ins.desc}</div>
        <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
          {ins.actions.map((a, i) => (
            <button key={i} className={i===0 ? 'btn btn-primary btn-sm' : 'btn btn-sm'} onClick={() => a.go && onNav && onNav(a.go)}>
              {a.label} <I.ArrowR size={12}/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─────────── Funnel ───────────

const FUNNEL_STAGES = [
  { l:'Solicitud recibida',  v: 1842, c:'var(--color-accent)'         },
  { l:'Confirmada',          v: 1721, c:'var(--color-outbound)'       },
  { l:'Técnico asignado',    v: 1568, c:'#0891B2'                     },
  { l:'Visita realizada',    v: 1481, c:'#16A34A'                     },
  { l:'Resuelto + survey',   v: 1412, c:'var(--color-success)'        },
];

const Funnel = () => {
  const top = FUNNEL_STAGES[0].v;
  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
      {FUNNEL_STAGES.map((s, i) => {
        const pct = (s.v / top) * 100;
        const prev = i > 0 ? FUNNEL_STAGES[i-1].v : null;
        const drop = prev != null ? Math.round((1 - s.v/prev) * 1000) / 10 : null;
        return (
          <div key={i}>
            <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 4, fontSize: 12.5 }}>
              <span style={{ color:'var(--color-text-primary)', fontWeight: 500 }}>{s.l}</span>
              <span style={{ display:'flex', alignItems:'center', gap: 8 }}>
                <span className="num" style={{ fontWeight: 600 }}>{s.v.toLocaleString('es')}</span>
                {drop != null && drop > 0 && (
                  <span style={{ fontSize: 11, color:'var(--color-danger)' }}>−{drop}%</span>
                )}
              </span>
            </div>
            <div style={{ height: 22, borderRadius: 6, background:'var(--color-surface-2)', overflow:'hidden' }}>
              <div style={{ width:`${pct}%`, height:'100%', background: s.c, opacity: 0.85 + (i*0.03) }}/>
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ─────────── Stage times (horizontal bars vs SLA) ───────────

const STAGE_TIMES = [
  { l:'Abierto → Programado',     hrs: 0.8, sla: 1.0 },
  { l:'Programado → En curso',    hrs: 14.2, sla: 24  },
  { l:'En curso → Resuelto',      hrs: 1.4, sla: 2   },
  { l:'Resuelto → Survey enviada',hrs: 23.6, sla: 24  },
];

const StageTimes = () => {
  const max = Math.max(...STAGE_TIMES.map(s => Math.max(s.hrs, s.sla))) * 1.1;
  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 14 }}>
      {STAGE_TIMES.map((s, i) => {
        const pct = (s.hrs / max) * 100;
        const slaPct = (s.sla / max) * 100;
        const over = s.hrs > s.sla;
        return (
          <div key={i}>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 4 }}>
              <span style={{ color:'var(--color-text-primary)' }}>{s.l}</span>
              <span className="num" style={{ fontWeight: 600, color: over ? 'var(--color-danger)' : 'var(--color-success)' }}>
                {s.hrs}h <span style={{ fontWeight: 400, color:'var(--color-text-muted)' }}>/ SLA {s.sla}h</span>
              </span>
            </div>
            <div style={{ position:'relative', height: 10, background:'var(--color-surface-2)', borderRadius: 5, overflow:'hidden' }}>
              <div style={{ width:`${pct}%`, height:'100%', background: over ? 'var(--color-warning)' : 'var(--color-success)' }}/>
              <div style={{ position:'absolute', left:`${slaPct}%`, top: 0, bottom: 0, width: 2, background: 'var(--color-text-primary)' }} title="SLA"/>
            </div>
          </div>
        );
      })}
      <div style={{ display:'flex', gap: 16, fontSize: 11, color:'var(--color-text-muted)', marginTop: 4 }}>
        <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}><span style={{ width: 10, height: 10, background:'var(--color-success)', borderRadius: 2 }}/>Dentro SLA</span>
        <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}><span style={{ width: 10, height: 10, background:'var(--color-warning)', borderRadius: 2 }}/>Sobre SLA</span>
        <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}><span style={{ width: 2, height: 12, background:'var(--color-text-primary)' }}/>Objetivo SLA</span>
      </div>
    </div>
  );
};

// ─────────── Heat-map ───────────

const HEAT_CATS = ['Fontanería','HVAC','Electrodoméstico','Seguridad','Carpintería'];
const HEAT_DAYS = ['L','M','X','J','V','S','D'];
const HEAT_DATA = [
  [4, 6, 3, 8, 12, 7, 2],   // Fontanería
  [9, 8, 11, 14, 10, 6, 4], // HVAC (ola de calor)
  [3, 4, 2, 5, 7, 3, 1],    // Electrodoméstico
  [1, 2, 1, 3, 2, 1, 0],    // Seguridad
  [2, 1, 3, 2, 4, 2, 1],    // Carpintería
];

const HeatMap = () => {
  const max = Math.max(...HEAT_DATA.flat());
  return (
    <div>
      <div style={{ display:'grid', gridTemplateColumns:'120px repeat(7, 1fr)', gap: 4 }}>
        <div/>
        {HEAT_DAYS.map(d => (
          <div key={d} style={{ fontSize: 11, fontWeight: 600, color:'var(--color-text-muted)', textAlign:'center', textTransform:'uppercase', letterSpacing:'0.06em' }}>{d}</div>
        ))}
        {HEAT_CATS.map((c, i) => (
          <React.Fragment key={c}>
            <div style={{ fontSize: 12, color:'var(--color-text-primary)', display:'flex', alignItems:'center' }}>{c}</div>
            {HEAT_DATA[i].map((v, j) => {
              const intensity = v / max;
              return (
                <div key={j} title={`${c} · ${HEAT_DAYS[j]} · ${v} tickets`} style={{
                  height: 32, borderRadius: 4,
                  background: intensity === 0
                    ? 'var(--color-surface-2)'
                    : `rgba(37, 99, 235, ${0.12 + intensity * 0.72})`,
                  color: intensity > 0.55 ? 'white' : 'var(--color-text-primary)',
                  display:'grid', placeItems:'center',
                  fontSize: 11, fontWeight: 600, fontFamily:'var(--font-mono)',
                }}>{v || ''}</div>
              );
            })}
          </React.Fragment>
        ))}
      </div>
      <div style={{ display:'flex', alignItems:'center', gap: 6, marginTop: 14, fontSize: 11, color:'var(--color-text-muted)' }}>
        Menos
        {[0.12, 0.3, 0.5, 0.7, 0.84].map((i, k) => (
          <span key={k} style={{ width: 16, height: 12, borderRadius: 2, background:`rgba(37, 99, 235, ${i})` }}/>
        ))}
        Más
        <span style={{ marginLeft:'auto', fontSize: 11, color:'var(--color-text-muted)' }}>Pico: HVAC · jueves 14 tickets</span>
      </div>
    </div>
  );
};

// ─────────── Category rows ───────────

const CATEGORY_ROWS = [
  { cat:'Fontanería',       volume: 482, time:'1h 48m', ai: 72, sat: 4.7, trend:'−4.2%' },
  { cat:'HVAC',             volume: 318, time:'2h 32m', ai: 64, sat: 4.5, trend:'+22%'  },
  { cat:'Electrodoméstico', volume: 254, time:'3h 14m', ai: 58, sat: 4.4, trend:'+6%'   },
  { cat:'Carpintería',      volume: 162, time:'4h 41m', ai: 41, sat: 4.2, trend:'+35%'  },
  { cat:'Seguridad',        volume: 87,  time:'42m',    ai: 78, sat: 4.8, trend:'−8%'   },
  { cat:'Sanidad',          volume: 56,  time:'1h 22m', ai: 52, sat: 4.0, trend:'+12%'  },
  { cat:'Exterior',         volume: 53,  time:'8h 04m', ai: 88, sat: 4.6, trend:'−2%'   },
];

window.ReportingPage = Reporting;