// MinhaConta — página de perfil completo para todos os usuários

const { useState: mcState } = React;

const MC_DIAS = [
  { key:'seg', label:'Seg' },{ key:'ter', label:'Ter' },{ key:'qua', label:'Qua' },
  { key:'qui', label:'Qui' },{ key:'sex', label:'Sex' },{ key:'sab', label:'Sáb' },{ key:'dom', label:'Dom' },
];

const MC_ESPECIALIDADES = [
  'Psicologia Clínica','Psicoterapia Cognitivo-Comportamental','Psicanálise',
  'Psicologia Infantil','Psicologia do Adolescente','Neuropsicologia',
  'Psicologia Organizacional','Terapia de Casal','Terapia Familiar',
];

const MC_ESTADOS = ['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO'];

/* ── Força da senha ── */
function calcForce(pwd) {
  if (!pwd) return null;
  const score = [pwd.length >= 8, /[A-Z]/.test(pwd), /[0-9]/.test(pwd), /[^A-Za-z0-9]/.test(pwd)].filter(Boolean).length;
  return score <= 1 ? { label:'Fraca',    color:'#ef4444', w:'25%' }
    : score === 2   ? { label:'Razoável', color:'#f59e0b', w:'50%' }
    : score === 3   ? { label:'Boa',      color:'#3b82f6', w:'75%' }
    :                 { label:'Forte',    color:'#16a34a', w:'100%' };
}

/* ── Shared field component ── */
function McField({ label, hint, half, children }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:5, flex: half ? '1 1 45%' : '1 1 100%' }}>
      <label style={{ fontSize:13, fontWeight:500, color:'#374151' }}>{label}</label>
      {children}
      {hint && <span style={{ fontSize:11, color:'#9ca3af' }}>{hint}</span>}
    </div>
  );
}

const mcInput = {
  padding:'9px 12px', border:'1px solid #e5e7eb', borderRadius:6,
  fontSize:14, background:'white', outline:'none', color:'#111',
  width:'100%', boxSizing:'border-box',
};

