/* global React, SaoriIcons, SaoriShell */
const Ic3 = SaoriIcons;
const { IntegrationCard: IC3 } = SaoriShell;

/* ============================================================
   PANTALLA 3 — Arquitectura de integraciones
   ============================================================ */
function ScreenIntegraciones() {
  // SVG connecting lines between center and 5 satellites
  const lines = [
    { d: 'M 240 130 C 320 130, 360 200, 380 240' },   // top-left -> center
    { d: 'M 760 130 C 680 130, 640 200, 620 240' },   // top-right -> center
    { d: 'M 240 360 C 320 360, 360 320, 380 290' },   // bottom-left -> center
    { d: 'M 760 360 C 680 360, 640 320, 620 290' },   // bottom-right -> center
    { d: 'M 500 430 C 500 380, 500 350, 500 320' },   // bottom-mid -> center
  ];

  return (
    <div className="page fade-in">
      <div className="page-header">
        <h1>Arquitectura de integraciones</h1>
        <p>Centro de control operativo de Virtualia Hub</p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16 }}>
        <div className="arch-map">
          <svg className="lines" viewBox="0 0 1000 540" preserveAspectRatio="none">
            <defs>
              <linearGradient id="ln" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#C2B0FB" />
                <stop offset="100%" stopColor="#6E56F7" />
              </linearGradient>
            </defs>
            {lines.map((l, i) => (
              <g key={i}>
                <path d={l.d} stroke="url(#ln)" strokeWidth="1.5" fill="none" strokeDasharray="3 4" />
                <circle r="3" fill="#6E56F7">
                  <animateMotion dur={`${3 + i * 0.4}s`} repeatCount="indefinite" path={l.d} />
                </circle>
              </g>
            ))}
          </svg>

          {/* Virtualia PMS — top-left */}
          <div className="arch-node" style={{ top: 36, left: 80 }}>
            <div className="arch-node__title">
              <div className="icon-chip icon-chip--mint icon-chip--lg"><Ic3.Calendar size={18}/></div>
              Virtualia PMS
            </div>
            <ul className="arch-node__list">
              <li>Reservas</li><li>Disponibilidad</li><li>Tarifas</li><li>Clientes</li>
            </ul>
          </div>

          {/* Virtualia Restaurant — top-right */}
          <div className="arch-node" style={{ top: 36, right: 80 }}>
            <div className="arch-node__title">
              <div className="icon-chip icon-chip--violet icon-chip--lg"><Ic3.Utensils size={18}/></div>
              Virtualia Restaurant
            </div>
            <ul className="arch-node__list">
              <li>Pedidos</li><li>Menú</li><li>Promociones</li><li>Clientes</li>
            </ul>
          </div>

          {/* Canales — bottom-left */}
          <div className="arch-node" style={{ bottom: 70, left: 80 }}>
            <div className="arch-node__title">
              <div className="icon-chip icon-chip--green icon-chip--lg"><Ic3.MessageCircle size={18}/></div>
              Canales
            </div>
            <ul className="arch-node__list" style={{ gap: 8 }}>
              <li><span style={{ color: '#16A34A' }}><Ic3.ChWhatsapp size={13}/></span> WhatsApp</li>
              <li><span style={{ color: '#1E81E5' }}><Ic3.ChMessenger size={13}/></span> Messenger</li>
              <li><span style={{ color: '#E11D74' }}><Ic3.ChInstagram size={13}/></span> Instagram</li>
              <li><span style={{ color: '#475569' }}><Ic3.ChEmail size={13}/></span> Email</li>
              <li><span style={{ color: '#7C5CF2' }}><Ic3.ChWebChat size={13}/></span> Web Chat</li>
            </ul>
          </div>

          {/* Agente IA — bottom-right */}
          <div className="arch-node" style={{ bottom: 70, right: 80 }}>
            <div className="arch-node__title">
              <div className="icon-chip icon-chip--violet icon-chip--lg"><Ic3.Brain size={18}/></div>
              Agente IA
            </div>
            <ul className="arch-node__list">
              <li>getRoomTypes · read-only</li>
              <li>getAvailability · read-only</li>
              <li>getRates · read-only</li>
              <li>crear lead · resumir</li>
            </ul>
          </div>

          {/* Marketing — bottom-mid */}
          <div className="arch-node" style={{ bottom: -20, left: '50%', transform: 'translateX(-50%)' }}>
            <div className="arch-node__title">
              <div className="icon-chip icon-chip--lg" style={{ background: '#FFE4F0', color: '#E11D74' }}><Ic3.Megaphone size={18}/></div>
              Marketing
            </div>
            <ul className="arch-node__list">
              <li>campañas</li><li>segmentos</li><li>publicaciones</li><li>aprobación humana</li>
            </ul>
          </div>

          {/* Center — Virtualia Hub */}
          <div className="arch-node arch-node--center" style={{ top: '46%', left: '50%', transform: 'translate(-50%, -50%)' }}>
            <div className="arch-node__center-mark">
              {/* Pulse mark · 3 concentric circles per brand/BRAND.md */}
              <svg width="26" height="26" viewBox="0 0 64 64" fill="none">
                <circle cx="32" cy="32" r="22" fill="none" stroke="#fff" strokeWidth="3" strokeOpacity="0.40"/>
                <circle cx="32" cy="32" r="14" fill="none" stroke="#fff" strokeWidth="3" strokeOpacity="0.75"/>
                <circle cx="32" cy="32" r="6" fill="#fff"/>
              </svg>
            </div>
            <div className="arch-node__center-title">Virtualia Hub</div>
            <div className="arch-node__center-sub">Orquestador inteligente</div>
            <div className="arch-node__center-pill"><span className="dot-pulse"></span> Centro de operaciones</div>
          </div>
        </div>

        {/* Right — operational summary */}
        <div className="card" style={{ alignSelf: 'flex-start' }}>
          <div className="card__header">
            <div className="card__title">Resumen operativo</div>
            <span className="badge badge--violet">IA</span>
          </div>
          <div className="card__body">
            <div className="fw-600" style={{ color: 'var(--violet-700)', marginBottom: 14 }}>Flujo detectado</div>
            <div className="col gap-16">
              {[
                { icon: Ic3.UserSearch, tone: 'sky',    text: 'Cliente pregunta por disponibilidad' },
                { icon: Ic3.Database,   tone: 'mint',   text: 'Virtualia Hub consulta Virtualia PMS' },
                { icon: Ic3.UserPlus,   tone: 'violet', text: 'Se genera lead' },
                { icon: Ic3.Sparkles,   tone: 'violet', text: 'Se sugiere respuesta' },
                { icon: Ic3.Users,      tone: 'peach',  text: 'Si hay intención de compra, pasar a humano' },
              ].map((s, i) => (
                <div key={i} className="row gap-12" style={{ alignItems: 'flex-start' }}>
                  <div className="numbered__num">{i + 1}</div>
                  <div className={'icon-chip icon-chip--lg icon-chip--' + s.tone}><s.icon size={16}/></div>
                  <span className="text-md" style={{ paddingTop: 8, lineHeight: 1.4 }}>{s.text}</span>
                </div>
              ))}
            </div>
            <button type="button" className="btn btn--violet-soft btn--block" style={{ marginTop: 18 }}>
              <Ic3.Refresh size={14}/> Ver historial de flujos
            </button>
          </div>
        </div>
      </div>

      {/* Bottom integration cards · estado honesto (nada conectado en runtime) */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
        <IC3 icon={Ic3.Link} iconTone="mint" title="API Virtualia PMS" sub="Tools read-only" state="disenado" />
        <IC3 icon={Ic3.Utensils} iconTone="violet" title="API Virtualia Restaurant" sub="Integración por API" state="proxima-fase" />
        <IC3 icon={Ic3.MessageSquare} iconTone="mint" title="Inbox omnicanal" sub="Motor Chatwoot" state="demo" />
        <IC3 icon={Ic3.Brain} iconTone="violet" title="Agente IA" sub="Solo sugerencias" state="demo" />
        <IC3 icon={Ic3.Megaphone} iconTone="peach" title="Publicaciones" sub="Borradores" state="proxima-fase" />
        <IC3 icon={Ic3.ShieldCheck} iconTone="violet" title="Aprobaciones" sub="2 en cola" state="requiere-aprobacion" />
      </div>
    </div>
  );
}

