// Tela: Casos — tickets / suporte

const { useState: useStateCasos } = React;

function NovoCasoModal({ onClose, onCreate }) {
  const [assunto, setAssunto] = useStateCasos('');
  const [empresa, setEmpresa] = useStateCasos('');
  const [prioridade, setPrioridade] = useStateCasos('Média');
  const [desc, setDesc] = useStateCasos('');
  const toast = useToast();

  const PRIOS = ['Baixa', 'Média', 'Alta', 'Crítica'];
  const PRIO_CLS = { Baixa: 'pill', Média: 'pill-blue', Alta: 'pill-yellow', Crítica: 'pill-pink' };
  const valid = assunto.trim().length > 0 && empresa.trim().length > 0;

  const submit = () => {
    if (!valid) return;
    const id = `CASO-${Math.floor(2800+Math.random()*100)}`;
    const novo = {
      id,
      assunto: assunto.trim(),
      empresa: empresa.trim(),
      prioridade,
      status: 'Aberto',
      atualizado: 'agora mesmo',
      responsavel: CONTATOS[0],
    };
    if (onCreate) onCreate(novo);
    toast(`Caso ${id} aberto ✓`);
    onClose();
  };

  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Novo <em>Caso</em></div>
            <div className="modal-sub muted">Registre um ticket de atendimento</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>

        <div className="form-grid">
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Assunto / Título *</label>
            <input className="ezz-input" placeholder="Ex: Falha no portal após atualização" value={assunto} onChange={e => setAssunto(e.target.value)} autoFocus />
          </div>
          <div className="field">
            <label className="field-lbl">Empresa *</label>
            <input className="ezz-input" placeholder="Ex: Tecnoluz Solar" value={empresa} onChange={e => setEmpresa(e.target.value)} />
          </div>
          <div className="field">
            <label className="field-lbl">Prioridade</label>
            <div className="row" style={{gap: 6}}>
              {PRIOS.map(p => (
                <span key={p}
                  className={`pill ${prioridade === p ? PRIO_CLS[p] : ''}`}
                  onClick={() => setPrioridade(p)}
                  style={{cursor:'default', fontSize:11}}>
                  {p}
                </span>
              ))}
            </div>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Descrição do problema (opcional)</label>
            <textarea className="ezz-input" rows={3} placeholder="Descreva o problema com detalhes..." value={desc} onChange={e => setDesc(e.target.value)} style={{fontFamily:'inherit', resize:'vertical'}} />
          </div>
        </div>

        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={submit} disabled={!valid} style={{opacity: valid ? 1 : 0.5}}>
            {ICN.plus} Abrir caso
          </button>
        </div>
      </div>
    </div>
  );
}

const STATUSES_LIST = ['Aberto', 'Em análise', 'Aguardando', 'Resolvido'];
const STATUS_PILL   = { Aberto: 'pill-pink', 'Em análise': 'pill-yellow', Aguardando: 'pill-lav', Resolvido: 'pill-mint' };
const PRIO_PILL     = { Crítica: 'pill-pink', Alta: 'pill-yellow', Média: 'pill-blue', Baixa: 'pill' };

/* ── Mini dropdown de status ─────────────────────────────── */
function StatusDropdown({ current, onSelect, onClose }) {
  const { useEffect: useEff, useRef: useR } = React;
  const ref = useR();
  useEff(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, []);
  return (
    <div ref={ref} className="status-dd" onClick={e => e.stopPropagation()}>
      {STATUSES_LIST.map(s => (
        <div key={s}
          className={`status-dd-item ${s === current ? 'status-dd-item-on' : ''}`}
          onClick={() => onSelect(s)}>
          <span className={`pill ${STATUS_PILL[s]}`} style={{fontSize:10.5, pointerEvents:'none'}}>{s}</span>
          {s === current && <span style={{color:'var(--ink-muted)'}}>{ICN.check}</span>}
        </div>
      ))}
    </div>
  );
}