/* ══════════════════════════════════════════
   ABA: Dados Pessoais
══════════════════════════════════════════ */
function TabDadosPessoais({ perfil, user }) {
  const [saved, setSaved] = mcState(false);

  const defaultNome     = user ? user.name.split(' ')[0] : (perfil === 'terapeuta' ? 'Ana' : perfil === 'admin' ? 'Carlos' : 'Mariana');
  const defaultSobrenome= user ? user.name.split(' ').slice(1).join(' ') : (perfil === 'terapeuta' ? 'Silva' : perfil === 'admin' ? 'Ferreira' : 'Costa');
  const defaultEmail    = user ? (user.email || '') : (perfil === 'terapeuta' ? 'ana.silva@conexaopsi.com.br' : perfil === 'admin' ? 'admin@conexaopsi.com.br' : 'secretaria@conexaopsi.com.br');
  const defaultCargo    = user ? (user.role || '') : (perfil === 'admin' ? 'Administrador' : perfil === 'terapeuta' ? 'Terapeuta' : 'Secretária');

  const [form, setForm] = mcState({
    nome: defaultNome,
    sobrenome: defaultSobrenome,
    email: defaultEmail,
    telefone: '(11) 98765-4321',
    cargo: defaultCargo,
    dataNascimento: '',
    rg: '',
  });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:20 }}>

      {/* Avatar */}
      <div style={{ display:'flex', alignItems:'center', gap:20, padding:'16px', background:'#f8fafc', borderRadius:10, border:'1px solid #f0f2f5' }}>
        <div style={{ width:72, height:72, borderRadius:'50%', background:C.primary, display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:26, fontWeight:700, flexShrink:0 }}>
          {form.nome.charAt(0)}
        </div>
        <div>
          <div style={{ fontSize:15, fontWeight:700, color:'#111' }}>{form.nome} {form.sobrenome}</div>
          <div style={{ fontSize:13, color:'#6b7280', marginTop:2 }}>{form.cargo}</div>
          <button style={{ marginTop:8, padding:'5px 14px', background:'white', border:'1px solid #d1d5db', borderRadius:6, fontSize:12, fontWeight:500, color:'#374151', cursor:'pointer' }}>
            Alterar foto
          </button>
        </div>
      </div>

      {/* Nome + Sobrenome */}
      <div style={{ display:'flex', gap:14 }}>
        <McField label="Nome" half>
          <input value={form.nome} onChange={set('nome')} style={mcInput} />
        </McField>
        <McField label="Sobrenome" half>
          <input value={form.sobrenome} onChange={set('sobrenome')} style={mcInput} />
        </McField>
      </div>

      {/* Data de nascimento + RG */}
      <div style={{ display:'flex', gap:14 }}>
        <McField label="Data de nascimento" half>
          <input type="date" value={form.dataNascimento} onChange={set('dataNascimento')} style={mcInput} />
        </McField>
        <McField label="RG" half hint="Ex: 12.345.678-9">
          <input value={form.rg} onChange={set('rg')} placeholder="00.000.000-0" style={mcInput} />
        </McField>
      </div>

      {/* Email + Telefone */}
      <div style={{ display:'flex', gap:14 }}>
        <McField label="E-mail" half>
          <input type="email" value={form.email} onChange={set('email')} style={mcInput} />
        </McField>
        <McField label="Telefone" half>
          <input value={form.telefone} onChange={set('telefone')} placeholder="(11) 90000-0000" style={mcInput} />
        </McField>
      </div>

      <McField label="Cargo / Função" hint="Definido pelo administrador">
        <input value={form.cargo} readOnly style={{ ...mcInput, background:'#f9fafb', color:'#6b7280', cursor:'not-allowed', maxWidth:280 }} />
      </McField>

      {/* Footer */}
      <div style={{ display:'flex', justifyContent:'flex-end', alignItems:'center', gap:14, paddingTop:4, borderTop:'1px solid #f0f2f5' }}>
        {saved && <span style={{ fontSize:13, color:'#16a34a', fontWeight:500 }}>✓ Dados salvos</span>}
        <button onClick={() => { setSaved(true); setTimeout(() => setSaved(false), 2500); }}
          style={{ padding:'9px 24px', background:C.primary, color:'white', border:'none', borderRadius:6, fontSize:14, fontWeight:600, cursor:'pointer' }}>
          Salvar alterações
        </button>
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════
   ABA: Segurança
