// Agentes IA — listado por modo (Solo responde / Inicia y responde) + detalle con tabs.
// Sin nombres humanos. Sin nombres de empresa (la empresa = la cuenta del usuario).
// Tres tipos de canal: Telefonía, WhatsApp, Email.

const Agents = () => {
  const D = window.BW_DATA;
  const [selected, setSelected] = useState(null);
  const [filterCh, setFilterCh] = useState('all');

  if (selected) return <AgentDetail agent={selected} onBack={()=>setSelected(null)} />;

  const all = D.AGENTS;
  const filtered = filterCh === 'all' ? all : all.filter(a => a.channel === filterCh);
  const responders = filtered.filter(a => a.mode === 'respond');
  const initiators = filtered.filter(a => a.mode === 'initiate');

  const channels = [
    { id: 'all',      label: 'Todos los canales',  icon: null },
    { id: 'phone',    label: 'Telefonía',          icon: I.Phone },
    { id: 'whatsapp', label: 'WhatsApp',           icon: I.WhatsApp },
    { id: 'email',    label: 'Email',              icon: I.Mail },
  ];

  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 13, color:'var(--color-text-secondary)' }}>{all.length} agentes configurados · 3 tipos de canal</div>
          <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 36, margin: '4px 0 0', letterSpacing:'-0.025em', color:'var(--brand-navy)' }}>Agentes IA</h1>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <button className="btn">Plantillas</button>
          <button className="btn btn-primary"><I.Plus size={14}/> Nuevo agente</button>
        </div>
      </div>

      {/* Filtro por canal */}
      <div style={{ display:'flex', gap: 6, marginBottom: 28, padding: 4, background:'var(--color-surface-2)', border:'1px solid var(--color-border)', borderRadius: 12, width:'fit-content' }}>
        {channels.map(c => {
          const active = filterCh === c.id;
          const count = c.id === 'all' ? all.length : all.filter(a => a.channel === c.id).length;
          return (
            <button key={c.id} onClick={()=>setFilterCh(c.id)} style={{ display:'flex', alignItems:'center', gap: 8, padding: '8px 14px', background: active?'white':'transparent', border: 0, borderRadius: 8, fontSize: 13, fontWeight: 500, color: active?'var(--color-text-primary)':'var(--color-text-secondary)', cursor:'pointer', boxShadow: active?'0 1px 2px rgba(0,0,0,.06)':'none' }}>
              {c.icon && <c.icon size={14}/>}
              {c.label}
              <span style={{ fontFamily:'var(--font-mono)', fontSize: 11, color:'var(--color-text-muted)', background: active?'var(--color-surface-2)':'transparent', padding:'1px 6px', borderRadius: 4 }}>{count}</span>
            </button>
          );
        })}
      </div>

      <Section
        title="Solo responde"
        subtitle="Atiende los mensajes y llamadas entrantes"
        accent="teal"
        agents={responders}
        onSelect={setSelected}
      />

      <div style={{ height: 32 }}/>

      <Section
        title="Inicia conversación y responde"
        subtitle="Contacta proactivamente a leads y mantiene la conversación"
        accent="violet"
        agents={initiators}
        onSelect={setSelected}
      />
    </div>
  );
};

const Section = ({ title, subtitle, accent, agents, onSelect }) => {
  if (!agents.length) return null;
  const accentColor = accent === 'teal' ? 'var(--color-success)' : '#7C3AED';
  return (
    <div>
      <div style={{ display:'flex', alignItems:'center', gap: 12, marginBottom: 14, paddingBottom: 12, borderBottom:'1px solid var(--color-border)' }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: accentColor }}/>
        <h2 style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 24, margin: 0, letterSpacing:'-0.02em', color:'var(--brand-navy)' }}>{title}</h2>
        <span style={{ fontSize: 12.5, color:'var(--color-text-muted)' }}>{subtitle}</span>
        <span style={{ marginLeft:'auto', fontFamily:'var(--font-mono)', fontSize: 12, color:'var(--color-text-muted)' }}>{agents.length} {agents.length===1?'agente':'agentes'}</span>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 16 }}>
        {agents.map(a => <AgentCard key={a.id} agent={a} onSelect={onSelect}/>)}
      </div>
    </div>
  );
};