/* ── Modal: Responder por e-mail ─────────────────────────── */
function EmailModal({ caso, onClose }) {
  const { useState: useEM } = React;
  const [msg, setMsg] = useEM(`Olá,\n\nEm resposta ao seu caso ${caso.id} — "${caso.assunto}".\n\n`);
  const toast = useToast();
  const send = () => {
    const to = `suporte@${caso.empresa.toLowerCase().replace(/\s+/g,'')}.com.br`;
    const subject = encodeURIComponent(`[${caso.id}] Re: ${caso.assunto}`);
    const body = encodeURIComponent(msg);
    window.open(`mailto:${to}?subject=${subject}&body=${body}`);
    toast(`E-mail aberto para ${caso.empresa} ✓`);
    onClose();
  };
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 560}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Responder por <em>e-mail</em></div>
            <div className="modal-sub muted">{caso.id} · {caso.empresa}</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
        <div className="form-grid">
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Para</label>
            <div className="ezz-input" style={{display:'flex', alignItems:'center', gap:8}}>
              <span className="muted" style={{fontSize:12}}>{ICN.mail}</span>
              <span style={{fontSize:13}}>suporte@{caso.empresa.toLowerCase().replace(/\s+/g,'')}.com.br</span>
              <span className="pill pill-mint" style={{fontSize:10, marginLeft:'auto'}}>Verificado</span>
            </div>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Assunto</label>
            <div className="ezz-input" style={{fontSize:13, color:'var(--ink)'}}>[{caso.id}] Re: {caso.assunto}</div>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Mensagem</label>
            <textarea className="ezz-input" rows={6} value={msg} onChange={e => setMsg(e.target.value)}
              style={{fontFamily:'inherit', resize:'vertical', fontSize:13, lineHeight:1.6}} />
          </div>
        </div>
        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={send}>{ICN.send} Enviar e-mail</button>
        </div>
      </div>
    </div>
  );
}

/* ── Modal: Agendar acompanhamento ───────────────────────── */
function AgendaModal({ caso, onClose }) {
  const { useState: useAG } = React;
  const [data, setData] = useAG('');
  const [hora, setHora] = useAG('10:00');
  const [nota, setNota] = useAG('');
  const [tipo, setTipo] = useAG('Ligação');
  const toast = useToast();
  const TIPOS = ['Ligação', 'Reunião', 'E-mail', 'Visita'];
  const valid = data.trim().length > 0;
  const save = () => {
    toast(`Acompanhamento agendado para ${data} às ${hora} ✓`);
    onClose();
  };
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 480}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Agendar <em>acompanhamento</em></div>
            <div className="modal-sub muted">{caso.id} · {caso.assunto.slice(0,36)}{caso.assunto.length > 36 ? '…' : ''}</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
        <div className="form-grid">
          <div className="field">
            <label className="field-lbl">Data *</label>
            <input className="ezz-input" type="date" value={data} onChange={e => setData(e.target.value)} />
          </div>
          <div className="field">
            <label className="field-lbl">Horário</label>
            <input className="ezz-input" type="time" value={hora} onChange={e => setHora(e.target.value)} />
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Tipo de contato</label>
            <div className="row" style={{gap: 6, flexWrap:'wrap'}}>
              {TIPOS.map(t => (
                <span key={t} className={`pill ${tipo === t ? 'pill-dark' : ''}`}
                  onClick={() => setTipo(t)} style={{cursor:'default', fontSize:11}}>{t}</span>
              ))}
            </div>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Observação (opcional)</label>
            <textarea className="ezz-input" rows={2} placeholder="Ex: Confirmar andamento da resolução técnica…"
              value={nota} onChange={e => setNota(e.target.value)} style={{fontFamily:'inherit', resize:'vertical'}} />
          </div>
        </div>
        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={save} disabled={!valid} style={{opacity: valid ? 1 : 0.5}}>
            {ICN.cal} Agendar
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── Modal: Designar em lote ─────────────────────────────── */
function DesignarBulkModal({ count, onClose, onConfirmar }) {
  const { useState: useDB } = React;
  const [sel, setSel] = useDB(CONTATOS[0].id);
  const toast = useToast();
  const submit = () => {
    const c = CONTATOS.find(ct => ct.id === sel) || CONTATOS[0];
    onConfirmar(c);
    toast(`${count} caso${count !== 1 ? 's' : ''} atribuído${count !== 1 ? 's' : ''} para ${c.nome.split(' ')[0]} ✓`);
    onClose();
  };
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 440}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Designar <em>time de suporte</em></div>
            <div className="modal-sub muted">{count} caso{count !== 1 ? 's' : ''} em aberto serão reatribuídos</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
        <div className="field-lbl" style={{marginBottom: 10}}>Selecionar responsável</div>
        <div className="col" style={{gap: 6, maxHeight: 300, overflowY: 'auto', marginBottom: 20}}>
          {CONTATOS.slice(0, 8).map(ct => (
            <div key={ct.id} onClick={() => setSel(ct.id)}
              style={{
                display:'flex', alignItems:'center', gap:12,
                padding:'10px 12px', borderRadius:12, cursor:'default',
                background: sel === ct.id ? 'oklch(0.95 0.05 250 / 0.5)' : 'transparent',
              }}>
              <img src={ct.avatar} style={{width:36,height:36,borderRadius:'50%',objectFit:'cover'}} alt="" />
              <div className="col" style={{flex:1}}>
                <div style={{fontSize:13,fontWeight:600}}>{ct.nome.split(' ').slice(0,2).join(' ')}</div>
                <div className="muted" style={{fontSize:11.5}}>{ct.cargo}</div>
              </div>
              {sel === ct.id && <span style={{color:'oklch(0.55 0.16 250)'}}>{ICN.check}</span>}
            </div>
          ))}
        </div>
        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={submit}>{ICN.users} Confirmar designação</button>
        </div>
      </div>
    </div>
  );
}