══════════════════════════════════════════ */
function TabSeguranca() {
  const [form, setForm] = mcState({ senhaAtual:'', novaSenha:'', confirmar:'' });
  const [showA, setShowA] = mcState(false);
  const [showN, setShowN] = mcState(false);
  const [showC, setShowC] = mcState(false);
  const [saved, setSaved] = mcState(false);
  const [erro, setErro]   = mcState('');
  const set = k => e => { setForm(f => ({ ...f, [k]: e.target.value })); setErro(''); };
  const str = calcForce(form.novaSenha);

  const PwdInput = ({ value, onChange, show, onToggle, placeholder }) => (
    <div style={{ position:'relative' }}>
      <input type={show ? 'text' : 'password'} value={value} onChange={onChange}
        placeholder={placeholder} style={{ ...mcInput, paddingRight:40 }} />
      <button onClick={onToggle} type="button"
        style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', background:'none', border:'none', cursor:'pointer', color:'#9ca3af', lineHeight:1, padding:2 }}>
        <Icon name={show ? 'eyeOff' : 'eye'} size={16} color="#9ca3af" />
      </button>
    </div>
  );

  function handleSalvar() {
    if (!form.senhaAtual) { setErro('Informe a senha atual.'); return; }
    if (!form.novaSenha || form.novaSenha.length < 8) { setErro('A nova senha deve ter ao menos 8 caracteres.'); return; }
    if (form.novaSenha !== form.confirmar) { setErro('As senhas não coincidem.'); return; }
    setSaved(true);
    setForm({ senhaAtual:'', novaSenha:'', confirmar:'' });
    setTimeout(() => setSaved(false), 2500);
  }

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:18, maxWidth:480 }}>
      <div style={{ padding:'14px 16px', background:'#eff6ff', borderRadius:8, border:'1px solid #bfdbfe', fontSize:13, color:'#1e40af', lineHeight:1.6 }}>
        Por segurança, use uma senha com letras maiúsculas, números e símbolos.
      </div>

      <McField label="Senha atual">
        <PwdInput value={form.senhaAtual} onChange={set('senhaAtual')} show={showA} onToggle={() => setShowA(s=>!s)} placeholder="••••••••" />
      </McField>

      <McField label="Nova senha" hint="Mínimo 8 caracteres">
        <PwdInput value={form.novaSenha} onChange={set('novaSenha')} show={showN} onToggle={() => setShowN(s=>!s)} placeholder="Nova senha" />
        {str && (
          <div style={{ marginTop:4 }}>
            <div style={{ height:4, background:'#e5e7eb', borderRadius:2, overflow:'hidden' }}>
              <div style={{ height:'100%', width:str.w, background:str.color, borderRadius:2, transition:'width .3s, background .3s' }} />
            </div>
            <span style={{ fontSize:11, color:str.color, fontWeight:500 }}>Força: {str.label}</span>
          </div>
        )}
      </McField>

      <McField label="Confirmar nova senha">
        <PwdInput value={form.confirmar} onChange={set('confirmar')} show={showC} onToggle={() => setShowC(s=>!s)} placeholder="Repita a nova senha" />
        {form.confirmar.length > 0 && (
          <span style={{ fontSize:12, color: form.novaSenha === form.confirmar ? '#16a34a' : '#ef4444' }}>
            {form.novaSenha === form.confirmar ? '✓ Senhas coincidem' : '✕ Senhas não coincidem'}
          </span>
        )}
      </McField>

      {erro && <div style={{ background:'#fee2e2', border:'1px solid #fca5a5', borderRadius:6, padding:'9px 12px', fontSize:13, color:'#991b1b' }}>{erro}</div>}

      <div style={{ display:'flex', justifyContent:'flex-end', alignItems:'center', gap:14, paddingTop:4, borderTop:'1px solid #f0f2f5' }}>
        {saved && <span style={{ fontSize:13, color:'#16a34a', fontWeight:500 }}>✓ Senha alterada com sucesso</span>}
        <button onClick={handleSalvar}
          style={{ padding:'9px 24px', background:C.primary, color:'white', border:'none', borderRadius:6, fontSize:14, fontWeight:600, cursor:'pointer' }}>
          Alterar senha
        </button>
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════
   ABA: Documentos (terapeuta only)
══════════════════════════════════════════ */
const DOC_TIPOS = ['CRP / Registro profissional','RG','CPF','Diploma','Currículo','Contrato','Outros'];

