// Terapeutas — visível apenas para admin; lista e edita todos os perfis de terapeuta

const { useState: tpState } = React;

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

const TP_INITIAL = [
  {
    id: 1, initials:'A', color:'#2563a8',
    nome:'Ana', sobrenome:'Silva',
    crp:'06/123456', especialidade:'Psicologia Clínica',
    telefone:'(11) 98765-4321', email:'ana.silva@conexaopsi.com.br',
    valorComissao:'120', bio:'Especialista em terapia cognitivo-comportamental com foco em ansiedade e depressão.',
    status:'Ativo', pacientes:12,
    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',
  },
  {
    id: 2, initials:'C', color:'#0e7490',
    nome:'Carlos', sobrenome:'Mendes',
    crp:'06/67890', especialidade:'Psicoterapia Cognitivo-Comportamental',
    telefone:'(11) 97654-3210', email:'carlos.mendes@conexaopsi.com.br',
    valorComissao:'150', bio:'',
    status:'Ativo', pacientes:8,
    horarios:{
      seg:{ ativo:true,  inicio:'09:00', fim:'17:00' },
      ter:{ ativo:true,  inicio:'09:00', fim:'17:00' },
      qua:{ ativo:false, inicio:'09:00', fim:'17:00' },
      qui:{ ativo:true,  inicio:'09:00', fim:'17:00' },
      sex:{ ativo:true,  inicio:'09:00', fim:'17:00' },
      sab:{ ativo:false, inicio:'08:00', fim:'12:00' },
      dom:{ ativo:false, inicio:'08:00', fim:'12:00' },
    },
    intervalo:'50',
  },
];