/* ============================================================
   PANTALLA 4 — Leads (Kanban)
   ============================================================ */
function ScreenLeads({ toast }) {
  const [selected, setSelected] = React.useState('L2');

  const leads = {
    Nuevo: [
      { id: 'L1', name: 'Sofía Ramírez',    interest: 'Suite vista mar — 3 noches', channel: 'instagram', time: '12 min', resp: 'Sin asignar', ai: 'Enviar tarifas y fotos' },
      { id: 'L2', name: 'Diego Hernández',  interest: 'Habitación fin de semana',   channel: 'whatsapp',  time: '24 min', resp: 'Recepción',   ai: 'Confirmar disponibilidad' },
    ],
    Interesado: [
      { id: 'L3', name: 'Andrea Castillo', interest: 'Paquete romántico',         channel: 'whatsapp', time: '1 h',  resp: 'Marta L.', ai: 'Compartir paquete' },
    ],
    'Cotización enviada': [
      { id: 'L4', name: 'Laura Vega',      interest: 'Estancia 5 noches',         channel: 'email',    time: '2 h',  resp: 'Carlos R.', ai: 'Seguimiento en 2h' },
      { id: 'L5', name: 'Miguel Torres',   interest: 'Habitación doble — junio',  channel: 'messenger', time: '3 h', resp: 'Marta L.', ai: 'Ofrecer descuento' },
    ],
    Seguimiento: [
      { id: 'L6', name: 'Karla Mendoza',   interest: 'Family room',                channel: 'whatsapp', time: 'ayer', resp: 'Carlos R.', ai: 'Promo temporada baja' },
    ],
    Reservado: [
      { id: 'L7', name: 'Eduardo Soto',    interest: 'Suite premium · Reservada',  channel: 'whatsapp', time: 'ayer', resp: 'Recepción', ai: 'Pre-llegada confirmada' },
    ],
    Perdido: [
      { id: 'L8', name: 'Patricia Núñez',  interest: 'Habitación · sin respuesta', channel: 'email',    time: '3 d',  resp: 'Marta L.', ai: 'Reactivar con promoción' },
    ],
  };

  const cols = [
    { id: 'Nuevo', tone: '#94A3B8' },
    { id: 'Interesado', tone: '#7C5CF2' },
    { id: 'Cotización enviada', tone: '#1E81E5' },
    { id: 'Seguimiento', tone: '#EA7A2C' },
    { id: 'Reservado', tone: '#16A34A' },
    { id: 'Perdido', tone: '#DC2626' },
  ];

  const detail = Object.values(leads).flat().find(l => l.id === selected) || leads.Nuevo[1];

  const channelIcon = (k) => {
    const map = { whatsapp: Ic3.ChWhatsapp, messenger: Ic3.ChMessenger, instagram: Ic3.ChInstagram, email: Ic3.ChEmail };
    const I = map[k] || Ic3.ChWhatsapp;
    return <I size={13}/>;
  };

  return (
    <div className="page fade-in">
      <div className="page-header__row">
        <div className="page-header">
          <h1>Leads</h1>
          <p>Seguimiento comercial multicanal</p>
        </div>
        <div className="page-header__actions">
          <button type="button" className="btn btn--ghost"><Ic3.Filter size={14}/> Filtros</button>
          <button type="button" className="btn btn--secondary"><Ic3.ListChecks size={14}/> Vista lista</button>
          <button type="button" className="btn btn--primary"><Ic3.Plus size={14}/> Nuevo lead</button>
        </div>
      </div>

      <div className="kpis" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Leads nuevos</div><div className="kpi__icon" style={{background: 'var(--sky-50)', color: 'var(--sky-600)'}}><Ic3.UserPlus size={16}/></div></div><div className="kpi__value">32</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><Ic3.ArrowUp size={12}/>12% <span className="kpi__sub">vs ayer</span></div><Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Leads calientes</div><div className="kpi__icon" style={{background: 'var(--rose-50)', color: 'var(--rose-600)'}}><Ic3.Heart size={16}/></div></div><div className="kpi__value">14</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><Ic3.ArrowUp size={12}/>8% <span className="kpi__sub">vs ayer</span></div><Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Cotizaciones enviadas</div><div className="kpi__icon" style={{background: 'var(--mint-50)', color: 'var(--mint-600)'}}><Ic3.Send size={16}/></div></div><div className="kpi__value">21</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><Ic3.ArrowUp size={12}/>15% <span className="kpi__sub">vs ayer</span></div><Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Seguimientos pendientes</div><div className="kpi__icon" style={{background: 'var(--peach-50)', color: 'var(--peach-600)'}}><Ic3.Clock size={16}/></div></div><div className="kpi__value">9</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--flat"><Ic3.ArrowRight size={12}/>+1 <span className="kpi__sub">vs ayer</span></div><Sparkline /></div></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16, alignItems: 'flex-start' }}>
        <div className="board">
          {cols.map(c => (
            <div key={c.id} className="board__col">
              <div className="board__col-head">
                <div className="board__col-title">
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: c.tone }} />
                  {c.id}
                </div>
                <span className="board__col-count">{leads[c.id].length}</span>
              </div>
              {leads[c.id].map(l => (
                <div key={l.id}
                  className={'lead-card' + (selected === l.id ? ' lead-card--selected' : '')}
                  onClick={() => setSelected(l.id)}>
                  <div className="lead-card__top">
                    <div className="lead-card__name">{l.name}</div>
                    <button type="button" className="icon-btn" style={{ width: 22, height: 22 }} onClick={e => e.stopPropagation()}><Ic3.MoreVertical size={13}/></button>
                  </div>
                  <div className="lead-card__interest">{l.interest}</div>
                  <div className="lead-card__bottom">
                    <span className="lead-card__channel">{channelIcon(l.channel)} {l.resp}</span>
                    <span className="lead-card__time">{l.time}</span>
                  </div>
                  <div className="lead-card__ai"><Ic3.Sparkles size={12}/> {l.ai}</div>
                </div>
              ))}
            </div>
          ))}
        </div>

        {/* Detail panel */}
        <div className="card" style={{ alignSelf: 'flex-start' }}>
          <div className="card__header">
            <div className="card__title">
              <div className="icon-chip icon-chip--violet" style={{ width: 28, height: 28 }}><Ic3.UserCircle size={14}/></div>
              {detail.name}
            </div>
            <button type="button" className="icon-btn" style={{ width: 28, height: 28 }}><Ic3.X size={14}/></button>
          </div>
          <div className="card__body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="kv-list">
              <div className="kv-row"><span className="kv-row__k">Canal</span><span className="kv-row__v">{channelIcon(detail.channel)} {detail.channel}</span></div>
              <div className="kv-row"><span className="kv-row__k">Interés</span><span className="kv-row__v">{detail.interest}</span></div>
              <div className="kv-row"><span className="kv-row__k">Último contacto</span><span className="kv-row__v">Hace {detail.time}</span></div>
              <div className="kv-row"><span className="kv-row__k">Responsable</span><span className="kv-row__v">{detail.resp}</span></div>
            </div>

            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Resumen IA</div>
              <div style={{ background: 'var(--violet-50)', borderRadius: 10, padding: '10px 12px', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <Ic3.Sparkles size={15} style={{ color: 'var(--violet-600)', marginTop: 2 }} />
                <span className="text-md" style={{ lineHeight: 1.5 }}>Cliente con alta intención de reservar. Próxima acción sugerida: <b>{detail.ai.toLowerCase()}</b>.</span>
              </div>
            </div>

            <div>
              <div className="muted text-sm fw-500" style={{ marginBottom: 8 }}>Historial breve</div>
              <div className="col gap-10">
                {[
                  { t: 'Lead generado por agente', s: 'Hoy, 11:42' },
                  { t: 'Disponibilidad consultada en Virtualia PMS', s: 'Hoy, 11:42' },
                  { t: 'Tarifa enviada al cliente', s: 'Hoy, 11:43' },
                ].map((h, i) => (
                  <div key={i} className="row gap-10" style={{ alignItems: 'flex-start' }}>
                    <div className="status-check" style={{ marginTop: 1 }}><Ic3.Check size={11} strokeWidth={2.6}/></div>
                    <div className="col"><span className="text-md fw-500">{h.t}</span><span className="muted text-sm">{h.s}</span></div>
                  </div>
                ))}
              </div>
            </div>

            <div className="col gap-8">
              <button type="button" className="btn btn--violet-soft btn--block"><Ic3.Plus size={14}/> Crear tarea</button>
              <button type="button" className="btn btn--secondary btn--block" onClick={() => toast('Lead enviado a recepción')}><Ic3.UserPlus size={14}/> Pasar a recepción</button>
              <button type="button" className="btn btn--ghost btn--block"><Ic3.Eye size={14}/> Ver en Virtualia PMS</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenIntegraciones = ScreenIntegraciones;
window.ScreenLeads = ScreenLeads;