// ============================================================
// FINAFAMILY — Importar Fatura de Cartão
// Envia o PDF, revisa as transações extraídas, aplica o corte e a deduplicação
// canônicos do servidor e confirma a criação das despesas.
// ============================================================

function guessCategoryId(desc, categories) {
  const d = desc.toLowerCase();
  const rules = [
    [/mercado|super|alimenta|restaurante|lanch|cafe|pizza|burger|ifood/, 'Alimentação'],
    [/uber|99|posto|combust|estacionamento|pedagio|pedágio|onibus|ônibus|passagem/, 'Transporte'],
    [/farmacia|farmácia|drogaria|hospital|clinica|clínica|academia|gympass|wellhub/, 'Saúde'],
    [/roupa|loja|calçad|calcad|moda|vestua/, 'Vestuário'],
    [/netflix|spotify|prime|youtube|hbo|disney|assinatura|app store|google|microsoft|openai|anthropic|claude|chatgpt|hosting/, 'Assinaturas'],
    [/cinema|show|ingresso|viagem|hotel|pousada|parque/, 'Lazer'],
    [/aluguel|condomin|condomín|energia|luz|agua|água|internet|gás|gas/, 'Moradia'],
    [/escola|curso|faculdade|livro/, 'Educação'],
  ];
  for (const [re, name] of rules) {
    if (re.test(d)) {
      const cat = categories.find(c => c.name.toLowerCase() === name.toLowerCase());
      if (cat) return cat.id;
    }
  }
  return categories.find(c => c.name === 'Outros')?.id || categories[0]?.id || '';
}

