/* global React, SaoriIcons, SaoriShell */
const IcInbox = SaoriIcons;
const { ChannelDot: ChDot, StatusChip } = SaoriShell;

/* ============================================================
   PANTALLA — Inbox (vista completa)
   ============================================================ */
function ScreenInbox({ toast }) {
  const [folder, setFolder] = React.useState('todas');
  const [selected, setSelected] = React.useState(0);

  const folderGroups = [
    {
      title: 'Conversaciones',
      items: [
        { id: 'todas',     label: 'Todas',          icon: IcInbox.Inbox,        count: 48 },
        { id: 'mias',      label: 'Asignadas a mí', icon: IcInbox.UserCircle,   count: 8 },
        { id: 'sin',       label: 'Sin asignar',    icon: IcInbox.UserPlus,     count: 12 },
        { id: 'no-leidas', label: 'No leídas',      icon: IcInbox.MessageCircle, count: 6 },
        { id: 'menciones', label: 'Menciones',      icon: IcInbox.Sparkles,     count: 2 },
        { id: 'cerradas',  label: 'Cerradas',       icon: IcInbox.Check,        count: 124 },
      ],
    },
    {
      title: 'Canales',
      items: [
        { id: 'wa',  label: 'WhatsApp',  icon: IcInbox.ChWhatsapp,  count: 22, tone: '#16A34A' },
        { id: 'me',  label: 'Messenger', icon: IcInbox.ChMessenger, count: 9,  tone: '#1E81E5' },
        { id: 'ig',  label: 'Instagram', icon: IcInbox.ChInstagram, count: 7,  tone: '#E11D74' },
        { id: 'em',  label: 'Email',     icon: IcInbox.ChEmail,     count: 8,  tone: '#475569' },
        { id: 'web', label: 'Web Chat',  icon: IcInbox.ChWebChat,   count: 2,  tone: '#7C5CF2' },
      ],
    },
    {
      title: 'Etiquetas',
      items: [
        { id: 'reserva', label: 'Reserva',         dot: '#7C5CF2', count: 18 },
        { id: 'queja',   label: 'Queja / soporte', dot: '#E11D74', count: 3 },
        { id: 'evento',  label: 'Eventos',         dot: '#EA7A2C', count: 6 },
        { id: 'vip',     label: 'VIP',             dot: '#C68A0E', count: 9 },
      ],
    },
  ];

  const convs = [
    { id: 0, name: 'Paola Gutiérrez', preview: 'Hola, ¿tienen disponibilidad para este fin de semana? Somos 2 adultos.', time: '11:32', channel: 'whatsapp', unread: 2, ini: 'PG', color: '#F472B6', priority: 'alta', tags: ['Reserva'], assigned: 'Agente IA', sla: 'Responder en 5 min' },
    { id: 1, name: 'Carlos Mendoza',  preview: '¿El check-in es a partir de qué hora? Llegamos del vuelo de las 11.', time: '11:15', channel: 'messenger', unread: 1, ini: 'CM', color: '#60A5FA', priority: 'media', tags: ['Reserva'], assigned: 'Agente IA' },
    { id: 2, name: 'Mariana López',   preview: 'Vi su promoción de verano en Instagram, ¿aplica para 2 noches?', time: '10:58', channel: 'instagram', unread: 0, ini: 'ML', color: '#A78BFA', priority: 'media', tags: ['Reserva'], assigned: 'Marta L.' },
    { id: 3, name: 'Jorge Ramírez',   preview: 'Buen día, requiero la factura de mi estancia del 5 al 7 de junio.', time: '10:21', channel: 'email', unread: 1, ini: 'JR', color: '#FB7185', priority: 'baja', tags: ['Facturación'], assigned: 'Recepción' },
    { id: 4, name: 'Lucía Fernández', preview: '¿Tienen servicio de transporte al aeropuerto?', time: '09:45', channel: 'whatsapp', unread: 0, ini: 'LF', color: '#34D399', priority: 'baja', tags: ['Servicios'], assigned: 'Agente IA' },
    { id: 5, name: 'Roberto Silva',   preview: 'La habitación tenía el aire roto, quiero reportarlo formalmente.', time: '09:12', channel: 'whatsapp', unread: 3, ini: 'RS', color: '#FB923C', priority: 'urgente', tags: ['Queja'], assigned: 'Recepción' },
    { id: 6, name: 'Andrea Castillo', preview: 'Quisiera reservar el paquete romántico para mi aniversario.', time: 'Ayer', channel: 'whatsapp', unread: 0, ini: 'AC', color: '#F87171', priority: 'media', tags: ['Reserva', 'VIP'], assigned: 'Marta L.' },
    { id: 7, name: 'Diego Hernández', preview: 'Gracias por la cotización, voy a confirmar con mi pareja.', time: 'Ayer', channel: 'whatsapp', unread: 0, ini: 'DH', color: '#22D3EE', priority: 'media', tags: ['Reserva'], assigned: 'Carlos R.' },
  ];

  const sel = convs[selected] || convs[0];

  return (
    <div className="page fade-in" style={{ minHeight: 'calc(100vh - 100px)' }}>
      <div className="page-header__row">
        <div className="page-header">
          <h1>Inbox</h1>
          <p>Centro de mensajería omnicanal</p>
        </div>
        <div className="page-header__actions">
          <button type="button" className="btn btn--ghost"><IcInbox.Filter size={14}/> Filtros</button>
          <button type="button" className="btn btn--secondary"><IcInbox.Refresh size={14}/> Sincronizar</button>
          <button type="button" className="btn btn--primary"><IcInbox.Plus size={14}/> Nueva conversación</button>
        </div>
      </div>

      <div className="inbox-shell">
        {/* Folders */}
        <aside className="inbox-folders">
          {folderGroups.map(g => (
            <div key={g.title}>
              <div className="folder-group-title">{g.title}</div>
              {g.items.map(it => (
                <button
                  key={it.id}
                  type="button"
                  className={'folder-item' + (folder === it.id ? ' folder-item--active' : '')}
                  onClick={() => setFolder(it.id)}>
                  {it.icon ? <it.icon size={15} strokeWidth={folder === it.id ? 2 : 1.7} style={it.tone ? { color: it.tone } : null} />
                            : <span className="folder-tag-dot" style={{ background: it.dot }}/>}
                  <span>{it.label}</span>
                  <span className="folder-item__count">{it.count}</span>
                </button>
              ))}
            </div>
          ))}
        </aside>

        {/* Conversation list */}
        <div className="inbox-list">
          <div className="inbox-list__header">
            <div className="row row--between">
              <div className="fw-600" style={{ fontSize: 14 }}>
                {folderGroups[0].items.find(i => i.id === folder)?.label || 'Resultados'}
                <span className="muted text-sm" style={{ fontWeight: 400, marginLeft: 6 }}>· {convs.length}</span>
              </div>
              <button type="button" className="muted text-sm row gap-4">Más recientes <IcInbox.ChevronDown size={13}/></button>
            </div>
            <div className="search" style={{ maxWidth: 'none' }}>
              <IcInbox.Search size={15} className="search__icon" />
              <input placeholder="Buscar en esta carpeta" style={{ padding: '9px 14px 9px 38px', fontSize: 13 }}/>
            </div>
          </div>
          <div className="inbox-list__items">
            {convs.map((c, i) => (
              <div key={c.id}
                className={'conv-item' + (selected === i ? ' conv-item--active' : '')}
                onClick={() => setSelected(i)}>
                <div className="avatar" style={{ background: c.color }}>
                  {c.ini}
                  <ChDot kind={c.channel} size={16} />
                </div>
                <div className="col" style={{ minWidth: 0 }}>
                  <div className="row row--between">
                    <div className="conv-item__name">{c.name}</div>
                    <div className="conv-item__time">{c.time}</div>
                  </div>
                  <div className="conv-item__preview">{c.preview}</div>
                  <div className="row gap-6" style={{ marginTop: 6 }}>
                    {c.tags.map(t => <span key={t} className="pill">{t}</span>)}
                    {c.priority === 'urgente' && <span className="pill pill--rose">● Urgente</span>}
                    {c.priority === 'alta' && <span className="pill pill--peach">● Alta</span>}
                  </div>
                </div>
                {c.unread > 0 && <div className="conv-item__unread">{c.unread}</div>}
              </div>
            ))}
          </div>
        </div>

        {/* Thread */}
        <div className="inbox-thread">
          <div className="thread__header">
            <div className="thread__contact">
              <div className="avatar" style={{ background: sel.color }}>
                {sel.ini}
                <ChDot kind={sel.channel} size={16} />
              </div>
              <div className="col">
                <div className="thread__contact-name">{sel.name}</div>
                <div className="row gap-6 muted text-sm">
                  <span style={{ textTransform: 'capitalize' }}>{sel.channel}</span> ·
                  <span className="row gap-4"><span className="dot-pulse"/> En línea</span> ·
                  Asignada a <b style={{ color: 'var(--text)', fontWeight: 600 }}>{sel.assigned}</b>
                </div>
              </div>
            </div>
            <div className="row gap-8">
              <button type="button" className="btn btn--ghost btn--sm"><IcInbox.UserPlus size={13}/> Asignar</button>
              <button type="button" className="btn btn--ghost btn--sm"><IcInbox.Tag size={13}/> Etiquetar</button>
              <button type="button" className="btn btn--secondary btn--sm" onClick={() => toast('Conversación cerrada')}><IcInbox.Check size={13}/> Resolver</button>
              <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><IcInbox.MoreVertical size={15}/></button>
            </div>
          </div>

          <div className="thread__messages">
            <div className="day-divider">Hoy · 11:32</div>

            <div className="bubble bubble--in">
              Hola, ¿tienen disponibilidad para este fin de semana? Somos 2 adultos.
              <span className="bubble__time">11:31 AM</span>
            </div>

            <div className="bubble bubble--out">
              ¡Hola Paola! 👋 Con gusto te ayudo a revisar la disponibilidad para este fin de semana. Permíteme un momento mientras consulto.
              <span className="bubble__time">11:32 AM ✓✓</span>
            </div>

            <div className="bubble bubble--in">
              Perfecto, también me gustaría saber si tienen desayuno incluido y si hay estacionamiento.
              <span className="bubble__time">11:33 AM</span>
            </div>

            {/* AI tool call card · tool read-only diseñada (no consulta en vivo) */}
            <div style={{ alignSelf: 'flex-start', maxWidth: '85%', background: 'var(--violet-50)', border: '1px solid var(--violet-100)', borderRadius: 12, padding: '10px 12px', display: 'flex', gap: 10, alignItems: 'center' }}>
              <div className="icon-chip icon-chip--violet" style={{ width: 30, height: 30, background: '#fff' }}><IcInbox.Database size={14}/></div>
              <div className="col" style={{ flex: 1, minWidth: 0 }}>
                <div className="mono-token">virtualia.pms.getAvailability</div>
                <div className="text-sm muted">2 habitaciones · vista mar · $3,200 MXN / noche</div>
              </div>
              <StatusChip state="disenado" />
            </div>

            <div className="bubble bubble--out">
              Tenemos 2 opciones disponibles para sábado y domingo:<br/>
              · <b>Habitación vista mar</b> — $3,200 / noche<br/>
              · <b>Suite Junior</b> — $4,500 / noche<br/>
              Ambas incluyen <b>desayuno buffet</b> 🍳 y <b>estacionamiento gratuito</b> 🅿️.
              <span className="bubble__time">11:34 AM ✓✓</span>
            </div>

            <div className="bubble bubble--in">
              ¡Qué buenas opciones! La vista al mar suena perfecta. ¿Cómo procedo para reservar?
              <span className="bubble__time">11:36 AM</span>
            </div>

            <div className="ai-suggestion-label">
              <IcInbox.Sparkles size={13}/> Sugerencia de respuesta IA
            </div>
            <div style={{ alignSelf: 'flex-end', maxWidth: '75%', border: '1px dashed var(--violet-300)', background: '#fff', borderRadius: 14, padding: '10px 14px', fontSize: 13.5, lineHeight: 1.5 }}>
              Me alegra mucho 🌅 Te voy a pasar con recepción para confirmar la reserva y los datos de la huésped. Te tomará menos de 2 minutos.
              <div className="row gap-6" style={{ marginTop: 8 }}>
                <button type="button" className="btn btn--violet-soft btn--sm" onClick={() => toast('Respuesta enviada')}><IcInbox.Check size={12}/> Aprobar y enviar</button>
                <button type="button" className="btn btn--ghost btn--sm"><IcInbox.Pencil size={12}/> Editar</button>
                <button type="button" className="btn btn--ghost btn--sm"><IcInbox.Refresh size={12}/> Regenerar</button>
              </div>
            </div>
          </div>

          <div className="composer">
            <div className="composer__tabs">
              <div className="tab tab--active" style={{ padding: '8px 0' }}>Responder</div>
              <div className="tab" style={{ padding: '8px 0' }}>Nota interna</div>
              <div className="tab" style={{ padding: '8px 0' }}><IcInbox.Sparkles size={13} style={{ color: 'var(--violet-600)' }}/> Plantillas</div>
            </div>
            <div className="composer__inner">
              <textarea className="composer__input" rows={2} placeholder="Escribe tu mensaje a Paola..." />
              <div className="composer__actions">
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><IcInbox.Smile size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><IcInbox.Paperclip size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><IcInbox.Bookmark size={16}/></button>
                <button type="button" className="icon-btn" style={{ width: 32, height: 32 }}><IcInbox.Zap size={16}/></button>
                <button type="button" className="btn btn--ghost btn--sm" style={{ marginLeft: 4 }}><IcInbox.Sparkles size={13}/> Mejorar con IA</button>
                <button type="button" className="btn btn--primary" style={{ marginLeft: 'auto' }}>Enviar <IcInbox.Send size={13}/></button>
              </div>
            </div>
          </div>
        </div>

        {/* Context panel */}
        <aside className="inbox-context">
          <div className="context-section">
            <div className="row gap-12">
              <div className="avatar" style={{ background: sel.color, width: 48, height: 48, fontSize: 15 }}>{sel.ini}</div>
              <div className="col" style={{ flex: 1, minWidth: 0 }}>
                <div className="fw-600" style={{ fontSize: 15 }}>{sel.name}</div>
                <div className="muted text-sm">Cliente potencial · MX</div>
                <div className="row gap-6" style={{ marginTop: 6 }}>
                  <span className="pill pill--violet">VIP probable</span>
                  <span className="pill pill--green">Nuevo</span>
                </div>
              </div>
            </div>
            <div className="row gap-6" style={{ marginTop: 14 }}>
              <button type="button" className="btn btn--ghost btn--sm btn--block"><IcInbox.Phone size={13}/> Llamar</button>
              <button type="button" className="btn btn--ghost btn--sm btn--block"><IcInbox.Mail size={13}/> Email</button>
              <button type="button" className="btn btn--ghost btn--sm btn--block"><IcInbox.UserCircle size={13}/> Perfil</button>
            </div>
          </div>

          <div className="context-section">
            <div className="context-section__title">Información del contacto</div>
            <div className="kv-list">
              <div className="kv-row"><span className="kv-row__k">Teléfono</span><span className="kv-row__v">+52 744 220 1187</span></div>
              <div className="kv-row"><span className="kv-row__k">Email</span><span className="kv-row__v">paola.g@mail.com</span></div>
              <div className="kv-row"><span className="kv-row__k">Idioma</span><span className="kv-row__v">Español</span></div>
              <div className="kv-row"><span className="kv-row__k">Zona horaria</span><span className="kv-row__v">GMT-6 · CDMX</span></div>
              <div className="kv-row"><span className="kv-row__k">Primer contacto</span><span className="kv-row__v">Hoy, 11:31</span></div>
            </div>
          </div>

          <div className="context-section">
            <div className="row row--between" style={{ marginBottom: 10 }}>
              <div className="context-section__title" style={{ marginBottom: 0 }}>Lead asociado</div>
              <span className="badge badge--violet">En seguimiento</span>
            </div>
            <div style={{ padding: 12, background: 'var(--violet-50)', borderRadius: 10, border: '1px solid var(--violet-100)' }}>
              <div className="fw-600 text-md">Suite vista mar · 2 noches</div>
              <div className="muted text-sm" style={{ marginTop: 4 }}>Estado: Cotización enviada</div>
              <div className="row gap-6" style={{ marginTop: 10 }}>
                <span className="pill pill--violet">$6,400 MXN</span>
                <span className="pill">Sábado–Domingo</span>
              </div>
            </div>
          </div>

          <div className="context-section">
            <div className="row row--between" style={{ marginBottom: 10 }}>
              <div className="context-section__title" style={{ marginBottom: 0 }}>Tools sugeridas · read-only</div>
              <StatusChip state="demo" label="Demo" />
            </div>
            <div className="col gap-10">
              {[
                { icon: IcInbox.Database, t: 'virtualia.pms.getAvailability', s: '11:33 AM', tone: 'mint' },
                { icon: IcInbox.Tag,      t: 'virtualia.pms.getRates',        s: '11:33 AM', tone: 'rose' },
                { icon: IcInbox.UserPlus, t: 'hub.leads.create',              s: '11:34 AM', tone: 'violet' },
              ].map((a, i) => (
                <div key={i} className="row gap-10">
                  <div className={'icon-chip icon-chip--' + a.tone}><a.icon size={14}/></div>
                  <div className="col" style={{ flex: 1, minWidth: 0 }}>
                    <span className="mono-token" style={{ fontSize: 11.5 }}>{a.t}</span>
                    <span className="muted" style={{ fontSize: 11.5 }}>{a.s}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.ScreenInbox = ScreenInbox;