/* ── Modal: Pesquisa de satisfação ───────────────────────── */
function PesquisaModal({ count, onClose }) {
  const { useState: usePM } = React;
  const toast = useToast();
  const [msg, setMsg] = usePM(
`Olá! Gostaríamos de saber sua opinião sobre o atendimento que você recebeu.

⭐ Como você avalia o suporte prestado? (1 a 5)
💬 Tem algum comentário ou sugestão?

Responda este e-mail ou acesse: https://ezza.com.br/nps/avaliacao

Obrigado pelo seu tempo! — Equipe Ezza CRM`
  );
  const send = () => {
    toast(`Pesquisa enviada para ${count} cliente${count !== 1 ? 's' : ''} ✓`);
    onClose();
  };
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 520}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Pesquisa de <em>satisfação</em></div>
            <div className="modal-sub muted">Será enviada para {count} cliente{count !== 1 ? 's' : ''} com casos recentes</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
        <div className="field" style={{marginBottom: 20}}>
          <label className="field-lbl">Mensagem do e-mail</label>
          <textarea className="ezz-input"
            value={msg} onChange={e => setMsg(e.target.value)}
            style={{minHeight: 180, resize:'vertical', fontFamily:'var(--font-mono)', fontSize:12.5, lineHeight:1.6}} />
        </div>
        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={send}>{ICN.send} Enviar pesquisa</button>
        </div>
      </div>
    </div>
  );
}

