/* global React */
const { useState: useStateOB } = React;

// =====================================================================
// OnboardingWizard — modal 3 passos guia primeira usuária
// 1. Confirma casa (endereço/CEP)
// 2. Confirma hospitais ativos (toggle ON/OFF)
// 3. Pergunta se quer ligar simulação "Fazer escala"
// =====================================================================

function OnboardingWizard({ casa, hospitais, onSalvarCasa, onAdicionarHospital, onConcluir }) {
  const [passo, setPasso] = useStateOB(0);
  const [casaForm, setCasaForm] = useStateOB(casa || window.CASA_DEFAULT || {});
  // Lista local de hospitais a cadastrar (commitados de uma vez ao concluir)
  const [hospsACadastrar, setHospsACadastrar] = useStateOB([]);
  const [ligarSim, setLigarSim] = useStateOB(true);

  const totalPassos = 3;
  const proximo = () => setPasso(p => p + 1);
  const anterior = () => setPasso(p => Math.max(0, p - 1));

  const concluir = () => {
    if (onSalvarCasa) onSalvarCasa(casaForm);
    // Cadastra cada hospital. Se ligarSim, aplica regrasEscala default no que tem turnos.
    if (onAdicionarHospital) {
      hospsACadastrar.forEach(h => {
        const regras = (ligarSim && h.turnos && Object.keys(h.turnos).length > 0)
          ? window.regrasEscalaPadrao(h)
          : undefined;
        onAdicionarHospital({ ...h, regrasEscala: regras });
      });
    }
    onConcluir();
  };

  const passoAtivo = (() => {
    if (passo === 0) return <PassoCasa casa={casaForm} setCasa={setCasaForm} onProximo={proximo}/>;
    if (passo === 1) return <PassoCadastrarHospitais hospitais={hospsACadastrar} setHospitais={setHospsACadastrar} onProximo={proximo} onAnterior={anterior}/>;
    if (passo === 2) return <PassoSimulacao ligar={ligarSim} setLigar={setLigarSim} hospitais={hospsACadastrar} onConcluir={concluir} onAnterior={anterior}/>;
  })();

  return (
    <div style={{
      position:'fixed', inset: 0, zIndex: 90,
      background: 'rgba(58,46,42,0.55)',
      display:'grid', placeItems:'center',
      padding: 'var(--s-4)',
    }}>
      <div style={{
        background:'var(--bg)', borderRadius:'var(--r-lg)',
        maxWidth: 560, width:'100%', maxHeight:'90vh', overflow:'auto',
        padding:'var(--s-5)',
        boxShadow: 'var(--shadow-lg)',
      }}>
        {/* Progresso */}
        <div style={{display:'flex', gap: 6, marginBottom:'var(--s-4)'}}>
          {Array.from({length: totalPassos}).map((_, i) => (
            <div key={i} style={{
              flex: 1, height: 4,
              background: i <= passo ? 'var(--ink)' : 'var(--bg-alt)',
              borderRadius: 2,
              transition: 'background 0.3s ease',
            }}/>
          ))}
        </div>
        <div className="eyebrow" style={{fontSize: 10, marginBottom: 4}}>
          Passo {passo + 1} de {totalPassos} · Configuração inicial
        </div>
        {passoAtivo}
      </div>
    </div>
  );
}

function PassoCasa({ casa, setCasa, onProximo }) {
  const ok = casa.endereco?.trim();
  return (
    <div style={{display:'grid', gap:'var(--s-3)'}}>
      <h2 className="h2" style={{margin: 0}}>Onde você mora?</h2>
      <p className="lede" style={{margin: 0}}>
        Origem dos deslocamentos automáticos pra cada plantão. Pode editar depois.
      </p>

      <label style={{display:'block'}}>
        <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Endereço</div>
        <input className="input" value={casa.endereco || ''}
          onChange={e => setCasa({...casa, endereco: e.target.value})}
          placeholder="SQNW 306 Bloco I · Asa Noroeste"
          autoFocus/>
      </label>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--s-3)'}} className="form-2col">
        <label style={{display:'block'}}>
          <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>CEP</div>
          <input className="input" value={casa.cep || ''}
            onChange={e => setCasa({...casa, cep: e.target.value})}
            placeholder="70684-245"/>
        </label>
        <label style={{display:'block'}}>
          <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Coordenadas (opcional)</div>
          <input className="input" value={casa.lat && casa.lng ? `${casa.lat}, ${casa.lng}` : ''}
            onChange={e => {
              const [lat, lng] = e.target.value.split(',').map(s => parseFloat(s.trim()));
              if (!isNaN(lat) && !isNaN(lng)) setCasa({...casa, lat, lng});
            }}
            placeholder="-15.762, -47.915"/>
        </label>
      </div>

      <div style={{display:'flex', gap: 8, marginTop:'var(--s-3)', justifyContent:'flex-end'}}>
        <button type="button" className="btn"
          onClick={onProximo} disabled={!ok}
          style={{
            background: ok ? 'var(--ink)' : 'var(--bg-alt)',
            color: ok ? 'var(--bg)' : 'var(--ink-3)',
            padding: '10px 24px', fontSize: 13, fontWeight: 700,
          }}>Próximo →</button>
      </div>
    </div>
  );
}

