/* global React, SaoriIcons, SaoriShell */
const IcCl = SaoriIcons;
const { ChannelDot: ChDotCl } = SaoriShell;

/* ============================================================
   PANTALLA — Clientes (base unificada de contactos)
   ============================================================ */
function ScreenClientes({ toast }) {
  const contacts = [
    { id: 'K1', name: 'Paola Gutiérrez',     channel: 'whatsapp',  email: 'p***@mail.com',         phone: '+52 744 *** 1187', leads: 2, last: 'Hoy, 11:33',   status: 'Nuevo',  color: '#F472B6', ini: 'PG', lang: 'Español',  city: 'CDMX',         first: 'Hoy', vip: false, tag: 'Reserva activa' },
    { id: 'K2', name: 'Carlos Mendoza',      channel: 'messenger', email: 'c***@gmail.com',        phone: '+52 55 *** 4421',  leads: 1, last: 'Hoy, 11:15',   status: 'Activo', color: '#60A5FA', ini: 'CM', lang: 'Español',  city: 'Monterrey',    first: '14 mar 2025', vip: false, tag: 'Check-in pendiente' },
    { id: 'K3', name: 'Andrea Castillo',     channel: 'whatsapp',  email: 'a***@outlook.com',      phone: '+52 33 *** 0921',  leads: 3, last: 'Ayer 19:42',   status: 'VIP',    color: '#F87171', ini: 'AC', lang: 'Español',  city: 'Guadalajara',  first: '02 ene 2024', vip: true,  tag: 'Aniversario · jun' },
    { id: 'K4', name: 'Eduardo Soto',        channel: 'whatsapp',  email: 'e***@empresa.mx',       phone: '+52 81 *** 7733',  leads: 1, last: 'Ayer 16:10',   status: 'VIP',    color: '#A78BFA', ini: 'ES', lang: 'Español',  city: 'Monterrey',    first: '10 sep 2023', vip: true,  tag: 'Suite premium · 5 estancias' },
    { id: 'K5', name: 'Mariana López',       channel: 'instagram', email: 'm***@mail.com',         phone: '+52 998 *** 2218', leads: 1, last: 'Hoy, 10:58',   status: 'Nuevo',  color: '#A78BFA', ini: 'ML', lang: 'Español',  city: 'Cancún',       first: 'Hoy', vip: false, tag: 'Promo verano' },
    { id: 'K6', name: 'Jorge Ramírez',       channel: 'email',     email: 'j***@corporativo.mx',   phone: '+52 55 *** 9012',  leads: 0, last: '10 may 2026',  status: 'Activo', color: '#FB7185', ini: 'JR', lang: 'Español',  city: 'CDMX',         first: '22 abr 2024', vip: false, tag: 'Facturación' },
    { id: 'K7', name: 'Lucía Fernández',     channel: 'whatsapp',  email: 'l***@mail.com',         phone: '+52 744 *** 5562', leads: 1, last: 'Hoy, 09:45',   status: 'Activo', color: '#34D399', ini: 'LF', lang: 'Español',  city: 'Acapulco',     first: '08 dic 2024', vip: false, tag: 'Transporte aeropuerto' },
    { id: 'K8', name: 'Roberto Silva',       channel: 'whatsapp',  email: 'r***@mail.com',         phone: '+52 222 *** 1190', leads: 0, last: 'Hoy, 09:12',   status: 'Activo', color: '#FB923C', ini: 'RS', lang: 'Español',  city: 'Puebla',       first: '03 feb 2025', vip: false, tag: 'Queja registrada' },
  ];

  const [selected, setSelected] = React.useState('K3');
  const sel = contacts.find(c => c.id === selected) || contacts[0];

  const statusBadge = (s) => {
    if (s === 'VIP')    return <span className="badge badge--amber"><IcCl.Star size={11} strokeWidth={2.4}/> VIP</span>;
    if (s === 'Nuevo')  return <span className="badge badge--violet">Nuevo</span>;
    return <span className="badge badge--slate">Cliente</span>;
  };

  return (
    <div className="page fade-in">
      <div className="page-header__row">
        <div className="page-header">
          <h1>Clientes</h1>
          <p>Base unificada de contactos · Hotel Demo</p>
        </div>
        <div className="page-header__actions">
          <button type="button" className="btn btn--ghost"><IcCl.Filter size={14}/> Filtros</button>
          <button type="button" className="btn btn--secondary"><IcCl.Download size={14}/> Exportar</button>
          <button type="button" className="btn btn--primary"><IcCl.Plus size={14}/> Nuevo contacto</button>
        </div>
      </div>

      <div className="kpis" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Contactos totales</div><div className="kpi__icon" style={{ background: 'var(--violet-50)', color: 'var(--violet-600)' }}><IcCl.UserCircle size={16}/></div></div><div className="kpi__value">847</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcCl.ArrowUp size={12}/>9% <span className="kpi__sub">vs mes</span></div><SaoriShell.Sparkline values={[5,6,7,6,8,7,9,8,10,9,11,12]} /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Nuevos este mes</div><div className="kpi__icon" style={{ background: 'var(--sky-50)', color: 'var(--sky-600)' }}><IcCl.UserPlus size={16}/></div></div><div className="kpi__value">64</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcCl.ArrowUp size={12}/>14%</div><SaoriShell.Sparkline /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">Con lead activo</div><div className="kpi__icon" style={{ background: 'var(--mint-50)', color: 'var(--mint-600)' }}><IcCl.Heart size={16}/></div></div><div className="kpi__value">128</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--up"><IcCl.ArrowUp size={12}/>7%</div><SaoriShell.Sparkline values={[3,4,3,5,4,6,5,7,6,8,7,9]} /></div></div>
        <div className="kpi"><div className="kpi__top"><div className="kpi__label">VIP</div><div className="kpi__icon" style={{ background: 'var(--amber-50)', color: 'var(--amber-600)' }}><IcCl.Star size={16}/></div></div><div className="kpi__value">42</div><div className="kpi__bottom"><div className="kpi__delta kpi__delta--flat"><IcCl.ArrowRight size={12}/>+2</div><SaoriShell.Sparkline values={[4,4,5,5,4,5,6,5,6,6,5,6]} /></div></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 16, alignItems: 'flex-start' }}>
        {/* Table */}
        <div className="card" style={{ overflow: 'hidden' }}>
          <div className="card__header" style={{ padding: '14px 18px' }}>
            <div className="row gap-12">
              <div className="card__title">Contactos</div>
              <div className="row gap-6">
                <button type="button" className="btn btn--violet-soft btn--sm">Todos · 847</button>
                <button type="button" className="btn btn--ghost btn--sm">Con lead · 128</button>
                <button type="button" className="btn btn--ghost btn--sm">VIP · 42</button>
                <button type="button" className="btn btn--ghost btn--sm">Nuevos · 64</button>
              </div>
            </div>
            <div className="row gap-8">
              <div className="search" style={{ maxWidth: 240 }}>
                <IcCl.Search size={14} className="search__icon" />
                <input placeholder="Buscar contacto..." style={{ padding: '8px 12px 8px 36px', fontSize: 12.5 }} />
              </div>
              <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><IcCl.MoreVertical size={14}/></button>
            </div>
          </div>

          <div className="contacts-table">
            <div className="contacts-table__head">
              <span style={{ flex: '0 0 24px' }}><input type="checkbox" /></span>
              <span style={{ flex: '0 0 200px' }}>Nombre</span>
              <span style={{ flex: '0 0 70px', textAlign: 'center' }}>Canal</span>
              <span style={{ flex: '1 1 160px' }}>Email</span>
              <span style={{ flex: '1 1 140px' }}>Teléfono</span>
              <span style={{ flex: '0 0 70px', textAlign: 'center' }}>Leads</span>
              <span style={{ flex: '0 0 110px' }}>Último contacto</span>
              <span style={{ flex: '0 0 90px' }}>Estado</span>
              <span style={{ flex: '0 0 28px' }}></span>
            </div>

            {contacts.map(c => (
              <div key={c.id}
                className={'contacts-table__row' + (selected === c.id ? ' contacts-table__row--active' : '')}
                onClick={() => setSelected(c.id)}>
                <span style={{ flex: '0 0 24px' }} onClick={e => e.stopPropagation()}><input type="checkbox" /></span>
                <span style={{ flex: '0 0 200px', display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                  <div className="avatar" style={{ background: c.color, width: 28, height: 28, fontSize: 11 }}>{c.ini}</div>
                  <div className="col" style={{ minWidth: 0 }}>
                    <span className="fw-600 text-md" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</span>
                    <span className="muted" style={{ fontSize: 11.5 }}>{c.city}</span>
                  </div>
                </span>
                <span style={{ flex: '0 0 70px', display: 'flex', justifyContent: 'center' }}>
                  <ChDotCl kind={c.channel} size={20} />
                </span>
                <span className="muted text-sm" style={{ flex: '1 1 160px', fontFamily: 'var(--font-mono)' }}>{c.email}</span>
                <span className="muted text-sm" style={{ flex: '1 1 140px', fontFamily: 'var(--font-mono)' }}>{c.phone}</span>
                <span style={{ flex: '0 0 70px', textAlign: 'center' }}>
                  {c.leads > 0
                    ? <span className="badge badge--violet" style={{ padding: '2px 8px' }}>{c.leads}</span>
                    : <span className="muted text-sm">—</span>}
                </span>
                <span className="muted text-sm" style={{ flex: '0 0 110px' }}>{c.last}</span>
                <span style={{ flex: '0 0 90px' }}>{statusBadge(c.status)}</span>
                <span style={{ flex: '0 0 28px', display: 'flex', justifyContent: 'flex-end' }} onClick={e => e.stopPropagation()}>
                  <button type="button" className="icon-btn" style={{ width: 24, height: 24 }}><IcCl.MoreVertical size={13}/></button>
                </span>
              </div>
            ))}
          </div>

          <div className="row row--between" style={{ padding: '12px 18px', borderTop: '1px solid var(--border)', color: 'var(--text-muted)', fontSize: 12.5 }}>
            <span>Mostrando 8 de 847 contactos</span>
            <div className="row gap-6">
              <button type="button" className="btn btn--ghost btn--sm" disabled style={{ opacity: 0.5 }}><IcCl.ChevronRight size={12} style={{ transform: 'rotate(180deg)' }}/> Anterior</button>
              <button type="button" className="btn btn--ghost btn--sm">Siguiente <IcCl.ChevronRight size={12}/></button>
            </div>
          </div>
        </div>

        {/* Detail panel */}
        <div className="card" style={{ alignSelf: 'flex-start' }}>
          <div style={{ padding: '20px 20px 16px', borderBottom: '1px solid var(--border)' }}>
            <div className="row gap-12">
              <div className="avatar" style={{ background: sel.color, width: 52, height: 52, fontSize: 17 }}>{sel.ini}</div>
              <div className="col" style={{ flex: 1, minWidth: 0 }}>
                <div className="fw-600" style={{ fontSize: 16 }}>{sel.name}</div>
                <div className="muted text-sm">Cliente · {sel.city}, MX</div>
                <div className="row gap-6" style={{ marginTop: 8, flexWrap: 'wrap' }}>
                  {statusBadge(sel.status)}
                  {sel.leads > 0 && <span className="pill pill--violet">{sel.leads} lead{sel.leads > 1 ? 's' : ''}</span>}
                </div>
              </div>
            </div>
            <div className="row gap-6" style={{ marginTop: 14 }}>
              <button type="button" className="btn btn--ghost btn--sm btn--block"><IcCl.Phone size={13}/> Llamar</button>
              <button type="button" className="btn btn--ghost btn--sm btn--block"><IcCl.Mail size={13}/> Email</button>
              <button type="button" className="btn btn--violet-soft btn--sm btn--block" onClick={() => toast('Conversación abierta')}>
                <IcCl.MessageSquare size={13}/> Mensaje
              </button>
            </div>
          </div>

          <div className="context-section">
            <div className="context-section__title">Información</div>
            <div className="kv-list">
              <div className="kv-row"><span className="kv-row__k">Teléfono</span><span className="kv-row__v" style={{ fontFamily: 'var(--font-mono)' }}>{sel.phone}</span></div>
              <div className="kv-row"><span className="kv-row__k">Email</span><span className="kv-row__v" style={{ fontFamily: 'var(--font-mono)' }}>{sel.email}</span></div>
              <div className="kv-row"><span className="kv-row__k">Idioma</span><span className="kv-row__v">{sel.lang}</span></div>
              <div className="kv-row"><span className="kv-row__k">Canal principal</span><span className="kv-row__v row gap-6"><ChDotCl kind={sel.channel} size={16} /> <span style={{ textTransform: 'capitalize' }}>{sel.channel}</span></span></div>
              <div className="kv-row"><span className="kv-row__k">Primer contacto</span><span className="kv-row__v">{sel.first}</span></div>
            </div>
          </div>

          <div className="context-section">
            <div className="row row--between" style={{ marginBottom: 10 }}>
              <div className="context-section__title" style={{ marginBottom: 0 }}>Leads asociados</div>
              <span className="muted text-sm">{sel.leads}</span>
            </div>
            {sel.leads > 0 ? (
              <div className="col gap-8">
                <div style={{ padding: 12, background: 'var(--violet-50)', borderRadius: 10, border: '1px solid var(--violet-100)' }}>
                  <div className="row row--between">
                    <div className="fw-600 text-md">{sel.tag}</div>
                    <span className="badge badge--violet">En seguimiento</span>
                  </div>
                  <div className="muted text-sm" style={{ marginTop: 4 }}>Última actualización: {sel.last}</div>
                </div>
                {sel.leads > 1 && (
                  <div style={{ padding: 12, background: 'var(--surface-2)', borderRadius: 10, border: '1px solid var(--border)' }}>
                    <div className="row row--between">
                      <div className="fw-500 text-md muted">Estancia previa · feb 2026</div>
                      <span className="badge badge--green">Cerrado</span>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <div className="muted text-sm">Este contacto no tiene leads activos.</div>
            )}
          </div>

          <div className="context-section">
            <div className="context-section__title">Conversaciones recientes</div>
            <div className="col gap-10">
              {[
                { icon: IcCl.MessageSquare, t: 'Última consulta de disponibilidad', s: sel.last, tone: 'violet' },
                { icon: IcCl.Check,         t: 'Cotización enviada',                 s: 'Hace 1 día',  tone: 'green' },
                { icon: IcCl.UserPlus,      t: 'Lead creado por agente',             s: 'Hace 1 día',  tone: 'sky' },
              ].map((a, i) => (
                <div key={i} className="row gap-10">
                  <div className={'icon-chip icon-chip--' + a.tone} style={{ width: 28, height: 28 }}><a.icon size={13}/></div>
                  <div className="col" style={{ flex: 1 }}>
                    <span className="text-sm fw-500">{a.t}</span>
                    <span className="muted" style={{ fontSize: 11.5 }}>{a.s}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="context-section">
            <div className="context-section__title">Notas internas</div>
            <textarea
              rows={3}
              placeholder="Agrega una nota visible solo para tu equipo..."
              style={{ width: '100%', padding: '10px 12px', border: '1px solid var(--border)', borderRadius: 10, fontSize: 13, background: 'var(--surface-2)', resize: 'vertical' }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenClientes = ScreenClientes;