/* global React, Icon, Button, Drawer, Field, brl, numBr, tmPode, tmMotivoNegado,
   tmFolha, colabMsgErro, colabRegime, colabIso, useContasBancarias,
   COLAB_VINCULOS, COLAB_REGIMES, COLAB_CICLOS, COLAB_DIAS_ISO */

// ─────────────────────────────────────────────────────────────────────────────
//  Colaboradores · formulários
//    ColaboradorForm  — a pessoa e o combinado
//    LancamentoForm   — vale (vira título pago), bônus e desconto
//
//  ⚠️ NENHUM CAMPO NASCE PREENCHIDO com valor de dinheiro ou de jornada. O
//     cadastro de vendedores faz isso (comissao: 1.5, descMax: 8) e o número que
//     ninguém escolheu vira dado de verdade quando a pessoa só clica em salvar.
//     Aqui os únicos padrões são estruturais: situação 'Ativo' e tipo 'trabalho'.
// ─────────────────────────────────────────────────────────────────────────────

// Rascunho em branco de verdade. Exportado porque a lista também o usa.
function colaboradorEmBranco(empresaId) {
  return {
    nome: '', apelido: '', cpf: '', celular: '', email: '', data_inicio: '',
    vinculo: '', regime: '', valor_regime: '', ciclo: '', ciclo_dia: '',
    dias_semana: null, jornada_horas: '', usuario_id: '', vendedor_id: '',
    empresa_id: empresaId || '', situacao: 'Ativo', observacoes: '',
  };
}

