// Sou Coluna — Login modal + internal app shell with REAL API integration

const TOKEN_KEY = 'sc_token';
function getToken() { return sessionStorage.getItem(TOKEN_KEY); }
function setToken(t) { sessionStorage.setItem(TOKEN_KEY, t); }
function clearToken() { sessionStorage.removeItem(TOKEN_KEY); }

function api(url, options = {}) {
  const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
  const tok = getToken();
  if (tok) headers['Authorization'] = `Bearer ${tok}`;
  return fetch(url, { ...options, headers });
}
function apiMultipart(url, options = {}) {
  const headers = { ...(options.headers || {}) };
  const tok = getToken();
  if (tok) headers['Authorization'] = `Bearer ${tok}`;
  return fetch(url, { ...options, headers });
}

// ──────────────── LOGIN MODAL ────────────────
function LoginModal({ open, onClose, onSuccess, onSwitchRegister }) {
  if (!open) return null;
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  async function submit(e) {
    e.preventDefault();
    setError(''); setLoading(true);
    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password: pw })
      });
      const data = await res.json();
      if (!res.ok || !data.success) throw new Error(data.error || 'Erro ao entrar.');
      setToken(data.token);
      onSuccess(data.user);
    } catch (err) { setError(err.message); }
    finally { setLoading(false); }
  }

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal-card" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}><I.X/></button>
        <div className="modal-icon"><I.Lock/></div>
        <h3>Acesse sua conta</h3>
        <div className="sub">Entre com seu e-mail e senha para acessar o sistema</div>
        <form onSubmit={submit}>
          <div className="field">
            <label>E-mail</label>
            <input className="input" type="email" placeholder="seu.email@clinica.com"
                   value={email} onChange={e => setEmail(e.target.value)} required/>
          </div>
          <div className="field">
            <label>Senha</label>
            <input className="input" type="password" placeholder="••••••••"
                   value={pw} onChange={e => setPw(e.target.value)} required/>
          </div>
          {error && <div className="form-error">{error}</div>}
          <button className="btn btn-primary" type="submit" disabled={loading}>
            {loading ? 'Entrando...' : <>Entrar <I.ArrowRight s={16}/></>}
          </button>
        </form>
        <div className="alt">
          Não tem cadastro? <a href="#" onClick={e => { e.preventDefault(); onSwitchRegister(); }}>Criar conta</a>
        </div>
      </div>
    </div>
  );
}

// ──────────────── REGISTER MODAL ────────────────
function RegisterModal({ open, onClose, onSuccess, onSwitchLogin }) {
  if (!open) return null;
  const [form, setForm] = React.useState({ name:'', email:'', password:'', passwordConfirm:'', company_name:'', phone:'' });
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [success, setSuccess] = React.useState(false);
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  async function submit(e) {
    e.preventDefault();
    setError('');
    if (form.password !== form.passwordConfirm) { setError('As senhas não conferem.'); return; }
    if (form.password.length < 6) { setError('Senha mínimo 6 caracteres.'); return; }
    const cleanPhone = (form.phone || '').replace(/\D/g, '');
    if (cleanPhone.length < 10) { setError('Informe um WhatsApp válido — ele será usado para receber as avaliações dos seus doutores.'); return; }
    setLoading(true);
    try {
      const res = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: form.email, name: form.name, password: form.password,
          company_name: form.company_name, phone: form.phone, role: 'owner'
        })
      });
      const data = await res.json();
      if (!res.ok || !data.success) throw new Error(data.error || 'Erro ao cadastrar.');
      setSuccess(true);
    } catch (err) { setError(err.message); }
    finally { setLoading(false); }
  }

  if (success) {
    return (
      <div className="modal-back" onClick={onClose}>
        <div className="modal-card" onClick={e => e.stopPropagation()}>
          <button className="modal-close" onClick={onClose}><I.X/></button>
          <div className="modal-icon" style={{background:'linear-gradient(135deg, var(--lime), var(--mint))'}}><I.Check s={28}/></div>
          <h3>Cadastro enviado!</h3>
          <div className="sub">Seu cadastro foi recebido. Você receberá um aviso quando for aprovado pelo administrador.</div>
          <button className="btn btn-primary" type="button" onClick={onClose}>Entendido</button>
        </div>
      </div>
    );
  }

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal-card" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}><I.X/></button>
        <div className="modal-icon"><I.Users/></div>
        <h3>Criar conta</h3>
        <div className="sub">Cadastro de gestor — acesso após aprovação do administrador</div>
        <form onSubmit={submit}>
          <div className="field">
            <label>Nome completo</label>
            <input className="input" value={form.name} onChange={e => set('name', e.target.value)} required/>
          </div>
          <div className="field">
            <label>E-mail</label>
            <input className="input" type="email" value={form.email} onChange={e => set('email', e.target.value)} required/>
          </div>
          <div className="field">
            <label>Empresa / Clínica</label>
            <input className="input" value={form.company_name} onChange={e => set('company_name', e.target.value)}/>
          </div>
          <div className="field">
            <label>WhatsApp *</label>
            <input className="input" value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="(51) 99999-9999" required/>
            <div style={{fontSize:11, color:'var(--ink-dim)', marginTop:6, lineHeight:1.5}}>
              ↳ Este número receberá automaticamente cópia das avaliações geradas pelos seus doutores.
            </div>
          </div>
          <div className="field">
            <label>Senha (mínimo 6 caracteres)</label>
            <input className="input" type="password" value={form.password} onChange={e => set('password', e.target.value)} required/>
          </div>
          <div className="field">
            <label>Confirmar senha</label>
            <input className="input" type="password" value={form.passwordConfirm} onChange={e => set('passwordConfirm', e.target.value)} required/>
          </div>
          {error && <div className="form-error">{error}</div>}
          <button className="btn btn-primary" type="submit" disabled={loading}>
            {loading ? 'Enviando...' : <>Solicitar Cadastro <I.ArrowRight s={16}/></>}
          </button>
        </form>
        <div className="alt">
          Já tem cadastro? <a href="#" onClick={e => { e.preventDefault(); onSwitchLogin(); }}>Fazer login</a>
        </div>
      </div>
    </div>
  );
}