/* ── Modal de reatribuição ───────────────────────────────── */
function ReatribuirModal({ caso, onClose, onReatribuir }) {
  const { useState: useRS } = React;
  const [sel, setSel] = useRS(caso.responsavel.id ?? 0);
  const submit = () => {
    const c = CONTATOS.find(ct => ct.id === sel) || CONTATOS[0];
    onReatribuir(c);
    onClose();
  };
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 440}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Reatribuir <em>caso</em></div>
            <div className="modal-sub muted">{caso.id} · {caso.assunto.slice(0,32)}{caso.assunto.length > 32 ? '…' : ''}</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
        <div className="field-lbl" style={{marginBottom: 10}}>Selecionar responsável</div>
        <div className="col" style={{gap: 6, maxHeight: 320, overflowY: 'auto'}}>
          {CONTATOS.slice(0, 8).map(ct => (
            <div key={ct.id}
              className={`reatrib-row ${sel === ct.id ? 'reatrib-row-on' : ''}`}
              onClick={() => setSel(ct.id)}>
              <img src={ct.avatar} style={{width: 36, height: 36, borderRadius: '50%', objectFit: 'cover'}} alt="" />
              <div className="col" style={{flex: 1}}>
                <div style={{fontSize: 13, fontWeight: 600}}>{ct.nome.split(' ').slice(0,2).join(' ')}</div>
                <div className="muted" style={{fontSize: 11.5}}>{ct.cargo}</div>
              </div>
              {sel === ct.id && <span style={{color: 'oklch(0.55 0.16 250)'}}>{ICN.check}</span>}
            </div>
          ))}
        </div>
        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={submit}>{ICN.check} Confirmar</button>
        </div>
      </div>
    </div>
  );
}

const casosHeaders = () => { const t = localStorage.getItem('ezza_token'); return { 'Content-Type':'application/json', ...(t?{'Authorization':`Bearer ${t}`}:{}) }; };

