/* ================================================================
   Khronus — Produtos
   ----------------------------------------------------------------
   O que o estúdio vende: ensaio, cobertura, pacote, hora extra. Nome,
   descrição e preço de partida.

   "Preço base" e não "preço": em fotografia quase todo trabalho sai do
   valor de tabela e vira orçamento. O número aqui é o ponto de partida
   da conversa, não a promessa final — por isso o campo é livre pra ser
   ajustado em cada negociação, e não amarra nada.

   Produto inativo não some: ele sai do que se oferece hoje, mas
   continua existindo pro histórico fazer sentido quando alguém abrir
   um trabalho de dois anos atrás.

   Arquivo inteiro dentro de IIFE: sem empacotador, dois arquivos que
   declarem o mesmo nome no topo derrubam o app todo.
   ================================================================ */
(function () {
  const { useState, useEffect, useMemo } = React;
  const { LucideIcon, Btn, TopBar } = window;
  /* Formas vêm do sistema, não desta tela. Ver a camada de componentes
     no shared.jsx e as medidas no design-system.md. */
  const { PageContainer, PageHeader, Card, Campo, Input, AreaTexto,
          Modal, EstadoVazio, Carregando, estiloInput } = window.DS;

  /* Preço em centavos, digitado da direita pra esquerda. É o mesmo
     comportamento do campo de valor da negociação: quem digita preço o
     dia inteiro não quer decidir onde fica a vírgula. */
  function CampoPreco({ valor, onChange }) {
    const centavos = Math.round((Number(valor) || 0) * 100);
    function digitou(e) {
      const d = e.target.value.replace(/\D/g, '').slice(0, 11);
      onChange(Number(d || 0) / 100);
    }
    return (
      <input inputMode="numeric" style={estiloInput}
        value={(centavos / 100).toLocaleString('pt-BR',
          { style: 'currency', currency: 'BRL' })}
        onChange={digitou} />
    );
  }

  function ModalProduto({ item, onFechar, onSalvo }) {
    const [nome, setNome] = useState(item?.nome || '');
    const [descricao, setDescricao] = useState(item?.descricao || '');
    const [preco, setPreco] = useState(item?.preco_base != null ? Number(item.preco_base) : 0);
    const [ativo, setAtivo] = useState(item?.ativo ?? true);
    const [salvando, setSalvando] = useState(false);

    async function salvar() {
      if (!nome.trim()) return;
      setSalvando(true);
      const dados = {
        nome: nome.trim(),
        descricao: descricao.trim() || null,
        preco_base: Number(preco) || 0,
        ativo: !!ativo,
      };
      const { error } = item?.id
        ? await window.db.from('crm_products').update(dados).eq('id', item.id)
        : await window.db.from('crm_products').insert(dados);
      setSalvando(false);
      if (error) { alert('Não consegui salvar: ' + error.message); return; }
      onSalvo();
    }

    async function excluir() {
      if (!item?.id) return;
      if (!confirm(`Excluir ${item.nome}?\n\n`
        + 'Se este produto já apareceu em trabalho antigo, prefira desativar: '
        + 'assim o histórico continua fazendo sentido.')) return;
      const { error } = await window.db.from('crm_products').delete().eq('id', item.id);
      if (error) { alert('Não consegui excluir: ' + error.message); return; }
      onSalvo();
    }

    return (
      <Modal titulo={item?.id ? 'Editar produto' : 'Novo produto'} onClose={onFechar}
        rodape={<>
          {item?.id && <Btn variant="danger" icon="trash-2" onClick={excluir}>Excluir</Btn>}
          <span style={{ flex: 1 }} />
          <Btn onClick={onFechar}>Cancelar</Btn>
          <Btn variant="primary" onClick={salvar} disabled={!nome.trim() || salvando}>
            {salvando ? 'Salvando…' : 'Salvar'}
          </Btn>
        </>}>
        <Campo label="Nome">
          <input autoFocus style={estiloInput} value={nome} onChange={e => setNome(e.target.value)}
            placeholder="Ensaio de família, Cobertura de evento…" />
        </Campo>
        <Campo label="Descrição">
          <textarea rows={3} style={{ ...estiloInput, resize: 'vertical' }} value={descricao}
            onChange={e => setDescricao(e.target.value)}
            placeholder="O que está incluso, duração, quantidade de fotos" />
        </Campo>
        <Campo label="Preço base">
          <CampoPreco valor={preco} onChange={setPreco} />
        </Campo>
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer',
          fontSize: 'var(--fs-md)', fontFamily: 'Roboto,sans-serif', color: 'var(--text-2)' }}>
          <input type="checkbox" checked={ativo} onChange={e => setAtivo(e.target.checked)} />
          Ofereço este produto hoje
        </label>
      </Modal>
    );
  }

  function ProdutosScreen() {
    const [lista, setLista] = useState([]);
    const [verInativos, setVerInativos] = useState(false);
    const [modal, setModal] = useState(null);
    const [carregando, setCarregando] = useState(true);

    async function carregar() {
      const { data } = await window.db.from('crm_products').select('*').order('nome');
      setLista(data || []);
      setCarregando(false);
    }

    useEffect(() => { carregar(); }, []);

    const visiveis = useMemo(
      () => lista.filter(p => verInativos || p.ativo), [lista, verInativos]);
    const inativos = useMemo(() => lista.filter(p => !p.ativo).length, [lista]);

    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>

        {/* mantido dentro do conteúdo, e não numa faixa própria: o
            documento diz que tela-destino tem cabeçalho e conteúdo, sem
            barra intermediária. */}
        <PageContainer>
          <PageHeader title="Produtos"
            description="O que o estúdio vende, com o preço de partida."
            actions={
              <Btn variant="primary" icon="plus" onClick={() => setModal({})}>Novo produto</Btn>
            } />

          {/* Filtro de inativos vive no conteúdo, não numa faixa
              própria: o documento diz que tela-destino tem cabeçalho e
              conteúdo, sem barra intermediária. */}
          {inativos > 0 && (
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer',
              marginBottom: 16, fontSize: 'var(--fs-sm)', fontFamily: 'Roboto,sans-serif',
              color: 'var(--text-3)' }}>
              <input type="checkbox" checked={verInativos}
                onChange={e => setVerInativos(e.target.checked)} />
              Mostrar os {inativos} que não ofereço mais
            </label>
          )}
          {carregando ? (
            <Carregando />
          ) : visiveis.length === 0 ? (
            <EstadoVazio icone="package"
              mensagem="Nenhum produto cadastrado ainda. Cadastre o primeiro para usar nas negociações."
              acao={<Btn variant="primary" icon="plus"
                onClick={() => setModal({})}>Novo produto</Btn>} />
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {visiveis.map(p => (
                <div key={p.id} onClick={() => setModal(p)}
                  style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
                    padding: '12px 12px', borderRadius: 'var(--r-md)', background: 'var(--app-surface-2)',
                    border: '1px solid var(--app-border)', opacity: p.ativo ? 1 : 0.55 }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontSize: 'var(--fs-lg)', fontFamily: 'Roboto,sans-serif',
                        fontWeight: 700, color: 'var(--text-1)' }}>{p.nome}</span>
                      {!p.ativo && (
                        <span style={{ fontSize: 'var(--fs-xs)', fontFamily: 'Roboto,sans-serif',
                          fontWeight: 900, letterSpacing: '0.05em', textTransform: 'uppercase',
                          color: 'var(--text-3)' }}>não ofereço</span>
                      )}
                    </div>
                    {p.descricao && (
                      <div style={{ fontSize: 'var(--fs-sm)', fontFamily: 'Roboto,sans-serif',
                        color: 'var(--text-3)', overflow: 'hidden', textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap' }}>{p.descricao}</div>
                    )}
                  </div>
                  <span style={{ fontSize: 'var(--fs-lg)', fontFamily: 'Roboto,sans-serif', fontWeight: 700,
                    color: 'var(--accent)', flexShrink: 0 }}>{fmtBRL(p.preco_base)}</span>
                  <LucideIcon icon="chevron-right" size={14} />
                </div>
              ))}
            </div>
          )}
        </PageContainer>

        {modal && (
          <ModalProduto item={modal.id ? modal : null} onFechar={() => setModal(null)}
            onSalvo={() => { setModal(null); carregar(); }} />
        )}
      </div>
    );
  }

  window.ProdutosScreen = ProdutosScreen;
})();