const AgentCard = ({ agent, onSelect }) => {
  const meta = channelMeta(agent.channel);
  return (
    <div className="card" onClick={()=>onSelect(agent)} style={{ cursor:'pointer', transition:'border-color .15s' }}>
      <div style={{ padding: 22, display:'flex', gap: 16 }}>
        <div style={{ width: 56, height: 56, borderRadius: 14, background: meta.bg, color: meta.fg, display:'grid', placeItems:'center', flex: '0 0 56px' }}>
          <meta.Ic size={26}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 22, lineHeight: 1.15, marginBottom: 2, color:'var(--brand-navy)', letterSpacing:'-0.02em' }}>{agent.name}</div>
          <div style={{ fontSize: 12, color:'var(--color-text-muted)', fontFamily:'var(--font-mono)', marginBottom: 10 }}>{agent.id}</div>
          <div style={{ display:'flex', gap: 6, flexWrap:'wrap' }}>
            <span className={'ch ' + meta.cls}><meta.Ic size={11}/> {meta.label}</span>
            <span className={'badge ' + (agent.mode==='respond'?'teal':'violet')}>
              {agent.mode==='respond' ? 'Solo responde' : 'Inicia y responde'}
            </span>
          </div>
        </div>
        <div onClick={e=>e.stopPropagation()} style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap: 8 }}>
          <Toggle on={agent.state==='active'} />
          <span className={'badge ' + (agent.state==='active'?'green dot':'')} style={{ fontSize: 11 }}>{agent.state==='active'?'Activo':'Pausado'}</span>
        </div>
      </div>
      <div style={{ borderTop:'1px solid var(--color-border)', display:'grid', gridTemplateColumns:'repeat(3,1fr)', textAlign:'center' }}>
        <Stat label="Conversaciones" value={agent.convs}/>
        <Stat label="Cualificación" value={agent.qual} br/>
        <Stat label={agent.channel==='email'?'Resp. media':'Duración media'} value={agent.avg}/>
      </div>
    </div>
  );
};

const channelMeta = (ch) => {
  if (ch === 'whatsapp') return { Ic: I.WhatsApp, label: 'WhatsApp', cls: 'wa', bg: 'linear-gradient(135deg,#25D366,#128C7E)', fg: 'white' };
  if (ch === 'phone')    return { Ic: I.Phone,    label: 'Telefonía', cls: 'ph', bg: 'linear-gradient(135deg,#1554F0,#0B3CCF)', fg: 'white' };
  return                       { Ic: I.Mail,     label: 'Email',     cls: 'em', bg: 'linear-gradient(135deg,#475569,#1E293B)', fg: 'white' };
};

const Stat = ({ label, value, br }) => (
  <div style={{ padding: '14px 0', borderLeft: br?'1px solid var(--color-border)':'none', borderRight: br?'1px solid var(--color-border)':'none' }}>
    <div style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 22, color:'var(--brand-navy)', letterSpacing:'-0.02em' }}>{value}</div>
    <div style={{ fontSize: 11.5, color:'var(--color-text-muted)' }}>{label}</div>
  </div>
);
const Toggle = ({ on }) => {
  const [v, setV] = useState(on);
  return (
    <button onClick={()=>setV(!v)} style={{ width: 36, height: 20, borderRadius: 10, background: v?'var(--color-success)':'var(--color-border-strong)', border:0, padding:0, position:'relative', cursor:'pointer' }}>
      <span style={{ position:'absolute', top: 2, left: v?18:2, width: 16, height: 16, background:'white', borderRadius:'50%', transition:'left .15s', boxShadow:'0 1px 2px rgba(0,0,0,.2)' }}/>
    </button>
  );
};

