const { useState, useEffect, useRef, useCallback } = React;
const API = '/api';

// ─── HELPERS ────────────────────────────────────────────────────────────────

/**
 * Abre o WhatsApp: tenta o app instalado primeiro.
 * Se não abrir em 1,2s (app não instalado), abre o WhatsApp Web.
 */
function openWhatsApp(phone, text) {
  const p = phone.replace(/\D/g, '');
  const query = text ? `?phone=${p}&text=${encodeURIComponent(text)}` : `?phone=${p}`;
  const appUrl = `whatsapp://send${query}`;
  const webUrl = `https://web.whatsapp.com/send${query}`;

  // Tenta abrir o app
  window.location.href = appUrl;

  // Se após 1,2s a página ainda estiver ativa, o app não abriu → usa o web
  const t = setTimeout(() => { window.open(webUrl, '_blank'); }, 1200);

  // Se a página perder o foco (app abriu), cancela o fallback
  window.addEventListener('blur', () => clearTimeout(t), { once: true });
}

function timeSince(d) {
  if (!d) return '—';
  const m = Math.floor((new Date() - new Date(d)) / 60000);
  if (m < 1) return 'agora'; if (m < 60) return `${m}min`;
  const h = Math.floor(m / 60); if (h < 24) return `${h}h`;
  return `${Math.floor(h/24)}d`;
}
function formatDateTime(d) {
  if (!d) return '—';
  return new Date(d).toLocaleString('pt-BR', {day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'});
}
function statusBadge(s) {
  const map = {'Novo':'novo','Em atendimento':'atendimento','Aguardando paciente':'aguardando','Aguardando doutor':'aguardando','Aguardando colega':'aguardando','Finalizado':'finalizado'};
  return `badge badge-${map[s]||'novo'}`;
}
async function api(path, method='GET', body) {
  const opts = {method, headers:{'Content-Type':'application/json'}};
  if (body) opts.body = JSON.stringify(body);
  try {
    const res = await fetch(`${API}${path}`, opts);
    return res.json();
  } catch(e) {
    console.error('API Error:', e);
    return {};
  }
}

// ─── LOGIN SCREEN ────────────────────────────────────────────────────────────
function LoginScreen({onLogin}) {
  const [users, setUsers] = useState([]);
  const [selected, setSelected] = useState(null);
  const [pin, setPin] = useState('');
  const [error, setError] = useState('');
  const [connErr, setConnErr] = useState(false);

  useEffect(() => {
    api('/auth/users').then(u => {
      if (Array.isArray(u)) setUsers(u);
      else setConnErr(true);
    });
  }, []);

  const pressKey = (k) => {
    if (k === 'C') { setPin(''); setError(''); return; }
    if (pin.length >= 4) return;
    const next = pin + k;
    setPin(next);
    if (next.length === 4) submit(next);
  };

  const submit = async (p) => {
    if (!selected) { setError('Selecione um usuário.'); setPin(''); return; }
    const res = await api('/auth/login', 'POST', {user_id: selected.id, pin: p});
    if (res.success) onLogin(res.user);
    else { setError('PIN incorreto. Tente novamente.'); setPin(''); }
  };

  const keys = ['1','2','3','4','5','6','7','8','9','C','0','↵'];

  return (
    <div className="login-screen">
      <div className="login-logo">Maya<span>Desk</span></div>
      <div className="login-subtitle">Sistema de Atendimento Clínico</div>
      {connErr && (
        <div className="conn-err">
          ⚠️ Servidor offline. Inicie o sistema via <strong>Iniciar Maya Desk.bat</strong> e recarregue.
        </div>
      )}
      <div className="user-grid">
        {users.map(u => (
          <button key={u.id} className={`user-btn ${selected?.id===u.id?'selected':''}`}
            onClick={() => {setSelected(u);setPin('');setError('');}}>
            <div className="user-avatar">{u.name[0]}</div>
            <span>{u.name.split(' ')[0]}</span>
          </button>
        ))}
      </div>
      {selected && (
        <div className="pin-panel">
          <div className="pin-display">
            {[0,1,2,3].map(i => <div key={i} className={`pin-dot ${i<pin.length?'filled':''}`}/>)}
          </div>
          <div className="pin-grid">
            {keys.map(k => (
              <button key={k} className={`pin-key ${k==='C'?'clear':''} ${k==='↵'?'enter':''}`}
                onClick={() => pressKey(k==='↵'?'':k)}>{k}</button>
            ))}
          </div>
          {error && <div className="login-error">{error}</div>}
        </div>
      )}
    </div>
  );
}

// ─── BOT PAUSE ALERT ─────────────────────────────────────────────────────────
function getBotPauseAlert(lead) {
  if (!lead.bot_paused || !lead.bot_paused_at || lead.status === 'Finalizado') return null;
  const hours = (new Date() - new Date(lead.bot_paused_at)) / 3600000;
  if (hours >= 12) return { level: 'critical', label: '🔴 Bot pausado há +12h — finalizar!' };
  if (hours >= 9)  return { level: 'danger',   label: '🟠 Bot pausado há +9h — verificar!' };
  if (hours >= 6)  return { level: 'warning',  label: '🟡 Bot pausado há +6h' };
  return null;
}

// ─── LEAD CARD ───────────────────────────────────────────────────────────────
function LeadCard({lead, selected, onClick, suppressedContacts}) {
  const waitMins = lead.created_at && !lead.assumed_at
    ? Math.max(0, Math.floor((new Date()-new Date(lead.created_at))/60000)) : null;
  const overdue = waitMins !== null && waitMins > 15;
  const obsPreview = lead.summary_for_secretary || lead.ai_summary || null;
  const pauseAlert = getBotPauseAlert(lead);
  const cleanPhone = (lead.phone||'').replace(/[^0-9]/g,'');
  const isSuppressed = suppressedContacts && suppressedContacts[cleanPhone];
  const isExternal = lead.lead_type === 'human_outbound';
  return (
    <div className={`lead-card ${selected?'selected':''} ${overdue?'overdue':''} ${pauseAlert?'paused-'+pauseAlert.level:''}`} onClick={onClick}>
      <div className={`lead-priority-bar ${lead.priority}`}/>
      <div className="lead-grid">

        {/* Bloco 1 — Paciente */}
        <div className="lc-block lc-patient">
          <div className="lc-name">{lead.patient_name||lead.phone}</div>
          {lead.patient_name && <div className="lc-phone">{lead.phone}</div>}
          <div className="lc-date">{formatDateTime(lead.created_at)}</div>
        </div>

        {/* Bloco 2 — Categoria interna */}
        <div className="lc-block lc-category">
          {(lead.internalCategory || lead.ai_intent)
            ? <span className="badge badge-intent lc-intent-badge">{lead.internalCategory || lead.ai_intent}</span>
            : <span className="lc-no-cat">Não identificado</span>
          }
          {lead.pronto_para_secretaria && (
            <span className="badge badge-pronto lc-pronto-badge">✅ Pronto</span>
          )}
          {lead.urgency && lead.urgency !== 'Baixa' && (
            <span className={`lc-urgency-tag lc-urg-${lead.urgency==='Alta'?'alta':'media'}`}>{lead.urgency}</span>
          )}
          {isSuppressed && <span className="badge-sup">🔇 Silenciado</span>}
          {isExternal  && <span className="badge-ext">📤 Externo</span>}
        </div>

        {/* Bloco 3 — Resumo (summary_for_secretary ou ai_summary) */}
        <div className="lc-block lc-obs">
          {pauseAlert && (
            <span className={`lc-pause-alert lc-pause-${pauseAlert.level}`}>{pauseAlert.label}</span>
          )}
          {!pauseAlert && (obsPreview
            ? <span className="lc-obs-text">{obsPreview}</span>
            : <span className="lc-obs-empty">Sem resumo ainda</span>
          )}
        </div>

        {/* Bloco 4 — Operação */}
        <div className="lc-block lc-operation">
          <span className={statusBadge(lead.status)}>{lead.status}</span>
          {lead.assigned_name && <span className="lc-assigned">👤 {lead.assigned_name}</span>}
          <span className={`lead-timer ${overdue?'urgent':''}`}>
            {waitMins!==null?`⏱ ${waitMins}min`:timeSince(lead.assumed_at)}
          </span>
        </div>

      </div>
    </div>
  );
}

// ─── FINALIZAR MODAL ─────────────────────────────────────────────────────────
const FINALIZATION_DESTINATIONS = [
  { value: 'Agendado',      label: '✅ Agendado — consulta marcada' },
  { value: 'Doctoralia',    label: '🔗 Encaminhado ao Doctoralia' },
  { value: 'Nao_converteu', label: '❌ Não converteu' },
  { value: 'Retorno',       label: '🔄 Retorno futuro' },
  { value: 'Outros',        label: '📋 Outros' },
];

function FinalizarModal({lead, currentUser, onConfirm, onClose}) {
  const [destination, setDestination] = useState('');
  const isOwner = lead.assigned_to === currentUser.id;
  const notOwnerMsg = !lead.assigned_to
    ? 'Este lead não tem responsável. Assuma-o antes de finalizar.'
    : `Apenas ${lead.assigned_name} (responsável) pode finalizar este atendimento.`;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <h3>✅ Finalizar Atendimento</h3>
        {!isOwner ? (
          <>
            <div className="finalizar-blocked">⚠️ {notOwnerMsg}</div>
            <div className="modal-actions">
              <button className="btn btn-ghost" onClick={onClose}>Fechar</button>
            </div>
          </>
        ) : (
          <>
            <div className="modal-field">
              <label>Destino do paciente *</label>
              <select value={destination} onChange={e=>setDestination(e.target.value)}>
                <option value="">— Selecione o destino —</option>
                {FINALIZATION_DESTINATIONS.map(d=>(
                  <option key={d.value} value={d.value}>{d.label}</option>
                ))}
              </select>
            </div>
            <div className="modal-actions">
              <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
              <button className="btn btn-danger" disabled={!destination}
                onClick={()=>destination&&onConfirm(destination)}>
                Confirmar Finalização
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ─── TRANSFER MODAL ──────────────────────────────────────────────────────────
function TransferModal({users, currentUser, onTransfer, onClose}) {
  const [toUser, setToUser] = useState('');
  const [reason, setReason] = useState('');
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <h3>Encaminhar Atendimento</h3>
        <div className="modal-field">
          <label>Encaminhar para</label>
          <select value={toUser} onChange={e=>setToUser(e.target.value)}>
            <option value="">Selecione...</option>
            {users.filter(u=>u.id!==currentUser.id).map(u=><option key={u.id} value={u.id}>{u.name}</option>)}
          </select>
        </div>
        <div className="modal-field">
          <label>Motivo (obrigatório)</label>
          <textarea value={reason} onChange={e=>setReason(e.target.value)} rows={3} placeholder="Descreva o motivo..."/>
        </div>
        <div className="modal-actions">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" disabled={!toUser||!reason}
            onClick={()=>{onTransfer(parseInt(toUser),reason);onClose();}}>Encaminhar</button>
        </div>
      </div>
    </div>
  );
}

// ─── NEW LEAD MODAL ──────────────────────────────────────────────────────────
function NewLeadModal({onCreated, onClose}) {
  const [form, setForm] = useState({patient_name:'',phone:'',ai_intent:'',urgency:'Baixa',ai_summary:''});
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState('');

  const set = (k,v) => setForm(f=>({...f,[k]:v}));

  const submit = async () => {
    if (!form.phone.trim()) { setErr('Telefone é obrigatório.'); return; }
    setLoading(true);
    const res = await api('/leads', 'POST', {
      patient_name: form.patient_name || null,
      phone: form.phone.trim(),
      ai_intent: form.ai_intent || null,
      urgency: form.urgency,
      ai_summary: form.ai_summary || null,
    });
    setLoading(false);
    if (res.id) { onCreated(res); onClose(); }
    else setErr(res.error || 'Erro ao criar lead.');
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <h3>➕ Novo Atendimento Manual</h3>
        <div className="modal-field">
          <label>Nome do Paciente</label>
          <input placeholder="Ex: Maria Silva" value={form.patient_name} onChange={e=>set('patient_name',e.target.value)}/>
        </div>
        <div className="modal-field">
          <label>Telefone / WhatsApp *</label>
          <input placeholder="Ex: 5511999999999" value={form.phone} onChange={e=>set('phone',e.target.value)}/>
        </div>
        <div className="modal-field">
          <label>Intenção / Interesse</label>
          <select value={form.ai_intent} onChange={e=>set('ai_intent',e.target.value)}>
            <option value="">Não identificado</option>
            <option>CATARATA</option>
            <option>REFRATIVA</option>
            <option>OLHO_SECO</option>
            <option>EXAME</option>
            <option>DUVIDA_CLINICA</option>
            <option>URGENCIA</option>
          </select>
        </div>
        <div className="modal-field">
          <label>Urgência</label>
          <select value={form.urgency} onChange={e=>set('urgency',e.target.value)}>
            <option>Baixa</option>
            <option>Média</option>
            <option>Alta</option>
          </select>
        </div>
        <div className="modal-field">
          <label>Observação inicial</label>
          <textarea rows={3} placeholder="Resumo do que o paciente precisa..." value={form.ai_summary} onChange={e=>set('ai_summary',e.target.value)}/>
        </div>
        {err && <div style={{color:'var(--danger)',fontSize:13,marginBottom:8}}>{err}</div>}
        <div className="modal-actions">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={submit} disabled={loading}>
            {loading ? 'Criando...' : 'Criar Atendimento'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── FOLLOW-UP TYPES (fonte única de verdade — centralizado aqui) ────────────
const FOLLOWUP_TYPES = [
  {
    id: 'out_of_hours',
    label: 'Fora do horário',
    icon: '🌙',
    description: 'Paciente entrou fora do expediente',
    defaultMessage: 'Recebemos sua mensagem e ela já foi registrada em nosso atendimento. Nossa equipe fará o retorno no próximo horário de atendimento da clínica.',
  },
  {
    id: 'awaiting_team',
    label: 'Aguardando equipe',
    icon: '⏳',
    description: 'Lead em fila, sem resposta humana ainda',
    defaultMessage: 'Recebemos sua mensagem e ela já está em nossa fila de atendimento. Em breve nossa equipe fará o retorno.',
  },
  {
    id: 'soft_resume',
    label: 'Retomada suave',
    icon: '💬',
    description: 'Atendimento parado — retomada sem pressão',
    defaultMessage: 'Olá, passando para dar continuidade ao seu atendimento. Se ainda precisar, nossa equipe pode seguir por aqui.',
  },
  {
    id: 'next_day',
    label: 'Reativação no dia seguinte',
    icon: '🌅',
    description: 'Lead em aberto, tentativa de recuperação',
    defaultMessage: 'Bom dia. Vimos que seu atendimento ficou em aberto. Se ainda desejar, nossa equipe pode continuar o suporte e orientar você por aqui.',
  },
  {
    id: 'priority',
    label: 'Caso com prioridade maior',
    icon: '🚨',
    description: 'Sensibilidade clínica ou urgência identificada',
    defaultMessage: 'Recebemos sua mensagem e ela foi sinalizada para atenção prioritária. Nossa equipe fará o retorno o quanto antes. Se houver piora importante, dor intensa ou redução súbita da visão, nos avise imediatamente.',
  },
];

/**
 * Sugere o tipo de follow-up mais adequado baseado no contexto do lead.
 * A sugestão nunca envia — apenas pré-seleciona uma opção recomendada.
 *
 * Lógica:
 *  1. urgência Alta ou intenção clínica grave → priority
 *  2. criado fora do horário comercial (antes das 8h ou após as 18h) → out_of_hours
 *  3. sem responsável, criado hoje em horário útil → awaiting_team
 *  4. criado antes de hoje, ainda aberto → next_day
 *  5. padrão → soft_resume
 */
function suggestFollowupType(lead) {
  const urgentIntents = ['urgência', 'dor', 'pós-operatório', 'pos operatorio', 'piora', 'trauma', 'cirurgia'];
  if (lead.urgency === 'Alta' || urgentIntents.some(k => (lead.ai_intent||'').toLowerCase().includes(k))) {
    return 'priority';
  }
  const created = new Date(lead.created_at);
  const hour = created.getHours();
  const isToday = created.toDateString() === new Date().toDateString();
  const isBusinessHours = hour >= 8 && hour < 18;
  if (isToday && !isBusinessHours) return 'out_of_hours';
  if (isToday && !lead.assumed_at) return 'awaiting_team';
  if (!isToday) return 'next_day';
  return 'soft_resume';
}

/**
 * Verifica condições de alerta antes de enviar follow-up.
 * Retorna array de strings — cada uma é um aviso para exibir à secretária.
 *
 * Checks:
 *  - Follow-up enviado há menos de 1h
 *  - Paciente respondeu há menos de 30min
 *  - Resposta humana registrada há menos de 30min
 */
function getFollowupWarnings(lead) {
  const warnings = [];
  const now = Date.now();
  const MIN30 = 30 * 60 * 1000;
  const MIN60 = 60 * 60 * 1000;

  if (lead.last_followup_at && (now - new Date(lead.last_followup_at).getTime()) < MIN60) {
    warnings.push('Já houve follow-up recente para este lead (menos de 1h atrás).');
  }
  const lastMsg = (lead.messages||[]).sort((a,b) => new Date(b.created_at) - new Date(a.created_at))[0];
  if (lastMsg && (now - new Date(lastMsg.created_at).getTime()) < MIN30) {
    warnings.push('O paciente respondeu há menos de 30 minutos. Verifique antes de enviar.');
  }
  const humanEvents = (lead.history||[]).filter(h => h.user_id && h.action_type !== 'NOTE_ADDED');
  const lastHuman = humanEvents.sort((a,b) => new Date(b.created_at) - new Date(a.created_at))[0];
  if (lastHuman && (now - new Date(lastHuman.created_at).getTime()) < MIN30) {
    warnings.push('Este lead recebeu resposta humana recentemente (menos de 30min).');
  }
  return warnings;
}

// ─── FOLLOW-UP PANEL ─────────────────────────────────────────────────────────
function FollowUpPanel({ lead, currentUser, onUpdate, onToast }) {
  const suggested = suggestFollowupType(lead);
  const [selectedType, setSelectedType] = useState(suggested);
  const [message, setMessage] = useState(FOLLOWUP_TYPES.find(t => t.id === suggested)?.defaultMessage || '');
  const [sending, setSending] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const warnings = getFollowupWarnings(lead);

  // Atualiza a mensagem padrão ao trocar o tipo
  const selectType = (id) => {
    setSelectedType(id);
    setMessage(FOLLOWUP_TYPES.find(t => t.id === id)?.defaultMessage || '');
  };

  const handleSend = () => {
    if (warnings.length > 0 && !showConfirm) {
      setShowConfirm(true);
      return;
    }
    doSend();
  };

  const doSend = async () => {
    setSending(true);
    setShowConfirm(false);
    const res = await api(`/leads/${lead.id}/followup`, 'POST', {
      user_id: currentUser.id,
      type: selectedType,
      message,
    });
    setSending(false);
    if (res.success) {
      const label = res.send_status === 'skipped'
        ? '⚠️ Follow-up registrado (WhatsApp não configurado no servidor)'
        : res.send_status === 'failed'
          ? '⚠️ Follow-up registrado, mas falha no envio WhatsApp'
          : '✅ Follow-up enviado com sucesso!';
      onToast(label, res.send_status === 'sent' ? 'success' : 'warning');
      onUpdate();
    } else {
      onToast('❌ ' + (res.error || 'Erro ao enviar follow-up'), 'warning');
    }
  };

  const typeObj = FOLLOWUP_TYPES.find(t => t.id === selectedType);

  return (
    <div className="followup-panel">
      <div className="followup-header">
        <div className="followup-title">📤 Follow-up</div>
        <div className="followup-subtitle">Selecione o tipo de retomada para este lead</div>
      </div>

      {/* Último follow-up enviado */}
      {lead.last_followup_at && (
        <div className="followup-last">
          <span>Último: <strong>{FOLLOWUP_TYPES.find(t=>t.id===lead.last_followup_type)?.label || lead.last_followup_type}</strong></span>
          <span> · {timeSince(lead.last_followup_at)}</span>
          {lead.last_followup_by_name && <span> · por {lead.last_followup_by_name}</span>}
          {lead.followup_count > 1 && <span className="followup-count-badge">{lead.followup_count}x enviados</span>}
        </div>
      )}

      {/* Seletor de tipo — pills horizontais */}
      <div className="followup-type-list">
        {FOLLOWUP_TYPES.map(t => (
          <button
            key={t.id}
            className={`followup-type-pill ${selectedType === t.id ? 'active' : ''} ${suggested === t.id ? 'suggested' : ''}`}
            onClick={() => selectType(t.id)}
            title={t.description}
          >
            {t.icon} {t.label}
            {suggested === t.id && selectedType !== t.id && (
              <span className="followup-suggested-badge">sugerido</span>
            )}
          </button>
        ))}
      </div>

      {/* Descrição do tipo selecionado */}
      {typeObj && (
        <div className="followup-type-desc">{typeObj.description}</div>
      )}

      {/* Alertas de contexto */}
      {warnings.length > 0 && (
        <div className="followup-warnings">
          {warnings.map((w, i) => (
            <div key={i} className="followup-warning-item">⚠️ {w}</div>
          ))}
        </div>
      )}

      {/* Confirmação adicional após alertas */}
      {showConfirm && (
        <div className="followup-confirm">
          <span>Há alertas ativos. Deseja enviar mesmo assim?</span>
          <div style={{display:'flex',gap:8,marginTop:8}}>
            <button className="btn btn-ghost" style={{fontSize:13,padding:'6px 14px'}} onClick={()=>setShowConfirm(false)}>Cancelar</button>
            <button className="btn btn-warning" style={{fontSize:13,padding:'6px 14px'}} onClick={doSend}>Enviar mesmo assim</button>
          </div>
        </div>
      )}

      {/* Preview editável da mensagem */}
      <div className="followup-message-area">
        <div className="followup-message-label">Mensagem a enviar</div>
        <textarea
          className="followup-message-input"
          value={message}
          onChange={e => setMessage(e.target.value)}
          rows={4}
        />
      </div>

      {/* Botão enviar */}
      <button
        className="btn btn-primary followup-send-btn"
        onClick={handleSend}
        disabled={sending || !message.trim() || lead.status === 'Finalizado'}
      >
        {sending ? 'Enviando...' : '📤 Enviar Follow-up'}
      </button>

      {lead.status === 'Finalizado' && (
        <div style={{fontSize:12,color:'var(--text-light)',textAlign:'center',marginTop:6}}>
          Lead finalizado — follow-up desativado
        </div>
      )}
    </div>
  );
}

// ─── SIDEBAR NOTE INPUT ──────────────────────────────────────────────────────
function SidebarNoteInput({lead, onUpdate}) {
  const [note, setNote] = useState('');
  const addNote = async () => {
    if (!note.trim()) return;
    await api(`/leads/${lead.id}/notes`, 'POST', {text: note});
    setNote('');
    onUpdate();
  };
  const handleKey = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); addNote(); }
  };
  return (
    <div className="sidebar-note-area">
      <textarea className="sidebar-note-input" value={note} onChange={e=>setNote(e.target.value)}
        onKeyDown={handleKey} placeholder="Observação... (Enter para salvar)"/>
      <button className="btn btn-primary" onClick={addNote}
        style={{width:'100%',marginTop:6,padding:'7px 0',fontSize:13}}>
        Salvar
      </button>
    </div>
  );
}

// ─── SUGGESTED REPLIES (geradas pela IA com base nas mensagens reais) ────────
function SuggestedReplies({ lead }) {
  const [suggestions, setSuggestions] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [source, setSource] = React.useState(null);

  React.useEffect(() => {
    if (!lead?.id) return;
    setLoading(true);
    setSuggestions([]);
    fetch(`/api/suggestions/${lead.id}`)
      .then(r => r.json())
      .then(data => {
        setSuggestions(data.suggestions || []);
        setSource(data.source || null);
      })
      .catch(() => setSuggestions([]))
      .finally(() => setLoading(false));
  }, [lead?.id, (lead?.messages||[]).length]);

  const sendReply = (text) => openWhatsApp(lead.phone, text);

  const refresh = () => {
    setLoading(true);
    setSuggestions([]);
    fetch(`/api/suggestions/${lead.id}`)
      .then(r => r.json())
      .then(data => { setSuggestions(data.suggestions || []); setSource(data.source || null); })
      .catch(() => setSuggestions([]))
      .finally(() => setLoading(false));
  };

  return (
    <div className="suggested-replies-panel">
      <div className="suggested-replies-header">
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <span className="suggested-replies-title">✨ Respostas Sugeridas pela IA</span>
          {source === 'ai' && <span style={{fontSize:10,color:'var(--text-light)',background:'var(--bg)',padding:'1px 6px',borderRadius:10}}>GPT</span>}
        </div>
        <button onClick={refresh} disabled={loading}
          style={{background:'none',border:'none',cursor:'pointer',color:'var(--text-light)',fontSize:13,padding:0}}>
          {loading ? '⏳' : '↻ Atualizar'}
        </button>
      </div>
      {loading && <div style={{padding:'12px 0',color:'var(--text-light)',fontSize:13,textAlign:'center'}}>Gerando sugestões...</div>}
      <div className="suggested-replies-list">
        {suggestions.map((s, i) => (
          <div key={i} className="suggested-reply-item" onClick={() => sendReply(s.text)}>
            <div className="suggested-reply-title">{s.title}</div>
            <div className="suggested-reply-text">{s.text}</div>
            <div className="suggested-reply-action">Abrir no WhatsApp →</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── CONSULTATION AGENT PANEL ────────────────────────────────────────────────
function ConsultationAgentPanel({ lead }) {
  if (!lead || lead.internalCategory !== 'Consulta') return null;

  const pronto = lead.pronto_para_secretaria;
  const subintentLabels = {
    'primeiro_agendamento':      'Primeiro agendamento',
    'remarcacao':                'Remarcação',
    'retorno_consulta':          'Retorno',
    'acompanhamento_tratamento': 'Acompanhamento de tratamento',
    'revisao_procedimento':      'Revisão de procedimento',
  };

  const hasAnyField = lead.ai_subintent || lead.insurance_current || lead.insurance_raw ||
    lead.doctor_preference || lead.reason_for_visit || lead.current_reason ||
    lead.time_preference || lead.day_preference || lead.summary_for_secretary;

  if (!hasAnyField && !pronto) return null;

  return (
    <div className="cap-panel">
      <div className="cap-header">
        <span className="cap-title">🤖 Agente de Consulta</span>
        {pronto
          ? <span className="cap-badge cap-badge-pronto">✅ Pronto</span>
          : <span className="cap-badge cap-badge-pending">⏳ Coletando</span>
        }
      </div>

      {lead.summary_for_secretary && (
        <div className="cap-summary">
          <div className="cap-summary-label">Resumo para secretária</div>
          <div className="cap-summary-text">{lead.summary_for_secretary}</div>
        </div>
      )}

      <div className="cap-fields">
        {lead.ai_subintent && (
          <div className="cap-field">
            <span className="cap-fl">Tipo</span>
            <span className="cap-fv">{subintentLabels[lead.ai_subintent] || lead.ai_subintent}</span>
          </div>
        )}
        {(lead.insurance_current || lead.insurance_raw) && (
          <div className="cap-field">
            <span className="cap-fl">Convênio</span>
            <span className="cap-fv">{lead.insurance_current || lead.insurance_raw}</span>
          </div>
        )}
        {lead.doctor_preference && (
          <div className="cap-field">
            <span className="cap-fl">Médico</span>
            <span className="cap-fv">{lead.doctor_preference}</span>
          </div>
        )}
        {(lead.reason_for_visit || lead.current_reason) && (
          <div className="cap-field">
            <span className="cap-fl">Motivo</span>
            <span className="cap-fv">{lead.reason_for_visit || lead.current_reason}</span>
          </div>
        )}
        {lead.time_preference && (
          <div className="cap-field">
            <span className="cap-fl">Horário</span>
            <span className="cap-fv">{lead.time_preference}</span>
          </div>
        )}
        {lead.day_preference && (
          <div className="cap-field">
            <span className="cap-fl">Dias</span>
            <span className="cap-fv">{lead.day_preference}</span>
          </div>
        )}
        {lead.identity_confirmation_status && lead.identity_confirmation_status !== 'not_required' && (
          <div className="cap-field">
            <span className="cap-fl">Identidade</span>
            <span className={`cap-fv cap-id-${lead.identity_confirmation_status}`}>
              {lead.identity_confirmation_status === 'confirmed' ? '✅ Confirmada'
               : lead.identity_confirmation_status === 'failed'  ? '❌ Falhou'
               : lead.identity_confirmation_status === 'pending' ? '⏳ Pendente'
               : lead.identity_confirmation_status}
            </span>
          </div>
        )}
      </div>

      {lead.consultation_agent_status && (
        <div className="cap-status-row">
          Status: <strong>{lead.consultation_agent_status}</strong>
        </div>
      )}
    </div>
  );
}

// ─── SILENCE MODAL ───────────────────────────────────────────────────────────
const CONTACT_TYPES = [
  { value: 'supplier', label: 'Fornecedor' },
  { value: 'team',     label: 'Equipe' },
  { value: 'partner',  label: 'Parceiro' },
  { value: 'admin',    label: 'Administrativo' },
  { value: 'unknown',  label: 'Outro' },
];
function SilenceModal({lead, currentUser, onClose, onDone}) {
  const [contactType, setContactType] = useState('supplier');
  const confirm = async () => {
    const label = CONTACT_TYPES.find(t => t.value === contactType)?.label || contactType;
    await api('/suppressed-contacts', 'POST', {
      phone:              lead.phone,
      contact_type:       contactType,
      suppression_reason: label,
      suppressed_by:      currentUser?.name || 'manual',
      contact_name:       lead.patient_name || '',
    });
    onDone();
    onClose();
  };
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <h3>🔇 Silenciar bot neste número</h3>
        <p style={{fontSize:'13px',color:'var(--text-secondary)',marginBottom:'12px'}}>
          O bot não responderá mais mensagens deste contato. A equipe ainda receberá as mensagens no painel.
        </p>
        <label style={{fontSize:'12px',fontWeight:600}}>Tipo de contato</label>
        <select className="filter-select" style={{width:'100%',marginTop:'6px'}} value={contactType} onChange={e=>setContactType(e.target.value)}>
          {CONTACT_TYPES.map(t=><option key={t.value} value={t.value}>{t.label}</option>)}
        </select>
        <div className="modal-actions">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-danger" onClick={confirm}>🔇 Silenciar</button>
        </div>
      </div>
    </div>
  );
}

// ─── DETAIL PANEL ────────────────────────────────────────────────────────────
function DetailPanel({lead, currentUser, users, isAdmin, onUpdate, onToast, suppressedContacts, reloadSuppressed}) {
  const [showTransfer, setShowTransfer] = useState(false);
  const [showFinalizar, setShowFinalizar] = useState(false);
  const [showSilence, setShowSilence] = useState(false);

  const cleanPhone = (lead.phone||'').replace(/[^0-9]/g,'');
  const isSuppressed = suppressedContacts && suppressedContacts[cleanPhone];

  const reactivateBot = async () => {
    await api(`/suppressed-contacts/${lead.phone}`, 'DELETE');
    if (reloadSuppressed) reloadSuppressed();
    onToast('🔊 Bot reativado para este número', 'success');
  };

  const assume = async()=>{ await api(`/leads/${lead.id}/assume`,'PUT',{user_id:currentUser.id}); onUpdate(); };
  const changeStatus = async(s)=>{ await api(`/leads/${lead.id}/status`,'PUT',{user_id:currentUser.id,status:s}); onUpdate(); };
  const changePriority = async(p)=>{ await api(`/leads/${lead.id}/priority`,'PUT',{user_id:currentUser.id,priority:p}); onUpdate(); };
  const finalize = async(destination) => {
    const res = await api(`/leads/${lead.id}/status`,'PUT',{user_id:currentUser.id,status:'Finalizado',destination});
    if (res.error) { onToast('❌ ' + res.error, 'warning'); return; }
    setShowFinalizar(false);
    onUpdate();
  };
  const reopen = async()=>{ await api(`/leads/${lead.id}/reopen`,'PUT',{user_id:currentUser.id}); onUpdate(); };
  const toggleBot = async () => {
    const res = await api(`/leads/${lead.id}/toggle-bot`, 'PUT', { user_id: currentUser.id, user_name: currentUser.name });
    onUpdate();
    onToast(res.bot_paused ? '⏸ Bot pausado para este lead' : '▶ Bot retomado', res.bot_paused ? 'warning' : 'success');
  };
  const openWA = () => openWhatsApp(lead.phone);
  const doTransfer = async(toId,reason)=>{ await api(`/leads/${lead.id}/transfer`,'PUT',{from_user_id:currentUser.id,to_user_id:toId,reason}); onUpdate(); };

  const openDoctoralia = () => {
    window.open('https://docplanner.doctoralia.com.br/#/calendar-clinic/week', '_blank');
  };

  const waitMin = lead.created_at&&lead.assumed_at ? Math.round((new Date(lead.assumed_at)-new Date(lead.created_at))/60000) : null;
  const attendMin = lead.assumed_at&&lead.finished_at ? Math.round((new Date(lead.finished_at)-new Date(lead.assumed_at))/60000) : null;
  const totalMin = lead.created_at&&lead.finished_at ? Math.round((new Date(lead.finished_at)-new Date(lead.created_at))/60000) : null;

  return (
    <div className="detail-panel">
      {showTransfer && <TransferModal users={users} currentUser={currentUser} onTransfer={doTransfer} onClose={()=>setShowTransfer(false)}/>}
      {showFinalizar && <FinalizarModal lead={lead} currentUser={currentUser} onConfirm={finalize} onClose={()=>setShowFinalizar(false)}/>}
      {showSilence && <SilenceModal lead={lead} currentUser={currentUser} onClose={()=>setShowSilence(false)} onDone={()=>{ if(reloadSuppressed) reloadSuppressed(); onToast('🔇 Bot silenciado para este número','success'); }}/>}
      <div className="detail-header">
        <div className="detail-name">{lead.patient_name||'Paciente sem nome'}</div>
        <div className="detail-phone">📱 {lead.phone} · 🕐 {formatDateTime(lead.created_at)}</div>
        <div className="detail-actions">
          {!lead.assigned_to && <button className="btn btn-primary" onClick={assume}>✋ Assumir</button>}
          <button className="btn btn-success" onClick={openWA}>💬 WhatsApp</button>
          <button className="btn btn-doctoralia" onClick={openDoctoralia}>📅 Agenda</button>
          <button className="btn btn-warning" onClick={()=>setShowTransfer(true)}>↪ Encaminhar</button>
          {lead.status!=='Finalizado' && <button className="btn btn-danger" onClick={()=>setShowFinalizar(true)}>✅ Finalizar</button>}
          {isAdmin&&lead.status==='Finalizado' && <button className="btn btn-ghost" onClick={reopen}>🔄 Reabrir</button>}
          {lead.status!=='Finalizado' && (
            lead.bot_paused
              ? <button className="btn btn-bot-resume" onClick={toggleBot} title={`Bot pausado por: ${lead.bot_paused_by||'equipe'}`}>▶ Retomar bot</button>
              : <button className="btn btn-bot-pause" onClick={toggleBot}>⏸ Pausar bot</button>
          )}
          {isSuppressed
            ? <button className="btn btn-ghost" onClick={reactivateBot} title={`Silenciado: ${isSuppressed.suppression_reason||isSuppressed.contact_type}`}>🔊 Reativar bot</button>
            : <button className="btn btn-ghost" onClick={()=>setShowSilence(true)}>🔇 Silenciar bot</button>
          }
        </div>
        <div style={{display:'flex',gap:'8px',flexWrap:'wrap'}}>
          <select className="filter-select" value={lead.status} onChange={e=>changeStatus(e.target.value)}>
            {['Novo','Em atendimento','Aguardando paciente','Aguardando doutor','Aguardando colega'].map(s=><option key={s}>{s}</option>)}
            {lead.status==='Finalizado' && <option value="Finalizado">Finalizado</option>}
          </select>
          <select className="filter-select" value={lead.priority} onChange={e=>changePriority(e.target.value)}>
            {['Normal','Importante','Urgente'].map(p=><option key={p}>{p}</option>)}
          </select>
        </div>
        <div className="detail-cat-row">
          {(lead.internalCategory || lead.ai_intent) && <span className="badge badge-intent">{lead.internalCategory || lead.ai_intent}</span>}
          {lead.urgency && lead.urgency !== 'Baixa' && (
            <span className={`lc-urgency-tag lc-urg-${lead.urgency==='Alta'?'alta':'media'}`}>{lead.urgency}</span>
          )}
          {lead.assigned_name && <span className="detail-assigned-chip">👤 {lead.assigned_name}</span>}
          {lead.finished_by_name && <span className="detail-assigned-chip">✅ Finalizado por: {lead.finished_by_name}</span>}
          {lead.finalization_destination && <span className="detail-assigned-chip">📍 {lead.finalization_destination}</span>}
          {waitMin !== null && <span className="detail-assigned-chip">⏱ Espera: {waitMin}min</span>}
          {attendMin !== null && <span className="detail-assigned-chip">🩺 Atend.: {attendMin}min{!lead.finished_at?' (em curso)':''}</span>}
        </div>
      </div>
      <div className="detail-columns">
        {/* Coluna esquerda: mensagens + respostas sugeridas + histórico */}
        <div className="detail-col-left">
          {lead.messages&&lead.messages.length>0&&(
            <div className="detail-section">
              <h4>💬 Conversa WhatsApp</h4>
              <div className="chat-thread">
                {lead.messages.map((m,i)=>{
                  const isTeam = m.from_team === true && m.sender !== 'bot';
                  const isBot  = m.from_team === true && m.sender === 'bot';
                  const wrapCls = isTeam ? 'team' : isBot ? 'bot' : 'patient';
                  const bubbleCls = isTeam ? 'bubble-team' : isBot ? 'bubble-bot' : 'bubble-patient';
                  return (
                    <div key={i} className={`chat-bubble-wrap ${wrapCls}`}>
                      <div className={`chat-bubble ${bubbleCls}`}>
                        {isTeam && <div className="bubble-sender">{m.sender}</div>}
                        {isBot  && <div className="bubble-sender bubble-sender-bot">🤖 Bot</div>}
                        {m.audio_url && (
                          <div className="bubble-audio-badge">🎤 Áudio transcrito</div>
                        )}
                        <div className="bubble-text">{m.content}</div>
                        <div className="bubble-time">{formatDateTime(m.created_at)}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
          <SuggestedReplies lead={lead}/>
          {lead.history&&lead.history.length>0&&(
            <div className="detail-section">
              <h4>Histórico</h4>
              {lead.history.map((h,i)=>(
                <div key={i} className="history-item">
                  <div className="history-dot"/>
                  <div className="history-content">
                    <div className="history-action">{h.action_type.replace(/_/g,' ')}</div>
                    <div className="history-meta">{h.user_name||'Sistema'} · {timeSince(h.created_at)}{h.old_value&&h.new_value&&` · ${h.old_value} → ${h.new_value}`}</div>
                    {h.note_text&&<div className="history-note">📝 {h.note_text}</div>}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Coluna direita: agente de consulta + follow-up */}
        <div className="detail-col-right">
          <ConsultationAgentPanel lead={lead}/>
          <FollowUpPanel lead={lead} currentUser={currentUser} onUpdate={onUpdate} onToast={onToast}/>
        </div>
      </div>
    </div>
  );
}

// ─── CAMPAIGN METRICS ────────────────────────────────────────────────────────
function CampaignMetrics() {
  const [data, setData] = useState(null);
  const [err, setErr]   = useState(null);

  const load = useCallback(() => {
    api('/metrics/campaign').then(d => {
      if (d && d.summary) { setData(d); setErr(null); }
      else if (d && d.error) setErr(d.error);
    });
  }, []);

  useEffect(() => { load(); const t = setInterval(load, 60000); return () => clearInterval(t); }, [load]);

  if (err)   return <div className="metrics-view"><div style={{color:'var(--danger)',padding:20}}>⚠️ {err}</div></div>;
  if (!data) return <div className="loading">Carregando métricas de campanha...</div>;

  const { summary, by_type, by_state, by_strategy, objections } = data;
  const FUNNEL = ['triggered','qualifying','pitching','objection','closing','scheduled','handoff','won','lost'];
  const S_LABEL = {triggered:'Acionado',qualifying:'Qualificando',pitching:'Pitch',objection:'Objeção',closing:'Fechamento',scheduled:'Agendado',handoff:'Handoff',won:'Convertido',lost:'Perdido'};
  const S_COLOR = {triggered:'#6366f1',qualifying:'#8b5cf6',pitching:'#3b82f6',objection:'#f59e0b',closing:'#10b981',scheduled:'#059669',handoff:'#14b8a6',won:'#22c55e',lost:'#ef4444'};
  const OBJ_LABEL = {price:'Preço',fear:'Medo',delay:'Adiamento',compare:'Comparação'};
  const TYPE_LABEL = {catarata:'Catarata',refrativa:'Refrativa',unknown:'Não identificado'};
  const maxState = Math.max(...Object.values(by_state), 1);

  return (
    <div className="metrics-view">
      <div className="metrics-header-row">
        <div className="metrics-title">📣 Campanha Instagram — últimos 30 dias</div>
        <button className="period-btn active" onClick={load}>↻ Atualizar</button>
      </div>

      <div className="metrics-section-label">Resumo Geral</div>
      <div className="metrics-cards">
        <div className="metric-card highlight"><p>Total de Leads</p><h3>{summary.total}</h3><div style={{fontSize:11,color:'rgba(255,255,255,0.6)',marginTop:4}}>últimos 30 dias</div></div>
        <div className="metric-card"><p>Convertidos</p><h3 style={{color:'var(--success)'}}>{summary.won}</h3><div style={{fontSize:11,color:'var(--text-light)',marginTop:4}}>{summary.conversion_rate}% taxa de conversão</div></div>
        <div className="metric-card"><p>Handoffs</p><h3 style={{color:'var(--primary)'}}>{summary.handoffs}</h3><div style={{fontSize:11,color:'var(--text-light)',marginTop:4}}>{summary.handoff_rate}% passados p/ equipe</div></div>
        <div className="metric-card"><p>Agendamentos</p><h3 style={{color:'var(--success)'}}>{summary.scheduled}</h3></div>
        <div className="metric-card"><p>Perdidos</p><h3 style={{color:'var(--danger)'}}>{summary.lost}</h3></div>
        <div className={`metric-card${summary.active_count>0?' highlight':''}`}><p>Ativos agora</p><h3>{summary.active_count}</h3><div style={{fontSize:11,color:'rgba(255,255,255,0.6)',marginTop:4}}>nas últimas 2h</div></div>
      </div>

      {Object.keys(by_type).length > 0 && <>
        <div className="metrics-section-label">Por Tipo de Campanha</div>
        <div className="metrics-cards">
          {Object.entries(by_type).map(([type, d]) => (
            <div key={type} className="metric-card">
              <p>{TYPE_LABEL[type]||type}</p><h3>{d.total}</h3>
              <div style={{fontSize:11,color:'var(--text-light)',marginTop:4}}>{d.total?Math.round(d.won/d.total*100):0}% convertidos</div>
            </div>
          ))}
        </div>
      </>}

      {Object.keys(by_strategy).length > 0 && <>
        <div className="metrics-section-label">Estratégia B vs C</div>
        <div className="metrics-cards">
          {Object.entries(by_strategy).map(([strat, d]) => (
            <div key={strat} className="metric-card">
              <p>Estratégia {strat}</p><h3>{d.total} leads</h3>
              <div style={{fontSize:11,color:'var(--text-light)',marginTop:4}}>
                {d.total?Math.round(d.won/d.total*100):0}% conv. · {d.total?Math.round(d.handoffs/d.total*100):0}% handoff
              </div>
            </div>
          ))}
        </div>
      </>}

      <div className="metrics-section-label">Funil de Campanha</div>
      <div style={{background:'var(--bg-card)',borderRadius:12,padding:'16px 20px',marginBottom:16}}>
        {FUNNEL.filter(s => by_state[s]).length === 0
          ? <div style={{color:'var(--text-light)',fontSize:13}}>Sem dados de funil ainda.</div>
          : FUNNEL.filter(s => by_state[s]).map(s => (
          <div key={s} style={{marginBottom:10}}>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:12,marginBottom:3}}>
              <span style={{color:'var(--text-main)'}}>{S_LABEL[s]}</span>
              <span style={{color:'var(--text-light)',fontWeight:600}}>{by_state[s]}</span>
            </div>
            <div style={{background:'var(--border)',borderRadius:4,height:8,overflow:'hidden'}}>
              <div style={{width:`${Math.round(by_state[s]/maxState*100)}%`,height:'100%',background:S_COLOR[s],borderRadius:4,transition:'width 0.4s'}}/>
            </div>
          </div>
        ))}
      </div>

      {objections.length > 0 && <>
        <div className="metrics-section-label">Objeções Detectadas</div>
        <div style={{background:'var(--bg-card)',borderRadius:12,padding:'16px 20px',marginBottom:16}}>
          {objections.map(o => (
            <div key={o.type} style={{display:'flex',justifyContent:'space-between',padding:'6px 0',borderBottom:'1px solid var(--border)',fontSize:13}}>
              <span style={{color:'var(--text-main)'}}>{OBJ_LABEL[o.type]||o.type}</span>
              <span style={{fontWeight:600,color:'var(--warning)'}}>{o.count}</span>
            </div>
          ))}
        </div>
      </>}
    </div>
  );
}

// ─── METRICS DASHBOARD ───────────────────────────────────────────────────────
function MetricsDashboard() {
  const [data, setData] = useState(null);
  const [period, setPeriod] = useState('today');
  const [customDate, setCustomDate] = useState(() => new Date().toISOString().slice(0,10));

  const load = useCallback(() => {
    const params = `period=${period}${period==='custom'?`&date=${customDate}`:''}`;
    api(`/metrics?${params}`).then(d => { if (d&&d.funnel) setData(d); });
  }, [period, customDate]);

  useEffect(()=>{
    load();
    const t = setInterval(load, 30000);
    return () => clearInterval(t);
  },[load]);

  if (!data) return <div className="loading">Carregando métricas...</div>;
  const {funnel, quality, user_metrics, intent_distribution, status_distribution, value_distribution, period_label, period_total} = data;

  const fmt = (v, suffix='min') => v != null ? `${v}${suffix}` : '—';
  const fmtPct = (v) => v != null ? `${v}%` : '—';
  const maxI = Math.max(...(intent_distribution||[]).map(i=>i.count), 1);
  const maxS = Math.max(...(status_distribution||[]).map(s=>s.count), 1);
  const maxV = Math.max(...(value_distribution||[]).map(v=>v.count), 1);

  const statusColor = {
    'Novo':'var(--danger)', 'Em atendimento':'var(--primary)',
    'Aguardando paciente':'var(--warning)', 'Aguardando doutor':'var(--warning)',
    'Aguardando colega':'var(--warning)', 'Finalizado':'var(--success)',
  };
  const valueColor = {'Alto':'var(--success)','Médio':'var(--warning)','Baixo':'var(--text-light)'};

  const PERIODS = [
    {id:'today', label:'Hoje'},
    {id:'week',  label:'Semana'},
    {id:'month', label:'Mês'},
    {id:'custom',label:'Data'},
  ];

  return (
    <div className="metrics-view">
      <div className="metrics-header-row">
        <div className="metrics-title">📊 Dashboard Operacional</div>
        <div className="metrics-period-selector">
          {PERIODS.map(p => (
            <button key={p.id}
              className={`period-btn${period===p.id?' active':''}`}
              onClick={() => setPeriod(p.id)}>
              {p.label}
            </button>
          ))}
          {period==='custom' && (
            <input type="date" className="period-date-input"
              value={customDate}
              onChange={e => setCustomDate(e.target.value)}/>
          )}
        </div>
      </div>
      {period_label && (
        <div className="metrics-period-info">
          Exibindo dados de: <strong>{period_label}</strong>
          {period_total!=null && <span> · {period_total} lead{period_total!==1?'s':''} criado{period_total!==1?'s':''} no período</span>}
        </div>
      )}

      {/* ── BLOCO 1: Operação Agora ── */}
      <div className="metrics-section-label">🔴 Operação Agora</div>
      <div className="metrics-cards">
        <div className="metric-card highlight">
          <p>Leads Abertos</p>
          <h3>{funnel.leads_open ?? funnel.total_leads}</h3>
          <div style={{fontSize:11,color:'rgba(255,255,255,0.6)',marginTop:4}}>total em aberto</div>
        </div>
        <div className={`metric-card${funnel.leads_no_owner>0?' metric-alert':''}`}>
          <p>Sem Responsável</p>
          <h3 style={{color:funnel.leads_no_owner>0?'var(--danger)':'var(--success)'}}>{funnel.leads_no_owner??0}</h3>
          {funnel.leads_no_owner>0&&<div className="metric-alert-label">⚠️ Ação necessária</div>}
        </div>
        <div className="metric-card">
          <p>Em Atendimento</p>
          <h3 style={{color:'var(--primary)'}}>{funnel.leads_in_progress??funnel.in_progress}</h3>
        </div>
        <div className="metric-card">
          <p>Aguardando Paciente</p>
          <h3 style={{color:'var(--warning)'}}>{funnel.leads_waiting_patient??0}</h3>
        </div>
        <div className={`metric-card${funnel.leads_overdue_sla>0?' metric-alert':''}`}>
          <p>Atrasados no SLA</p>
          <h3 style={{color:funnel.leads_overdue_sla>0?'var(--danger)':'var(--success)'}}>{funnel.leads_overdue_sla??0}</h3>
          {funnel.leads_overdue_sla>0
            ?<div className="metric-alert-label">⏰ +30min sem resposta</div>
            :<div style={{fontSize:11,color:'var(--text-light)',marginTop:4}}>dentro do prazo</div>}
        </div>
        <div className="metric-card">
          <p>Urgência Alta</p>
          <h3 style={{color:funnel.leads_high_urgency>0?'var(--danger)':'inherit'}}>{funnel.leads_high_urgency??funnel.high_urgency}</h3>
        </div>
        <div className="metric-card">
          <p>Agendados</p>
          <h3 style={{color:'var(--success)'}}>{funnel.leads_scheduled_today??0}</h3>
          <div style={{fontSize:11,color:'var(--text-light)',marginTop:4}}>{period_label||'período'} · Doctoralia</div>
        </div>
        <div className="metric-card">
          <p>Finalizados</p>
          <h3 style={{color:'var(--success)'}}>{funnel.leads_finished_today??0}</h3>
          <div style={{fontSize:11,color:'var(--text-light)',marginTop:4}}>{period_label||'período'}</div>
        </div>
      </div>

      {/* ── BLOCO 2: Qualidade Operacional ── */}
      <div className="metrics-section-label">⚙️ Qualidade Operacional</div>
      <div className="metrics-quality-row">
        <div className="quality-card">
          <div className="quality-label">T. Médio para Assumir</div>
          <div className="quality-value">{fmt(quality?.avg_time_to_assume)}</div>
          <div className="quality-sub">criação → 1º responsável</div>
        </div>
        <div className="quality-card">
          <div className="quality-label">T. Médio até Finalizar</div>
          <div className="quality-value">{fmt(quality?.avg_time_to_finish)}</div>
          <div className="quality-sub">criação → finalização</div>
        </div>
        <div className="quality-card">
          <div className="quality-label">% Leads Assumidos</div>
          <div className="quality-value">{fmtPct(quality?.pct_assumed)}</div>
          <div className="quality-sub">dos leads em aberto</div>
        </div>
        <div className="quality-card">
          <div className="quality-label">% Atrasados no SLA</div>
          <div className="quality-value" style={{color:quality?.pct_overdue>20?'var(--danger)':'inherit'}}>
            {fmtPct(quality?.pct_overdue)}
          </div>
          <div className="quality-sub">sem resposta em +30min</div>
        </div>
        <div className="quality-card">
          <div className="quality-label">% Conversão Geral</div>
          <div className="quality-value" style={{color:'var(--success)'}}>{fmtPct(quality?.pct_conversion)}</div>
          <div className="quality-sub">leads → Doctoralia</div>
        </div>
      </div>

      {/* ── BLOCO 3: Performance da Equipe ── */}
      <div className="metrics-section-label">👥 Performance da Equipe</div>
      <div className="user-metrics-table">
        <table>
          <thead><tr>
            <th>Atendente</th>
            <th>Assumidos</th>
            <th>Em Atend.</th>
            <th>Aguardando</th>
            <th>Finalizados</th>
            <th>Agendados</th>
            <th>T. Assumir</th>
            <th>Atrasados</th>
            <th>Conversão</th>
          </tr></thead>
          <tbody>
            {user_metrics.map(u=>(
              <tr key={u.id}>
                <td>
                  <strong>{u.name}</strong><br/>
                  <span style={{fontSize:11,color:'var(--text-light)'}}>{u.role}</span>
                </td>
                <td>{u.assumed_today??'—'}</td>
                <td>{u.in_progress_count??'—'}</td>
                <td>{u.waiting_patient_count??'—'}</td>
                <td>{u.finished_today??'—'}</td>
                <td>{u.bookings}</td>
                <td>{u.avg_wait_min?`${u.avg_wait_min}min`:'—'}</td>
                <td style={{color:u.overdue_count>0?'var(--danger)':'inherit',fontWeight:u.overdue_count>0?700:400}}>
                  {u.overdue_count??'—'}
                </td>
                <td>{u.conversion_rate!=null?`${u.conversion_rate}%`:'—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* ── BLOCO 4: Perfil dos Leads ── */}
      <div className="metrics-section-label">📋 Perfil dos Leads</div>
      <div className="metrics-charts-grid">
        {intent_distribution&&intent_distribution.length>0&&(
          <div className="intent-bar">
            <h3>Por Intenção</h3>
            {intent_distribution.map(i=>{
              const total = intent_distribution.reduce((s,x)=>s+x.count,0);
              const pct = total>0?Math.round((i.count/total)*100):0;
              return (
                <div key={i.ai_intent} className="intent-bar-item">
                  <div className="intent-bar-label">
                    <span>{i.ai_intent||'Não identificado'}</span>
                    <span>{i.count} ({pct}%)</span>
                  </div>
                  <div className="intent-bar-track">
                    <div className="intent-bar-fill" style={{width:`${(i.count/maxI)*100}%`}}/>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {status_distribution&&status_distribution.length>0&&(
          <div className="intent-bar">
            <h3>Por Status</h3>
            {status_distribution.map(s=>{
              const total = status_distribution.reduce((sum,x)=>sum+x.count,0);
              const pct = total>0?Math.round((s.count/total)*100):0;
              const c = statusColor[s.status]||'var(--primary)';
              return (
                <div key={s.status} className="intent-bar-item">
                  <div className="intent-bar-label">
                    <span style={{color:c}}>{s.status}</span>
                    <span>{s.count} ({pct}%)</span>
                  </div>
                  <div className="intent-bar-track">
                    <div className="intent-bar-fill" style={{width:`${(s.count/maxS)*100}%`,background:c}}/>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {value_distribution&&(
          <div className="intent-bar">
            <h3>Por Valor Potencial</h3>
            <div style={{fontSize:11,color:'var(--text-light)',marginBottom:12,lineHeight:1.6}}>
              Alto: Catarata, Refrativa, Olho Seco · Médio: Consulta, Exames · Baixo: Dúvidas, Outros
            </div>
            {value_distribution.map(v=>{
              const total = value_distribution.reduce((s,x)=>s+x.count,0);
              const pct = total>0?Math.round((v.count/total)*100):0;
              const c = valueColor[v.label]||'var(--text-light)';
              return (
                <div key={v.label} className="intent-bar-item">
                  <div className="intent-bar-label">
                    <span style={{color:c,fontWeight:600}}>{v.label} valor</span>
                    <span>{v.count} ({pct}%)</span>
                  </div>
                  <div className="intent-bar-track">
                    <div className="intent-bar-fill" style={{width:`${(v.count/maxV)*100}%`,background:c}}/>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

// ─── MAIN WORKSPACE ──────────────────────────────────────────────────────────
function Workspace({currentUser, onLogout}) {
  const [leads, setLeads] = useState([]);
  const [selectedLead, setSelectedLead] = useState(null);
  const [users, setUsers] = useState([]);
  const [tab, setTab] = useState('workspace');
  const [search, setSearch] = useState('');
  const [filterStatus, setFilterStatus] = useState('');
  const [filterPriority, setFilterPriority] = useState('');
  const [filterUser, setFilterUser] = useState('');
  const [toast, setToast] = useState(null);
  const [toastType, setToastType] = useState('');
  const [showNewLead, setShowNewLead] = useState(false);
  const [suppressedContacts, setSuppressedContacts] = useState({});
  const [botGlobalPaused, setBotGlobalPaused] = useState(false);
  const isAdmin = currentUser.role === 'ADMIN';
  const esRef = useRef(null);
  const toastRef = useRef(null);
  const fetchLeadsRef = useRef(null);

  const showToast = useCallback((msg, type='') => {
    setToast(msg);
    setToastType(type);
    clearTimeout(toastRef.current);
    toastRef.current = setTimeout(()=>setToast(null), 4000);
  }, []);

  const loadSuppressed = useCallback(async() => {
    const data = await api('/suppressed-contacts');
    if (Array.isArray(data)) {
      const map = {};
      data.forEach(c => { if (c.phone) map[c.phone.replace(/[^0-9]/g,'')] = c; });
      setSuppressedContacts(map);
    }
  }, []);

  const fetchLeads = useCallback(async() => {
    const qs = new URLSearchParams();
    if (filterStatus) qs.set('status', filterStatus);
    if (filterUser) qs.set('assigned_to', filterUser);
    if (filterPriority) qs.set('priority', filterPriority);
    const data = await api(`/leads?${qs}`);
    setLeads(Array.isArray(data) ? data : []);
  }, [filterStatus, filterUser, filterPriority]);

  // Keep a ref to the latest fetchLeads so the SSE handler never has a stale closure
  useEffect(() => { fetchLeadsRef.current = fetchLeads; }, [fetchLeads]);

  useEffect(() => {
    api('/auth/users').then(u => Array.isArray(u) && setUsers(u));
    api('/leads/settings').then(s => { if (s && typeof s.bot_global_paused === 'boolean') setBotGlobalPaused(s.bot_global_paused); });
    fetchLeads();
    loadSuppressed();

    let es;
    function connectSSE() {
      if (es) es.close();
      es = new EventSource(`${API}/leads/events/stream`);
      esRef.current = es;

      es.onmessage = (e) => {
        const msg = JSON.parse(e.data);
        fetchLeadsRef.current?.();

        if ((msg.type==='LEAD_UPDATED'||msg.type==='TRANSFER_RECEIVED') && msg.lead) {
          setSelectedLead(prev => prev && prev.id===msg.lead.id ? msg.lead : prev);
        }
        if (msg.type==='NEW_LEAD') {
          showToast(`🆕 Novo lead: ${msg.lead.patient_name||msg.lead.phone}`);
        }
        if (msg.type==='TRANSFER_RECEIVED' && msg.to_user_id===currentUser.id) {
          showToast(`📨 Encaminhado para você: ${msg.lead.patient_name||msg.lead.phone}`, 'warning');
        }
        if (msg.type==='BOT_GLOBAL_PAUSED') {
          setBotGlobalPaused(msg.paused);
          showToast(msg.paused ? '⏸ Bot pausado para todos os pacientes' : '▶ Bot retomado para todos os pacientes', msg.paused ? 'warning' : 'success');
        }
        if (msg.type==='LEAD_UPDATED' && msg.lead?.priority==='Urgente') {
          if (!msg.lead.assigned_to || msg.lead.assigned_to===currentUser.id) {
            showToast(`🚨 Urgente: ${msg.lead.patient_name||msg.lead.phone}`, 'warning');
          }
        }
      };

      es.onerror = () => {
        if (es.readyState === EventSource.CLOSED) {
          setTimeout(connectSSE, 3000);
        }
      };
    }

    connectSSE();
    return () => es?.close();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => { fetchLeads(); }, [fetchLeads]);

  const handleLeadUpdate = async() => {
    fetchLeads();
    if (selectedLead) {
      const fresh = await api(`/leads/${selectedLead.id}`);
      if (fresh.id) setSelectedLead(fresh);
    }
  };

  const openLead = async(l) => {
    const full = await api(`/leads/${l.id}`);
    if (full.id) setSelectedLead(full);
  };

  const filtered = leads.filter(l => {
    if (l.lead_type === 'human_outbound') return false;
    const q = search.toLowerCase();
    return !q || l.patient_name?.toLowerCase().includes(q) || l.phone?.includes(q);
  });

  const externals = leads.filter(l => {
    if (l.lead_type !== 'human_outbound') return false;
    const q = search.toLowerCase();
    return !q || l.patient_name?.toLowerCase().includes(q) || l.phone?.includes(q);
  });

  const pendingCount = leads.filter(l => l.lead_type !== 'human_outbound' && l.status !== 'Finalizado').length;
  const newCount = leads.filter(l => l.lead_type !== 'human_outbound' && l.status === 'Novo').length;
  const externalsActiveCount = leads.filter(l => l.lead_type === 'human_outbound' && l.status !== 'Finalizado').length;

  return (
    <div className="app-layout">
      {toast && <div className={`toast ${toastType==='warning'?'toast-warning':''} ${toastType==='success'?'toast-success':''}`}>{toast}</div>}
      {showNewLead && (
        <NewLeadModal
          onCreated={(lead) => { openLead(lead); showToast('✅ Atendimento criado!', 'success'); }}
          onClose={() => setShowNewLead(false)}
        />
      )}
      <div className="sidebar">
        <div className="sidebar-logo">Maya<span>.</span></div>
        <div className="sidebar-user">{currentUser.name} · {currentUser.role}</div>
        <div className="sidebar-middle">
          <ul className="sidebar-nav">
            <li><button className={tab==='workspace'?'active':''} onClick={()=>setTab('workspace')}>
              🗂 Atendimentos
              {pendingCount>0&&<span className="badge-count">{pendingCount}</span>}
            </button></li>
            <li><button className={tab==='externos'?'active':''} onClick={()=>setTab('externos')}>
              📤 Externos
              {externalsActiveCount>0&&<span className="badge-count" style={{background:'#722ed1'}}>{externalsActiveCount}</span>}
            </button></li>
            <li><button className={tab==='confirmations'?'active':''} onClick={()=>setTab('confirmations')}>📅 Confirmações</button></li>
            {isAdmin && <li><button className={tab==='metrics'?'active':''} onClick={()=>setTab('metrics')}>📊 Métricas</button></li>}
            {isAdmin && <li><button className={tab==='campaign'?'active':''} onClick={()=>setTab('campaign')}>📣 Campanha</button></li>}
            {isAdmin && <li><button className={tab==='cancellations'?'active':''} onClick={()=>setTab('cancellations')}>❌ Cancelados</button></li>}
          </ul>

          {selectedLead && (
            <div className="sidebar-lead-info">
              <div className="sidebar-info-title">Resumo da IA</div>
              <div className="sidebar-ai-summary">{selectedLead.ai_summary||'Sem resumo disponível.'}</div>
            </div>
          )}

          {selectedLead && (
            <div className="sidebar-lead-info">
              <div className="sidebar-info-title">Informações</div>
              {[
                ['Intenção', selectedLead.ai_intent||'—'],
                ['Urgência', selectedLead.urgency||'—'],
                ['Doctoralia', selectedLead.doctoralia_sent?'✅ Enviado':'❌ Não enviado'],
                ['Follow-up', selectedLead.automatic_follow_up_sent?'✅ Sim':'❌ Não'],
              ].map(([l,v])=>(
                <div key={l} className="sidebar-info-item">
                  <div className="sidebar-info-label">{l}</div>
                  <div className="sidebar-info-value">{v}</div>
                </div>
              ))}
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:6,marginTop:6}}>
                {[
                  ['T. Espera', selectedLead.assumed_at ? Math.max(0,Math.round((new Date(selectedLead.assumed_at)-new Date(selectedLead.created_at))/60000))+'min' : selectedLead.created_at ? Math.max(0,Math.round((new Date()-new Date(selectedLead.created_at))/60000))+'min aguardando' : '—'],
                  ['T. Atend.', selectedLead.assumed_at&&selectedLead.finished_at ? Math.max(0,Math.round((new Date(selectedLead.finished_at)-new Date(selectedLead.assumed_at))/60000))+'min' : selectedLead.assumed_at ? Math.max(0,Math.round((new Date()-new Date(selectedLead.assumed_at))/60000))+'min em curso' : '—'],
                ].map(([l,v])=>(
                  <div key={l} className="sidebar-info-item">
                    <div className="sidebar-info-label">{l}</div>
                    <div className="sidebar-info-value">{v}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {selectedLead && selectedLead.status !== 'Finalizado' && (
            <div className="sidebar-lead-info">
              <div className="sidebar-info-title">Observações</div>
              <SidebarNoteInput lead={selectedLead} onUpdate={handleLeadUpdate}/>
            </div>
          )}
        </div>

        {newCount > 0 && (
          <div style={{background:'#FEE2E2',borderRadius:10,padding:'10px 12px',marginTop:8,fontSize:13,color:'#DC2626',fontWeight:600}}>
            🔴 {newCount} {newCount===1?'lead novo':'leads novos'} sem atendente
          </div>
        )}
        <button
          className={`bot-kill-switch ${botGlobalPaused ? 'bot-kill-switch--paused' : ''}`}
          onClick={async () => {
            const res = await api('/leads/bot-global-pause', 'PUT', { user_id: currentUser.id, user_name: currentUser.name });
            if (res && typeof res.bot_global_paused === 'boolean') setBotGlobalPaused(res.bot_global_paused);
          }}
          title={botGlobalPaused ? `Bot pausado por: ${botGlobalPaused}` : 'Pausar bot para todos os pacientes'}
        >
          {botGlobalPaused ? '▶ Bot está PAUSADO — clique para retomar' : '⏸ Pausar bot global'}
        </button>
        <button className="logout-btn" onClick={onLogout}>Sair</button>
      </div>

      {tab==='workspace' ? (
        <div className="workspace">
          <div className="leads-panel">
            <div className="workspace-header">
              <div className="workspace-title">Fila de Atendimento</div>
              <input className="search-input" placeholder="Buscar por nome ou telefone..." value={search} onChange={e=>setSearch(e.target.value)}/>
              <button className="btn btn-new" onClick={()=>setShowNewLead(true)}>➕ Novo</button>
            </div>
            <div className="filter-bar">
              <select className="filter-select" value={filterStatus} onChange={e=>setFilterStatus(e.target.value)}>
                <option value="">Todos os Status</option>
                {['Novo','Em atendimento','Aguardando paciente','Aguardando doutor','Aguardando colega','Finalizado'].map(s=><option key={s}>{s}</option>)}
              </select>
              <select className="filter-select" value={filterPriority} onChange={e=>setFilterPriority(e.target.value)}>
                <option value="">Todas Prioridades</option>
                {['Normal','Importante','Urgente'].map(p=><option key={p}>{p}</option>)}
              </select>
              <select className="filter-select" value={filterUser} onChange={e=>setFilterUser(e.target.value)}>
                <option value="">Todos os Responsáveis</option>
                <option value={currentUser.id}>Meus Atendimentos</option>
                {isAdmin && users.map(u=><option key={u.id} value={u.id}>{u.name}</option>)}
              </select>
            </div>
            <div className="leads-list">
              {filtered.length===0 ? (
                <div className="empty-state"><span>✅</span><p>Nenhum atendimento encontrado.</p></div>
              ) : filtered.map(l=>(
                <LeadCard key={l.id} lead={l} selected={selectedLead?.id===l.id} onClick={()=>openLead(l)} suppressedContacts={suppressedContacts}/>
              ))}
            </div>
          </div>
          {selectedLead ? (
            <DetailPanel lead={selectedLead} currentUser={currentUser} users={users} isAdmin={isAdmin}
              onUpdate={handleLeadUpdate} onToast={showToast}
              suppressedContacts={suppressedContacts} reloadSuppressed={loadSuppressed}/>
          ) : (
            <div className="detail-panel" style={{alignItems:'center',justifyContent:'center'}}>
              <div className="empty-state"><span>👆</span><p>Selecione um atendimento para ver os detalhes.</p></div>
            </div>
          )}
        </div>
      ) : tab==='externos' ? (
        <div className="workspace">
          <div className="leads-panel">
            <div className="workspace-header">
              <div className="workspace-title">Contatos Externos</div>
              <input className="search-input" placeholder="Buscar por nome ou telefone..." value={search} onChange={e=>setSearch(e.target.value)}/>
            </div>
            <div className="leads-list">
              {externals.length===0 ? (
                <div className="empty-state"><span>📤</span><p>Nenhum contato externo ativo.</p></div>
              ) : externals.map(l=>(
                <LeadCard key={l.id} lead={l} selected={selectedLead?.id===l.id} onClick={()=>openLead(l)} suppressedContacts={suppressedContacts}/>
              ))}
            </div>
          </div>
          {selectedLead ? (
            <DetailPanel lead={selectedLead} currentUser={currentUser} users={users} isAdmin={isAdmin}
              onUpdate={handleLeadUpdate} onToast={showToast}
              suppressedContacts={suppressedContacts} reloadSuppressed={loadSuppressed}/>
          ) : (
            <div className="detail-panel" style={{alignItems:'center',justifyContent:'center'}}>
              <div className="empty-state"><span>📤</span><p>Selecione um contato para ver os detalhes.</p></div>
            </div>
          )}
        </div>
      ) : tab==='confirmations' ? (
        <div className="workspace"><ConfirmationsTab/></div>
      ) : tab==='campaign' ? (
        <div className="workspace"><CampaignMetrics/></div>
      ) : tab==='cancellations' ? (
        <div className="workspace"><CancellationsTab/></div>
      ) : (
        <div className="workspace"><MetricsDashboard/></div>
      )}
    </div>
  );
}

// ─── CANCELLATIONS TAB ───────────────────────────────────────────────────────
function CancellationsTab() {
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [fromDate, setFromDate] = useState('');
  const [toDate, setToDate] = useState('');

  const load = async () => {
    setLoading(true);
    const qs = new URLSearchParams({ limit: 300 });
    if (fromDate) qs.set('from', fromDate);
    if (toDate)   qs.set('to',   toDate + 'T23:59:59');
    const data = await api(`/cancellations?${qs}`);
    setRows(data.cancellations || []);
    setLoading(false);
  };

  useEffect(() => { load(); }, [fromDate, toDate]);

  const fmtDate = iso => {
    if (!iso) return '—';
    return new Date(iso).toLocaleString('pt-BR', { day:'2-digit', month:'2-digit', year:'numeric', hour:'2-digit', minute:'2-digit' });
  };

  const fmtPhone = p => {
    if (!p) return '—';
    const d = p.replace(/\D/g,'');
    if (d.length === 13) return `(${d.slice(2,4)}) ${d.slice(4,9)}-${d.slice(9)}`;
    if (d.length === 12) return `(${d.slice(2,4)}) ${d.slice(4,8)}-${d.slice(8)}`;
    return p;
  };

  const openWA = phone => {
    const d = (phone||'').replace(/\D/g,'');
    if (d) window.open(`https://wa.me/${d}`, '_blank');
  };

  const filtered = rows.filter(r => {
    if (!search) return true;
    const s = search.toLowerCase();
    return (r.patient_name||'').toLowerCase().includes(s)
      || (r.patient_phone||'').includes(s)
      || (r.doctor_name||'').toLowerCase().includes(s)
      || (r.specialty||'').toLowerCase().includes(s);
  });

  return (
    <div className="canc-tab">
      <div className="canc-header">
        <div className="canc-title">❌ Consultas Canceladas</div>
        <div className="canc-controls">
          <input
            className="filter-select"
            style={{width:200}}
            placeholder="Buscar paciente, médico..."
            value={search}
            onChange={e=>setSearch(e.target.value)}
          />
          <label style={{fontSize:12,color:'#666',display:'flex',alignItems:'center',gap:4}}>
            De: <input type="date" className="filter-select" style={{width:140}} value={fromDate} onChange={e=>setFromDate(e.target.value)}/>
          </label>
          <label style={{fontSize:12,color:'#666',display:'flex',alignItems:'center',gap:4}}>
            Até: <input type="date" className="filter-select" style={{width:140}} value={toDate} onChange={e=>setToDate(e.target.value)}/>
          </label>
          <button className="btn btn-new" onClick={load}>↺ Atualizar</button>
        </div>
      </div>

      {loading ? (
        <div className="empty-state"><p>Carregando cancelamentos...</p></div>
      ) : filtered.length === 0 ? (
        <div className="empty-state"><span>✅</span><p>{search ? 'Nenhum resultado para a busca.' : 'Nenhuma consulta cancelada encontrada.'}</p></div>
      ) : (
        <>
          <div style={{fontSize:12,color:'#888',marginBottom:8,paddingLeft:2}}>
            {filtered.length} cancelamento{filtered.length!==1?'s':''} encontrado{filtered.length!==1?'s':''}
          </div>
          <div className="canc-table-wrap">
            <table className="canc-table">
              <thead>
                <tr>
                  <th className="canc-th">Paciente</th>
                  <th className="canc-th">Telefone</th>
                  <th className="canc-th">Médico</th>
                  <th className="canc-th">Especialidade</th>
                  <th className="canc-th">Data da Consulta</th>
                  <th className="canc-th">Cancelado em</th>
                  <th className="canc-th">Contato</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(r => (
                  <tr key={r.id} className="canc-tr">
                    <td className="canc-td canc-name">{r.patient_name || '—'}</td>
                    <td className="canc-td">{fmtPhone(r.patient_phone_normalized || r.patient_phone)}</td>
                    <td className="canc-td">{r.doctor_name || '—'}</td>
                    <td className="canc-td canc-spec">{r.specialty || '—'}</td>
                    <td className="canc-td canc-date">{fmtDate(r.scheduled_at)}</td>
                    <td className="canc-td" style={{color:'#999',fontSize:12}}>{fmtDate(r.cancelled_at)}</td>
                    <td className="canc-td">
                      {(r.patient_phone_normalized || r.patient_phone) ? (
                        <button
                          className="btn btn-success"
                          style={{fontSize:11,padding:'3px 10px'}}
                          onClick={()=>openWA(r.patient_phone_normalized || r.patient_phone)}
                        >💬 WhatsApp</button>
                      ) : '—'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}

// ─── CONFIRMATIONS TAB ───────────────────────────────────────────────────────
function ConfirmationsTab() {
  const [rows, setRows] = useState([]);
  const [filterStatus, setFilterStatus] = useState('');
  const [view, setView] = useState('upcoming'); // 'upcoming' | 'past'
  const [loading, setLoading] = useState(true);

  const load = async () => {
    setLoading(true);
    const params = filterStatus ? `?status=${filterStatus}&limit=300` : '?limit=300';
    const data = await api(`/confirmations/list${params}`);
    setRows(data.confirmations || []);
    setLoading(false);
  };

  useEffect(() => {
    load();
    const interval = setInterval(load, 20000);
    return () => clearInterval(interval);
  }, [filterStatus]);

  const fmtTime = (iso) => {
    if (!iso) return '—';
    return new Date(iso).toLocaleString('pt-BR', { hour:'2-digit', minute:'2-digit' });
  };

  const fmtDateTime = (iso) => {
    if (!iso) return '—';
    return new Date(iso).toLocaleString('pt-BR', { day:'2-digit', month:'2-digit', hour:'2-digit', minute:'2-digit' });
  };

  const fmtPhone = (p) => {
    if (!p) return '—';
    const d = p.replace(/\D/g, '');
    if (d.length === 13) return `(${d.slice(2,4)}) ${d.slice(4,9)}-${d.slice(9)}`;
    if (d.length === 12) return `(${d.slice(2,4)}) ${d.slice(4,8)}-${d.slice(8)}`;
    return p;
  };

  const STATUS_LABEL = {
    pending:                    { label: 'Aguardando', color: '#faad14' },
    confirmed_pending_reminder: { label: 'Confirmado ✓', color: '#52c41a' },
    confirmed:                  { label: 'Confirmado ✓', color: '#52c41a' },
    cancelled:                  { label: 'Cancelado', color: '#ff4d4f' },
    rescheduled:                { label: 'Remarcação', color: '#722ed1' },
  };

  const windowCell = (dueAt, sentAt, key) => {
    if (!dueAt) return <td key={key} className="conf-td conf-win-empty">—</td>;
    if (sentAt) return <td key={key} className="conf-td conf-win-sent">✅ {fmtDateTime(sentAt)}</td>;
    if (new Date(dueAt) <= new Date()) return <td key={key} className="conf-td conf-win-overdue">⏳ Pendente</td>;
    return <td key={key} className="conf-td conf-win-scheduled">🕐 {fmtDateTime(dueAt)}</td>;
  };

  // Separa linhas em upcoming (hoje + futuro) e past (dias anteriores)
  const todayStart = new Date(); todayStart.setHours(0,0,0,0);

  const upcomingRows = rows.filter(r => {
    const d = new Date((r.appointments || {}).scheduled_at || 0);
    return d >= todayStart;
  });
  const pastRows = rows.filter(r => {
    const d = new Date((r.appointments || {}).scheduled_at || 0);
    return d < todayStart;
  });

  const activeRows = view === 'upcoming' ? upcomingRows : pastRows;

  // Agrupa por data da consulta
  const groupedRows = (() => {
    const now = new Date();
    const todayStr = now.toDateString();
    const tomorrow = new Date(now); tomorrow.setDate(tomorrow.getDate() + 1);
    const tomorrowStr = tomorrow.toDateString();

    const sorted = [...activeRows].sort((a, b) => {
      const da = new Date((a.appointments || {}).scheduled_at || 0);
      const db2 = new Date((b.appointments || {}).scheduled_at || 0);
      // upcoming: ascendente; past: descendente (mais recente primeiro)
      return view === 'upcoming' ? da - db2 : db2 - da;
    });

    const groups = [];
    const seen = {};
    for (const r of sorted) {
      const appt = r.appointments || {};
      const d = appt.scheduled_at ? new Date(appt.scheduled_at) : null;
      let label = 'Sem data';
      if (d && !isNaN(d)) {
        const ds = d.toDateString();
        if (ds === todayStr) label = '📅 Hoje — ' + d.toLocaleDateString('pt-BR', { weekday:'long', day:'2-digit', month:'long' });
        else if (ds === tomorrowStr) label = '📅 Amanhã — ' + d.toLocaleDateString('pt-BR', { weekday:'long', day:'2-digit', month:'long' });
        else if (view === 'past') label = '📌 ' + d.toLocaleDateString('pt-BR', { weekday:'long', day:'2-digit', month:'long', year:'numeric' });
        else label = '📅 ' + d.toLocaleDateString('pt-BR', { weekday:'long', day:'2-digit', month:'long', year:'numeric' });
      }
      if (!seen[label]) { seen[label] = true; groups.push({ label, rows: [] }); }
      groups[groups.length - 1].rows.push(r);
    }
    return groups;
  })();

  // Contadores para o resumo — baseados na view ativa
  const counts = activeRows.reduce((acc, r) => {
    const s = r.flow_status || 'pending';
    acc[s] = (acc[s] || 0) + 1;
    return acc;
  }, {});
  const confirmed  = (counts['confirmed'] || 0) + (counts['confirmed_pending_reminder'] || 0);
  const pending    = counts['pending'] || 0;
  const cancelled  = counts['cancelled'] || 0;
  const reschedule = counts['rescheduled'] || 0;

  return (
    <div className="conf-tab">
      <div className="conf-header">
        <div style={{display:'flex',alignItems:'center',gap:12}}>
          <div className="conf-title">Confirmações de Consulta</div>
          <div className="conf-view-toggle">
            <button className={`conf-view-btn${view==='upcoming'?' active':''}`} onClick={()=>setView('upcoming')}>
              📅 Próximas
            </button>
            <button className={`conf-view-btn${view==='past'?' active':''}`} onClick={()=>setView('past')}>
              📌 Anteriores {pastRows.length > 0 && <span className="conf-past-count">{pastRows.length}</span>}
            </button>
          </div>
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <select className="filter-select" value={filterStatus} onChange={e=>setFilterStatus(e.target.value)}>
            <option value="">Todos os Status</option>
            <option value="pending">Aguardando</option>
            <option value="confirmed_pending_reminder">Confirmado</option>
            <option value="cancelled">Cancelado</option>
            <option value="rescheduled">Remarcação</option>
          </select>
          <button className="btn btn-new" onClick={load}>↺ Atualizar</button>
        </div>
      </div>

      {!loading && activeRows.length > 0 && (
        <div className="conf-summary">
          <span className="conf-sum-item conf-sum-pending">⏳ {pending} aguardando</span>
          <span className="conf-sum-item conf-sum-confirmed">✅ {confirmed} confirmado{confirmed !== 1 ? 's' : ''}</span>
          {cancelled > 0 && <span className="conf-sum-item conf-sum-cancelled">❌ {cancelled} cancelado{cancelled !== 1 ? 's' : ''}</span>}
          {reschedule > 0 && <span className="conf-sum-item conf-sum-reschedule">🔄 {reschedule} remarcação</span>}
          <span style={{color:'#aaa',fontSize:11}}>Total: {activeRows.length}</span>
        </div>
      )}

      {loading ? (
        <div className="empty-state"><p>Carregando...</p></div>
      ) : rows.length === 0 ? (
        <div className="empty-state"><span>📋</span><p>Nenhuma confirmação encontrada.</p></div>
      ) : (
        <div className="conf-table-wrap">
          <table className="conf-table">
            <thead>
              <tr>
                <th className="conf-th">Paciente</th>
                <th className="conf-th">Telefone</th>
                <th className="conf-th">Horário</th>
                <th className="conf-th">Status</th>
                <th className="conf-th">J1 48h</th>
                <th className="conf-th">J2 24h</th>
                <th className="conf-th">J3 8h</th>
                <th className="conf-th">Resposta do paciente</th>
              </tr>
            </thead>
            <tbody>
              {groupedRows.map(({ label, rows: groupRows }) => (
                <React.Fragment key={label}>
                  <tr className="conf-date-separator">
                    <td colSpan={8} className="conf-date-label">{label}</td>
                  </tr>
                  {groupRows.map(r => {
                    const appt = r.appointments || {};
                    const st = STATUS_LABEL[r.flow_status] || { label: r.flow_status, color: '#aaa' };
                    return (
                      <tr key={r.id} className="conf-tr">
                        <td className="conf-td conf-name">{appt.patient_name || '—'}</td>
                        <td className="conf-td conf-phone">{fmtPhone(appt.patient_phone_normalized)}</td>
                        <td className="conf-td conf-time">{fmtTime(appt.scheduled_at)}</td>
                        <td className="conf-td">
                          <span className="conf-status-badge" style={{background:st.color+'22',color:st.color,border:`1px solid ${st.color}55`}}>
                            {st.label}
                          </span>
                        </td>
                        {windowCell(r.first_message_due_at,  r.first_message_sent_at,  `w1-${r.id}`)}
                        {windowCell(r.second_message_due_at, r.second_message_sent_at, `w2-${r.id}`)}
                        {windowCell(r.third_message_due_at,  r.third_message_sent_at,  `w3-${r.id}`)}
                        <td className="conf-td conf-reply">
                          {r.last_inbound_text
                            ? <span className="conf-reply-text" title={r.last_inbound_text}>"{r.last_inbound_text.slice(0,50)}{r.last_inbound_text.length>50?'…':''}"</span>
                            : <span className="conf-no-reply">Sem resposta</span>}
                        </td>
                      </tr>
                    );
                  })}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// ─── ROOT APP ────────────────────────────────────────────────────────────────
function App() {
  const [user, setUser] = useState(() => {
    try { return JSON.parse(localStorage.getItem('maya_user')) || null; } catch { return null; }
  });
  const handleLogin = (u) => { localStorage.setItem('maya_user', JSON.stringify(u)); setUser(u); };
  const handleLogout = () => { localStorage.removeItem('maya_user'); setUser(null); };
  if (!user) return <LoginScreen onLogin={handleLogin}/>;
  return <Workspace currentUser={user} onLogout={handleLogout}/>;
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);