/* ── Painel de perfil do terapeuta selecionado ── */
function TerapeutaPerfil({ terapeuta, onChange }) {
  const [tab, setTab] = tpState('profissional');
  const [saved, setSaved] = tpState(false);
  const [form, setForm] = tpState(terapeuta);

  // Sync when selection changes
  React.useEffect(() => { setForm(terapeuta); setTab('profissional'); setSaved(false); }, [terapeuta.id]);

  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 handleSave = () => {
    onChange(form);
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  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 statusColor = form.status === 'Ativo'
    ? { bg:'#dcfce7', text:'#15803d' }
    : { bg:'#fee2e2', text:'#991b1b' };

  return (
    <Card style={{ padding:0, flex:1, display:'flex', flexDirection:'column', minHeight: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:56, height:56, borderRadius:'50%', background:form.color, display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:20, fontWeight:700, flexShrink:0 }}>
            {form.initials}
          </div>
          <div style={{ flex:1 }}>
            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
              <span style={{ fontSize:17, fontWeight:700, color:'#111' }}>{form.nome} {form.sobrenome}</span>
              <span style={{ fontSize:11, fontWeight:600, padding:'2px 8px', borderRadius:20, background: statusColor.bg, color: statusColor.text }}>
                {form.status}
              </span>
            </div>
            <div style={{ fontSize:13, color:'#6b7280', marginTop:2 }}>
              {form.especialidade} · CRP {form.crp}
            </div>
            <div style={{ fontSize:12, color:'#9ca3af', marginTop:2 }}>
              {form.pacientes} paciente{form.pacientes !== 1 ? 's' : ''} ativos
            </div>
          </div>
          {/* Status toggle */}
          <div>
            <select
              value={form.status}
              onChange={set('status')}
              style={{ padding:'6px 10px', border:'1px solid #e5e7eb', borderRadius:6, fontSize:13, color:'#374151', background:'white', cursor:'pointer', outline:'none' }}
            >
              <option>Ativo</option>
              <option>Inativo</option>
            </select>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display:'flex' }}>
          <button style={tabStyle(tab === 'profissional')} onClick={() => setTab('profissional')}>Perfil Profissional</button>
          <button style={tabStyle(tab === 'disponibilidade')} onClick={() => setTab('disponibilidade')}>Disponibilidade</button>
        </div>
      </div>

      {/* Body */}
      <div style={{ flex:1, overflowY:'auto', padding:'24px 28px', display:'flex', flexDirection:'column', gap:16 }}>

        {/* ── ABA: Perfil Profissional ── */}
        {tab === 'profissional' && (
          <>
            <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>

            <div style={{ display:'flex', gap:14 }}>
              <Field label="Registro CRP / CRM" half hint="Ex: 06/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' }}>
                  {TP_ESPECIALIDADES.map(e => <option key={e}>{e}</option>)}
                </select>
              </Field>
            </div>

            <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>

            {/* Comissão — editável pelo admin */}
            <Field label="Valor de comissã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.valorComissao}
                  onChange={set('valorComissao')}
                  style={{ ...inputStyle, paddingLeft:36 }}
                />
              </div>
            </Field>

            <Field label="Apresentação / Bio" hint="Visível para pacientes no agendamento online">
              <textarea value={form.bio} onChange={set('bio')}
                rows={4} placeholder="Descreva a 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>

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

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

            {TP_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>{' '}
                {TP_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, flexShrink:0 }}>
        {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>
  );
}

/* ── Terapeutas (página principal) ── */
function Terapeutas() {
  const [lista, setLista] = tpState(TP_INITIAL);
  const [selectedId, setSelectedId] = tpState(TP_INITIAL[0].id);

  const selected = lista.find(t => t.id === selectedId);

  const handleChange = updated => {
    setLista(prev => prev.map(t => t.id === updated.id ? updated : t));
  };

  const statusColor = status => status === 'Ativo'
    ? { bg:'#dcfce7', text:'#15803d' }
    : { bg:'#fee2e2', text:'#991b1b' };

  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, background:C.pageBg }}>
      <Topbar title="Terapeutas" />

      <div style={{ flex:1, display:'flex', gap:20, padding:'20px 24px', minHeight:0, overflow:'hidden' }}>

        {/* ── Lista lateral ── */}
        <div style={{ width:230, flexShrink:0, display:'flex', flexDirection:'column', gap:8 }}>

          {/* Contador */}
          <div style={{ fontSize:12, fontWeight:600, color:'#9ca3af', letterSpacing:'.05em', textTransform:'uppercase', padding:'0 2px', marginBottom:4 }}>
            {lista.length} terapeuta{lista.length !== 1 ? 's' : ''}
          </div>

          {lista.map(t => {
            const isActive = t.id === selectedId;
            const sc = statusColor(t.status);
            return (
              <button key={t.id} onClick={() => setSelectedId(t.id)}
                style={{
                  display:'flex', alignItems:'center', gap:12,
                  padding:'12px 14px', borderRadius:10,
                  background: isActive ? 'white' : 'rgba(255,255,255,0.6)',
                  border: isActive ? `1.5px solid ${C.primary}` : '1.5px solid transparent',
                  cursor:'pointer', textAlign:'left', width:'100%',
                  boxShadow: isActive ? '0 1px 6px rgba(37,99,168,0.15)' : 'none',
                  transition:'all .15s',
                }}>
                <div style={{ width:38, height:38, borderRadius:'50%', background: t.color, display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:15, fontWeight:700, flexShrink:0 }}>
                  {t.initials}
                </div>
                <div style={{ flex:1, overflow:'hidden' }}>
                  <div style={{ fontSize:13, fontWeight:600, color: isActive ? C.primary : '#111', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                    {t.nome} {t.sobrenome}
                  </div>
                  <div style={{ fontSize:11, color:'#9ca3af', marginTop:2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                    {t.especialidade}
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:4 }}>
                    <span style={{ fontSize:10, fontWeight:600, padding:'1px 6px', borderRadius:20, background: sc.bg, color: sc.text }}>
                      {t.status}
                    </span>
                    <span style={{ fontSize:11, color:'#9ca3af' }}>{t.pacientes} pac.</span>
                  </div>
                </div>
              </button>
            );
          })}
        </div>

        {/* ── Perfil do terapeuta selecionado ── */}
        <div style={{ flex:1, display:'flex', flexDirection:'column', minHeight:0, minWidth:0 }}>
          {selected
            ? <TerapeutaPerfil key={selected.id} terapeuta={selected} onChange={handleChange} />
            : (
              <Card style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center' }}>
                <span style={{ color:'#9ca3af', fontSize:14 }}>Selecione um terapeuta</span>
              </Card>
            )
          }
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { Terapeutas });