function ColaboradorForm({ draft, set, onSave, onCancel, salvando, erro }) {
  const [pessoas, setPessoas]     = React.useState([]);   // usuarios do app
  const [vendedores, setVend]     = React.useState([]);

  React.useEffect(() => {
    if (!window.tmSupabase) return;
    window.tmSupabase.from('usuarios').select('id,nome,email')
      .eq('arquivado', false).order('nome')
      .then(({ data }) => setPessoas(data || []));
    window.tmSupabase.from('vendedores').select('id,nome,situacao').order('nome')
      .then(({ data }) => setVend(data || []));
  }, []);

  const reg     = colabRegime(draft.regime);
  const semanal = draft.ciclo === 'semanal' || draft.ciclo === 'quinzenal';
  const empresas = window.tmEmpresas || [];

  // O valor é obrigatório em todo regime MENOS pró-labore, onde vazio quer
  // dizer "variável, digitado no fechamento" — foi o pedido explícito.
  const valorOpcional = draft.regime === 'prolabore';

  const faltando = [];
  if (!String(draft.nome || '').trim()) faltando.push('nome');
  if (!draft.vinculo) faltando.push('vínculo');
  if (!draft.regime)  faltando.push('regime');
  if (!draft.ciclo)   faltando.push('ciclo');
  if (!valorOpcional && (draft.valor_regime === '' || draft.valor_regime == null)) faltando.push('valor');

  return (
    <div>
      <div className="form-section">
        <div className="sh"><span>Quem é</span></div>
        <div className="body">
          <div className="field-grid-2">
            <Field label="Nome completo" value={draft.nome} onChange={v => set('nome', v)} placeholder="" />
            <Field label="Como você chama" value={draft.apelido} onChange={v => set('apelido', v)}
              hint="Aparece nas listas quando preenchido" placeholder="" />
          </div>
          <div className="field-grid-3" style={{ marginTop: 16 }}>
            <Field label="CPF" value={draft.cpf} onChange={v => set('cpf', v)} placeholder="" />
            <Field label="Celular" value={draft.celular} onChange={v => set('celular', v)} placeholder="" />
            <Field label="E-mail" value={draft.email} onChange={v => set('email', v)} placeholder="" />
          </div>
          <div className="field-grid-3" style={{ marginTop: 16 }}>
            <Field label="Vínculo">
              <select className="input" value={draft.vinculo || ''} onChange={e => set('vinculo', e.target.value)}>
                <option value="">Escolha…</option>
                {COLAB_VINCULOS.map(o => <option key={o.v} value={o.v}>{o.lbl}</option>)}
              </select>
            </Field>
            <Field label="Data de início" type="date"
              value={String(draft.data_inicio || '').slice(0, 10)}
              onChange={v => set('data_inicio', v)} />
            <Field label="Empresa">
              <select className="input" value={draft.empresa_id || ''} onChange={e => set('empresa_id', e.target.value)}>
                <option value="">Todas as empresas</option>
                {empresas.map(e => (
                  <option key={e.id} value={e.id}>{e.nome_fantasia || e.razao_social || e.nome}</option>
                ))}
              </select>
            </Field>
          </div>
        </div>
      </div>

      <div className="form-section">
        <div className="sh"><span>O combinado</span>
          <span className="meta">é o que o fechamento usa para calcular</span></div>
        <div className="body">
          <div className="field-grid-3">
            <Field label="Regime">
              <select className="input" value={draft.regime || ''} onChange={e => set('regime', e.target.value)}>
                <option value="">Escolha…</option>
                {COLAB_REGIMES.map(o => <option key={o.v} value={o.v}>{o.lbl}</option>)}
              </select>
            </Field>
            <Field
              label={reg ? 'Valor · ' + reg.un : 'Valor'}
              value={draft.valor_regime}
              onChange={v => set('valor_regime', v)}
              placeholder="0,00"
              hint={valorOpcional
                ? 'Deixe vazio se o pró-labore for variável — aí você digita no fechamento'
                : (reg ? 'Pode usar vírgula: 37,50' : 'Escolha o regime primeiro')} />
            <Field label="Jornada esperada por dia" value={draft.jornada_horas}
              onChange={v => set('jornada_horas', v)} placeholder="0,0" suffix="h"
              hint="Só aponta a diferença na grade. Não trava lançamento." />
          </div>
          <div className="field-grid-2" style={{ marginTop: 16 }}>
            <Field label="Ciclo de pagamento">
              <select className="input" value={draft.ciclo || ''} onChange={e => set('ciclo', e.target.value)}>
                <option value="">Escolha…</option>
                {COLAB_CICLOS.map(o => <option key={o.v} value={o.v}>{o.lbl}</option>)}
              </select>
            </Field>
            {draft.ciclo ? (
              <Field label={semanal ? 'Dia do pagamento' : 'Dia do mês'}>
                {semanal ? (
                  <select className="input" value={draft.ciclo_dia || ''} onChange={e => set('ciclo_dia', e.target.value)}>
                    <option value="">Escolha…</option>
                    {[1, 2, 3, 4, 5, 6, 7].map(d => <option key={d} value={d}>{COLAB_DIAS_ISO[d]}</option>)}
                  </select>
                ) : (
                  <input className="input" type="number" min="1" max="31"
                    value={draft.ciclo_dia || ''} onChange={e => set('ciclo_dia', e.target.value)} />
                )}
              </Field>
            ) : null}
          </div>

          {/* Dias do combinado. Não é campo de dinheiro: define o que a GRADE
              mostra e o que conta como jornada esperada. Quem paga é o tipo do
              dia lançado, não estes botões. */}
          <div className="field" style={{ marginTop: 18 }}>
            <span>Dias que trabalha</span>
            <div className="cl-dias">
              {[1, 2, 3, 4, 5, 6, 7].map(d => {
                const on = (draft.dias_semana || []).indexOf(d) >= 0;
                return (
                  <span key={d} className={'cl-diachip' + (on ? ' on' : '')}
                    onClick={() => {
                      const atual = (draft.dias_semana || []).slice();
                      const i = atual.indexOf(d);
                      if (i >= 0) atual.splice(i, 1); else atual.push(d);
                      atual.sort((a, b) => a - b);
                      set('dias_semana', atual.length ? atual : null);
                    }}>
                    {COLAB_DIAS_ISO[d].slice(0, 3)}
                  </span>
                );
              })}
              <span className="cl-diaatalho" onClick={() => set('dias_semana', [1, 2, 3, 4, 5])}>
                segunda a sexta
              </span>
              {draft.dias_semana && (
                <span className="cl-diaatalho" onClick={() => set('dias_semana', null)}>limpar</span>
              )}
            </div>
            <span className="field-hint">
              {draft.dias_semana
                ? 'A grade mostra só estes dias. Um dia fora do combinado ainda pode ser lançado por lá, sem mexer aqui.'
                : 'Sem marcar nada, a grade mostra os sete dias da semana.'}
            </span>
          </div>
        </div>
      </div>

      <div className="form-section">
        <div className="sh"><span>Papéis desta pessoa</span>
          <span className="meta">a mesma pessoa, não três cadastros</span></div>
        <div className="body">
          <div className="field-grid-2">
            <Field label="Usuário do app">
              <select className="input" value={draft.usuario_id || ''} onChange={e => set('usuario_id', e.target.value)}>
                <option value="">Não tem login</option>
                {pessoas.map(u => <option key={u.id} value={u.id}>{u.nome}</option>)}
              </select>
            </Field>
            <Field label="Vendedor">
              <select className="input" value={draft.vendedor_id || ''} onChange={e => set('vendedor_id', e.target.value)}>
                <option value="">Não vende</option>
                {vendedores.map(v => <option key={v.id} value={v.id}>{v.nome}</option>)}
              </select>
            </Field>
          </div>
          <div className="cl-nota" style={{ marginTop: 14 }}>
            Vincular não muda nada no login nem na comissão — só diz que é a mesma
            pessoa, pra a folha não virar um cadastro solto ao lado dos outros dois.
          </div>
          <div style={{ marginTop: 16 }}>
            <Field label="Observações" value={draft.observacoes} onChange={v => set('observacoes', v)} placeholder="" />
          </div>
        </div>
      </div>

      {erro ? <div className="cl-erro" style={{ marginTop: 4 }}>{erro}</div> : null}

      <div style={{ display: 'flex', gap: 10, marginTop: 20, alignItems: 'center' }}>
        <Button variant="primary" icon="check" onClick={onSave}
          disabled={salvando || faltando.length > 0}
          title={faltando.length ? 'Falta preencher: ' + faltando.join(', ') : ''}>
          {salvando ? 'Salvando…' : 'Salvar'}
        </Button>
        <Button variant="ghost" onClick={onCancel} disabled={salvando}>Cancelar</Button>
        {faltando.length > 0 && (
          <span className="cl-hint">Falta preencher: <b>{faltando.join(', ')}</b></span>
        )}
      </div>
    </div>
  );
}