// ──────────────── APP NAV ────────────────
function AppNav({ tab, setTab, user, onLogout }) {
  const isAdmin = user?.role === 'admin';
  const isOwner = user?.role === 'owner';
  const isDoctor = user?.role === 'doctor';
  const roleLabel = isAdmin ? 'DONO' : isOwner ? 'GESTOR' : 'DOUTOR';

  return (
    <nav className="app-nav">
      <div className="container">
        <BrandMark/>
        <div className="app-tabs">
          {isAdmin && (
            <button className={`app-tab ${tab === 'gestao' ? 'active' : ''}`} onClick={() => setTab('gestao')}>
              <I.Users s={14}/> Gestão
            </button>
          )}
          {isOwner && (
            <button className={`app-tab ${tab === 'doutores' ? 'active' : ''}`} onClick={() => setTab('doutores')}>
              <I.Users s={14}/> Meus Doutores
            </button>
          )}
          <button className={`app-tab ${tab === 'analise' ? 'active' : ''}`} onClick={() => setTab('analise')}>
            <I.Pulse s={14}/> Análise
          </button>
          {isAdmin && (
            <button className={`app-tab ${tab === 'scripts' ? 'active' : ''}`} onClick={() => setTab('scripts')}>
              <I.Doc s={14}/> Scripts IA
            </button>
          )}
        </div>
        <div className="role-badge">
          {user?.name || '—'} <span className="tag">{roleLabel}</span>
          <button className="btn btn-ghost" onClick={onLogout} style={{padding:'8px 14px', fontSize:13}}>
            <I.Logout/> Sair
          </button>
        </div>
      </div>
    </nav>
  );
}