function PassoCadastrarHospitais({ hospitais, setHospitais, onProximo, onAnterior }) {
  const [adicionando, setAdicionando] = useStateOB(hospitais.length === 0);

  const adicionar = (dados) => {
    const id = (hospitais.length === 0 ? 1 : Math.max(...hospitais.map(h => h.id)) + 1);
    setHospitais([...hospitais, { id, ...dados }]);
    setAdicionando(false);
  };
  const remover = (id) => setHospitais(hospitais.filter(h => h.id !== id));

  return (
    <div style={{display:'grid', gap:'var(--s-3)'}}>
      <h2 className="h2" style={{margin: 0}}>Cadastre os hospitais que você trabalha</h2>
      <p className="lede" style={{margin: 0}}>
        Adicione um por vez. Pode mexer depois em <em>Hospitais</em>.
      </p>

      {/* Lista dos já adicionados */}
      {hospitais.length > 0 && (
        <div style={{display:'grid', gap: 6, marginTop:'var(--s-2)'}}>
          {hospitais.map(h => (
            <div key={h.id} style={{
              display:'flex', alignItems:'center', gap:'var(--s-3)',
              padding: 'var(--s-3) var(--s-4)',
              background: h.corWash,
              border: `1px solid ${h.cor}`,
              borderRadius: 'var(--r-md)',
            }}>
              <span style={{display:'inline-block', width: 12, height: 12, borderRadius: 3, background: h.cor}}/>
              <div style={{flex: 1, minWidth: 0}}>
                <div style={{fontWeight: 600, fontSize: 14, color:'var(--ink)'}}>{h.nome}</div>
                <div className="small" style={{fontSize: 11, color:'var(--ink-3)'}}>
                  {h.abrev} · {Object.keys(h.turnos || {}).length} turno(s){h.endereco ? ` · ${h.endereco}` : ''}
                </div>
              </div>
              <button type="button" onClick={() => remover(h.id)}
                style={{border:'none', background:'transparent', color:'var(--err)', cursor:'pointer', fontSize: 16}}>×</button>
            </div>
          ))}
        </div>
      )}

      {/* Form de adicionar */}
      {adicionando ? (
        <FormHospitalNovo
          jaUsadas={hospitais.map(h => h.family)}
          onCancelar={() => setAdicionando(hospitais.length === 0)}
          onSalvar={adicionar}/>
      ) : (
        <button type="button" onClick={() => setAdicionando(true)}
          style={{
            padding: 'var(--s-3) var(--s-4)',
            background: 'var(--bg)',
            border: '2px dashed var(--line)',
            borderRadius: 'var(--r-md)',
            cursor: 'pointer',
            fontSize: 13, color: 'var(--ink-2)',
          }}>
          + Adicionar mais um hospital
        </button>
      )}

      <div style={{display:'flex', gap: 8, marginTop:'var(--s-3)', justifyContent:'space-between'}}>
        <button type="button" className="btn btn--ghost"
          onClick={onAnterior}
          style={{padding: '10px 18px', fontSize: 13}}>← Anterior</button>
        <button type="button" className="btn"
          onClick={onProximo}
          disabled={hospitais.length === 0 || adicionando}
          title={adicionando ? 'Salve ou cancele o hospital atual primeiro' : ''}
          style={{
            background: (hospitais.length > 0 && !adicionando) ? 'var(--ink)' : 'var(--bg-alt)',
            color: (hospitais.length > 0 && !adicionando) ? 'var(--bg)' : 'var(--ink-3)',
            padding: '10px 24px', fontSize: 13, fontWeight: 700,
          }}>Próximo →</button>
      </div>
    </div>
  );
}