function ImportarFatura() {
  const { paymentMethods, categories, members, currentMember, refreshImportedInvoiceData } = useApp();
  const [file, setFile] = React.useState(null);
  const [parsing, setParsing] = React.useState(false);
  const [parsed, setParsed] = React.useState(null);
  const [rows, setRows] = React.useState([]);
  const [paymentMethodId, setPaymentMethodId] = React.useState('');
  const [cutoffDate, setCutoffDate] = React.useState('');
  const [responsibleMemberId, setResponsibleMemberId] = React.useState(currentMember?.id || '');
  const [error, setError] = React.useState('');
  const [committing, setCommitting] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [needsPassword, setNeedsPassword] = React.useState(false);
  const [pdfPassword, setPdfPassword] = React.useState('');
  const [preview, setPreview] = React.useState(null);
  const [previewError, setPreviewError] = React.useState('');
  const [previewRetry, setPreviewRetry] = React.useState(0);
  const [refreshWarning, setRefreshWarning] = React.useState('');
  const [refreshing, setRefreshing] = React.useState(false);
  const requestSequence = React.useRef(0);
  const activeMember = React.useRef(currentMember?.id);
  const mounted = React.useRef(true);
  React.useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
  activeMember.current = currentMember?.id;

  const myPMs = paymentMethods.filter(pm => pm.memberId === currentMember?.id && pm.type === 'credit');
  const payload = {
    paymentMethodId, cutoffDate,
    transactions: rows.map(r => ({
      desc: r.desc, value: r.value, date: r.date, purchaseDate: r.purchaseDate,
      transactionDate: r.transactionDate, originalPurchaseDate: r.originalPurchaseDate,
      currentInstallment: r.currentInstallment, totalInstallments: r.totalInstallments,
      categoryId: r.categoryId, responsibleMemberId, include: r.include,
    })),
  };
  const previewKey = parsed && !result && paymentMethodId && cutoffDate && rows.length
    ? JSON.stringify([currentMember?.id, payload]) : '';
  const currentPreview = preview?.key === previewKey ? preview.data : null;
  const cardPreview = preview?.paymentMethodId === paymentMethodId && preview?.memberId === currentMember?.id ? preview.data : null;
  const willImportCount = currentPreview?.importableCount || 0;
  const processableCount = currentPreview?.processableCount ?? currentPreview?.importableCount ?? 0;
  const previewPending = Boolean(previewKey && !currentPreview && !previewError);
  const civilDate = value => value ? value.split('-').reverse().join('/') : '';
  const omissionLabels = {
    before_cutoff: 'Anterior ao corte: não será importado.',
    subscription: 'Assinatura já cadastrada neste cartão, com a mesma empresa e valor.',
    existing_installment: 'Parcelamento já cadastrado: não será criado novamente.',
    duplicate: 'Lançamento já cadastrado: não será importado novamente.',
    not_selected: 'Não selecionado para importação.',
  };

  function resetImport() {
    requestSequence.current += 1;
    setParsed(null); setRows([]); setFile(null); setResult(null);
    setPreview(null); setPreviewError(''); setError('');
    setNeedsPassword(false); setPdfPassword(''); setParsing(false);
    setRefreshWarning(''); setRefreshing(false); setCommitting(false);
  }

  React.useEffect(() => {
    resetImport();
    setPaymentMethodId(''); setCutoffDate('');
    setResponsibleMemberId(currentMember?.id || '');
  }, [currentMember?.id]);

  React.useEffect(() => {
    setPreviewError('');
    if (!previewKey) return;
    const sequence = ++requestSequence.current;
    const memberId = currentMember?.id;
    const controller = new AbortController();
    const timer = setTimeout(async () => {
      try {
        const data = await apiFetch('/invoice-import/preview', { method: 'POST', body: payload, signal: controller.signal });
        if (controller.signal.aborted || sequence !== requestSequence.current || (!mounted.current || activeMember.current !== memberId)) return;
        setPreview({ key: previewKey, data, paymentMethodId, memberId });
        // A data automática é um limite inferior; o usuário pode escolher um corte posterior.
        if (data.automaticCutoffDate && cutoffDate < data.automaticCutoffDate) setCutoffDate(data.automaticCutoffDate);
      } catch (err) {
        if (controller.signal.aborted || sequence !== requestSequence.current || (!mounted.current || activeMember.current !== memberId)) return;
        setPreview(null);
        setPreviewError(err?.message || 'Não foi possível verificar os lançamentos.');
      }
    }, 250);
    return () => { clearTimeout(timer); controller.abort(); };
  }, [previewKey, previewRetry]);

  function handleFileChange(f) {
    setFile(f); setNeedsPassword(false); setPdfPassword(''); setError('');
  }

  async function handleParse() {
    if (!file) { setError('Selecione o PDF da fatura'); return; }
    const memberId = currentMember?.id;
    const sequence = ++requestSequence.current;
    setError(''); setParsing(true); setResult(null);
    try {
      const form = new FormData();
      form.append('file', file);
      if (pdfPassword) form.append('password', pdfPassword);
      const token = localStorage.getItem('ff_token');
      const res = await fetch(API_BASE + '/invoice-import/parse', {
        method: 'POST', headers: token ? { Authorization: `Bearer ${token}` } : {}, body: form,
      });
      const data = await res.json().catch(() => ({}));
      if (sequence !== requestSequence.current || (!mounted.current || activeMember.current !== memberId)) return;
      if (!res.ok) {
        if (data.code === 'PDF_PASSWORD_REQUIRED') { setNeedsPassword(true); setError(data.message || 'Esse PDF está protegido por senha.'); return; }
        throw new Error(data.message || `HTTP ${res.status}`);
      }
      setNeedsPassword(false); setParsed(data); setPreview(null);
      const initialRows = data.transactions.map((t, i) => ({ ...t, _id: i, categoryId: guessCategoryId(t.desc, categories), include: true }));
      setRows(initialRows);
      const dates = initialRows.map(r => r.transactionDate || r.date || r.purchaseDate).filter(Boolean).sort();
      setCutoffDate(dates[0] || todayLocalISO());
      setPaymentMethodId(myPMs[0]?.id || '');
    } catch (err) {
      if (sequence === requestSequence.current && (mounted.current && activeMember.current === memberId)) setError(err?.message || 'Não foi possível ler o PDF');
    } finally {
      if (sequence === requestSequence.current && (mounted.current && activeMember.current === memberId)) setParsing(false);
    }
  }

  function updateRow(id, patch) {
    setPreviewError('');
    setRows(prev => prev.map(r => r._id === id ? { ...r, ...patch } : r));
  }

  async function handleRefreshImportedTotals() {
    const memberId = currentMember?.id;
    const sequence = requestSequence.current;
    setRefreshing(true); setRefreshWarning('');
    try {
      await refreshImportedInvoiceData();
    } catch (err) {
      if (mounted.current && activeMember.current === memberId && sequence === requestSequence.current) {
        setRefreshWarning('A importação foi concluída, mas não foi possível atualizar todos os totais. Tente atualizar os dados.');
      }
    } finally {
      if (mounted.current && activeMember.current === memberId && sequence === requestSequence.current) setRefreshing(false);
    }
  }

  async function handleCommit() {
    if (!currentPreview || previewError || !processableCount || committing) return;
    const memberId = currentMember?.id;
    setError(''); setCommitting(true); setResult(null);
    try {
      // O servidor repete as verificações na transação: a prévia não autoriza duplicações.
      const data = await apiFetch('/invoice-import/commit', { method: 'POST', body: payload });
      if ((!mounted.current || activeMember.current !== memberId)) return;
      setResult(data);
      await handleRefreshImportedTotals();
    } catch (err) {
      if ((mounted.current && activeMember.current === memberId)) setError(err?.message || 'Não foi possível importar');
    } finally {
      if ((mounted.current && activeMember.current === memberId)) setCommitting(false);
    }
  }

  return (
    <div className="screen-outer invoice-import-screen" style={{ padding: 24, maxWidth: 900, margin: '0 auto', width: '100%', boxSizing: 'border-box' }}>
      <style>{`
        .invoice-import-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 160px 100px; align-items: center; gap: 10px; padding: 12px 16px; }
        .invoice-import-description { min-width: 0; overflow-wrap: anywhere; }
        .invoice-import-screen input:not([type="checkbox"]), .invoice-import-screen select { min-height: 44px; }
        .invoice-import-screen { padding-bottom: 24px !important; }
        @media (max-width: 600px) {
          .invoice-import-row { grid-template-columns: 44px minmax(0,1fr) minmax(82px,auto); gap: 8px; padding: 12px; }
          .invoice-import-description { grid-column: 2 / 4; }
          .invoice-import-category { grid-column: 2; }
        }
        @media (max-width: 768px) {
          .invoice-import-screen { padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important; }
        }
      `}</style>
      <h2 style={{ fontSize: 20, fontWeight: 800, color: 'var(--text-1)', marginBottom: 4 }}>Importar Fatura de Cartão</h2>
      <p style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 20 }}>
        Envie o PDF da fatura (Santander, Porto Seguro ou Inter). Revise os novos lançamentos antes de importar.
      </p>

      {!parsed && (
        <Card style={{ padding: 20 }}>
          <FormField label="Arquivo PDF da fatura">
            <input type="file" accept="application/pdf" onChange={e => handleFileChange(e.target.files?.[0] || null)}
              style={{ width: '100%', fontSize: 13, color: 'var(--text-2)' }} />
          </FormField>
          {!myPMs.length && <p style={{ color: 'var(--text-2)', fontSize: 13 }}>Cadastre um cartão de crédito seu para importar uma fatura.</p>}
          {needsPassword && (
            <div style={{ marginTop: 12 }}><FormField label="Senha do PDF" hint="Algumas faturas vêm protegidas por senha (em geral o CPF do titular).">
              <Input type="password" value={pdfPassword} onChange={e => setPdfPassword(e.target.value)} placeholder="Digite a senha do arquivo" />
            </FormField></div>
          )}
          {error && <div role="alert" style={{ color: 'var(--danger)', fontSize: 12, marginTop: 8 }}>{error}</div>}
          <button className="ff-button ff-action ff-primary-action" onClick={handleParse} disabled={parsing || !file || !myPMs.length || (needsPassword && !pdfPassword)}
            style={{ marginTop: 14, minHeight: 44, padding: '10px 18px', background: 'var(--action-bg)', border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, fontSize: 14 }}>
            {parsing ? 'Lendo PDF…' : needsPassword ? 'Tentar com a senha' : 'Ler Fatura'}
          </button>
        </Card>
      )}

      {parsed && !result && (
        <>
          <Card style={{ padding: 16, marginBottom: 16 }}>
            <div style={{ fontSize: 13, color: 'var(--text-2)', marginBottom: 12 }}>
              Banco identificado: <strong style={{ color: 'var(--text-1)' }}>{{ santander: 'Santander', porto: 'Porto Seguro', inter: 'Inter' }[parsed.bank] || parsed.bank}</strong>
              {' '}· {parsed.transactions.length} lançamentos encontrados
            </div>
            <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
              <FormField label="Meio de pagamento"><Select value={paymentMethodId} disabled={committing} onChange={e => { setPreviewError(''); setPaymentMethodId(e.target.value); }}>
                <option value="">Selecione…</option>{myPMs.map(pm => <option key={pm.id} value={pm.id}>{pm.name}</option>)}
              </Select></FormField>
              <FormField label="Responsável"><Select value={responsibleMemberId} disabled={committing} onChange={e => { setPreviewError(''); setResponsibleMemberId(e.target.value); }}>
                {members.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
              </Select></FormField>
              <FormField label="Importar a partir de"><Input type="date" value={cutoffDate} min={cardPreview?.automaticCutoffDate || undefined} disabled={committing}
                onChange={e => { setPreviewError(''); setCutoffDate(e.target.value); }} /></FormField>
            </div>
            {cardPreview && <div style={{ marginTop: 12, fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 }}>
              {cardPreview.lastTransactionDate ? <>
                Último lançamento da importação anterior: <strong>{civilDate(cardPreview.lastTransactionDate)}</strong>.<br />
                Novos lançamentos a partir de <strong>{civilDate(cardPreview.effectiveCutoffDate)}</strong>.
              </> : <>Ainda não há uma data de importação anterior registrada para este cartão. Se você já importou uma fatura antes, escolha o dia seguinte ao último lançamento daquela fatura. Após esta revisão, as próximas usarão o corte automático.</>}
            </div>}
            <div style={{ marginTop: 10, fontSize: 12, color: 'var(--accent)', lineHeight: 1.5 }}>
              Datas anteriores ao corte, parcelamentos já cadastrados e assinaturas com a mesma empresa e valor neste cartão ficam fora da importação.
            </div>
          </Card>

          {previewPending && <div role="status" style={{ marginBottom: 12, fontSize: 13, color: 'var(--text-2)' }}>Verificando datas, parcelamentos e assinaturas…</div>}
          {previewError && <Card style={{ padding: 16, marginBottom: 12 }}>
            <div role="alert" style={{ color: 'var(--danger)', fontSize: 13 }}>{previewError}</div>
            <button className="ff-button" onClick={() => { setPreviewError(''); setPreviewRetry(n => n + 1); }} style={{ marginTop: 10, minHeight: 44, padding: '8px 14px' }}>Tentar novamente a verificação</button>
          </Card>}

          <p style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5 }}>Selecione os lançamentos que você conferiu. Itens já cadastrados serão somente registrados no histórico desta importação, sem criar novas despesas.</p>
          <Card style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ maxHeight: 480, overflowY: 'auto' }}>
              {rows.map(r => {
                const checked = currentPreview?.results?.find(item => item.index === r._id);
                const blocked = Boolean(checked && !checked.eligible);
                const reason = checked?.reason && omissionLabels[checked.reason];
                const beforeCutoff = checked?.reason === 'before_cutoff';
                return <div key={r._id} className="invoice-import-row" style={{ borderBottom: '1px solid var(--border)', background: blocked ? 'var(--surface-2)' : undefined }}>
                  <label style={{ width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <input type="checkbox" aria-label={`Conferir ${r.desc}`} checked={r.include && !beforeCutoff} disabled={committing || !checked || beforeCutoff}
                    onChange={e => updateRow(r._id, { include: e.target.checked })} style={{ width: 22, height: 22, margin: 0 }} />
                  </label>
                  <div className="invoice-import-description">
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-1)', lineHeight: 1.5 }}>{r.desc}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-3)', lineHeight: 1.5 }}>
                      {r.currentInstallment ? `Parcela ${r.currentInstallment}/${r.totalInstallments} · lançamento ${civilDate(r.transactionDate || r.purchaseDate)}` : civilDate(r.transactionDate || r.date)}
                      {r.originalPurchaseDate && ` · compra original ${civilDate(r.originalPurchaseDate)}`}
                    </div>
                    {reason && <div style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5 }}>{reason}</div>}
                  </div>
                  <div className="invoice-import-category"><Select aria-label={`Categoria de ${r.desc}`} value={r.categoryId} disabled={committing || blocked}
                    onChange={e => updateRow(r._id, { categoryId: e.target.value })}>
                    {categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                  </Select></div>
                  <div style={{ textAlign: 'right', fontSize: 13, fontWeight: 700, color: 'var(--text-1)', whiteSpace: 'nowrap' }}>{fmtBRL(r.value)}</div>
                </div>;
              })}
            </div>
          </Card>
          {currentPreview && <div role="status" style={{ marginTop: 12, fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 }}>
            {willImportCount ? `${willImportCount} ${willImportCount === 1 ? 'novo lançamento selecionado' : 'novos lançamentos selecionados'} para importar.` : processableCount ? 'Nenhuma nova despesa será criada; será registrado o último lançamento conferido.' : 'Nenhum lançamento selecionado para revisão. Os itens já cadastrados não serão repetidos.'}
          </div>}
          {!rows.length && <p role="status" style={{ color: 'var(--text-2)', fontSize: 13 }}>Nenhum lançamento encontrado neste PDF. Escolha outra fatura.</p>}
          {error && <div role="alert" style={{ color: 'var(--danger)', fontSize: 13, marginTop: 10 }}>{error}</div>}
          <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 10, marginTop: 16 }}>
            <button className="ff-button" onClick={resetImport} disabled={committing}
              style={{ minHeight: 44, padding: '10px 12px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600 }}>Cancelar</button>
            <button className="ff-button ff-action ff-primary-action" onClick={handleCommit} disabled={committing || !currentPreview || !!previewError || !processableCount}
              style={{ minHeight: 44, padding: '10px 12px', background: 'var(--action-bg)', border: 'none', borderRadius: 10, color: 'white', fontWeight: 700 }}>
              {committing ? 'Importando…' : willImportCount ? `Confirmar Importação (${willImportCount} ${willImportCount === 1 ? 'lançamento' : 'lançamentos'})` : 'Concluir revisão'}
            </button>
          </div>
        </>
      )}

      {result && <Card style={{ padding: 20 }}>
        <div role="status" style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-1)', marginBottom: 8 }}>{result.importedCount} {result.importedCount === 1 ? 'lançamento importado' : 'lançamentos importados'}</div>
        {refreshing && <div role="status" style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 10 }}>Atualizando os totais…</div>}
        {refreshWarning && <div style={{ marginTop: 12 }}>
          <div role="alert" style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 }}>{refreshWarning}</div>
          <button className="ff-button" onClick={handleRefreshImportedTotals} disabled={refreshing} style={{ marginTop: 8, minHeight: 44, padding: '8px 14px' }}>Atualizar totais</button>
        </div>}
        {!!result.skippedCount && <p style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 }}>{result.skippedCount} lançamentos não importados, conforme as verificações de data, assinatura, parcelamento e seleção.</p>}
        <button className="ff-button ff-action ff-primary-action" onClick={resetImport}
          style={{ marginTop: 10, minHeight: 44, padding: '10px 18px', background: 'var(--action-bg)', border: 'none', borderRadius: 10, color: 'white', fontWeight: 700 }}>Importar outra fatura</button>
      </Card>}
    </div>
  );
}

Object.assign(window, { ImportarFatura });