// MeuPerfil — visível apenas para terapeuta

const { useState: mpState } = React;

const MP_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 MP_ESPECIALIDADES = [
  'Psicologia Clínica','Psicoterapia Cognitivo-Comportamental','Psicanálise',
  'Psicologia Infantil','Psicologia do Adolescente','Neuropsicologia',
  'Psicologia Organizacional','Terapia de Casal','Terapia Familiar','Outra',
];

function MeuPerfil() {
  const [saved, setSaved] = mpState(false);
  const [tab, setTab]     = mpState('profissional'); // 'profissional' | 'disponibilidade'

  const [form, setForm] = mpState({
    /* profissional */
    nome:'Ana Silva', sobrenome:'', crp:'06/123456', especialidade:'Psicologia Clínica',
    telefone:'(11) 98765-4321', email:'ana.silva@conexaopsi.com.br',
    valorSessao:'120', bio:'',
    /* disponibilidade por dia */
    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' },
    },
    intervalo:'50',
  });

  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 inputStyle = {
    padding:'9px 12px', border:'1px solid #e5e7eb', borderRadius:6,
    fontSize:14, background:'white', outline:'none', color:'#111',
    width:'100%', boxSizing:'border-box',
  };
  const labelStyle = { fontSize:13, fontWeight:500, color:'#374151' };

  const Field = ({ label, hint, children, half }) => (
    <div style={{ display:'flex', flexDirection:'column', gap:5, flex: half ? '1 1 45%' : '1 1 100%' }}>
      <label style={labelStyle}>{label}</label>
      {children}
      {hint && <span style={{ fontSize:11, color:'#9ca3af' }}>{hint}</span>}
    </div>
  );

  const tabStyle = active => ({
    padding:'10px 20px', 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 handleSave = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:C.pageBg }}>
      <Topbar title="Meu Perfil" />
      <div style={{ flex:1, overflowY:'auto', padding:'24px' }}>
        <Card style={{ padding:'0' }}>

          {/* Header do card */}
          <div style={{ padding:'24px 28px 0', display:'flex', alignItems:'center', gap:16, borderBottom:'1px solid #f0f2f5' }}>
            {/* Avatar */}
            <div style={{ width:60, height:60, borderRadius:'50%', background:C.primary, display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:22, fontWeight:700, flexShrink:0 }}>
              {form.nome.charAt(0)}
            </div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:17, fontWeight:700, color:'#111' }}>{form.nome} {form.sobrenome}</div>
              <div style={{ fontSize:13, color:'#6b7280', marginTop:2 }}>{form.especialidade} · CRP {form.crp}</div>
            </div>

            {/* Tab bar */}
            <div style={{ display:'flex', alignSelf:'flex-end' }}>
              <button style={tabStyle(tab==='profissional')} onClick={() => setTab('profissional')}>Perfil Profissional</button>
              <button style={tabStyle(tab==='disponibilidade')} onClick={() => setTab('disponibilidade')}>Disponibilidade</button>
            </div>
          </div>

          {/* Conteúdo */}
          <div style={{ padding:'24px 28px', display:'flex', flexDirection:'column', gap:16 }}>

            {/* ── ABA: Perfil Profissional ── */}
            {tab === 'profissional' && (
              <>
                {/* Nome */}
                <div style={{ display:'flex', gap:14 }}>
                  <Field label="Nome" half>
                    <input value={form.nome} onChange={set('nome')} style={inputStyle} />
                  </Field>
                  <Field label="Sobrenome" half>
                    <input value={form.sobrenome} onChange={set('sobrenome')} style={inputStyle} />
                  </Field>
                </div>

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

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

                {/* Valor da sessão */}
                <Field label="Valor da sessão (R$)" hint="Definido pelo administrador da clínica">
                  <div style={{ position:'relative', maxWidth:200 }}>
                    <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={{ ...inputStyle, paddingLeft:36, background:'#f9fafb', color:'#6b7280', cursor:'not-allowed' }} />
                  </div>
                </Field>

                {/* Bio */}
                <Field 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={{ ...inputStyle, resize:'vertical', lineHeight:1.6 }} />
                </Field>
              </>
            )}

            {/* ── ABA: Disponibilidade ── */}
            {tab === 'disponibilidade' && (
              <>
                <div style={{ fontSize:13, color:'#6b7280', marginBottom:4 }}>
                  Ative os dias e defina o horário de atendimento para cada um.
                </div>

                {/* Tabela de dias */}
                <div style={{ display:'flex', flexDirection:'column', gap:0, border:'1px solid #e5e7eb', borderRadius:8, overflow:'hidden' }}>
                  {/* Header */}
                  <div style={{ display:'grid', gridTemplateColumns:'120px 1fr 1fr', gap:0, 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>

                  {MP_DIAS.map(({ key, label }, i) => {
                    const h = form.horarios[key];
                    const isLast = i === MP_DIAS.length - 1;
                    return (
                      <div key={key} style={{
                        display:'grid', gridTemplateColumns:'120px 1fr 1fr', gap:0,
                        padding:'10px 16px', alignItems:'center',
                        borderBottom: isLast ? 'none' : '1px solid #f3f4f6',
                        background: h.ativo ? 'white' : '#fafafa',
                        transition:'background .15s',
                      }}>
                        {/* Toggle + label */}
                        <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>

                        {/* Hora início */}
                        <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>

                        {/* Hora fim */}
                        <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>

                {/* Resumo */}
                {MP_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>{' '}
                    {MP_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={{ padding:'16px 28px', borderTop:'1px solid #f0f2f5', display:'flex', justifyContent:'flex-end', alignItems:'center', gap:14 }}>
            {saved && (
              <span style={{ fontSize:13, color:'#16a34a', fontWeight:500, display:'flex', alignItems:'center', gap:6 }}>
                ✓ Alterações salvas
              </span>
            )}
            <button onClick={handleSave}
              style={{ padding:'9px 24px', background:C.primary, color:'white', border:'none', borderRadius:6, fontSize:14, fontWeight:600, cursor:'pointer' }}>
              Salvar alterações
            </button>
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { MeuPerfil });