
// Telas da Ordem de Compra: criação e detalhe.
// Separado de Compras.jsx só por tamanho — a lógica de dados (criar,
// enviar, cancelar) mora lá; aqui é formulário e apresentação.

const OC_INPUT = {
  border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm,
  padding: '8px 10px', fontSize: 13, outline: 'none', fontFamily: 'inherit', width: '100%',
};

const OC_TEXTAREA = {
  border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm,
  padding: '9px 12px', fontSize: 13, outline: 'none', fontFamily: 'inherit',
  resize: 'vertical', lineHeight: 1.5,
};

const OC_ITEM_VAZIO = { descricao: '', qtd: '1', unidade: 'un', valor_unit: '' };

// "1.250,50" digitado vira 1250.5 — as pessoas escrevem no formato BR
const ocParaNumero = (v) => Number(String(v ?? '').replace(/\./g, '').replace(',', '.')) || 0;
// Caminho de volta: 1250.5 vira "1250,5" para o formulario de correcao
// reabrir com virgula, e nao com ponto decimal (que o parser acima comeria).
const ocParaTexto = (n) => (n === null || n === undefined || n === '' ? '' : String(n).replace('.', ','));

// Status em que a OC ainda pode ser corrigida. Confirmada e Recusada ja tiveram
// resposta do fornecedor — e a Confirmada gerou conta a pagar no Financeiro —,
// entao mexer no documento depois disso desencontraria os dois lados.
const OC_EDITAVEL = ['Rascunho', 'Enviada'];

