// Dashboard — Panel principal
const Dashboard = ({ onNav }) => {
  const D = window.BW_DATA;
  const [filter, setFilter] = useState('all');
  const [range, setRange] = useState('today');

  const stateMap = {
    open:        { cls: 'amber',  label: 'Abierto'      },
    scheduled:   { cls: 'teal',   label: 'Programado'   },
    in_progress: { cls: 'blue',   label: 'En curso'     },
    follow_up:   { cls: 'violet', label: 'Seguimiento'  },
    resolved:    { cls: 'green',  label: 'Resuelto'     },
    escalated:   { cls: 'red',    label: 'Escalado'     },
  };

  const tickets = D.PM_TICKETS.filter(t => filter === 'all' || t.channel === filter);

  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      {/* Range selector + tenant identifier */}
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 24, gap: 24 }}>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 600, textTransform:'uppercase', letterSpacing:'0.16em', color:'var(--color-accent)', marginBottom: 10 }}>
            Hola Adrián · Ementil Grupo Inmobiliario
          </div>
          <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 600, fontSize: 28, margin: 0, letterSpacing:'-0.02em', color:'var(--brand-navy)', lineHeight: 1.1 }}>Solicitudes en tiempo real</h1>
          <div style={{ width: 36, height: 3, background:'var(--color-accent)', borderRadius: 2, marginTop: 14 }} />
        </div>
        <div className="seg">
          {[['today','Hoy'],['week','Esta semana'],['month','Este mes']].map(([id,l]) => (
            <button key={id} className={range===id ? 'active':''} onClick={()=>setRange(id)}>{l}</button>
          ))}
        </div>
      </div>

      {/* KPIs */}
      {(() => {
        const total       = D.PM_TICKETS.length;
        const active      = D.PM_TICKETS.filter(t => t.state !== 'resolved').length;
        const resolved    = D.PM_TICKETS.filter(t => t.state === 'resolved').length;
        const escalated   = D.PM_TICKETS.filter(t => t.state === 'escalated').length;
        const followUp    = D.PM_TICKETS.filter(t => t.state === 'follow_up').length;
        const resolutionRate = total > 0 ? Math.round(((resolved + followUp) / total) * 100) : 0;
        return (
          <div className="kpis" style={{ marginBottom: 24 }}>
            {[
              { label: 'Solicitudes activas',   value: active,                       delta: `${total} totales`,          dir: 'up',   icon: 'Ticket',        tone: 'blue' },
              { label: 'Resueltas hoy',         value: resolved,                     delta: '+1 vs. ayer',               dir: 'up',   icon: 'Check',         tone: 'green' },
              { label: 'Escaladas pendientes',  value: escalated,                    delta: 'Requieren supervisor',      dir: 'down', icon: 'AlertTriangle', tone: 'amber' },
              { label: 'Tasa de resolución IA',  value: resolutionRate + '%',         delta: 'resueltas + seguimiento',   dir: 'up',   icon: 'Sparkle',       tone: 'violet' },
            ].map((k,i) => {
              const Ic = I[k.icon];
              const toneColors = { blue:['var(--color-accent-light)','var(--color-accent)'], green:['var(--color-success-light)','var(--color-success)'], amber:['var(--color-warning-light)','var(--color-warning)'], violet:['var(--color-outbound-light)','var(--color-outbound)'] }[k.tone];
              return (
                <div className="kpi" key={i}>
                  <div className="label">
                    <span className="ico" style={{ background: toneColors[0], color: toneColors[1] }}><Ic size={15}/></span>
                    {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}
                  </div>
                  <svg className="spark" viewBox="0 0 200 30" preserveAspectRatio="none">
                    <path d={['M0 22 L20 18 L40 20 L60 14 L80 16 L100 10 L120 12 L140 6 L160 9 L180 4 L200 6','M0 14 L20 16 L40 12 L60 14 L80 9 L100 11 L120 7 L140 10 L160 5 L180 7 L200 3','M0 10 L20 12 L40 8 L60 12 L80 10 L100 14 L120 12 L140 16 L160 14 L180 18 L200 16','M0 18 L20 14 L40 16 L60 10 L80 13 L100 8 L120 11 L140 5 L160 8 L180 4 L200 6'][i]}
                      fill="none" stroke={toneColors[1]} strokeWidth="1.5" />
                  </svg>
                </div>
              );
            })}
          </div>
        );
      })()}

      {/* Main grid: tickets table + alerts panel */}
      <div style={{ display:'grid', gridTemplateColumns: '1fr 320px', gap: 16 }}>
        <div className="card">
          <div className="card-head" style={{ display:'block', padding: '16px 20px' }}>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 14 }}>
              <div>
                <div className="card-title">Solicitudes abiertas</div>
                <div className="card-sub">{tickets.length} conversaciones activas</div>
              </div>
              <div style={{ display:'flex', gap: 8 }}>
                <button className="btn btn-sm"><I.Filter size={13}/> Filtros avanzados</button>
                <button className="btn btn-sm"><I.Refresh size={13}/></button>
              </div>
            </div>
            <div style={{ display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap' }}>
              <div style={{ position:'relative', flex: '0 1 280px' }}>
                <I.Search size={14} style={{ position:'absolute', left: 12, top: '50%', transform:'translateY(-50%)', color:'var(--color-text-muted)' }} />
                <input className="input input-sm" placeholder="Buscar inquilino, unidad, ref. inmueble…" style={{ paddingLeft: 36 }} />
              </div>
              <div style={{ width: 1, height: 24, background:'var(--color-border)' }} />
              {[['all','Todos los canales',null],['whatsapp','WhatsApp','wa'],['phone','Telefonía','ph'],['email','Email','em']].map(([id,l,ch]) => (
                <button key={id} className={'chip' + (filter===id?' active':'')} onClick={()=>setFilter(id)} style={{ height: 32 }}>
                  {ch && <span style={{ width: 8, height: 8, borderRadius:'50%', background: ch==='wa'?'var(--color-whatsapp)':ch==='ph'?'var(--color-phone)':'var(--color-email)' }}/>}
                  {l}
                </button>
              ))}
              <button className="chip">Categoría <I.ChevD size={12}/></button>
              <button className="chip">Estado <I.ChevD size={12}/></button>
              <button className="chip">Prioridad <I.ChevD size={12}/></button>
            </div>
          </div>

          <div style={{ maxHeight: 540, overflow:'auto' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 92 }}>Ticket</th>
                  <th>Inquilino · Unidad</th>
                  <th>Solicitud</th>
                  <th style={{ width: 130 }}>Categoría</th>
                  <th style={{ width: 130 }}>Estado</th>
                  <th style={{ width: 90 }}>Prioridad</th>
                  <th style={{ width: 110 }}>Actualizado</th>
                  <th style={{ width: 60 }}></th>
                </tr>
              </thead>
              <tbody>
                {tickets.map(t => {
                  const cat = (D.PM_CATEGORIES && D.PM_CATEGORIES[t.category]) || { color:'var(--color-text-muted)', bg:'var(--color-surface-2)', icon:'Sparkle' };
                  const CatIc = I[cat.icon] || I.Sparkle;
                  const st = stateMap[t.state] || stateMap.open;
                  return (
                    <tr key={t.id} onClick={()=>onNav('conversations')}>
                      <td><span className="mono" style={{ fontSize: 12, color:'var(--color-text-secondary)' }}>{t.id}</span></td>
                      <td>
                        <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                          <span style={{ width: 26, height: 26, borderRadius: 6, background: cat.bg, color: cat.color, display:'inline-grid', placeItems:'center', flex:'0 0 26px' }}>
                            <CatIc size={13}/>
                          </span>
                          <div>
                            <div style={{ fontWeight: 500, color:'var(--color-text-primary)' }}>{t.tenant}</div>
                            <div style={{ fontSize: 12, color:'var(--color-text-muted)' }} className="truncate">{t.unit}</div>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div style={{ color:'var(--color-text-primary)' }} className="truncate">{t.issue}</div>
                        <div style={{ fontSize: 11.5, color:'var(--color-text-muted)' }} className="truncate">{t.subcategory}</div>
                      </td>
                      <td><span style={{ color:'var(--color-text-secondary)', fontSize: 13 }}>{t.category}</span></td>
                      <td><span className={'badge ' + st.cls + ' dot'}>{st.label}</span></td>
                      <td>
                        <span style={{
                          fontSize: 10, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase',
                          padding:'2px 6px', borderRadius: 4,
                          background: t.priority==='high'?'var(--color-danger-light)':t.priority==='medium'?'var(--color-warning-light)':'var(--color-surface-2)',
                          color:     t.priority==='high'?'var(--color-danger)':     t.priority==='medium'?'var(--color-warning)':     'var(--color-text-secondary)',
                        }}>{t.priority}</span>
                      </td>
                      <td><span className="num">{t.last}</span></td>
                      <td><button className="btn btn-sm" onClick={(e)=>{e.stopPropagation(); onNav('conversations');}}>Ver</button></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          <div style={{ padding: '12px 20px', borderTop: '1px solid var(--color-border)', display:'flex', alignItems:'center', justifyContent:'space-between', fontSize: 13, color:'var(--color-text-secondary)' }}>
            <span>Mostrando {tickets.length} de {D.PM_TICKETS.length}</span>
            <div style={{ display:'flex', gap: 4 }}>
              <button className="btn btn-sm">Anterior</button>
              <button className="btn btn-sm" style={{ background:'var(--color-accent)', color:'white', border:'1px solid var(--color-accent)' }}>1</button>
              <button className="btn btn-sm">2</button>
              <button className="btn btn-sm">3</button>
              <button className="btn btn-sm">Siguiente</button>
            </div>
          </div>
        </div>

        {/* Alerts */}
        <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>
          <div className="card">
            <div className="card-head" style={{ padding: '14px 20px' }}>
              <div>
                <div className="card-title">Alertas activas</div>
                <div className="card-sub">Requieren tu atención</div>
              </div>
              <span className="badge red dot">3</span>
            </div>
            <div style={{ display:'flex', flexDirection:'column' }}>
              {[
                { sev: 'amber', icon: 'AlertTriangle', title: 'Solicitud prioritaria sin asignar', desc: 'Lucía Marín · AC averiado · 8 min', cta: 'Asignar' },
                { sev: 'red',   icon: 'AlertTriangle', title: '3 técnicos sin confirmar',  desc: 'Promedio de respuesta: 38 min', cta: 'Revisar' },
                { sev: 'amber', icon: 'WhatsApp',      title: 'Plantilla en revisión', desc: '«visita_técnico» pendiente Meta', cta: 'Ver canal' },
              ].map((a,i) => {
                const Ic = I[a.icon];
                const tone = a.sev==='red' ? ['var(--color-danger-light)','var(--color-danger)'] : ['var(--color-warning-light)','var(--color-warning)'];
                return (
                  <div key={i} style={{ padding: '14px 20px', borderTop: i?'1px solid var(--color-border)':'none', display:'flex', gap: 12, alignItems:'flex-start' }}>
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: tone[0], color: tone[1], display:'grid', placeItems:'center', flex: '0 0 32px' }}><Ic size={15}/></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 500, fontSize: 13.5 }}>{a.title}</div>
                      <div style={{ color:'var(--color-text-secondary)', fontSize: 12.5, marginTop: 2 }}>{a.desc}</div>
                      <button className="btn btn-sm" style={{ marginTop: 8 }}>{a.cta} <I.ArrowRight size={12}/></button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="card">
            <div className="card-head" style={{ padding: '14px 20px' }}>
              <div>
                <div className="card-title">Actividad de hoy</div>
                <div className="card-sub">Por hora · IA + humano</div>
              </div>
            </div>
            <div className="card-body" style={{ padding: 20 }}>
              <svg viewBox="0 0 280 80" style={{ width:'100%', height: 80 }}>
                {[6,11,18,22,29,38,42,47,53,58,52,48,44,39,32,28,22,18,14].map((v,i,arr)=>(
                  <rect key={i} x={i*14} y={70-v} width="10" height={v} rx="2" fill={i===14?'var(--color-accent)':'var(--color-accent-light)'} />
                ))}
              </svg>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize: 11, color:'var(--color-text-muted)', marginTop: 4 }}>
                <span>00h</span><span>06h</span><span>12h</span><span>18h</span><span>23h</span>
              </div>
              <div style={{ marginTop: 12, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8, fontSize: 12 }}>
                <div><div style={{ color:'var(--color-text-secondary)' }}>Pico actividad</div><div className="mono" style={{ fontWeight: 500 }}>13:00 · 8 conv.</div></div>
                <div><div style={{ color:'var(--color-text-secondary)' }}>Total hoy</div><div className="mono" style={{ fontWeight: 500 }}>{D.PM_TICKETS.length} conv.</div></div>
              </div>
            </div>
          </div>
          <div className="card">
            <div className="card-head" style={{ padding: '14px 20px' }}>
              <div>
                <div className="card-title">Satisfacción</div>
                <div className="card-sub">Últimos 30 días · post-visita</div>
              </div>
              <span className="badge green dot">4.6</span>
            </div>
            <div className="card-body" style={{ padding: '14px 20px' }}>
              <div style={{ display:'flex', alignItems:'center', gap: 14, marginBottom: 14 }}>
                <div>
                  <div style={{ fontFamily:'var(--font-ui)', fontWeight: 600, fontSize: 32, color:'var(--brand-navy)', letterSpacing:'-0.02em', lineHeight: 1 }}>4.6</div>
                  <div style={{ display:'flex', gap: 2, marginTop: 6 }}>
                    {[1,2,3,4,5].map(n => (
                      <I.Star key={n} size={12} style={{
                        color: n <= 4 ? 'var(--color-warning)' : 'var(--color-warning-light)',
                        fill:  n <= 4 ? 'var(--color-warning)' : 'var(--color-warning-light)',
                      }}/>
                    ))}
                  </div>
                </div>
                <div style={{ flex: 1, fontSize: 12.5, color:'var(--color-text-secondary)', lineHeight: 1.5 }}>
                  <div><strong style={{ color:'var(--color-text-primary)' }}>83%</strong> tasa de respuesta</div>
                  <div><strong style={{ color:'var(--color-text-primary)' }}>142</strong> encuestas enviadas</div>
                </div>
              </div>
              <div style={{ paddingTop: 12, borderTop:'1px solid var(--color-border)' }}>
                <div style={{ fontSize: 10.5, fontWeight: 600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom: 6 }}>Último comentario</div>
                <div style={{ fontSize: 12.5, color:'var(--color-text-primary)', lineHeight: 1.5, fontStyle:'italic' }}>
                  "Resuelto en una visita, muy profesional. Gracias." — Tomás F. <I.Star size={10} style={{ color:'var(--color-warning)', fill:'var(--color-warning)', verticalAlign:'middle' }}/>×5
                </div>
              </div>
              <button className="btn btn-sm btn-ghost" style={{ marginTop: 12, width:'100%', justifyContent:'center' }} onClick={() => onNav('tickets')}>
                Ver seguimientos en curso <I.ArrowRight size={12}/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.DashboardPage = Dashboard;