function Casos({ goto, onOpenContact }) {
  const [filter, setFilter] = useStateCasos('Todos');
  const [prioFilter, setPrioFilter] = useStateCasos('Todas');
  const [showPrioMenu, setShowPrioMenu] = useStateCasos(false);
  const prioMenuRef = React.useRef(null);
  const [busca,  setBusca]  = useStateCasos('');
  const [showNovo, setShowNovo] = useStateCasos(false);
  const [localCasos, setLocalCasos] = useStateCasos([...CASOS]);
  React.useEffect(() => {
    fetch('/api/casos', { headers: casosHeaders() })
      .then(r => r.json())
      .then(d => { if (d.ok && d.casos.length) setLocalCasos(d.casos.map(c => ({ ...c, prioridade: c.prioridade || 'Media', status: c.status || 'Aberto' }))); })
      .catch(() => {});
  }, []);
  const [statusPickerFor, setStatusPickerFor] = useStateCasos(null);
  const [reatribuirFor, setReatribuirFor] = useStateCasos(null);
  const [emailFor, setEmailFor] = useStateCasos(null);
  const [agendaFor, setAgendaFor] = useStateCasos(null);
  const [showDesignarBulk, setShowDesignarBulk] = useStateCasos(false);
  const [showPesquisa, setShowPesquisa] = useStateCasos(false);
  const toast = useToast();

  // Casos ativos (não arquivados) vs arquivados
  const ativos     = localCasos.filter(c => !c.arquivado);
  const arquivados = localCasos.filter(c => c.arquivado);

  const filters = ['Todos', 'Aberto', 'Em análise', 'Aguardando', 'Resolvido', 'Arquivados'];

  React.useEffect(() => {
    if (!showPrioMenu) return;
    const h = (e) => { if (prioMenuRef.current && !prioMenuRef.current.contains(e.target)) setShowPrioMenu(false); };
    setTimeout(() => window.addEventListener('click', h), 0);
    return () => window.removeEventListener('click', h);
  }, [showPrioMenu]);

  const visible = (() => {
    let base = filter === 'Arquivados'
      ? arquivados
      : filter === 'Todos'
        ? ativos
        : ativos.filter(c => c.status === filter);
    if (prioFilter !== 'Todas') base = base.filter(c => c.prioridade === prioFilter);
    if (busca.trim()) {
      const q = busca.toLowerCase();
      base = base.filter(c =>
        c.id.toLowerCase().includes(q) ||
        c.assunto.toLowerCase().includes(q) ||
        c.empresa.toLowerCase().includes(q) ||
        (c.responsavel?.nome || '').toLowerCase().includes(q)
      );
    }
    return base;
  })();

  const updateStatus = (id, status) => {
    setLocalCasos(prev => prev.map(c => c.id === id ? {...c, status, atualizado: 'agora mesmo'} : c));
    setStatusPickerFor(null);
    toast(`Status → ${status}`);
  };

  const archiveCaso = (id) => {
    setLocalCasos(prev => prev.map(c => c.id === id ? {...c, arquivado: true, atualizado: 'agora mesmo'} : c));
    toast('Caso arquivado — visível em "Arquivados"');
  };

  const restoreCaso = (id) => {
    setLocalCasos(prev => prev.map(c => c.id === id ? {...c, arquivado: false, atualizado: 'agora mesmo'} : c));
    toast('Caso restaurado para Aberto');
  };

  const reatribuir = (id, contato) => {
    setLocalCasos(prev => prev.map(c => c.id === id ? {...c, responsavel: contato, atualizado: 'agora mesmo'} : c));
    toast(`Reatribuído para ${contato.nome.split(' ')[0]}`);
  };

  const compartilhar = (id) => {
    const url = `https://app.ezza.com.br/casos/${id}`;
    navigator.clipboard?.writeText(url).catch(() => {});
    toast(`Link do caso ${id} copiado ✓`);
  };

  const abertosCount  = ativos.filter(c => c.status === 'Aberto').length;
  const criticosCount = ativos.filter(c => c.prioridade === 'Crítica').length;

  const filterCount = (f) => {
    if (f === 'Todos') return ativos.length;
    if (f === 'Arquivados') return arquivados.length;
    return ativos.filter(c => c.status === f).length;
  };

  return (
    <>
      <PageHead
        title={<>Casos & <em>Atendimentos</em></>}
        subtitle={`${abertosCount} tickets em aberto · SLA médio 4h12min`}
        right={
          <div className="row" style={{position:'relative'}}>
            {criticosCount > 0 && <div className="pill pill-pink">{criticosCount} crítico{criticosCount > 1 ? 's' : ''}</div>}
            <div ref={prioMenuRef} style={{position:'relative'}}>
              <button className={`icon-btn ${prioFilter !== 'Todas' ? 'icon-btn-active' : ''}`} onClick={() => setShowPrioMenu(m => !m)} title="Filtrar por prioridade" style={{position:'relative'}}>
                {ICN.filter}
                {prioFilter !== 'Todas' && <span style={{position:'absolute',top:3,right:3,width:7,height:7,borderRadius:'50%',background:'var(--danger)',border:'1.5px solid white'}} />}
              </button>
              {showPrioMenu && (
                <div style={{position:'absolute',top:'calc(100% + 6px)',right:0,background:'white',border:'0.5px solid oklch(0.92 0.01 250)',borderRadius:14,boxShadow:'0 16px 40px -12px rgba(20,30,60,.22)',padding:6,zIndex:60,minWidth:180,animation:'fadein .15s ease'}}>
                  <div style={{fontSize:10.5,fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--ink-muted)',padding:'6px 10px 8px'}}>Prioridade</div>
                  {['Todas','Crítica','Alta','Média','Baixa'].map(p => (
                    <div key={p} style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10,padding:'8px 10px',borderRadius:10,cursor:'default',background:prioFilter===p?'oklch(0.96 0.012 250)':'transparent'}}
                      onClick={() => { setPrioFilter(p); setShowPrioMenu(false); toast(p === 'Todas' ? 'Filtro removido' : `Filtrando por: ${p}`); }}>
                      <span style={{fontSize:13,fontWeight:prioFilter===p?700:400}}>{p === 'Todas' ? 'Todas as prioridades' : p}</span>
                      {prioFilter===p && <span style={{color:'oklch(0.55 0.16 250)'}}>{ICN.check}</span>}
                    </div>
                  ))}
                </div>
              )}
            </div>
            <ActionBtn icon={ICN.plus} title="Novo caso" size="icon" onClick={() => setShowNovo(true)} />
          </div>
        }
      />

      <div className="row" style={{gap: 8, marginBottom: 14, flexWrap: 'wrap', alignItems: 'center'}}>
        {filters.map(f => (
          <div key={f}
            className={`pill ${filter === f ? (f === 'Arquivados' ? 'pill-lav' : 'pill-dark') : ''}`}
            onClick={() => setFilter(f)}
            style={{cursor:'default', fontSize:12, padding:'7px 14px'}}>
            {f} <span style={{opacity:0.65, fontSize:10}}>({filterCount(f)})</span>
          </div>
        ))}
        <div style={{marginLeft:'auto', position:'relative', flexShrink:0}}>
          <span style={{position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color:'var(--ink-faint)', pointerEvents:'none', display:'flex'}}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          </span>
          <input
            className="ezz-input"
            placeholder="Buscar casos…"
            value={busca}
            onChange={e => setBusca(e.target.value)}
            style={{paddingLeft:32, width:200, height:34, fontSize:12.5}}
          />
          {busca && (
            <span onClick={() => setBusca('')} style={{position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', cursor:'default', color:'var(--ink-faint)', display:'flex'}}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </span>
          )}
        </div>
      </div>

      <div className="card">
        {filter === 'Arquivados' && arquivados.length > 0 && (
          <div className="row" style={{marginBottom: 14, padding: '10px 14px', background: 'oklch(0.95 0.04 295 / 0.4)', borderRadius: 12, gap: 10}}>
            <span style={{fontSize: 13, color: 'oklch(0.40 0.12 295)'}}>{ICN.inbox}</span>
            <span style={{fontSize: 13, color: 'oklch(0.40 0.12 295)', fontWeight: 500}}>
              {arquivados.length} caso{arquivados.length > 1 ? 's' : ''} arquivado{arquivados.length > 1 ? 's' : ''} — use "Restaurar" para reativar
            </span>
          </div>
        )}
        <table className="tbl casos-tbl">
          <thead>
            <tr>
              <th>ID</th>
              <th>Assunto</th>
              <th>Empresa</th>
              <th>Prioridade</th>
              <th>{filter === 'Arquivados' ? 'Último status' : 'Status'}</th>
              <th>Responsável</th>
              <th>Atualizado</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {visible.map(c => {
              const prioPill   = PRIO_PILL[c.prioridade];
              const statusPill = STATUS_PILL[c.status];
              const isArquivado = !!c.arquivado;
              return (
                <tr key={c.id} style={{opacity: isArquivado ? 0.65 : 1}}>
                  <td><span className="mono">{c.id}</span></td>
                  <td><strong>{c.assunto}</strong></td>
                  <td>{c.empresa}</td>
                  <td><span className={`pill ${prioPill}`}>{c.prioridade}</span></td>
                  <td style={{position:'relative'}}>
                    {isArquivado ? (
                      <span className={`pill ${statusPill}`} style={{opacity:0.7}}>{c.status}</span>
                    ) : (
                      <>
                        <span
                          className={`pill ${statusPill} status-pill-btn`}
                          onClick={e => { e.stopPropagation(); setStatusPickerFor(statusPickerFor === c.id ? null : c.id); }}
                          title="Clique para alterar status"
                        >
                          {c.status} {ICN.chevron}
                        </span>
                        {statusPickerFor === c.id && (
                          <StatusDropdown
                            current={c.status}
                            onSelect={(s) => updateStatus(c.id, s)}
                            onClose={() => setStatusPickerFor(null)}
                          />
                        )}
                      </>
                    )}
                  </td>
                  <td>
                    <div className="row" style={{gap: 8, cursor: onOpenContact ? 'pointer' : 'default'}}
                      title={`Ver contato: ${c.responsavel.nome.split(' ')[0]}`}
                      onClick={() => onOpenContact && onOpenContact(c.responsavel.id)}>
                      <img src={c.responsavel.avatar} style={{width: 26, height: 26, borderRadius: '50%', transition:'transform .12s'}}
                        onMouseEnter={e => { if(onOpenContact) e.currentTarget.style.transform='scale(1.15)'; }}
                        onMouseLeave={e => e.currentTarget.style.transform=''}
                        alt="" />
                      <span style={{fontSize: 12.5}}>{c.responsavel.nome.split(' ').slice(0,2).join(' ')}</span>
                    </div>
                  </td>
                  <td className="muted">{c.atualizado}</td>
                  <td>
                    {isArquivado ? (
                      <MoreMenu items={[
                        { ic: ICN.refresh, label: 'Restaurar caso', onClick: () => restoreCaso(c.id) },
                        { ic: ICN.share,   label: 'Compartilhar link', onClick: () => compartilhar(c.id) },
                      ]} />
                    ) : (
                      <MoreMenu items={[
                        {
                          ic: ICN.check,
                          label: c.status === 'Resolvido' ? 'Reabrir caso' : 'Marcar como resolvido',
                          onClick: () => updateStatus(c.id, c.status === 'Resolvido' ? 'Aberto' : 'Resolvido'),
                        },
                        {
                          ic: ICN.users,
                          label: 'Reatribuir',
                          onClick: () => setReatribuirFor(c),
                        },
                        {
                          ic: ICN.mail,
                          label: 'Responder por e-mail',
                          onClick: () => setEmailFor(c),
                        },
                        {
                          ic: ICN.cal,
                          label: 'Agendar acompanhamento',
                          onClick: () => setAgendaFor(c),
                        },
                        {
                          ic: ICN.share,
                          label: 'Compartilhar link',
                          onClick: () => compartilhar(c.id),
                        },
                        { divider: true },
                        {
                          ic: ICN.trash,
                          label: 'Arquivar caso',
                          danger: true,
                          onClick: () => archiveCaso(c.id),
                        },
                      ]} />
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {visible.length === 0 && (
          <div className="muted" style={{padding: '40px 32px', textAlign: 'center', fontSize: 13}}>
            {busca.trim()
              ? <>Nenhum caso encontrado para <strong>"{busca}"</strong>.</>
              : filter === 'Arquivados'
                ? 'Nenhum caso arquivado.'
                : `Nenhum caso com status "${filter}".`}
          </div>
        )}
      </div>

      <div className="casos-grid">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Volume por dia (últimos 14)</div>
            <CardActions />
          </div>
          <MiniBars />
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-title">Atalhos rápidos</div>
            <ActionBtn icon={ICN.arrowUp} title="Mais atalhos" onClick={() => goto && goto('ajuda')} />
          </div>
          <div className="col" style={{gap: 8}}>
            <ActBtn label="Criar caso a partir de e-mail" icon={ICN.mail}
              onClick={() => setShowNovo(true)} />
            <ActBtn label="Designar para time de Suporte" icon={ICN.users}
              onClick={() => setShowDesignarBulk(true)} />
            <ActBtn label="Enviar pesquisa de satisfação" icon={ICN.send}
              onClick={() => setShowPesquisa(true)} />
            <ActBtn label="Encerrar e arquivar resolvidos" icon={ICN.check}
              onClick={() => {
                const resolvidos = localCasos.filter(c => c.status === 'Resolvido' && !c.arquivado);
                if (resolvidos.length === 0) { toast('Nenhum caso "Resolvido" para arquivar.'); return; }
                setLocalCasos(prev => prev.map(c =>
                  c.status === 'Resolvido' && !c.arquivado ? {...c, arquivado: true, atualizado: 'agora mesmo'} : c
                ));
                toast(`${resolvidos.length} caso${resolvidos.length !== 1 ? 's' : ''} arquivado${resolvidos.length !== 1 ? 's' : ''} ✓`);
              }} />
          </div>
        </div>
      </div>

      <style>{`
        .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); }
        .casos-tbl td { padding: 14px 12px; }
        .casos-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; }

        .status-pill-btn { cursor: default; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
        .status-pill-btn:hover { opacity: 0.85; }
        .status-pill-btn svg { width: 10px; height: 10px; }

        .status-dd {
          position: absolute; left: 0; top: calc(100% - 4px);
          background: white;
          border: 0.5px solid oklch(0.90 0.01 250);
          border-radius: 14px;
          box-shadow: 0 16px 40px -12px rgba(20,30,60,.22);
          padding: 6px;
          z-index: 60;
          min-width: 160px;
          animation: fadein .15s ease;
        }
        .status-dd-item {
          display: flex; align-items: center; justify-content: space-between;
          padding: 7px 10px; border-radius: 10px; cursor: default; gap: 10px;
        }
        .status-dd-item:hover { background: oklch(0.96 0.012 250); }
        .status-dd-item-on { background: oklch(0.97 0.01 250); }

        .reatrib-row {
          display: flex; align-items: center; gap: 12px;
          padding: 10px 12px; border-radius: 12px; cursor: default;
        }
        .reatrib-row:hover { background: oklch(0.97 0.01 250); }
        .reatrib-row-on { background: oklch(0.95 0.05 250 / 0.5); }
      `}</style>

      {showNovo && (
        <NovoCasoModal
          onClose={() => setShowNovo(false)}
          onCreate={(novo) => setLocalCasos(prev => [novo, ...prev])}
        />
      )}
      {reatribuirFor && (
        <ReatribuirModal
          caso={reatribuirFor}
          onClose={() => setReatribuirFor(null)}
          onReatribuir={(contato) => reatribuir(reatribuirFor.id, contato)}
        />
      )}
      {emailFor && (
        <EmailModal caso={emailFor} onClose={() => setEmailFor(null)} />
      )}
      {agendaFor && (
        <AgendaModal caso={agendaFor} onClose={() => setAgendaFor(null)} />
      )}
      {showDesignarBulk && (
        <DesignarBulkModal
          count={ativos.filter(c => c.status !== 'Resolvido').length}
          onClose={() => setShowDesignarBulk(false)}
          onConfirmar={(contato) => {
            setLocalCasos(prev => prev.map(c =>
              !c.arquivado && c.status !== 'Resolvido' ? {...c, responsavel: contato, atualizado: 'agora mesmo'} : c
            ));
          }}
        />
      )}
      {showPesquisa && (
        <PesquisaModal
          count={ativos.filter(c => c.status === 'Resolvido').length || ativos.length}
          onClose={() => setShowPesquisa(false)}
        />
      )}
    </>
  );
}

function ActBtn({ label, icon, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 14px',
      borderRadius: 14,
      background: 'oklch(0.97 0.01 250 / 0.7)',
      border: '0.5px solid oklch(1 0 0 / 0.6)',
      cursor: 'default',
      width: '100%',
      textAlign: 'left',
      fontFamily: 'inherit',
      transition: 'transform .12s, box-shadow .12s',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateX(2px)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateX(0)'; }}
    >
      <div style={{
        width: 32, height: 32, borderRadius: '50%',
        background: 'white', display: 'grid', placeItems: 'center',
        color: 'var(--ink-soft)',
      }}>{icon}</div>
      <div style={{flex: 1, fontSize: 13, fontWeight: 500, color: 'var(--ink)'}}>{label}</div>
      <div style={{color:'var(--ink-faint)'}}>{ICN.arrowRight}</div>
    </button>
  );
}

function MiniBars() {
  const vals = [4, 7, 5, 9, 6, 3, 2, 8, 11, 7, 5, 9, 12, 8];
  const max = Math.max(...vals);
  return (
    <div style={{display: 'flex', alignItems: 'flex-end', gap: 6, height: 160, paddingTop: 12}}>
      {vals.map((v, i) => (
        <div key={i} style={{flex: 1, display:'flex', flexDirection:'column', alignItems:'center', gap: 6}}>
          <div style={{
            width: '100%',
            height: `${(v / max) * 140}px`,
            background: i === vals.length - 1 ? 'var(--black)' : (i % 3 === 0 ? 'var(--acc-blue)' : i % 3 === 1 ? 'var(--acc-pink)' : 'var(--acc-yellow)'),
            borderRadius: '8px 8px 4px 4px',
            opacity: 0.85,
          }} />
          <span style={{fontSize: 9.5, color: 'var(--ink-faint)'}}>{i+1}</span>
        </div>
      ))}
    </div>
  );
}

window.Casos = Casos;