// ---------------------------------------------------------------------
// Formulario da Ordem de Compra — cria uma nova ou corrige uma existente
// ---------------------------------------------------------------------
function OCFormModal({ open, oc = null, fornecedores = [], events = [], onClose, onSubmit }) {
  const edicao = !!oc;
  const vazio = {
    fornecedor_id: '', event_id: '', descricao: '',
    data_servico: '', forma_pagamento: 'PIX', prazo_pagamento: '', observacoes: '',
  };
  const [form, setForm] = React.useState(vazio);
  const [itens, setItens] = React.useState([{ ...OC_ITEM_VAZIO }]);
  const [erro, setErro] = React.useState(null);
  const [saving, setSaving] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    setErro(null); setSaving(false);
    if (!oc) { setForm(vazio); setItens([{ ...OC_ITEM_VAZIO }]); return; }
    setForm({
      fornecedor_id: oc.fornecedor_id ? String(oc.fornecedor_id) : '',
      event_id: oc.event_id ? String(oc.event_id) : '',
      descricao: oc.descricao || '',
      data_servico: oc.data_servico || '',
      forma_pagamento: oc.forma_pagamento || 'PIX',
      prazo_pagamento: oc.prazo_pagamento || '',
      observacoes: oc.observacoes || '',
    });
    setItens((oc.itens || []).length
      ? oc.itens.map(it => ({
          descricao: it.descricao || '',
          qtd: ocParaTexto(it.qtd),
          unidade: it.unidade || 'un',
          valor_unit: ocParaTexto(it.valor_unit),
        }))
      : [{ ...OC_ITEM_VAZIO }]);
  }, [open, oc?.id]);

  const fornecedor = fornecedores.find(f => String(f.id) === String(form.fornecedor_id));
  const evento = events.find(e => String(e.id) === String(form.event_id));

  // Só fornecedor ativo entra na lista, mas o da OC que esta sendo corrigida
  // entra de qualquer jeito: se ele foi desativado depois, sumir da lista
  // apagaria o fornecedor da OC sem ninguem perceber.
  const opcoesFornecedor = React.useMemo(() => {
    const ativos = fornecedores.filter(f => f.status === 'Ativo');
    const atual = fornecedores.find(f => String(f.id) === String(form.fornecedor_id));
    const lista = atual && !ativos.some(f => String(f.id) === String(atual.id)) ? [...ativos, atual] : ativos;
    return [{ value: '', label: 'Selecione…' },
      ...lista.map(f => ({ value: String(f.id), label: f.status === 'Ativo' ? f.nome : `${f.nome} (inativo)` }))];
  }, [fornecedores, form.fornecedor_id]);

  // Ao escolher o evento, já sugere a data do serviço — quase sempre é a mesma
  const escolherEvento = (v) => {
    const ev = events.find(e => String(e.id) === String(v));
    setForm(f => ({ ...f, event_id: v, data_servico: f.data_servico || (ev?.event_date || '') }));
  };

  const setItem = (i, campo, valor) =>
    setItens(prev => prev.map((it, idx) => idx === i ? { ...it, [campo]: valor } : it));

  const itensLimpos = itens
    .map(it => ({
      descricao: (it.descricao || '').trim(),
      qtd: ocParaNumero(it.qtd),
      unidade: (it.unidade || 'un').trim(),
      valor_unit: ocParaNumero(it.valor_unit),
    }))
    .filter(it => it.descricao || it.valor_unit > 0);

  const total = somaItens(itensLimpos);
  const totalMudou = edicao && Math.abs(total - (Number(oc.valor_total) || 0)) > 0.001;

  const salvar = async () => {
    if (!fornecedor) { setErro('Escolha o fornecedor.'); return; }
    if (!itensLimpos.length) { setErro('Adicione pelo menos um item com descrição e valor.'); return; }
    if (total <= 0) { setErro('O valor total precisa ser maior que zero.'); return; }
    setSaving(true); setErro(null);
    await onSubmit({
      fornecedor, evento: evento || null,
      descricao: form.descricao.trim(),
      itens: itensLimpos,
      data_servico: form.data_servico || null,
      forma_pagamento: form.forma_pagamento,
      prazo_pagamento: form.prazo_pagamento.trim(),
      observacoes: form.observacoes.trim(),
    });
    setSaving(false);
  };

  const semBanco = fornecedor && !fornecedor.banco && !fornecedor.pix_chave;

  return (
    <Modal open={open} onClose={onClose} width={720}
      title={edicao ? `Corrigir ${oc.numero}` : 'Nova Ordem de Compra'}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

        {edicao && oc.status === 'Enviada' && (
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '10px 12px', background: '#FFFBEB', border: `1px solid ${DS.colors.warning}44`, borderRadius: DS.radius.sm, fontSize: 12, color: DS.colors.text, lineHeight: 1.5 }}>
            <Icon name="alert" size={15} color={DS.colors.warning} />
            <span>
              Esta OC <strong>já foi enviada</strong>. A correção aparece na hora no link do fornecedor,
              mas o PDF que ele recebeu continua o antigo — <strong>reenvie</strong> depois de salvar.
            </span>
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <Select label="Fornecedor *" value={form.fornecedor_id}
            onChange={v => setForm(f => ({ ...f, fornecedor_id: v }))}
            options={opcoesFornecedor} />
          <Select label="Evento" value={form.event_id} onChange={escolherEvento}
            options={[{ value: '', label: 'Sem evento vinculado' },
              ...events.map(e => ({ value: String(e.id), label: `${e.name}${e.event_date ? ` — ${dataBR(e.event_date)}` : ''}` }))]} />
        </div>

        {semBanco && (
          <div style={{ padding: '10px 12px', background: '#FFFBEB', border: `1px solid ${DS.colors.warning}44`, borderRadius: DS.radius.sm, fontSize: 12, color: DS.colors.text, lineHeight: 1.5 }}>
            <strong>{fornecedor.nome}</strong> não tem dados bancários cadastrados. A OC pode ser emitida, mas o
            Financeiro vai receber a conta a pagar sem saber para onde pagar. Vale preencher em Fornecedores antes.
          </div>
        )}

        {evento && (
          <div style={{ display: 'flex', gap: 16, padding: '10px 14px', background: '#F8FAFC', borderRadius: DS.radius.sm, border: `1px solid ${DS.colors.border}`, fontSize: 12, flexWrap: 'wrap' }}>
            <span style={{ color: DS.colors.textMuted }}>Cliente: <strong style={{ color: DS.colors.text }}>{evento.client_name || '—'}</strong></span>
            <span style={{ color: DS.colors.textMuted }}>Data: <strong style={{ color: DS.colors.text }}>{dataBR(evento.event_date)}</strong></span>
            <span style={{ color: DS.colors.textMuted }}>Local: <strong style={{ color: DS.colors.text }}>{evento.location || '—'}</strong></span>
          </div>
        )}

        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <label style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec }}>Serviço contratado</label>
          <textarea value={form.descricao} onChange={e => setForm(f => ({ ...f, descricao: e.target.value }))}
            rows={3} placeholder="Ex: Sonorização completa do evento, com montagem no dia anterior e operador durante toda a programação."
            style={OC_TEXTAREA} />
        </div>

        {/* Itens */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <label style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec }}>Itens *</label>
            <Btn size="sm" variant="ghost" icon="plus" onClick={() => setItens(prev => [...prev, { ...OC_ITEM_VAZIO }])}>Adicionar item</Btn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 70px 70px 110px 30px', gap: 8, marginBottom: 6, fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            <span>Descrição</span><span style={{ textAlign: 'center' }}>Qtd</span><span style={{ textAlign: 'center' }}>Un.</span><span style={{ textAlign: 'right' }}>Valor unit.</span><span />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {itens.map((it, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 70px 70px 110px 30px', gap: 8, alignItems: 'center' }}>
                <input value={it.descricao} onChange={e => setItem(i, 'descricao', e.target.value)}
                  placeholder="Ex: Caixa de som ativa" style={OC_INPUT} />
                <input value={it.qtd} onChange={e => setItem(i, 'qtd', e.target.value)}
                  inputMode="decimal" style={{ ...OC_INPUT, textAlign: 'center' }} />
                <input value={it.unidade} onChange={e => setItem(i, 'unidade', e.target.value)}
                  placeholder="un" style={{ ...OC_INPUT, textAlign: 'center' }} />
                <input value={it.valor_unit} onChange={e => setItem(i, 'valor_unit', e.target.value)}
                  inputMode="decimal" placeholder="0,00" style={{ ...OC_INPUT, textAlign: 'right' }} />
                <Btn size="sm" variant="ghost" icon="trash" disabled={itens.length === 1}
                  onClick={() => setItens(prev => prev.filter((_, idx) => idx !== i))} />
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, padding: '12px 16px', background: '#FFF7ED', border: `1px solid ${DS.colors.primary}33`, borderRadius: DS.radius.md }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: DS.colors.text, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Valor total</span>
            <div style={{ textAlign: 'right' }}>
              <span style={{ fontSize: 20, fontWeight: 800, color: DS.colors.primary }}>{fmtBRL(total)}</span>
              {totalMudou && (
                <div style={{ fontSize: 11, color: DS.colors.textSec, marginTop: 2 }}>
                  antes: <s>{fmtBRL(oc.valor_total)}</s>
                </div>
              )}
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.4fr', gap: 14 }}>
          <Input label="Prazo de execução" type="date" value={form.data_servico}
            onChange={v => setForm(f => ({ ...f, data_servico: v }))} />
          <Select label="Forma de pagamento" value={form.forma_pagamento}
            onChange={v => setForm(f => ({ ...f, forma_pagamento: v }))}
            options={FORMAS_PAGAMENTO.map(v => ({ value: v, label: v }))} />
          <Input label="Prazo de pagamento" value={form.prazo_pagamento}
            onChange={v => setForm(f => ({ ...f, prazo_pagamento: v }))}
            placeholder="Ex: 30 dias após o evento" />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <label style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec }}>Observações</label>
          <textarea value={form.observacoes} onChange={e => setForm(f => ({ ...f, observacoes: e.target.value }))}
            rows={2} placeholder="Ex: montagem liberada a partir das 8h. NF em nome da Promoup."
            style={OC_TEXTAREA} />
        </div>

        {erro && (
          <div style={{ padding: '10px 12px', background: '#FEF2F2', border: `1px solid ${DS.colors.danger}44`, borderRadius: DS.radius.sm, fontSize: 12, color: DS.colors.danger }}>{erro}</div>
        )}

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
          <Btn variant="secondary" onClick={onClose}>Cancelar</Btn>
          <Btn icon={edicao ? 'check' : 'briefcase'} onClick={salvar} disabled={saving}>
            {edicao ? (saving ? 'Salvando…' : 'Salvar correções') : (saving ? 'Criando…' : 'Criar OC')}
          </Btn>
        </div>
      </div>
    </Modal>
  );
}