// Form mínimo pra cadastrar hospital novo durante onboarding.
function FormHospitalNovo({ jaUsadas, onCancelar, onSalvar }) {
  const familiasLivres = (window.FAMILIAS_HOSPITAL || []).filter(f => !jaUsadas.includes(f.family));
  const familiaInicial = familiasLivres[0] || window.FAMILIAS_HOSPITAL?.[0];
  const [form, setForm] = useStateOB({
    nome: '', abrev: '', endereco: '',
    family: familiaInicial?.family || 'sand',
    deslocCasa: 30, telefone: '',
    turnos: {},
  });
  const set = (k, v) => setForm({...form, [k]: v});
  const familiaObj = (window.FAMILIAS_HOSPITAL || []).find(f => f.family === form.family) || familiaInicial;

  const TURNOS_PADRAO = {
    manha:    { inicio: 7,  duracao: 6 },
    tarde:    { inicio: 13, duracao: 6 },
    noitinha: { inicio: 19, duracao: 5 },
    noite:    { inicio: 19, duracao: 12 },
  };
  const toggleTurno = (k) => {
    const novo = {...form.turnos};
    if (novo[k]) delete novo[k];
    else novo[k] = TURNOS_PADRAO[k];
    set('turnos', novo);
  };

  const ok = form.nome.trim() && form.abrev.trim();
  const submit = () => {
    if (!ok) return;
    onSalvar({
      ...form,
      nome: form.nome.trim(),
      abrev: form.abrev.trim().toUpperCase(),
      cor: familiaObj.cor, corDeep: familiaObj.corDeep, corWash: familiaObj.corWash,
      deslocCasa: parseInt(form.deslocCasa) || 0,
    });
  };

  return (
    <div style={{
      padding: 'var(--s-4)',
      background: familiaObj?.corWash || 'var(--bg)',
      border: `2px solid ${familiaObj?.cor || 'var(--line)'}`,
      borderRadius: 'var(--r-md)',
      display:'grid', gap:'var(--s-3)',
    }}>
      <div className="eyebrow" style={{fontSize: 10}}>Novo hospital</div>

      <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap: 8}} className="form-2col">
        <label style={{display:'block'}}>
          <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Nome completo</div>
          <input className="input" value={form.nome} autoFocus
            onChange={e => set('nome', e.target.value)}
            placeholder="Hospital Santa Lúcia"/>
        </label>
        <label style={{display:'block'}}>
          <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Sigla</div>
          <input className="input" value={form.abrev} maxLength={6}
            onChange={e => set('abrev', e.target.value.toUpperCase())}
            placeholder="HSL"
            style={{width: 90, textAlign:'center', fontWeight: 700}}/>
        </label>
      </div>

      <label style={{display:'block'}}>
        <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Endereço (opcional)</div>
        <input className="input" value={form.endereco}
          onChange={e => set('endereco', e.target.value)}
          placeholder="Asa Sul, Brasília"/>
      </label>

      <div>
        <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Cor</div>
        <div style={{display:'flex', gap: 6, flexWrap:'wrap'}}>
          {(window.FAMILIAS_HOSPITAL || []).map(f => (
            <button key={f.family} type="button"
              onClick={() => set('family', f.family)}
              style={{
                width: 30, height: 30, borderRadius: 999,
                background: f.cor, cursor:'pointer',
                border: form.family === f.family ? `3px solid ${f.corDeep}` : '2px solid var(--line)',
              }}/>
          ))}
        </div>
      </div>

      <div>
        <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Turnos cadastrados (opcional)</div>
        <p className="small" style={{fontSize: 11, color:'var(--ink-3)', margin: '0 0 6px'}}>
          Marque os turnos que esse hospital tem. Sem isso, simulação de escala não funciona pra ele.
        </p>
        <div style={{display:'flex', gap: 6, flexWrap:'wrap'}}>
          {[
            {k:'manha', l:'Manhã (7h–13h)'},
            {k:'tarde', l:'Tarde (13h–19h)'},
            {k:'noitinha', l:'Noitinha (19h–24h)'},
            {k:'noite', l:'Noite (19h–7h)'},
          ].map(t => (
            <button key={t.k} type="button" onClick={() => toggleTurno(t.k)}
              style={{
                padding: '4px 10px', fontSize: 12, fontWeight: 600,
                border: `1px solid ${form.turnos[t.k] ? familiaObj?.corDeep : 'var(--line)'}`,
                background: form.turnos[t.k] ? familiaObj?.cor : 'var(--bg)',
                color: form.turnos[t.k] ? familiaObj?.corDeep : 'var(--ink-2)',
                borderRadius: 'var(--r-pill)', cursor:'pointer',
              }}>{t.l}</button>
          ))}
        </div>
      </div>

      <div style={{display:'flex', gap: 8, marginTop: 'var(--s-2)'}}>
        <button type="button" onClick={onCancelar}
          style={{flex: 1, padding: '8px 14px', fontSize: 12,
            border: '1px solid var(--line)', background: 'var(--bg)', borderRadius: 'var(--r-pill)', cursor:'pointer'}}>
          Cancelar
        </button>
        <button type="button" onClick={submit} disabled={!ok}
          style={{flex: 1, padding: '8px 14px', fontSize: 12, fontWeight: 700,
            border: 'none', background: ok ? 'var(--ink)' : 'var(--bg-alt)',
            color: ok ? 'var(--bg)' : 'var(--ink-3)', borderRadius: 'var(--r-pill)', cursor: ok ? 'pointer' : 'not-allowed'}}>
          Salvar hospital
        </button>
      </div>
    </div>
  );
}