function TabDocumentos() {
  const [docs, setDocs] = mcState([
    { id:1, nome:'CRP - Registro profissional.pdf', tipo:'CRP / Registro profissional', data:'12/01/2025', tamanho:'245 KB' },
    { id:2, nome:'Diploma de Psicologia.pdf',        tipo:'Diploma',                    data:'03/03/2024', tamanho:'1.2 MB' },
  ]);
  const [showForm, setShowForm] = mcState(false);
  const [newDoc, setNewDoc]     = mcState({ nome:'', tipo: DOC_TIPOS[0], arquivo: null });
  const [preview, setPreview]   = mcState(null);

  const setNd = k => e => setNewDoc(d => ({ ...d, [k]: e.target.value }));

  const handleFile = e => {
    const f = e.target.files[0];
    if (!f) return;
    setNewDoc(d => ({ ...d, arquivo: f, nome: d.nome || f.name }));
  };

  const handleAdd = () => {
    if (!newDoc.arquivo) return;
    const sz = newDoc.arquivo.size > 1048576
      ? (newDoc.arquivo.size / 1048576).toFixed(1) + ' MB'
      : Math.round(newDoc.arquivo.size / 1024) + ' KB';
    const today = new Date().toLocaleDateString('pt-BR');
    setDocs(prev => [...prev, { id: Date.now(), nome: newDoc.nome || newDoc.arquivo.name, tipo: newDoc.tipo, data: today, tamanho: sz }]);
    setNewDoc({ nome:'', tipo: DOC_TIPOS[0], arquivo: null });
    setShowForm(false);
  };

  const handleDelete = id => {
    if (!window.confirm('Remover este documento?')) return;
    setDocs(prev => prev.filter(d => d.id !== id));
  };

  const iconForTipo = tipo => {
    if (tipo.includes('CRP') || tipo.includes('Diploma') || tipo.includes('Registro')) return '📋';
    if (tipo.includes('RG') || tipo.includes('CPF')) return '🪪';
    if (tipo.includes('Contrato')) return '📝';
    if (tipo.includes('Currículo')) return '📄';
    return '📁';
  };

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:20 }}>

      {/* Header */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div>
          <div style={{ fontSize:14, fontWeight:600, color:'#111' }}>Documentos cadastrados</div>
          <div style={{ fontSize:12, color:'#9ca3af', marginTop:2 }}>{docs.length} documento{docs.length !== 1 ? 's' : ''}</div>
        </div>
        <button onClick={() => setShowForm(s => !s)}
          style={{ display:'flex', alignItems:'center', gap:6, padding:'8px 16px', background: showForm ? '#f3f4f6' : C.primary, color: showForm ? '#374151' : 'white', border:'none', borderRadius:6, fontSize:13, fontWeight:600, cursor:'pointer' }}>
          {showForm ? 'Cancelar' : '+ Adicionar documento'}
        </button>
      </div>

      {/* Formulário de upload */}
      {showForm && (
        <div style={{ padding:'18px', background:'#f8fafc', borderRadius:10, border:'1px solid #e5e7eb', display:'flex', flexDirection:'column', gap:14 }}>
          <div style={{ fontSize:13, fontWeight:600, color:'#374151' }}>Novo documento</div>
          <McField label="Nome do arquivo" hint="Opcional — usa o nome do arquivo por padrão">
              <input value={newDoc.nome} onChange={setNd('nome')} placeholder="Ex: CRP atualizado 2025" style={mcInput} />
            </McField>

          {/* Área de upload */}
          <div>
            <label style={{ fontSize:13, fontWeight:500, color:'#374151', display:'block', marginBottom:6 }}>Arquivo</label>
            <label style={{
              display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:8,
              padding:'24px', border:`2px dashed ${newDoc.arquivo ? '#22c55e' : '#d1d5db'}`,
              borderRadius:8, cursor:'pointer', background: newDoc.arquivo ? '#f0fdf4' : 'white', transition:'all .15s',
            }}>
              <input type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" onChange={handleFile} style={{ display:'none' }} />
              {newDoc.arquivo ? (
                <>
                  <span style={{ fontSize:24 }}>✅</span>
                  <span style={{ fontSize:13, color:'#16a34a', fontWeight:600 }}>{newDoc.arquivo.name}</span>
                  <span style={{ fontSize:11, color:'#9ca3af' }}>Clique para substituir</span>
                </>
              ) : (
                <>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                  <span style={{ fontSize:13, color:'#6b7280', fontWeight:500 }}>Clique para selecionar o arquivo</span>
                  <span style={{ fontSize:11, color:'#9ca3af' }}>PDF, JPG, PNG, DOC até 10 MB</span>
                </>
              )}
            </label>
          </div>

          <div style={{ display:'flex', justifyContent:'flex-end' }}>
            <button onClick={handleAdd} disabled={!newDoc.arquivo}
              style={{ padding:'9px 22px', background: newDoc.arquivo ? C.primary : '#d1d5db', color:'white', border:'none', borderRadius:6, fontSize:14, fontWeight:600, cursor: newDoc.arquivo ? 'pointer' : 'not-allowed' }}>
              Salvar documento
            </button>
          </div>
        </div>
      )}

      {/* Lista de documentos */}
      {docs.length === 0 ? (
        <div style={{ textAlign:'center', padding:'40px 20px', color:'#9ca3af', fontSize:13 }}>
          Nenhum documento cadastrado ainda.
        </div>
      ) : (
        <div style={{ border:'1px solid #e5e7eb', borderRadius:10, overflow:'hidden' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 100px 90px', background:'#f8fafc', padding:'10px 16px', borderBottom:'1px solid #e5e7eb' }}>
            {['Documento','Data',''].map((h,i) => (
              <span key={i} style={{ fontSize:11, fontWeight:700, color:'#9ca3af', textTransform:'uppercase', letterSpacing:'.06em' }}>{h}</span>
            ))}
          </div>
          {docs.map((doc, i) => (
            <div key={doc.id} style={{ display:'grid', gridTemplateColumns:'1fr 100px 90px', padding:'13px 16px', alignItems:'center', borderBottom: i < docs.length-1 ? '1px solid #f3f4f6' : 'none', background:'white' }}>
              <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                <span style={{ fontSize:20 }}>{iconForTipo(doc.tipo)}</span>
                <div>
                  <div style={{ fontSize:13, fontWeight:600, color:'#111' }}>{doc.nome}</div>
                  <div style={{ fontSize:11, color:'#9ca3af' }}>{doc.tamanho}</div>
                </div>
              </div>
              <span style={{ fontSize:12, color:'#6b7280' }}>{doc.data}</span>
              <div style={{ display:'flex', gap:8 }}>
                <button title="Visualizar" onClick={() => setPreview(doc)}
                  style={{ background:'none', border:'none', cursor:'pointer', color:C.primary, fontSize:12, fontWeight:500, padding:'4px 8px', borderRadius:4, transition:'background .1s' }}
                  onMouseEnter={e => e.currentTarget.style.background='#eff6ff'}
                  onMouseLeave={e => e.currentTarget.style.background='none'}>
                  Ver
                </button>
                <button title="Excluir" onClick={() => handleDelete(doc.id)}
                  style={{ background:'none', border:'none', cursor:'pointer', color:'#ef4444', fontSize:12, fontWeight:500, padding:'4px 8px', borderRadius:4, transition:'background .1s' }}
                  onMouseEnter={e => e.currentTarget.style.background='#fff1f2'}
                  onMouseLeave={e => e.currentTarget.style.background='none'}>
                  Excluir
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Preview modal */}
      {preview && (
        <Modal title={preview.nome} onClose={() => setPreview(null)} width={480}>
          <div style={{ display:'flex', flexDirection:'column', gap:16, alignItems:'center', padding:'8px 0' }}>
            <div style={{ width:80, height:80, borderRadius:16, background:'#eff6ff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:36 }}>
              {iconForTipo(preview.tipo)}
            </div>
            <div style={{ textAlign:'center' }}>
              <div style={{ fontSize:15, fontWeight:600, color:'#111' }}>{preview.nome}</div>
              <div style={{ fontSize:13, color:'#6b7280', marginTop:4 }}>{preview.tipo} · {preview.tamanho} · Adicionado em {preview.data}</div>
            </div>
            <div style={{ display:'flex', gap:10, marginTop:4 }}>
              <button onClick={() => setPreview(null)}
                style={{ padding:'9px 22px', background:C.primary, color:'white', border:'none', borderRadius:6, fontSize:13, fontWeight:600, cursor:'pointer' }}>
                Download
              </button>
              <button onClick={() => setPreview(null)}
                style={{ padding:'9px 22px', background:'white', color:'#374151', border:'1px solid #d1d5db', borderRadius:6, fontSize:13, fontWeight:500, cursor:'pointer' }}>
                Fechar
              </button>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ══════════════════════════════════════════
   ABA: Perfil Médico (terapeuta only)
══════════════════════════════════════════ */
function TabPerfilMedico() {
  const [saved, setSaved] = mcState(false);
  const [form, setForm] = mcState({
    crp: '06/123456',
    especialidade: 'Psicologia Clínica',
    bio: '',
    valorSessao: '150',
    intervalo: '50',
    /* endereço */
    cep: '', logradouro: '', numero: '', complemento: '',
    bairro: '', cidade: '', estado: 'SP',
    /* horários */
    horarios: {
      seg: { ativo:true,  inicio:'08:00', fim:'18:00' },
      ter: { ativo:true,  inicio:'08:00', fim:'18:00' },
      qua: { ativo:true,  inicio:'08:00', fim:'18:00' },
      qui: { ativo:true,  inicio:'08:00', fim:'18:00' },
      sex: { ativo:true,  inicio:'08:00', fim:'17:00' },
      sab: { ativo:false, inicio:'08:00', fim:'12:00' },
      dom: { ativo:false, inicio:'08:00', fim:'12:00' },
    },
  });

  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const toggleDia = dia => setForm(f => ({ ...f, horarios: { ...f.horarios, [dia]: { ...f.horarios[dia], ativo: !f.horarios[dia].ativo } } }));
  const setHorario = (dia, campo, val) => setForm(f => ({ ...f, horarios: { ...f.horarios, [dia]: { ...f.horarios[dia], [campo]: val } } }));

  const SectionTitle = ({ children }) => (
    <div style={{ fontSize:12, fontWeight:700, color:'#9ca3af', letterSpacing:'.08em', textTransform:'uppercase', paddingBottom:8, borderBottom:'1px solid #f0f2f5', marginBottom:4 }}>
      {children}
    </div>
  );

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:24 }}>

      {/* ── Informações profissionais ── */}
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <SectionTitle>Informações profissionais</SectionTitle>

        <div style={{ display:'flex', gap:14 }}>
          <McField label="Registro CRP / CRM" half hint="Ex: 06/123456">
            <input value={form.crp} onChange={set('crp')} placeholder="06/000000" style={mcInput} />
          </McField>
          <McField label="Especialidade principal" half>
            <select value={form.especialidade} onChange={set('especialidade')} style={{ ...mcInput, cursor:'pointer' }}>
              {MC_ESPECIALIDADES.map(e => <option key={e}>{e}</option>)}
            </select>
          </McField>
        </div>

        <div style={{ display:'flex', gap:14 }}>
          <McField label="Valor de comissão (R$)" half hint="Definido pelo administrador da clínica">
            <div style={{ position:'relative' }}>
              <span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', fontSize:14, color:'#6b7280', pointerEvents:'none' }}>R$</span>
              <input type="number" value={form.valorSessao} readOnly style={{ ...mcInput, paddingLeft:36, background:'#f9fafb', color:'#6b7280', cursor:'not-allowed' }} />
            </div>
          </McField>
          <McField label="Duração da sessão (min)" half>
            <select value={form.intervalo} onChange={set('intervalo')} style={{ ...mcInput, cursor:'pointer' }}>
              <option value="30">30 minutos</option>
              <option value="45">45 minutos</option>
              <option value="50">50 minutos</option>
              <option value="60">60 minutos</option>
              <option value="90">90 minutos</option>
            </select>
          </McField>
        </div>

        <McField label="Apresentação / Bio" hint="Visível para pacientes no agendamento online">
          <textarea value={form.bio} onChange={set('bio')} rows={4}
            placeholder="Descreva sua abordagem terapêutica, experiência e áreas de atuação…"
            style={{ ...mcInput, resize:'vertical', lineHeight:1.6 }} />
        </McField>
      </div>

      {/* ── Endereço ── */}
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <SectionTitle>Endereço de atendimento</SectionTitle>

        <div style={{ display:'flex', gap:14 }}>
          <McField label="CEP" half>
            <input value={form.cep} onChange={set('cep')} placeholder="00000-000" style={mcInput} />
          </McField>
          <McField label="Estado" half>
            <select value={form.estado} onChange={set('estado')} style={{ ...mcInput, cursor:'pointer' }}>
              {MC_ESTADOS.map(e => <option key={e}>{e}</option>)}
            </select>
          </McField>
        </div>

        <McField label="Logradouro">
          <input value={form.logradouro} onChange={set('logradouro')} placeholder="Rua, Avenida, Alameda…" style={mcInput} />
        </McField>

        <div style={{ display:'flex', gap:14 }}>
          <McField label="Número" half>
            <input value={form.numero} onChange={set('numero')} placeholder="123" style={mcInput} />
          </McField>
          <McField label="Complemento" half>
            <input value={form.complemento} onChange={set('complemento')} placeholder="Sala 42, Apto 3…" style={mcInput} />
          </McField>
        </div>

        <div style={{ display:'flex', gap:14 }}>
          <McField label="Bairro" half>
            <input value={form.bairro} onChange={set('bairro')} placeholder="Nome do bairro" style={mcInput} />
          </McField>
          <McField label="Cidade" half>
            <input value={form.cidade} onChange={set('cidade')} placeholder="São Paulo" style={mcInput} />
          </McField>
        </div>
      </div>

      {/* ── Disponibilidade ── */}
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <SectionTitle>Disponibilidade de atendimento</SectionTitle>
        <div style={{ display:'flex', flexDirection:'column', border:'1px solid #e5e7eb', borderRadius:8, overflow:'hidden' }}>
          <div style={{ display:'grid', gridTemplateColumns:'130px 1fr 1fr', background:'#f8fafc', padding:'8px 16px', borderBottom:'1px solid #e5e7eb' }}>
            <span style={{ fontSize:11, fontWeight:700, color:'#9ca3af', textTransform:'uppercase', letterSpacing:'.06em' }}>Dia</span>
            <span style={{ fontSize:11, fontWeight:700, color:'#9ca3af', textTransform:'uppercase', letterSpacing:'.06em' }}>Início</span>
            <span style={{ fontSize:11, fontWeight:700, color:'#9ca3af', textTransform:'uppercase', letterSpacing:'.06em' }}>Término</span>
          </div>
          {MC_DIAS.map(({ key, label }, i) => {
            const h = form.horarios[key];
            return (
              <div key={key} style={{ display:'grid', gridTemplateColumns:'130px 1fr 1fr', padding:'10px 16px', alignItems:'center', borderBottom: i < MC_DIAS.length - 1 ? '1px solid #f3f4f6' : 'none', background: h.ativo ? 'white' : '#fafafa' }}>
                <label style={{ display:'flex', alignItems:'center', gap:10, cursor:'pointer', userSelect:'none' }}>
                  <div onClick={() => toggleDia(key)} style={{ width:36, height:20, borderRadius:10, position:'relative', flexShrink:0, background: h.ativo ? C.primary : '#d1d5db', transition:'background .2s', cursor:'pointer' }}>
                    <div style={{ position:'absolute', top:3, left: h.ativo ? 19 : 3, width:14, height:14, borderRadius:'50%', background:'white', transition:'left .2s', boxShadow:'0 1px 3px rgba(0,0,0,0.2)' }} />
                  </div>
                  <span style={{ fontSize:13, fontWeight: h.ativo ? 600 : 400, color: h.ativo ? '#111' : '#9ca3af' }}>{label}</span>
                </label>
                <div style={{ paddingRight:12 }}>
                  <input type="time" value={h.inicio} disabled={!h.ativo} onChange={e => setHorario(key,'inicio',e.target.value)}
                    style={{ padding:'7px 10px', border:'1px solid #e5e7eb', borderRadius:6, fontSize:13, background: h.ativo ? 'white' : '#f3f4f6', color: h.ativo ? '#111' : '#9ca3af', outline:'none', width:'100%', boxSizing:'border-box', cursor: h.ativo ? 'default' : 'not-allowed' }} />
                </div>
                <div style={{ paddingRight:12 }}>
                  <input type="time" value={h.fim} disabled={!h.ativo} onChange={e => setHorario(key,'fim',e.target.value)}
                    style={{ padding:'7px 10px', border:'1px solid #e5e7eb', borderRadius:6, fontSize:13, background: h.ativo ? 'white' : '#f3f4f6', color: h.ativo ? '#111' : '#9ca3af', outline:'none', width:'100%', boxSizing:'border-box', cursor: h.ativo ? 'default' : 'not-allowed' }} />
                </div>
              </div>
            );
          })}
        </div>
        {MC_DIAS.some(d => form.horarios[d.key].ativo) && (
          <div style={{ padding:'12px 16px', background:'#eff6ff', borderRadius:8, border:'1px solid #bfdbfe', fontSize:13, color:'#2563a8' }}>
            <strong>Resumo:</strong>{' '}
            {MC_DIAS.filter(d => form.horarios[d.key].ativo).map(({ key, label }) => (
              <span key={key} style={{ marginRight:12 }}>{label}: {form.horarios[key].inicio}–{form.horarios[key].fim}</span>
            ))}
          </div>
        )}
      </div>

      {/* Footer */}
      <div style={{ display:'flex', justifyContent:'flex-end', alignItems:'center', gap:14, paddingTop:4, borderTop:'1px solid #f0f2f5' }}>
        {saved && <span style={{ fontSize:13, color:'#16a34a', fontWeight:500 }}>✓ Perfil médico salvo</span>}
        <button onClick={() => { setSaved(true); setTimeout(() => setSaved(false), 2500); }}
          style={{ padding:'9px 24px', background:C.primary, color:'white', border:'none', borderRadius:6, fontSize:14, fontWeight:600, cursor:'pointer' }}>
          Salvar alterações
        </button>
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════
   MinhaConta — página principal
══════════════════════════════════════════ */
function MinhaConta({ perfil = 'admin', user = null }) {
  // Detecta se é admin editando outro usuário
  const isAdminEditing = !!user;
  // Para admin editando terapeuta, mostra abas de terapeuta
  const userRole = user ? user.role : null;
  const isTerapeuta = perfil === 'terapeuta' || userRole === 'Terapeuta';

  const tabs = [
    { id:'dados',    label:'Dados Pessoais' },
    { id:'seguranca', label:'Segurança' },
    ...(isTerapeuta ? [{ id:'medico', label:'Perfil Médico' }, { id:'documentos', label:'Documentos' }] : []),
  ];
  const [tab, setTab] = mcState('dados');

  const tabStyle = active => ({
    padding:'11px 22px', border:'none',
    borderBottom: active ? `2px solid ${C.primary}` : '2px solid transparent',
    background:'none', cursor:'pointer', fontSize:13,
    fontWeight: active ? 600 : 400,
    color: active ? C.primary : '#6b7280',
    transition:'color .15s', whiteSpace:'nowrap',
  });

  const roleLabel = { admin:'Administrador', terapeuta:'Terapeuta', secretaria:'Secretária' };

  // Nome e cargo para exibição no header
  const displayName = user
    ? user.name
    : (perfil === 'terapeuta' ? 'Ana Silva' : perfil === 'admin' ? 'Carlos Ferreira' : 'Mariana Costa');
  const displayRole = user ? user.role : (roleLabel[perfil] || perfil);
  const displayInitial = displayName.charAt(0).toUpperCase();

  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:C.pageBg }}>
      <Topbar title={isAdminEditing ? `Perfil — ${displayName}` : 'Minha Conta'} />

      <div style={{ flex:1, overflowY:'auto', padding:'24px' }}>
        <Card style={{ padding:0 }}>

          {/* Header */}
          <div style={{ padding:'24px 28px 0', borderBottom:'1px solid #f0f2f5' }}>
            <div style={{ display:'flex', alignItems:'center', gap:16, marginBottom:16 }}>
              <div style={{ width:52, height:52, borderRadius:'50%', background:C.primary, display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:20, fontWeight:700, flexShrink:0 }}>
                {displayInitial}
              </div>
              <div>
                <div style={{ fontSize:16, fontWeight:700, color:'#111' }}>{displayName}</div>
                <div style={{ fontSize:13, color:'#6b7280', marginTop:2 }}>{displayRole}</div>
              </div>
            </div>
            <div style={{ display:'flex' }}>
              {tabs.map(t => (
                <button key={t.id} style={tabStyle(tab === t.id)} onClick={() => setTab(t.id)}>
                  {t.label}
                </button>
              ))}
            </div>
          </div>

          {/* Conteúdo da aba */}
          <div style={{ padding:'28px 28px' }}>
            {tab === 'dados'      && <TabDadosPessoais perfil={perfil} user={user} />}
            {tab === 'seguranca'  && <TabSeguranca />}
            {tab === 'medico'     && <TabPerfilMedico />}
            {tab === 'documentos' && <TabDocumentos />}
          </div>

        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { MinhaConta });