// ──────────────── ANALISE TAB ────────────────
function Analise({ user }) {
  const [drag, setDrag] = React.useState(false);
  const [file, setFile] = React.useState(null);
  const [form, setForm] = React.useState({
    doctorName: user?.role === 'doctor' ? user.name : '',
    patientName: '', patientCpf: '', patientSex: '', patientPhase: '', doctorPhone: '',
  });
  const [submitting, setSubmitting] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [err, setErr] = React.useState('');
  const inputRef = React.useRef(null);
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  function pick(f) {
    if (!f) return;
    if (f.size > 100 * 1024 * 1024) { setErr('Arquivo muito grande (máx 100MB).'); return; }
    if (!/\.(mp3|wav|ogg|webm|m4a|mp4)$/i.test(f.name)) { setErr('Formato não suportado.'); return; }
    setErr(''); setFile(f);
  }

  const valid = form.doctorName && form.patientName && form.patientSex && form.patientPhase &&
    form.doctorPhone.replace(/\D/g,'').length >= 10 && file;

  async function submit() {
    if (!valid) return;
    setSubmitting(true); setErr(''); setResult(null);
    try {
      const fd = new FormData();
      fd.append('audio', file);
      Object.entries(form).forEach(([k,v]) => fd.append(k, v));
      const res = await apiMultipart('/api/analyze', { method: 'POST', body: fd });
      const data = await res.json();
      if (!res.ok || !data.success) throw new Error(data.error || 'Erro na análise.');
      setResult(data);
    } catch (e) { setErr(e.message); }
    finally { setSubmitting(false); }
  }

  function reset() {
    setResult(null); setFile(null); setErr('');
    setForm({ doctorName: user?.role === 'doctor' ? user.name : '',
      patientName: '', patientCpf: '', patientSex: '', patientPhase: '', doctorPhone: '' });
  }

  if (result) {
    const steps = ['Áudio recebido', 'Transcrição automática', 'Análise por IA', 'Envio no WhatsApp'];
    return (
      <div className="panel" style={{padding:'56px 40px', textAlign:'center'}}>
        <div className="modal-icon" style={{background:'linear-gradient(135deg, var(--lime), var(--mint))', margin:'0 auto 20px'}}><I.Check s={28}/></div>
        <h2 style={{fontFamily:'Space Grotesk', fontWeight:600, fontSize:28, margin:'0 0 8px'}}>Áudio recebido com sucesso!</h2>
        <p style={{color:'var(--ink-mid)', margin:'0 0 32px', fontSize:16, lineHeight:1.55}}>
          Em breve você receberá sua análise através do WhatsApp.
        </p>
        <div className="loading-steps" style={{maxWidth:380, margin:'0 auto'}}>
          {steps.map((s, i) => (
            <div key={i} className="loading-step done">
              <I.Check/>
              <span>{s}</span>
            </div>
          ))}
        </div>
        <div style={{display:'flex', gap:12, marginTop:32, justifyContent:'center'}}>
          <button className="btn btn-primary btn-lg" onClick={reset}>
            <I.Plus s={18}/> Nova análise
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="panel">
      <div className="panel-head">
        <h2>Avaliação por Áudio</h2>
        <p>Preencha os dados e envie o áudio para análise com IA</p>
      </div>
      <div className="form-grid">
        <div className="field span2">
          <label>Nome do Doutor(a) *</label>
          <input className="input" placeholder="Ex: Dra. Aline Rocha"
                 value={form.doctorName} onChange={e => set('doctorName', e.target.value)}
                 readOnly={user?.role === 'doctor'}/>
        </div>
        <div className="field">
          <label>Nome do(a) Paciente *</label>
          <input className="input" placeholder="Ex: Maria Oliveira"
                 value={form.patientName} onChange={e => set('patientName', e.target.value)}/>
        </div>
        <div className="field">
          <label>CPF do(a) Paciente</label>
          <input className="input" placeholder="000.000.000-00"
                 value={form.patientCpf} onChange={e => set('patientCpf', e.target.value)}/>
        </div>
        <div className="field">
          <label>Sexo do(a) Paciente *</label>
          <select className="select-input" value={form.patientSex} onChange={e => set('patientSex', e.target.value)}>
            <option value="">Selecione...</option>
            <option value="Feminino">Feminino</option>
            <option value="Masculino">Masculino</option>
          </select>
        </div>
        <div className="field">
          <label>Fase do(a) Paciente *</label>
          <select className="select-input" value={form.patientPhase} onChange={e => set('patientPhase', e.target.value)}>
            <option value="">Selecione...</option>
            <option value="Fase 01">Fase 01</option>
            <option value="Fase 02">Fase 02</option>
            <option value="Fase 03">Fase 03</option>
          </select>
        </div>
        <div className="field span2">
          <label>WhatsApp para receber o relatório *</label>
          <input className="input" placeholder="(51) 99999-9999"
                 value={form.doctorPhone} onChange={e => set('doctorPhone', e.target.value)}/>
        </div>
      </div>

      <input ref={inputRef} type="file" accept=".mp3,.wav,.ogg,.webm,.m4a,.mp4,audio/*"
             style={{display:'none'}} onChange={e => pick(e.target.files?.[0])}/>

      {file ? (
        <div className="file-preview">
          <div className="file-icon"><I.Wave/></div>
          <div className="file-info">
            <div className="file-name">{file.name}</div>
            <div className="file-meta">{(file.size / 1024 / 1024).toFixed(1)} MB</div>
          </div>
          <button className="icon-btn danger" onClick={() => setFile(null)}><I.Trash/></button>
        </div>
      ) : (
        <div className="drop-zone"
             onClick={() => inputRef.current?.click()}
             onDragOver={e => { e.preventDefault(); setDrag(true); }}
             onDragLeave={() => setDrag(false)}
             onDrop={e => { e.preventDefault(); setDrag(false); pick(e.dataTransfer.files[0]); }}
             style={drag ? { borderColor: 'var(--mint)', background: 'rgba(16,185,129,0.08)' } : {}}>
          <div className="drop-icon-wrap">
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
              <path d="M6 18 h2 M11 12 v12 M16 6 v24 M21 10 v16 M26 14 v8 M31 17 v2" stroke="url(#wg)" strokeWidth="2.4" strokeLinecap="round"/>
              <defs><linearGradient id="wg" x1="0" y1="0" x2="36" y2="0"><stop offset="0" stopColor="#06b6d4"/><stop offset="1" stopColor="#10b981"/></linearGradient></defs>
            </svg>
          </div>
          <h4>Arraste o áudio aqui ou clique para selecionar</h4>
          <div className="sub">MP3, WAV, OGG, WEBM ou M4A — até 100MB</div>
          <div className="drop-formats">
            <span>MP3</span><span>WAV</span><span>OGG</span><span>WEBM</span><span>M4A</span><span>≤ 100MB</span>
          </div>
        </div>
      )}

      {err && <div className="form-error">{err}</div>}

      <button className="submit-btn" onClick={submit} disabled={!valid || submitting}>
        {submitting ? (
          <>Enviando áudio... <span className="loading-dot" style={{display:'inline-block', marginLeft:8}}/></>
        ) : (
          <><I.Spark s={18}/> Enviar para análise com IA <I.ArrowRight/></>
        )}
      </button>
    </div>
  );
}

// ──────────────── GESTAO TAB (admin) ────────────────
function Gestao() {
  const [users, setUsers] = React.useState([]);
  const [pending, setPending] = React.useState([]);
  const [stats, setStats] = React.useState({ totalOwners:0, totalDoctors:0, totalEvaluations:0 });
  const [approveTarget, setApproveTarget] = React.useState(null);
  const [limit, setLimit] = React.useState(50);

  async function load() {
    try {
      const [u, p, s] = await Promise.all([
        api('/api/admin/users').then(r => r.json()),
        api('/api/admin/pending').then(r => r.json()),
        api('/api/admin/stats').then(r => r.json()),
      ]);
      setUsers(u.data || []);
      setPending(p.data || []);
      setStats(s.data || s);
    } catch (e) { console.error(e); }
  }
  React.useEffect(() => { load(); }, []);

  async function approve(id) {
    await api(`/api/admin/approve/${id}`, { method:'POST' });
    if (approveTarget?.role === 'owner') {
      await api(`/api/admin/owners/${id}`, {
        method: 'PUT', body: JSON.stringify({ max_doctors: limit })
      });
    }
    setApproveTarget(null); load();
  }
  async function reject(id) {
    if (!confirm('Rejeitar este cadastro?')) return;
    await api(`/api/admin/reject/${id}`, { method:'POST' });
    setApproveTarget(null); load();
  }
  async function deactivate(id) {
    if (!confirm('Desativar este gestor (e seus doutores)?')) return;
    await api(`/api/admin/owners/${id}`, { method:'DELETE' });
    load();
  }

  return (
    <div>
      <div className="dash-stats">
        <div className="dash-stat">
          <div className="dash-stat-ico"><I.Shield/></div>
          <div><div className="v">{stats.totalOwners ?? 0}</div><div className="l">Total Gestores</div></div>
        </div>
        <div className="dash-stat cyan">
          <div className="dash-stat-ico"><I.Users/></div>
          <div><div className="v">{stats.totalDoctors ?? 0}</div><div className="l">Total Doutores</div></div>
        </div>
        <div className="dash-stat lime">
          <div className="dash-stat-ico"><I.Doc/></div>
          <div><div className="v">{stats.totalEvaluations ?? 0}</div><div className="l">Total Avaliações</div></div>
        </div>
      </div>

      {pending.length > 0 && (
        <div className="panel" style={{marginBottom:24, padding:0, overflow:'hidden'}}>
          <div className="table-head">
            <h3>Cadastros pendentes <span className="tag" style={{marginLeft:8, padding:'2px 8px', background:'rgba(251,191,36,0.1)', border:'1px solid rgba(251,191,36,0.3)', color:'#fbbf24', borderRadius:6, fontSize:10}}>{pending.length}</span></h3>
          </div>
          <table className="table">
            <thead><tr>
              <th>Nome</th><th>E-mail</th><th>Empresa</th><th>WhatsApp</th><th>Ações</th>
            </tr></thead>
            <tbody>
              {pending.map(u => (
                <tr key={u.id}>
                  <td className="name">{u.name}</td>
                  <td className="email">{u.email}</td>
                  <td>{u.company_name || '—'}</td>
                  <td className="email">{u.phone || '—'}</td>
                  <td>
                    <div className="row-act">
                      <button className="btn btn-primary" style={{padding:'6px 12px', fontSize:12}}
                              onClick={() => { setApproveTarget(u); setLimit(50); }}>Aprovar</button>
                      <button className="icon-btn danger" onClick={() => reject(u.id)}><I.X/></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="panel table-panel">
        <div className="table-head">
          <h3>Gestores cadastrados</h3>
        </div>
        <table className="table">
          <thead><tr>
            <th>Nome</th><th>E-mail</th><th>Doutores</th><th>Status</th><th>Ações</th>
          </tr></thead>
          <tbody>
            {users.length === 0 ? (
              <tr><td colSpan={5} style={{textAlign:'center', color:'var(--ink-dim)', padding:48}}>Nenhum gestor cadastrado.</td></tr>
            ) : users.map(u => (
              <tr key={u.id}>
                <td className="name">{u.name}</td>
                <td className="email">{u.email}</td>
                <td><span style={{fontFamily:'JetBrains Mono', color:'var(--mint)'}}>{(u.doctors?.length || 0)} / {u.max_doctors || 50}</span></td>
                <td><span className={`stat-pill ${u.active ? '' : 'inactive'}`}><span className="dot"/>{u.active ? 'Ativo' : 'Inativo'}</span></td>
                <td>
                  <div className="row-act">
                    <button className="icon-btn danger" onClick={() => deactivate(u.id)}><I.Trash/></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {approveTarget && (
        <div className="modal-back" onClick={() => setApproveTarget(null)}>
          <div className="modal-card" onClick={e => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setApproveTarget(null)}><I.X/></button>
            <div className="modal-icon"><I.Check s={28}/></div>
            <h3>Aprovar cadastro</h3>
            <div className="sub">Confirme os dados antes de aprovar</div>
            <div style={{textAlign:'left', marginBottom:20, fontSize:13, color:'var(--ink-mid)', lineHeight:2}}>
              <div><strong style={{color:'var(--ink)'}}>Nome:</strong> {approveTarget.name}</div>
              <div><strong style={{color:'var(--ink)'}}>E-mail:</strong> {approveTarget.email}</div>
              <div><strong style={{color:'var(--ink)'}}>Empresa:</strong> {approveTarget.company_name || '—'}</div>
              <div><strong style={{color:'var(--ink)'}}>WhatsApp:</strong> {approveTarget.phone || '—'}</div>
            </div>
            {approveTarget.role === 'owner' && (
              <div className="field">
                <label>Limite de doutores</label>
                <input className="input" type="number" min="1" max="200"
                       value={limit} onChange={e => setLimit(parseInt(e.target.value, 10) || 50)}/>
              </div>
            )}
            <div style={{display:'flex', gap:12, marginTop:20}}>
              <button className="btn btn-ghost" onClick={() => reject(approveTarget.id)} style={{flex:1, justifyContent:'center', borderColor:'rgba(244,63,94,0.4)', color:'var(--danger)'}}>Rejeitar</button>
              <button className="btn btn-primary" onClick={() => approve(approveTarget.id)} style={{flex:1, justifyContent:'center'}}>Aprovar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ──────────────── DOUTORES TAB (owner) ────────────────
function Doutores() {
  const [doctors, setDoctors] = React.useState([]);
  const [scoreboard, setScoreboard] = React.useState({});
  const [whats, setWhats] = React.useState('');
  const [whatsStatus, setWhatsStatus] = React.useState('');
  const [editing, setEditing] = React.useState(null);
  const [form, setForm] = React.useState({ name:'', email:'', password:'' });
  const [error, setError] = React.useState('');
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  async function load() {
    try {
      const [d, s, w] = await Promise.all([
        api('/api/owner/doctors').then(r => r.json()),
        api('/api/owner/scoreboard').then(r => r.json()),
        api('/api/owner/whatsapp').then(r => r.json()),
      ]);
      setDoctors(d.data || []);
      const sb = {}; (s.scoreboard || []).forEach(x => sb[x.id] = x); setScoreboard(sb);
      setWhats(w.phone || '');
    } catch (e) { console.error(e); }
  }
  React.useEffect(() => { load(); }, []);

  function openAdd() { setEditing('new'); setForm({ name:'', email:'', password:'' }); setError(''); }
  function openEdit(d) { setEditing(d); setForm({ name:d.name, email:d.email, password:'' }); setError(''); }
  function close() { setEditing(null); setError(''); }

  async function submit(e) {
    e.preventDefault();
    setError('');
    try {
      const payload = { name: form.name, email: form.email };
      if (form.password) payload.password = form.password;
      let res;
      if (editing === 'new') {
        if (!form.password || form.password.length < 6) throw new Error('Senha mín. 6 caracteres.');
        res = await api('/api/owner/doctors', { method:'POST', body: JSON.stringify(payload) });
      } else {
        res = await api(`/api/owner/doctors/${editing.id}`, { method:'PUT', body: JSON.stringify(payload) });
      }
      const data = await res.json();
      if (!res.ok || !data.success) throw new Error(data.error || 'Erro.');
      close(); load();
    } catch (err) { setError(err.message); }
  }

  async function toggle(d) {
    if (!confirm(`${d.active ? 'Desativar' : 'Ativar'} ${d.name}?`)) return;
    if (d.active) await api(`/api/owner/doctors/${d.id}`, { method:'DELETE' });
    else await api(`/api/owner/doctors/${d.id}`, { method:'PUT', body: JSON.stringify({ active: true }) });
    load();
  }

  async function saveWhats() {
    setWhatsStatus('Salvando...');
    try {
      await api('/api/owner/whatsapp', { method:'PUT', body: JSON.stringify({ phone: whats }) });
      setWhatsStatus('✓ Salvo');
      setTimeout(() => setWhatsStatus(''), 2000);
    } catch { setWhatsStatus('Erro'); }
  }

  const cleanWhats = (whats || '').replace(/\D/g, '');
  const phoneOk = cleanWhats.length >= 10;

  return (
    <div>
      {!phoneOk && (
        <div style={{
          padding: 16, marginBottom: 20, borderRadius: 12,
          background: 'rgba(244,63,94,0.08)', border: '1px solid rgba(244,63,94,0.3)',
          display: 'flex', alignItems: 'center', gap: 12
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10, flexShrink: 0,
            background: 'rgba(244,63,94,0.15)', display: 'grid', placeItems: 'center', color: 'var(--danger)'
          }}><I.Wave/></div>
          <div style={{flex:1, fontSize:13, color:'var(--ink)'}}>
            <strong style={{display:'block', marginBottom:2, fontFamily:'Space Grotesk'}}>WhatsApp não configurado</strong>
            <span style={{color:'var(--ink-mid)'}}>Sem o seu WhatsApp aqui, você não receberá as avaliações dos seus doutores. Preencha abaixo e salve.</span>
          </div>
        </div>
      )}
      <div className="panel" style={{
        marginBottom:24, padding:24, display:'flex', alignItems:'center', gap:16, flexWrap:'wrap',
        borderColor: phoneOk ? undefined : 'rgba(244,63,94,0.4)'
      }}>
        <div style={{flex:1, minWidth:240}}>
          <div style={{fontFamily:'Space Grotesk', fontWeight:600, fontSize:16, marginBottom:4}}>Seu WhatsApp *</div>
          <div style={{fontSize:12, color:'var(--ink-mid)'}}>Recebe cópia automática das avaliações geradas pelos seus doutores</div>
        </div>
        <input className="input" style={{maxWidth:220}} value={whats} onChange={e => setWhats(e.target.value)} placeholder="(51) 99999-9999"/>
        <button className="btn btn-primary" style={{padding:'10px 16px'}} onClick={saveWhats}>Salvar</button>
        {whatsStatus && <span style={{color:'var(--mint)', fontSize:12}}>{whatsStatus}</span>}
      </div>

      <div className="panel table-panel">
        <div className="table-head">
          <h3>Meus doutores</h3>
          <button className="btn btn-primary" onClick={openAdd} style={{padding:'8px 14px', fontSize:13}}>
            <I.Plus s={14}/> Adicionar doutor
          </button>
        </div>
        <table className="table">
          <thead><tr>
            <th>Nome</th><th>E-mail</th><th>Média</th><th>Avaliações</th><th>Status</th><th>Ações</th>
          </tr></thead>
          <tbody>
            {doctors.length === 0 ? (
              <tr><td colSpan={6} style={{textAlign:'center', color:'var(--ink-dim)', padding:48}}>Nenhum doutor cadastrado.</td></tr>
            ) : doctors.map(d => {
              const sb = scoreboard[d.id];
              const avg = sb?.averageScore;
              const total = sb?.totalEvaluations || 0;
              return (
                <tr key={d.id}>
                  <td className="name">{d.name}</td>
                  <td className="email">{d.email}</td>
                  <td><span style={{fontFamily:'JetBrains Mono', color: avg >= 8 ? 'var(--mint)' : avg >= 6 ? 'var(--lime)' : avg ? 'var(--danger)' : 'var(--ink-dim)'}}>{avg != null ? avg.toFixed(1) : '—'}</span></td>
                  <td><span style={{fontFamily:'JetBrains Mono', color:'var(--ink-mid)'}}>{total}</span></td>
                  <td><span className={`stat-pill ${d.active ? '' : 'inactive'}`}><span className="dot"/>{d.active ? 'Ativo' : 'Inativo'}</span></td>
                  <td>
                    <div className="row-act">
                      <button className="icon-btn" onClick={() => openEdit(d)}><I.Edit/></button>
                      <button className="icon-btn danger" onClick={() => toggle(d)}><I.Trash/></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {editing && (
        <div className="modal-back" onClick={close}>
          <div className="modal-card" onClick={e => e.stopPropagation()}>
            <button className="modal-close" onClick={close}><I.X/></button>
            <div className="modal-icon"><I.Users/></div>
            <h3>{editing === 'new' ? 'Novo doutor' : 'Editar doutor'}</h3>
            <form onSubmit={submit}>
              <div className="field">
                <label>Nome</label>
                <input className="input" value={form.name} onChange={e => set('name', e.target.value)} required/>
              </div>
              <div className="field">
                <label>E-mail</label>
                <input className="input" type="email" value={form.email} onChange={e => set('email', e.target.value)} required/>
              </div>
              <div className="field">
                <label>Senha {editing !== 'new' && '(deixe vazio para manter)'}</label>
                <input className="input" type="password" value={form.password} onChange={e => set('password', e.target.value)}
                       required={editing === 'new'} minLength={editing === 'new' ? 6 : undefined}/>
              </div>
              {error && <div className="form-error">{error}</div>}
              <button className="btn btn-primary" type="submit">Salvar</button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

// ──────────────── SCRIPTS IA TAB (admin) ────────────────
function ScriptsIA() {
  const [scripts, setScripts] = React.useState([]);
  const [stats, setStats] = React.useState({ total:0, active:0, activeChars:0 });
  const [categories, setCategories] = React.useState([]);
  const [filter, setFilter] = React.useState('');
  const [editing, setEditing] = React.useState(null);
  const [form, setForm] = React.useState({ title:'', content:'', category:'Geral', active:true });
  const [error, setError] = React.useState('');
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  async function load() {
    try {
      const r = await api('/api/admin/scripts');
      const d = await r.json();
      setScripts(d.data || []);
      setStats(d.stats || { total:0, active:0, activeChars:0 });
      setCategories(d.categories || []);
    } catch (e) { console.error(e); }
  }
  React.useEffect(() => { load(); }, []);

  function openAdd() { setEditing('new'); setForm({ title:'', content:'', category:'Geral', active:true }); setError(''); }
  function openEdit(s) { setEditing(s); setForm({ title:s.title, content:s.content, category:s.category, active:!!s.active }); setError(''); }
  function close() { setEditing(null); setError(''); }

  async function submit(e) {
    e.preventDefault(); setError('');
    if (!form.title || !form.content) { setError('Preencha título e conteúdo.'); return; }
    try {
      let res;
      if (editing === 'new') res = await api('/api/admin/scripts', { method:'POST', body: JSON.stringify(form) });
      else res = await api(`/api/admin/scripts/${editing.id}`, { method:'PUT', body: JSON.stringify(form) });
      const d = await res.json();
      if (!res.ok || !d.success) throw new Error(d.error || 'Erro.');
      close(); load();
    } catch (err) { setError(err.message); }
  }

  async function remove() {
    if (!editing || editing === 'new') return;
    if (!confirm('Excluir este script?')) return;
    await api(`/api/admin/scripts/${editing.id}`, { method:'DELETE' });
    close(); load();
  }

  async function toggle(s) {
    await api(`/api/admin/scripts/${s.id}`, { method:'PUT', body: JSON.stringify({ active: !s.active }) });
    load();
  }

  const filtered = filter ? scripts.filter(s => s.category === filter) : scripts;
  const usePct = Math.min(100, Math.round((stats.activeChars / 50000) * 100));
  const tokens = Math.ceil(stats.activeChars / 4);

  function catColor(cat) {
    const map = { 'Técnico':'var(--cyan-bright)', 'Comercial':'var(--lime)', 'Geral':'var(--ink-mid)',
      'Fase 01':'var(--mint)', 'Fase 02':'var(--mint)', 'Fase 03':'var(--mint)' };
    return map[cat] || 'var(--ink-mid)';
  }

  return (
    <div>
      <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:24, gap:20, flexWrap:'wrap'}}>
        <div>
          <div className="section-label" style={{marginBottom:8}}>Scripts IA</div>
          <h2 style={{fontFamily:'Space Grotesk', fontWeight:600, fontSize:28, margin:'0 0 6px', letterSpacing:'-0.015em'}}>Conhecimento da IA</h2>
          <p style={{color:'var(--ink-mid)', fontSize:14, margin:0, maxWidth:560}}>
            Adicione orientações e regras que o Claude vai considerar ao avaliar cada consulta. Scripts ativos são injetados no prompt da análise.
          </p>
        </div>
        <button className="btn btn-primary" onClick={openAdd}>
          <I.Plus s={14}/> Novo script
        </button>
      </div>

      <div className="dash-stats" style={{gridTemplateColumns:'repeat(4, 1fr)'}}>
        <div className="dash-stat"><div className="dash-stat-ico"><I.Doc/></div><div><div className="v">{stats.total}</div><div className="l">Total</div></div></div>
        <div className="dash-stat lime"><div className="dash-stat-ico"><I.Check/></div><div><div className="v">{stats.active}</div><div className="l">Ativos</div></div></div>
        <div className="dash-stat cyan"><div className="dash-stat-ico"><I.Bars/></div><div><div className="v">{stats.activeChars.toLocaleString('pt-BR')}</div><div className="l">Caracteres</div></div></div>
        <div className="dash-stat"><div className="dash-stat-ico"><I.Cpu/></div><div><div className="v">~{tokens.toLocaleString('pt-BR')}</div><div className="l">Tokens estimados</div></div></div>
      </div>

      <div className="panel" style={{marginBottom:24, padding:20}}>
        <div style={{display:'flex', justifyContent:'space-between', marginBottom:8, fontSize:12, color:'var(--ink-mid)'}}>
          <span>Uso do contexto</span>
          <span style={{fontFamily:'JetBrains Mono', color: usePct >= 90 ? 'var(--danger)' : usePct >= 70 ? '#fbbf24' : 'var(--mint)'}}>{usePct}%</span>
        </div>
        <div style={{height:6, background:'rgba(255,255,255,0.04)', borderRadius:999, overflow:'hidden'}}>
          <div style={{height:'100%', width:`${usePct}%`,
            background: usePct >= 90 ? 'linear-gradient(90deg, var(--danger), #f97316)' :
                       usePct >= 70 ? 'linear-gradient(90deg, #fbbf24, #f97316)' :
                       'linear-gradient(90deg, var(--emerald), var(--cyan))'}}/>
        </div>
        <div style={{fontSize:11, color:'var(--ink-dim)', marginTop:6}}>
          {usePct >= 90 ? '⚠️ Limite recomendado próximo (50.000 caracteres). Desative scripts ou seja conciso.' :
           usePct >= 70 ? '⚠️ Uso elevado. Limite recomendado: 50.000 caracteres.' :
           'Limite recomendado: 50.000 caracteres'}
        </div>
      </div>

      <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
        <span style={{fontSize:12, color:'var(--ink-mid)', textTransform:'uppercase', letterSpacing:'0.06em'}}>Filtrar:</span>
        <select className="select-input" style={{maxWidth:200}} value={filter} onChange={e => setFilter(e.target.value)}>
          <option value="">Todas</option>
          {categories.map(c => <option key={c} value={c}>{c}</option>)}
        </select>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:16}}>
        {filtered.length === 0 ? (
          <div style={{gridColumn:'1/-1', textAlign:'center', padding:48, color:'var(--ink-dim)'}}>
            Nenhum script {filter ? `na categoria "${filter}"` : 'cadastrado'}.
          </div>
        ) : filtered.map(s => (
          <div key={s.id} className="script-card" style={{opacity: s.active ? 1 : 0.5}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
              <div className="step-icon" style={{width:38, height:38, marginBottom:0}}><I.Doc s={18}/></div>
              <div style={{display:'flex', gap:8, alignItems:'center'}}>
                <span className="step-tag" style={{color: catColor(s.category), borderColor: catColor(s.category) + '50'}}>{s.category}</span>
                <button className="icon-btn" onClick={() => toggle(s)} title={s.active ? 'Desativar' : 'Ativar'}>
                  {s.active ? <I.Eye s={14}/> : <I.EyeOff s={14}/>}
                </button>
              </div>
            </div>
            <h4 style={{fontFamily:'Space Grotesk', fontWeight:600, fontSize:18, margin:'0 0 6px', cursor:'pointer'}} onClick={() => openEdit(s)}>{s.title}</h4>
            <p style={{color:'var(--ink-mid)', fontSize:13, lineHeight:1.55, margin:'0 0 12px', maxHeight:60, overflow:'hidden'}}>{s.content.substring(0, 160)}{s.content.length > 160 ? '...' : ''}</p>
            <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--ink-dim)', fontFamily:'JetBrains Mono'}}>
              <span>{s.content.length.toLocaleString('pt-BR')} chars</span>
              <span>{s.active ? '● ATIVO' : '○ INATIVO'}</span>
            </div>
          </div>
        ))}
      </div>

      {editing && (
        <div className="modal-back" onClick={close}>
          <div className="modal-card" style={{maxWidth:680}} onClick={e => e.stopPropagation()}>
            <button className="modal-close" onClick={close}><I.X/></button>
            <h3>{editing === 'new' ? 'Novo script' : 'Editar script'}</h3>
            <form onSubmit={submit}>
              <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap:14}}>
                <div className="field">
                  <label>Título</label>
                  <input className="input" value={form.title} onChange={e => set('title', e.target.value)} required maxLength={120}/>
                </div>
                <div className="field">
                  <label>Categoria</label>
                  <select className="select-input" style={{minWidth:160}} value={form.category} onChange={e => set('category', e.target.value)}>
                    {categories.map(c => <option key={c} value={c}>{c}</option>)}
                  </select>
                </div>
              </div>
              <div className="field">
                <label>Conteúdo</label>
                <textarea className="input" style={{minHeight:240, fontFamily:'JetBrains Mono', fontSize:12, resize:'vertical'}}
                          value={form.content} onChange={e => set('content', e.target.value)} required/>
                <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--ink-dim)', fontFamily:'JetBrains Mono', marginTop:6}}>
                  <span>{form.content.length.toLocaleString('pt-BR')} caracteres</span>
                  <span>~{Math.ceil(form.content.length / 4).toLocaleString('pt-BR')} tokens</span>
                </div>
              </div>
              <div className="field">
                <label style={{display:'flex', alignItems:'center', gap:10, cursor:'pointer'}}>
                  <input type="checkbox" checked={form.active} onChange={e => set('active', e.target.checked)}/>
                  <span>Script ativo (incluir nas análises)</span>
                </label>
              </div>
              {error && <div className="form-error">{error}</div>}
              <div style={{display:'flex', gap:10, marginTop:16}}>
                {editing !== 'new' && (
                  <button type="button" className="btn btn-ghost" style={{borderColor:'rgba(244,63,94,0.4)', color:'var(--danger)'}} onClick={remove}>
                    <I.Trash/> Excluir
                  </button>
                )}
                <button type="button" className="btn btn-ghost" onClick={close} style={{marginLeft:'auto'}}>Cancelar</button>
                <button type="submit" className="btn btn-primary">Salvar</button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

// ──────────────── INTERNAL APP ────────────────
function InternalApp({ user, onLogout }) {
  const isAdmin = user?.role === 'admin';
  const isOwner = user?.role === 'owner';
  const initialTab = isAdmin ? 'gestao' : isOwner ? 'doutores' : 'analise';
  const [tab, setTab] = React.useState(initialTab);

  return (
    <div className="app-shell">
      <AppNav tab={tab} setTab={setTab} user={user} onLogout={onLogout}/>
      <div className="app-main">
        <div className="container">
          {tab === 'analise' && <Analise user={user}/>}
          {tab === 'gestao' && isAdmin && <Gestao/>}
          {tab === 'doutores' && isOwner && <Doutores/>}
          {tab === 'scripts' && isAdmin && <ScriptsIA/>}
        </div>
      </div>
    </div>
  );
}

window.LoginModal = LoginModal;
window.RegisterModal = RegisterModal;
window.InternalApp = InternalApp;
window.api = api;
window.apiMultipart = apiMultipart;
window.getToken = getToken;
window.setToken = setToken;
window.clearToken = clearToken;