// ---------------------------------------------------------------------
// Detalhe da OC — o que aconteceu e o que dá pra fazer agora
// ---------------------------------------------------------------------
function OCDetalhe({ oc, busy, onClose, onPDF, onWhatsApp, onEmail, onLink, onMarcarEnviada, onCancelar, onEditar, onVerFinanceiro }) {
  const b = oc?.dados_bancarios || {};
  const podeEnviar = oc && (oc.status === 'Rascunho' || oc.status === 'Enviada');
  const respondida = oc && (oc.status === 'Confirmada' || oc.status === 'Recusada');
  const podeEditar = oc && OC_EDITAVEL.includes(oc.status);

  const info = (k, v) => (
    <div key={k} style={{ padding: '10px 12px', background: '#F8FAFC', borderRadius: DS.radius.sm, border: `1px solid ${DS.colors.border}` }}>
      <div style={{ fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{k}</div>
      <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text, marginTop: 2, wordBreak: 'break-word' }}>{v || '—'}</div>
    </div>
  );

  return (
    <Modal open={!!oc} onClose={onClose} title={oc ? `${oc.numero} — ${oc.fornecedor_nome || ''}` : ''} width={780}
      extra={oc && <Badge variant={OC_STATUS_VARIANT[oc.status]}>{oc.status}</Badge>}>
      {oc && (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

        {/* Faixa de situação */}
        {oc.status === 'Confirmada' && (
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '14px 16px', background: '#F0FDF4', border: `1px solid ${DS.colors.success}44`, borderRadius: DS.radius.md }}>
            <Icon name="check" size={18} color={DS.colors.success} />
            <div style={{ flex: 1, fontSize: 13, color: DS.colors.text, lineHeight: 1.6 }}>
              <strong>Fornecedor confirmou</strong>{oc.responded_at ? ` em ${new Date(oc.responded_at).toLocaleString('pt-BR')}` : ''}.
              {oc.transaction_id
                ? ' A conta a pagar já foi lançada no Financeiro como despesa Pendente.'
                : ' ATENÇÃO: a conta a pagar não foi gerada automaticamente — lance manualmente no Financeiro.'}
            </div>
            <Btn size="sm" variant="secondary" icon="wallet" onClick={onVerFinanceiro}>Financeiro</Btn>
          </div>
        )}
        {oc.status === 'Recusada' && (
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '14px 16px', background: '#FEF2F2', border: `1px solid ${DS.colors.danger}44`, borderRadius: DS.radius.md }}>
            <Icon name="alert" size={18} color={DS.colors.danger} />
            <div style={{ fontSize: 13, color: DS.colors.text, lineHeight: 1.6 }}>
              <strong>Fornecedor recusou</strong>{oc.responded_at ? ` em ${new Date(oc.responded_at).toLocaleString('pt-BR')}` : ''}.
              {oc.resposta_motivo ? <><br />Motivo: {oc.resposta_motivo}</> : ''}
              <br />Volte às Cotações e escolha outro fornecedor.
            </div>
          </div>
        )}
        {oc.status === 'Enviada' && (
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '12px 16px', background: '#EFF6FF', border: `1px solid ${DS.colors.primary}33`, borderRadius: DS.radius.md, fontSize: 13, color: DS.colors.text, lineHeight: 1.6 }}>
            <Icon name="clock" size={16} color={DS.colors.primary} />
            <span>
              Enviada{oc.sent_at ? ` em ${new Date(oc.sent_at).toLocaleString('pt-BR')}` : ''}
              {oc.sent_via ? ` por ${oc.sent_via}` : ''}. Aguardando resposta.
              {oc.viewed_at ? ` O fornecedor abriu o link em ${new Date(oc.viewed_at).toLocaleString('pt-BR')}.` : ' Ainda não abriu o link.'}
            </span>
          </div>
        )}
        {oc.status === 'Rascunho' && (
          <div style={{ padding: '12px 16px', background: '#F8FAFC', border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.md, fontSize: 13, color: DS.colors.textSec, lineHeight: 1.6 }}>
            Rascunho — o fornecedor ainda <strong>não</strong> consegue responder pelo link. Envie por WhatsApp ou e-mail para liberar.
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {info('Cliente', oc.cliente_nome)}
          {info('Evento', oc.evento_nome)}
          {info('Data do evento', dataBR(oc.evento_data))}
          {info('Prazo de execução', dataBR(oc.data_servico))}
          {info('Forma de pagamento', oc.forma_pagamento)}
          {info('Prazo de pagamento', oc.prazo_pagamento)}
        </div>

        {oc.descricao && (
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Serviço contratado</div>
            <div style={{ padding: '12px 14px', background: '#F8FAFC', borderLeft: `3px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, fontSize: 13, color: DS.colors.textSec, whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>{oc.descricao}</div>
          </div>
        )}

        {(oc.itens || []).length > 0 && (
          <div style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.md, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 90px 110px 110px', padding: '9px 14px', background: '#F8FAFC', fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              <span>Item</span><span style={{ textAlign: 'center' }}>Qtd</span><span style={{ textAlign: 'right' }}>Unit.</span><span style={{ textAlign: 'right' }}>Subtotal</span>
            </div>
            {oc.itens.map((it, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 90px 110px 110px', padding: '10px 14px', borderTop: `1px solid ${DS.colors.border}`, fontSize: 13, color: DS.colors.text }}>
                <span>{it.descricao}</span>
                <span style={{ textAlign: 'center' }}>{it.qtd} {it.unidade}</span>
                <span style={{ textAlign: 'right' }}>{fmtBRL(it.valor_unit)}</span>
                <span style={{ textAlign: 'right', fontWeight: 700 }}>{fmtBRL((Number(it.qtd) || 0) * (Number(it.valor_unit) || 0))}</span>
              </div>
            ))}
          </div>
        )}

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px', background: '#FFF7ED', border: `1px solid ${DS.colors.primary}33`, borderRadius: DS.radius.md }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: DS.colors.text, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Valor total</span>
          <span style={{ fontSize: 24, fontWeight: 800, color: DS.colors.primary }}>{fmtBRL(oc.valor_total)}</span>
        </div>

        {(b.banco || b.pix_chave) && (
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>
              Dados para pagamento <span style={{ textTransform: 'none', letterSpacing: 0, fontWeight: 500 }}>— como estavam quando a OC foi emitida</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
              {info('Favorecido', b.favorecido)}
              {info('CPF/CNPJ', b.favorecido_doc)}
              {info('Banco / Ag / Conta', [b.banco, b.agencia, b.conta && `${b.conta} (${b.tipo_conta || 'Corrente'})`].filter(Boolean).join(' · '))}
              {info(`PIX${b.pix_tipo ? ` (${b.pix_tipo})` : ''}`, b.pix_chave)}
            </div>
          </div>
        )}

        {oc.observacoes && (
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Observações</div>
            <div style={{ fontSize: 13, color: DS.colors.textSec, whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>{oc.observacoes}</div>
          </div>
        )}

        <Divider />

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {podeEditar && (
              <Btn variant="secondary" icon="edit" disabled={!!busy} onClick={() => onEditar(oc)}>Corrigir</Btn>
            )}
            <Btn variant="secondary" icon="download" disabled={!!busy} onClick={() => onPDF(oc)}>
              {busy === 'pdf' ? 'Gerando…' : 'Baixar PDF'}
            </Btn>
            {podeEnviar && (
              <>
                <Btn icon="message" disabled={!!busy} onClick={() => onWhatsApp(oc)}>
                  {busy === 'wpp' ? 'Enviando…' : 'Enviar no WhatsApp'}
                </Btn>
                <Btn variant="secondary" icon="mail" disabled={!!busy} onClick={() => onEmail(oc)}>
                  {busy === 'email' ? 'Abrindo…' : 'Enviar por e-mail'}
                </Btn>
                <Btn variant="secondary" icon="link" onClick={() => onLink(oc)}>Copiar link</Btn>
              </>
            )}
            {oc.status === 'Rascunho' && (
              <Btn variant="ghost" icon="check" onClick={() => onMarcarEnviada(oc)}>Já enviei por fora</Btn>
            )}
          </div>
          {!respondida && oc.status !== 'Cancelada' && (
            <Btn variant="danger" icon="x" onClick={() => onCancelar(oc)}>Cancelar OC</Btn>
          )}
        </div>
      </div>
      )}
    </Modal>
  );
}

Object.assign(window, { OCFormModal, OCDetalhe, OC_EDITAVEL });