const AgentDetail = ({ agent, onBack }) => {
  const [tab, setTab] = useState('config');
  const meta = channelMeta(agent.channel);
  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      <div style={{ marginBottom: 16 }}>
        <button className="btn btn-ghost btn-sm" onClick={onBack} style={{ paddingLeft: 0 }}><I.ChevR size={12} style={{ transform:'rotate(180deg)' }}/> Volver a agentes</button>
      </div>

      <div style={{ display:'flex', alignItems:'flex-start', gap: 16, marginBottom: 24 }}>
        <div style={{ width: 64, height: 64, borderRadius: 16, background: meta.bg, color: meta.fg, display:'grid', placeItems:'center' }}><meta.Ic size={30}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 10, flexWrap:'wrap' }}>
            <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 40, margin: 0, letterSpacing:'-0.025em', color:'var(--brand-navy)' }}>{agent.name}</h1>
            <span className={'ch ' + meta.cls}><meta.Ic size={11}/> {meta.label}</span>
            <span className={'badge ' + (agent.mode==='respond'?'teal':'violet')}>
              {agent.mode==='respond' ? 'Solo responde' : 'Inicia y responde'}
            </span>
            <span className="badge green dot">Activo</span>
          </div>
          <div style={{ fontSize: 13, color:'var(--color-text-secondary)', fontFamily:'var(--font-mono)' }}>{agent.id}</div>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <button className="btn"><I.Pause size={14}/> Pausar agente</button>
          <button className="btn btn-primary">Guardar cambios</button>
        </div>
      </div>

      <div style={{ display:'flex', gap: 4, borderBottom:'1px solid var(--color-border)', marginBottom: 24 }}>
        {[['config','Configuración general'],['protocol','Protocolo'],['scripts','Scripts'],['log','Log de actividad']].map(([id,l]) => (
          <button key={id} onClick={()=>setTab(id)} style={{ padding:'10px 16px', background:'none', border:0, borderBottom: tab===id?'2px solid var(--color-accent)':'2px solid transparent', color: tab===id?'var(--color-text-primary)':'var(--color-text-secondary)', fontSize: 14, fontWeight: 500, cursor:'pointer', marginBottom: -1 }}>{l}</button>
        ))}
      </div>

      {tab==='config' && <ConfigTab agent={agent}/>}
      {tab==='protocol' && <ProtocolTab/>}
      {tab==='scripts' && <ScriptsTab agent={agent}/>}
      {tab==='log' && <LogTab/>}
    </div>
  );
};

const ConfigTab = ({ agent }) => (
  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16 }}>
    <div className="card">
      <div className="card-head"><div className="card-title">Identidad del agente</div></div>
      <div className="card-body" style={{ display:'flex', flexDirection:'column', gap: 16 }}>
        <FormRow label="Nombre interno (descriptivo, no humano)"><input className="input" defaultValue={agent.name}/></FormRow>
        <FormRow label="Modo de operación">
          <div style={{ display:'flex', gap: 8 }}>
            <button className={'chip '+(agent.mode==='respond'?'active':'')}>Solo responde</button>
            <button className={'chip '+(agent.mode==='initiate'?'active':'')}>Inicia y responde</button>
          </div>
        </FormRow>
        <FormRow label="Personalidad">
          <select className="input"><option>Profesional cálida</option><option>Directa y eficiente</option><option>Empática y consultiva</option></select>
        </FormRow>
        <FormRow label="Tono">
          <div style={{ display:'flex', gap: 8 }}>
            {['Formal','Cordial','Cercano'].map((t,i)=><button key={t} className={'chip '+(i===1?'active':'')}>{t}</button>)}
          </div>
        </FormRow>
        <FormRow label="Idioma"><select className="input"><option>Español (es-ES)</option><option>Catalán</option></select></FormRow>
      </div>
    </div>

    <div className="card">
      <div className="card-head"><div className="card-title">Horario de atención</div><span className="card-sub">Zona horaria Madrid (CET)</span></div>
      <div className="card-body">
        <div style={{ display:'grid', gridTemplateColumns:'60px repeat(7,1fr)', gap: 4, fontSize: 11.5 }}>
          <div></div>
          {['L','M','X','J','V','S','D'].map(d=><div key={d} style={{ textAlign:'center', color:'var(--color-text-muted)', fontWeight: 600 }}>{d}</div>)}
          {['09–13','13–17','17–21','21–24'].map((h,row)=>(
            <React.Fragment key={h}>
              <div style={{ color:'var(--color-text-secondary)', fontFamily:'var(--font-mono)' }}>{h}</div>
              {[0,1,2,3,4,5,6].map(d=>{
                const on = (row<2 && d<5) || (row===2 && d<5) || (row===0 && d===5);
                return <div key={d} style={{ height: 32, borderRadius: 6, background: on?'var(--color-accent-light)':'var(--color-surface-2)', border: on?'1px solid var(--color-accent)':'1px solid transparent', cursor:'pointer' }}/>;
              })}
            </React.Fragment>
          ))}
        </div>
        <FormRow label="Mensaje fuera de horario" style={{ marginTop: 16 }}>
          <textarea className="input" rows={3} style={{ height:'auto', padding: 12 }} defaultValue="Gracias por contactar. Estamos fuera del horario de atención. Te responderemos a primera hora del próximo día laborable."/>
        </FormRow>
      </div>
    </div>
  </div>
);

