// ═══════════════════════════════════════════════════════════════════
// Modal: adicionar / editar vendedor
// ═══════════════════════════════════════════════════════════════════

function VendedorModal({ open, onClose, vendedor, onSave, onDelete }) {
  const isEdit = !!vendedor;
  const defaultForm = { nome: '', iniciais: '', papel: 'Comercial', setor: 'Comercial', salario: 0, ativo: true, email: '', acesso: 'visualizador', cor: '#00967B', senha: 'escalab123' };
  const [form, setForm] = useState(() => vendedor || defaultForm);
  const [showSenha, setShowSenha] = useState(false);

  useEffect(() => {
    if (open) { setForm(vendedor || defaultForm); setShowSenha(false); }
  }, [open, vendedor]);

  const update = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const autoIniciais = (nome) => nome.split(' ').filter(Boolean).slice(0, 2).map(p => p[0]?.toUpperCase()).join('');

  const setorOpts = [
    { value: 'Comercial', label: 'Comercial' },
    { value: 'P&D',       label: 'P&D' },
    { value: 'NNE',       label: 'NNE' },
    { value: 'PMO',       label: 'PMO' },
    { value: 'Marketing', label: 'Marketing' },
    { value: 'Diretoria', label: 'Diretoria' },
  ];
  const papelOpts = [
    { value: 'Comercial',   label: 'Comercial' },
    { value: 'Hunter',      label: 'Hunter' },
    { value: 'Fidelização', label: 'Fidelização' },
    { value: 'P&D',         label: 'P&D' },
    { value: 'NNE',         label: 'NNE' },
    { value: 'PMO',         label: 'PMO' },
    { value: 'Marketing',   label: 'Marketing' },
  ];

  return (
    <Modal open={open} onClose={onClose} width={620}
      title={isEdit ? `Editar ${vendedor.nome}` : 'Adicionar vendedor'}
      footer={<>
        {isEdit && <Button variant="danger" icon="close" onClick={() => onDelete?.(vendedor.id)} style={{ marginRight: 'auto' }}>Excluir</Button>}
        <Button variant="outline" onClick={onClose}>Cancelar</Button>
        <Button variant="primary" icon="check" onClick={() => onSave({ ...form, iniciais: form.iniciais || autoIniciais(form.nome) })}>
          {isEdit ? 'Salvar alterações' : 'Adicionar vendedor'}
        </Button>
      </>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {/* Header com avatar preview */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 16, background: 'var(--escalab-paper)', borderRadius: 10 }}>
          <Avatar v={{ iniciais: form.iniciais || autoIniciais(form.nome) || '??', cor: form.cor }} size={52} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600 }}>{form.nome || 'Novo vendedor'}</div>
            <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{form.papel} · {form.setor}</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {['#00967B', '#00836B', '#005E4D', '#4A5560', '#1F4A8A', '#B56500'].map(c => (
              <button key={c} onClick={() => update('cor', c)}
                style={{ width: 22, height: 22, borderRadius: '50%', background: c, border: form.cor === c ? '2px solid var(--escalab-ink)' : '2px solid transparent', cursor: 'pointer', padding: 0 }} />
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.6fr', gap: 12 }}>
          <Field label="Nome completo">
            <Input value={form.nome} onChange={v => update('nome', v)} placeholder="Ex: Mariana Souza" />
          </Field>
          <Field label="Iniciais" hint="Auto-gerado se vazio">
            <Input value={form.iniciais} onChange={v => update('iniciais', v.toUpperCase().slice(0, 2))} placeholder={autoIniciais(form.nome) || 'MS'} />
          </Field>
        </div>

        <Field label="E-mail corporativo">
          <Input value={form.email} onChange={v => update('email', v)} placeholder="mariana@escalab.com.br" prefix="@" />
        </Field>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Field label="Papel principal" hint="Papéis em leads são por participação">
            <Select value={form.papel} onChange={v => update('papel', v)} options={papelOpts} />
          </Field>
          <Field label="Setor primário" hint="Define o rateio de comissão fixa">
            <Select value={form.setor} onChange={v => update('setor', v)} options={setorOpts} />
          </Field>
        </div>

        <Field label="Salário base (R$)" hint="Usado para o rateio proporcional Sal / S">
          <Input value={form.salario} onChange={v => update('salario', +v.replace(/\D/g, '') || 0)} prefix="R$" placeholder="6.500" />
        </Field>

        <Field label="Senha de acesso" hint="Clique no olho para ver · o vendedor pode alterar no extrato">
          <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--escalab-line)', borderRadius: 8, background: '#fff', overflow: 'hidden' }}>
            <input value={form.senha || ''} onChange={e => update('senha', e.target.value)}
              type={showSenha ? 'text' : 'password'} placeholder="••••••••"
              style={{ border: 0, outline: 0, flex: 1, padding: '10px 12px', fontSize: 14, fontFamily: 'inherit', background: 'transparent' }} />
            <button type="button" onClick={() => setShowSenha(!showSenha)} style={{ border: 0, background: 'transparent', cursor: 'pointer', padding: '0 12px', color: 'var(--escalab-slate)', display: 'flex' }}>
              <Icon name="eye" size={15} />
            </button>
          </div>
        </Field>

        <div style={{ padding: 16, background: 'var(--escalab-paper)', borderRadius: 10, border: '1px solid var(--escalab-line)' }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 12 }}>Acesso ao sistema</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { v: 'admin',         t: 'Administrador',  d: 'Edita regras, fecha trimestre, gera folha. Use só para diretoria.' },
              { v: 'visualizador',  t: 'Visualizador',   d: 'Consulta seu extrato e o time. Sem permissão de edição.' },
              { v: 'sem-acesso',    t: 'Sem acesso',     d: 'Aparece nos cálculos mas não loga no sistema.' },
            ].map(opt => (
              <label key={opt.v} style={{ display: 'flex', gap: 10, padding: 10, border: '1px solid', borderColor: form.acesso === opt.v ? 'var(--escalab-brand)' : 'var(--escalab-line)', borderRadius: 8, cursor: 'pointer', background: form.acesso === opt.v ? 'var(--escalab-brand-tint)' : '#fff' }}>
                <input type="radio" name="acesso" checked={form.acesso === opt.v} onChange={() => update('acesso', opt.v)} style={{ marginTop: 3 }} />
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{opt.t}</div>
                  <div style={{ fontSize: 12, color: 'var(--escalab-slate)', marginTop: 2 }}>{opt.d}</div>
                </div>
              </label>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 14, background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 10 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Status ativo</div>
            <div style={{ fontSize: 12, color: 'var(--escalab-slate)' }}>Inativos não recebem rateio em novos leads.</div>
          </div>
          <Toggle checked={form.ativo} onChange={v => update('ativo', v)} />
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { VendedorModal });