// ─── Vale, bônus e desconto ─────────────────────────────────────────────────
// O vale é o único que move dinheiro sozinho: vira título PAGO no Contas a
// Pagar no dia. Por isso ele — e só ele — exige conta bancária.
function LancamentoForm({ colaborador, onClose, onFeito }) {
  const { contas } = useContasBancarias();
  const [tipo, setTipo]     = React.useState('vale');
  const [valor, setValor]   = React.useState('');
  const [data, setData]     = React.useState(() => colabIso(new Date()));
  const [conta, setConta]   = React.useState('');
  const [forma, setForma]   = React.useState('Transferência');
  const [motivo, setMotivo] = React.useState('');
  const [busy, setBusy]     = React.useState(false);
  const [erro, setErro]     = React.useState('');

  const podeCriar = tmPode('colaboradores', 'criar');
  const v = numBr(valor);
  const ehVale = tipo === 'vale';
  const semConta = ehVale && !conta;

  const salvar = async () => {
    setErro('');
    if (!(v > 0)) { setErro('Informe um valor maior que zero.'); return; }
    if (!data)    { setErro('Informe a data.'); return; }
    if (semConta) { setErro('Escolha a conta bancária: o vale sai do banco no dia, e sem conta o extrato não vê a saída.'); return; }
    setBusy(true);
    const res = ehVale
      ? await tmFolha.criarVale({ colaboradorId: colaborador.id, valor, data, contaId: conta, forma, motivo })
      : await tmFolha.criarAjuste({ colaboradorId: colaborador.id, tipo, valor, data, motivo });
    setBusy(false);
    if (res && res.error) { setErro(colabMsgErro(res.error)); return; }
    onFeito && onFeito();
  };

  return (
    <Drawer open onClose={onClose} width={520}
      eyebrow="Folha" title="Lançar" subtitle={colaborador.apelido || colaborador.nome}
      footer={
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <Button variant="primary" icon="check" onClick={salvar} disabled={busy || !podeCriar}
            title={podeCriar ? '' : tmMotivoNegado('colaboradores', 'criar')}>
            {busy ? 'Lançando…' : 'Lançar'}
          </Button>
          <Button variant="ghost" onClick={onClose} disabled={busy}>Cancelar</Button>
          {!podeCriar && <span className="cl-hint">{tmMotivoNegado('colaboradores', 'criar')}</span>}
        </div>
      }>
      <div className="cl-tipos">
        {[
          { v: 'vale',     lbl: 'Vale',     sub: 'sai do banco hoje' },
          { v: 'bonus',    lbl: 'Bônus',    sub: 'soma no fechamento' },
          { v: 'desconto', lbl: 'Desconto', sub: 'subtrai no fechamento' },
        ].map(o => (
          <div key={o.v} className={'cl-tipo' + (tipo === o.v ? ' on' : '')} onClick={() => setTipo(o.v)}>
            <b>{o.lbl}</b><span>{o.sub}</span>
          </div>
        ))}
      </div>

      <div className="field-grid-2" style={{ marginTop: 18 }}>
        <Field label="Valor" value={valor} onChange={setValor} placeholder="0,00" suffix="R$"
          hint="Sempre positivo — o sinal vem do tipo" />
        <Field label="Data" type="date" value={data} onChange={setData} />
      </div>

      {ehVale ? (
        <div className="field-grid-2" style={{ marginTop: 16 }}>
          <Field label="Conta bancária (de onde sai)">
            <select className="input" value={conta} onChange={e => setConta(e.target.value)}>
              <option value="">Escolha…</option>
              {contas.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
            </select>
          </Field>
          <Field label="Forma">
            <select className="input" value={forma} onChange={e => setForma(e.target.value)}>
              {['Transferência', 'PIX', 'Dinheiro', 'Cartão'].map(f => <option key={f} value={f}>{f}</option>)}
            </select>
          </Field>
        </div>
      ) : null}

      <div style={{ marginTop: 16 }}>
        <Field label="Motivo" value={motivo} onChange={setMotivo} placeholder=""
          hint={ehVale ? 'Aparece na observação do título' : 'Aparece na prévia do fechamento'} />
      </div>

      <div className="cl-nota" style={{ marginTop: 18 }}>
        {ehVale
          ? <>Gera um título <b>pago</b> em Contas a Pagar, categoria <b>Folha</b>, debitando a
              conta escolhida. E é abatido do líquido no próximo fechamento.</>
          : <>Não gera título nenhum agora — {tipo === 'bonus' ? 'soma' : 'subtrai'} no
              líquido do próximo fechamento desta pessoa.</>}
      </div>

      {contas.length === 0 && ehVale && (
        <div className="cl-aviso warn" style={{ marginTop: 14 }}>
          Nenhuma conta bancária ativa cadastrada. Sem conta não dá pra registrar de onde
          o dinheiro saiu — cadastre em Financeiro › Contas Bancárias.
        </div>
      )}
      {erro ? <div className="cl-erro" style={{ marginTop: 14 }}>{erro}</div> : null}
    </Drawer>
  );
}

Object.assign(window, { ColaboradorForm, LancamentoForm, colaboradorEmBranco });