/* Sidebar — history list, brand, search, footer with bridge card */

const Sidebar = ({ collapsed, conversations, activeId, onSelect, onNew, onGoHome, bridge, onOpenExtension, onOpenProfile, onOpenStyle, onOpenUsage, onOpenAdmin, onDelete, onOpenCrud, user, onLogout }) => {
  const [search, setSearch] = React.useState('');
  const filtered = conversations.filter(c =>
    !search || (c.title || '').toLowerCase().includes(search.toLowerCase())
  );
  const pinned = filtered.filter(c => c.pinned);
  const rest   = filtered.filter(c => !c.pinned);

  return (
    <aside className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
      <div className="sb-head">
        <div className="brand" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 24 }}>
          <button onClick={onGoHome} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, width: '90%', maxWidth: 220 }} title="Tela inicial">
            <img src="/logo.png" style={{width: '100%', height: 'auto', borderRadius: '4px', objectFit: 'contain'}} alt="SynapIA" />
          </button>
        </div>

        <button className="btn-new" onClick={onNew}>
          <I.plus size={14} sw={2}/>
          <span>Nova conversa</span>
          <span className="kbd">⌘N</span>
        </button>

        <div className="sb-search">
          <I.search size={14}/>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Buscar conversas…"/>
        </div>
      </div>

      <div className="sb-list">
        {pinned.length > 0 && (
          <>
            <div className="sb-section">FIXADAS</div>
            {pinned.map(c => (
              <ConvItem key={c.id} c={c} active={c.id === activeId} onSelect={onSelect} onDelete={onDelete}/>
            ))}
          </>
        )}
        <div className="sb-section">RECENTES</div>
        {rest.map(c => (
          <ConvItem key={c.id} c={c} active={c.id === activeId} onSelect={onSelect} onDelete={onDelete}/>
        ))}
        {filtered.length === 0 && (
          <div className="sb-empty">Nenhuma conversa.</div>
        )}
      </div>

      <div className="sb-foot">
        {bridge ? (
          <div className="bridge-card">
            <div className="bridge-row">
              <I.process size={14}/>
              <span className="bridge-label">PROCESSO ATIVO</span>
              <span className="bridge-dot"/>
            </div>
            <div className="bridge-num">{bridge.processNumber}</div>
            <div className="bridge-meta">
              {bridge.platform} · {bridge.docCount} docs · {bridge.tlCount} andamentos
            </div>
          </div>
        ) : (
          <button className="bridge-empty" onClick={onOpenExtension}>
            <I.link size={14}/>
            <span>Conectar processo da extensão</span>
          </button>
        )}
        <button className="sb-foot-link" onClick={onOpenProfile}>
          <I.user size={13}/>
          <span>Perfil & estilo</span>
        </button>
        <button className="sb-foot-link" onClick={onOpenStyle}>
          <I.book size={13}/>
          <span>Aprender meu estilo</span>
        </button>
        <button className="sb-foot-link" onClick={onOpenUsage}>
          <I.calc size={13}/>
          <span>Plano & uso</span>
        </button>
        {user?.role === 'admin' && (
          <button className="sb-foot-link" onClick={onOpenAdmin} style={{ color: 'var(--accent)' }}>
            <I.settings size={13}/>
            <span>Gerenciar usuários</span>
          </button>
        )}
        <div className="sb-user-mini">
          <I.user size={13}/>
          <span>{user?.name || user?.email || 'Usuario'}</span>
        </div>
        <button className="sb-foot-link" onClick={onLogout}>
          <I.x size={13}/>
          <span>Sair da conta</span>
        </button>
        <div className="sb-foot-version">
          <span className="dot-online"/>
          v3.4 · ONLINE
        </div>
      </div>
    </aside>
  );
};

const ConvItem = ({ c, active, onSelect, onDelete }) => {
  const [confirming, setConfirming] = React.useState(false);

  const handleDelete = (e) => {
    e.stopPropagation();
    if (!confirming) {
      setConfirming(true);
      // Reseta após 3 segundos se não clicar de novo
      setTimeout(() => setConfirming(false), 3000);
    } else {
      onDelete(c.id);
      setConfirming(false);
    }
  };

  return (
    <div className={`conv-item-wrap ${active ? 'active' : ''} ${confirming ? 'confirming' : ''}`}>
      <button className="conv-item" onClick={() => onSelect(c.id)}>
        <span className="conv-title-text">{c.title}</span>
        <span className="conv-when">{c.when}</span>
      </button>
      {onDelete && (
        <button 
          className={`conv-del ${confirming ? 'active' : ''}`} 
          title={confirming ? "Confirmar exclusão" : "Excluir conversa"} 
          onClick={handleDelete}
        >
          {confirming ? <I.check size={11} sw={2.5}/> : <I.trash size={11}/>}
        </button>
      )}
    </div>
  );
};

window.Sidebar = Sidebar;