const ProtocolTab = () => (
  <div className="card">
    <div className="card-head"><div className="card-title">Protocolo de cualificación</div><span className="card-sub">Reglas que sigue el agente</span></div>
    <div style={{ padding: 0 }}>
      {[
        { type: 'Comprador', open: true, qs: ['¿Es para vivienda habitual o segunda residencia?','¿Tienes presupuesto definido?','¿Necesitas financiación?','¿Tienes preaprobación bancaria?','¿Plazo objetivo?'] },
        { type: 'Inversor',  open: false },
        { type: 'Postventa', open: false },
      ].map((p,i) => (
        <div key={i} style={{ borderTop: i?'1px solid var(--color-border)':'none' }}>
          <div style={{ padding: '14px 24px', display:'flex', alignItems:'center', justifyContent:'space-between', cursor:'pointer' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <I.ChevR size={14} style={{ transform: p.open?'rotate(90deg)':'none', color:'var(--color-text-muted)' }}/>
              <span style={{ fontWeight: 500 }}>Tipología: {p.type}</span>
              {p.qs && <span className="badge">{p.qs.length} preguntas</span>}
            </div>
            <button className="btn btn-sm">Editar</button>
          </div>
          {p.open && (
            <div style={{ padding: '0 24px 20px 50px' }}>
              <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
                {p.qs.map((q,j)=>(
                  <div key={j} style={{ display:'flex', alignItems:'center', gap: 10, padding: 10, background:'var(--color-surface)', borderRadius: 8, border:'1px solid var(--color-border)' }}>
                    <span className="mono" style={{ fontSize: 11, color:'var(--color-text-muted)' }}>{String(j+1).padStart(2,'0')}</span>
                    <span style={{ flex: 1, fontSize: 13.5 }}>{q}</span>
                    <button className="icon-btn"><I.Dots size={14}/></button>
                  </div>
                ))}
                <button className="btn btn-sm" style={{ alignSelf:'flex-start', marginTop: 4 }}><I.Plus size={12}/> Añadir pregunta</button>
              </div>

              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16, marginTop: 24 }}>
                <div style={{ padding: 14, border:'1px solid var(--color-warning-light)', background:'var(--color-warning-light)', borderRadius: 10 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color:'var(--color-warning)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom: 6 }}>Condición de escalado</div>
                  <div style={{ fontSize: 13 }}>Score &gt; 80 · presupuesto &gt; 400k €</div>
                </div>
                <div style={{ padding: 14, border:'1px solid var(--color-danger-light)', background:'var(--color-danger-light)', borderRadius: 10 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color:'var(--color-danger)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom: 6 }}>Regla de descarte</div>
                  <div style={{ fontSize: 13 }}>Sin financiación + presupuesto &lt; 100k €</div>
                </div>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  </div>
);

const ScriptsTab = ({ agent }) => {
  const isPhone = agent.channel === 'phone';
  return (
  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16 }}>
    <div className="card">
      <div className="card-head"><div className="card-title">Editor de scripts</div></div>
      <div style={{ padding: 16 }}>
        <div style={{ display:'flex', flexDirection:'column', gap: 8, marginBottom: 16 }}>
          <FormRow label="Tipo de lead"><select className="input"><option>Comprador particular</option><option>Inversor</option></select></FormRow>
          <FormRow label="Tipo de activo"><select className="input"><option>Vivienda residencial</option><option>Activo bancario REO</option></select></FormRow>
        </div>
        <div style={{ fontSize: 12, fontWeight: 600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom: 8 }}>{isPhone?'Saludo inicial':'Mensaje de apertura'}</div>
        <textarea className="input" rows={3} style={{ height:'auto', padding: 12, marginBottom: 12, fontFamily:'var(--font-mono)', fontSize: 12.5 }}
          defaultValue={isPhone
            ? "Buenos días, le llamo de {{cuenta.nombre}}. ¿Hablo con {{lead.nombre}}? Vi que dejó su contacto interesado/a en {{lead.referencia_inmueble}}…"
            : "Hola {{lead.nombre}}, gracias por contactar con {{cuenta.nombre}}. Vi que estás interesado/a en {{lead.referencia_inmueble}}. ¿Sigues buscando activamente?"}/>
        <div style={{ fontSize: 12, fontWeight: 600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom: 8 }}>Despedida con cualificación</div>
        <textarea className="input" rows={3} style={{ height:'auto', padding: 12, fontFamily:'var(--font-mono)', fontSize: 12.5 }}
          defaultValue="Voy a registrar tus criterios y pasaré tu caso a {{comercial.nombre}}, comercial de zona. ¿Te parece si te {{contacto.canal}} {{contacto.plazo}}?"/>
      </div>
    </div>

    <div className="card">
      <div className="card-head"><div className="card-title">Vista previa</div><button className="btn btn-sm"><I.Refresh size={12}/> Regenerar</button></div>
      <div className="card-body" style={{ background:'var(--color-surface)' }}>
        <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
          <Bubble who="agent">{isPhone ? 'Buenos días, le llamo de {cuenta}. ¿Hablo con Marta Cifuentes?' : 'Hola Marta, gracias por contactar con {cuenta}. Vi que estás interesada en una vivienda en Chamberí.'}</Bubble>
          <Bubble who="lead">Sí, gracias. Sigo buscando.</Bubble>
          <Bubble who="agent">Genial. ¿Es para vivienda habitual o segunda residencia? ¿Tienes ya un presupuesto definido?</Bubble>
        </div>
      </div>
    </div>
  </div>
  );
};
const Bubble = ({ who, children }) => (
  <div style={{ display:'flex', justifyContent: who==='agent'?'flex-end':'flex-start' }}>
    <div style={{ maxWidth:'80%', padding:'8px 12px', background: who==='agent'?'var(--color-accent-light)':'white', border: who==='agent'?'none':'1px solid var(--color-border)', borderRadius: 10, fontSize: 13 }}>{children}</div>
  </div>
);

const LogTab = () => (
  <div className="card">
    <table className="tbl">
      <thead><tr><th>Fecha</th><th>Evento</th><th>Lead</th><th>Resultado</th><th></th></tr></thead>
      <tbody>
        {[
          {d:'Hoy 11:40', ev:'Cualificación completada', lead:'Marta Cifuentes', r:'OK · score 92', cls:'green'},
          {d:'Hoy 11:32', ev:'Conversación iniciada',     lead:'Aleksei Volkov',  r:'En curso',     cls:'dark'},
          {d:'Hoy 11:18', ev:'Escalado a humano',         lead:'Pavel Krastev',   r:'Lucía R.',     cls:'amber'},
          {d:'Hoy 10:54', ev:'Cualificación completada', lead:'Pilar Estévez',   r:'OK · score 78', cls:'green'},
          {d:'Hoy 10:42', ev:'Lead descartado',           lead:'Marc Soler',      r:'Presupuesto bajo', cls:'red'},
          {d:'Hoy 09:18', ev:'Error de webhook',          lead:'—',               r:'Twilio 32208', cls:'red'},
        ].map((l,i)=>(
          <tr key={i}>
            <td><span className="num">{l.d}</span></td>
            <td>{l.ev}</td>
            <td>{l.lead}</td>
            <td><span className={'badge ' + l.cls + ' dot'}>{l.r}</span></td>
            <td><button className="btn btn-sm">Ver</button></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const FormRow = ({ label, children, style }) => (
  <div style={style}>
    <label className="label-text">{label}</label>
    {children}
  </div>
);

window.AgentsPage = Agents;