function PassoSimulacao({ ligar, setLigar, hospitais, onConcluir, onAnterior }) {
  const ativosComTurnos = (hospitais || []).filter(h => h.turnos && Object.keys(h.turnos).length > 0);
  const ativosSemTurnos = (hospitais || []).filter(h => !h.turnos || Object.keys(h.turnos).length === 0);

  return (
    <div style={{display:'grid', gap:'var(--s-3)'}}>
      <h2 className="h2" style={{margin: 0}}>Quer usar o simulador de escala?</h2>
      <p className="lede" style={{margin: 0}}>
        O Colo Ritmo pode montar 3 propostas de escala mensal pra você mandar
        pra coordenação dos hospitais. Você define regras, ele respeita.
      </p>

      <div style={{
        padding: 'var(--s-4)',
        background: ligar ? 'var(--colo-sage-wash, #ECF6E7)' : 'var(--bg-alt)',
        borderRadius: 'var(--r-md)',
        border: `1px solid ${ligar ? 'var(--colo-sage, #5A6E50)' : 'var(--line)'}`,
        cursor: 'pointer',
      }} onClick={() => setLigar(true)}>
        <div style={{display:'flex', alignItems:'center', gap: 8, marginBottom: 4}}>
          <input type="radio" checked={ligar} onChange={() => setLigar(true)} style={{accentColor: 'var(--colo-sage, #5A6E50)'}}/>
          <strong style={{fontSize: 14}}>Sim, quero simular escalas</strong>
        </div>
        <p className="small" style={{margin: '4px 0 0', fontSize: 12, paddingLeft: 24}}>
          Vou ligar regras padrão (8 plantões/mês, 2 FDS, 60h alvo) nos hospitais ativos.
          Você refina depois em <em>Hospitais → Regras pra Fazer escala</em>.
        </p>
        {ativosComTurnos.length > 0 && (
          <div style={{display:'flex', gap: 4, marginTop: 8, flexWrap:'wrap', paddingLeft: 24}}>
            {ativosComTurnos.map(h => (
              <span key={h.id} style={{
                padding: '2px 8px', fontSize: 11, fontWeight: 700,
                background: h.corWash, color: h.corDeep,
                borderRadius: 'var(--r-pill)',
              }}>{h.abrev}</span>
            ))}
          </div>
        )}
        {ativosSemTurnos.length > 0 && (
          <p className="small" style={{margin: '6px 0 0', fontSize: 11, paddingLeft: 24, color: 'var(--err)'}}>
            ⚠ {ativosSemTurnos.map(h => h.abrev).join(', ')} ainda não tem turnos cadastrados.
            Vai ficar de fora — cadastre depois pra ativar.
          </p>
        )}
      </div>

      <div style={{
        padding: 'var(--s-4)',
        background: !ligar ? 'var(--bg-alt)' : 'var(--bg)',
        borderRadius: 'var(--r-md)',
        border: `1px solid ${!ligar ? 'var(--ink)' : 'var(--line)'}`,
        cursor: 'pointer',
      }} onClick={() => setLigar(false)}>
        <div style={{display:'flex', alignItems:'center', gap: 8, marginBottom: 4}}>
          <input type="radio" checked={!ligar} onChange={() => setLigar(false)} style={{accentColor: 'var(--ink)'}}/>
          <strong style={{fontSize: 14}}>Não, só vou usar como agenda</strong>
        </div>
        <p className="small" style={{margin: '4px 0 0', fontSize: 12, paddingLeft: 24}}>
          Você só vê as escalas que recebe dos hospitais. Pode ligar o simulador
          depois quando quiser.
        </p>
      </div>

      <div style={{display:'flex', gap: 8, marginTop:'var(--s-3)', justifyContent:'space-between'}}>
        <button type="button" className="btn btn--ghost"
          onClick={onAnterior}
          style={{padding: '10px 18px', fontSize: 13}}>← Anterior</button>
        <button type="button" className="btn"
          onClick={onConcluir}
          style={{
            background: 'var(--colo-sage, #5A6E50)', color: 'var(--bg)',
            padding: '10px 24px', fontSize: 13, fontWeight: 700,
          }}>Começar a usar →</button>
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingWizard });