toeasy-front/src/routes/cpr/+page.svelte

<script>
  import { browser } from '$app/environment';
  import { goto } from '$app/navigation';
  import { onDestroy, onMount, tick } from 'svelte';
  import { get } from 'svelte/store';
  import Header from '$lib/layout/Header.svelte';
  import Tabs from '$lib/components/Tabs.svelte';
  import RegisterCpr from '$lib/components/commodities/cpr/RegisterCpr.svelte';
  import ContractCpr from '$lib/components/commodities/cpr/ContractCpr.svelte';
  import EmissionCpr from '$lib/components/commodities/cpr/EmissionCpr.svelte';
  import CprDetailModal from '$lib/components/commodities/cpr/CprDetailModal.svelte';
  import { authToken } from '$lib/utils/stores';

  const apiUrl = import.meta.env.VITE_API_URL;

  const fieldKeys = [
    'cpr_contract_code',
    'cpr_contract_number',
    'cpr_number',
    'cpr_self_number',
    'cpr_ipoc_code',
    'cpr_calculation_type_code',
    'cpr_initial_exchange_value',
    'cpr_fixing_type_code',
    'cpr_data_source_type_code',
    'cpr_adjustment_frequency_type_code',
    'cpr_adjustment_pro_rata_type_code',
    'cpr_adjustment_type_code',
    'cpr_maturity_date',
    'cpr_reference_date',
    'cpr_payment_start_date',
    'cpr_amortization_start_date',
    'cpr_interest_payment_date',
    'cpr_issue_value',
    'cpr_unit_value',
    'cpr_unit_price_value',
    'cpr_interest_unit_price_value',
    'cpr_residual_value',
    'cpr_amortization_percentage',
    'cpr_event_quantity',
    'cpr_payment_method_code',
    'cpr_index_code',
    'cpr_index_short_name',
    'cpr_vcp_indicator_type_code',
    'cpr_indexador_percentage_value',
    'cpr_interest_rate_spread_percentage',
    'cpr_interest_rate_criteria_type_code',
    'cpr_interest_payment_value',
    'cpr_interest_payment_frequency_code',
    'cpr_interest_months_quantity',
    'cpr_interestPaymentFlow_time_unit_type_code',
    'cpr_interestPaymentFlow_deadline_type_code',
    'cpr_amortization_type_code',
    'cpr_amortization_months_quantity',
    'cpr_amortizationPaymentFlow_time_unit_type_code',
    'cpr_amortizationPaymentFlow_deadline_type_code',
    'cpr_additional_text',
    'cpr_internal_control_number',
    'cpr_isin_code',
    // 'cpr_type_code',
    // 'cpr_otc_register_account_code',
    // 'cpr_otc_payment_agent_account_code',
    // 'cpr_otc_custodian_account_code',
    'cpr_otc_favored_account_code',
    'cpr_settlement_modality_type_code',
    'cpr_otc_settlement_bank_account_code',
    'cpr_ballast_type_code',
    'cpr_lot_number',
    'cpr_ballast_quantity',
    'cpr_currency_code',
    'cpr_transaction_identification',
    'cpr_guarantee_limit_type_code',
    'cpr_mother_code',
    'cpr_deposit_quantity',
    'cpr_deposit_unit_price_value',
    'cpr_deposit_person_type_acronym',
    'cpr_deposit_document_number',
    'cpr_event_type_code',
    'cpr_event_original_date',
    'cpr_operation_modality_type_code',
    'cpr_bacen_reference_code',
    'cpr_children_codes',
    // 'cpr_scr_type_code',
    // 'cpr_finality_code',
    'cpr_scr_customer_detail',
    'cpr_scr_person_type_acronym',
    'cpr_scr_document_number',
    'cpr_issuer_name',
    'cpr_place_name',
    'cpr_document_deadline_days_number',
    'cpr_deliveryPlace_state_acronym',
    'cpr_deliveryPlace_city_name',
    'cpr_deliveryPlace_ibge_code',
    'cpr_issuer_legal_nature_code',
    'cpr_issuers_person_type_acronym',
    'cpr_issuers_document_number',
    'cpr_issuers_state_acronym',
    'cpr_issuers_city_name',
    'cpr_issuers_ibge_code',
    'cpr_collateral_type_code',
    'cpr_collateral_type_name',
    'cpr_constitution_process_indicator',
    'cpr_otc_bondsman_account_code',
    'cpr_collaterals_document_number',
    'cpr_product_name',
    'cpr_product_class_name',
    'cpr_product_harvest',
    'cpr_product_quantity',
    'cpr_measure_unit_name',
    'cpr_packaging_way_name',
    'cpr_product_status_code',
    'cpr_production_type_code',
    'cpr_product_description',
    'cpr_production_place_name',
    'cpr_property_registration_number',
    'cpr_notary_name',
    'cpr_total_production_area_in_hectares_number',
    'cpr_total_area_in_hectares_number',
    'cpr_car_code',
    'cpr_latitude_code',
    'cpr_longitude_code',
    'cpr_zip_code',
    'cpr_green_cpr_indicator',
    'cpr_green_cpr_certificate_name',
    'cpr_green_cpr_certificate_cnpj_number',
    'cpr_green_cpr_declaration_indicator',
    'cpr_green_cpr_georeferencing_description'
  ];

  const allFieldKeys = Array.from(new Set(fieldKeys));

  const requiredFields = new Set([
    'cpr_maturity_date',
    'cpr_issue_value',
    'cpr_collateral_type_code',
    'cpr_collateral_type_name',
    'cpr_constitution_process_indicator',
    'cpr_product_name',
    'cpr_product_class_name',
    'cpr_product_harvest',
    'cpr_product_description',
    'cpr_product_quantity',
    'cpr_measure_unit_name',
    'cpr_packaging_way_name',
    'cpr_product_status_code',
    'cpr_production_type_code',
    'cpr_place_name',
    'cpr_deliveryPlace_state_acronym',
    'cpr_deliveryPlace_city_name',
    'cpr_issuer_legal_nature_code',
    'cpr_issuers_person_type_acronym',
    'cpr_issuers_document_number',
    'cpr_issuers_state_acronym',
    'cpr_issuers_city_name',
    'cpr_contract_code',
    'cpr_production_place_name',
    'cpr_zip_code'
  ]);

  const repeatingGroupDefinitions = [
    {
      key: 'issuers',
      title: 'Dados dos emissores',
      description: 'Adicione quantos emissores forem necessários.',
      itemLabel: 'Emissor',
      addLabel: 'Adicionar emissor',
      columns: 2,
      fields: [
        { key: 'cpr_issuer_name', label: 'Nome / (Razão Social do Emissor)' },
        { key: 'cpr_issuers_document_number', label: 'Documento (CPF/CNPJ)' },
        {
          key: 'cpr_issuers_person_type_acronym',
          label: 'Tipo de pessoa',
          type: 'select',
          options: [
            { label: 'Selecione...', value: '' },
            { label: 'Pessoa Jurídica (PJ)', value: 'PJ' },
            { label: 'Pessoa Física (PF)', value: 'PF' }
          ]
        },
        {
          key: 'cpr_issuer_legal_nature_code',
          label: 'Natureza jurídica',
          type: 'select',
          options: [
            { label: 'Selecione...', value: '' },
            { label: 'Produtor Rural', value: '02' }
          ]
        },
        { key: 'cpr_issuers_state_acronym', label: 'Estado' },
        { key: 'cpr_issuers_city_name', label: 'Cidade' }
      ]
    },
    {
      key: 'collaterals',
      title: 'Garantias e colaterais',
      description: 'Informe todos os colaterais vinculados a esta CPR.',
      itemLabel: 'Colateral',
      addLabel: 'Adicionar colateral',
      columns: 2,
      fields: [
        {
          key: 'cpr_collateral_type_code',
          label: 'Código do colateral',
          type: 'select',
          options: [
            { label: 'Selecione...', value: '' },
            { label: 'Penhor', value: '6' },
            { label: 'Alienação', value: '7' }
          ]
        },
        { key: 'cpr_collateral_type_name', label: 'Descrição do colateral' },
        { key: 'cpr_constitution_process_indicator', label: 'Processo constituído', type: 'select', options: [
          { label: 'Selecione...', value: '' },
          { label: 'Sim', value: 'S' },
          { label: 'Não', value: 'N' }
        ] },
        { key: 'cpr_otc_bondsman_account_code', label: 'Conta OTC do fiador' }
      ]
    },
    {
      key: 'productionPlaces',
      title: 'Locais de produção',
      description: 'Cadastre cada propriedade vinculada ao lastro.',
      itemLabel: 'Propriedade',
      addLabel: 'Adicionar propriedade',
      columns: 3,
      fields: [
        { key: 'cpr_production_place_name', label: 'Nome da propriedade' },
        { key: 'cpr_property_registration_number', label: 'Registro da propriedade' },
        { key: 'cpr_notary_name', label: 'Cartório' },
        { key: 'cpr_total_production_area_in_hectares_number', label: 'Área de produção (ha)' },
        { key: 'cpr_total_area_in_hectares_number', label: 'Área total (ha)' },
        { key: 'cpr_car_code', label: 'Código CAR' },
        { key: 'cpr_latitude_code', label: 'Latitude' },
        { key: 'cpr_longitude_code', label: 'Longitude' },
        { key: 'cpr_zip_code', label: 'CEP' }
      ]
    }
  ];

  const repeatingFieldToGroup = repeatingGroupDefinitions.reduce((acc, config) => {
    config.fields.forEach((field) => {
      acc[field.key] = config.key;
    });
    return acc;
  }, {});

  function createEmptyRepeatingEntry(config) {
    return config.fields.reduce((entry, field) => {
      entry[field.key] = '';
      return entry;
    }, {});
  }

  const createInitialRepeatingGroups = () => {
    const groups = {};
    repeatingGroupDefinitions.forEach((config) => {
      groups[config.key] = [createEmptyRepeatingEntry(config)];
    });
    return groups;
  };

  const createInitialForm = () =>
    allFieldKeys.reduce((acc, key) => {
      acc[key] = '';
      return acc;
    }, {});

  let cprForm = createInitialForm();
  let repeatingGroups = createInitialRepeatingGroups();
  let submitError = '';
  let submitSuccess = '';
  let isSubmitting = false;

  const PAYMENT_STORAGE_KEY = 'tooeasy_cpr_payment';
  const PAYMENT_TIMEOUT_MS = 30 * 60 * 1000;
  const PAYMENT_POLL_INTERVAL_MS = 10_000;
  let paymentModalVisible = false;
  let paymentCode = '';
  let paymentId = null;
  let paymentError = '';
  let paymentStatusMessage = '';
  let paymentCopyFeedback = '';
  let paymentCountdownMs = PAYMENT_TIMEOUT_MS;
  let paymentStartedAt = null;
  let paymentLoadingVisible = false;
  let paymentQrContainer;
  let paymentQrInstance = null;
  let paymentPollIntervalId = null;
  let paymentCountdownIntervalId = null;
  let paymentCopyTimeoutId = null;
  let isCheckingPayment = false;
  let paymentSuccessOverlayVisible = false;
  let paymentSuccessMessage = '';
  let emissionDiscountCode = '';

  const breadcrumb = [{ label: 'Início' }, { label: 'CPR', active: true }];
  let activeTab = 4;
  const tabs = ['Contrato', 'Registro', 'Emissão'];
  const B3_OFFLINE_START_HOUR = 20;
  const B3_OFFLINE_END_HOUR = 8;
  const B3_OFFLINE_POLL_INTERVAL_MS = 60_000;

  const historyEndpoint = `${apiUrl}/cpr/history`;
  const paymentConfirmEndpoint = `${apiUrl}/b3/payment/confirm`;
  const historyColumns = [
    { key: 'cpr_id', label: 'CPR ID' },
    { key: 'cpr_product_class_name', label: 'Produto' },
    { key: 'cpr_issue_date', label: 'Data de emissão' },
    { key: 'cpr_issuer_name', label: 'Emitente' },
    { key: 'cpr_issue_financial_value', label: 'Valor' }
  ];
  let historyRows = [];
  let historyLoading = false;
  let historyError = '';
  let detailLoading = false;
  let detailError = '';
  let selectedDetail = null;
  let selectedDetailId = null;
  let showDetailModal = false;
  let historyInitialized = false;
  let isB3OfflineWindow = false;
  let b3OfflineIntervalId = null;

  function handleFieldChange(key, value) {
    submitError = '';
    submitSuccess = '';
    cprForm = { ...cprForm, [key]: value ?? '' };
  }

  function cloneRepeatingEntries(groupKey) {
    const entries = repeatingGroups[groupKey] ?? [];
    return entries.map((entry) => ({ ...entry }));
  }

  function handleRepeatingFieldChange(groupKey, index, fieldKey, value) {
    submitError = '';
    submitSuccess = '';
    const nextEntries = cloneRepeatingEntries(groupKey);
    if (!nextEntries[index]) return;
    nextEntries[index] = {
      ...nextEntries[index],
      [fieldKey]: value ?? ''
    };
    repeatingGroups = {
      ...repeatingGroups,
      [groupKey]: nextEntries
    };
  }

  function handleAddRepeatingEntry(groupKey) {
    const config = repeatingGroupDefinitions.find((c) => c.key === groupKey);
    if (!config) return;
    const nextEntries = cloneRepeatingEntries(groupKey);
    nextEntries.push(createEmptyRepeatingEntry(config));
    repeatingGroups = {
      ...repeatingGroups,
      [groupKey]: nextEntries
    };
  }

  function handleRemoveRepeatingEntry(groupKey, index) {
    const nextEntries = cloneRepeatingEntries(groupKey);
    if (nextEntries.length <= 1) return;
    repeatingGroups = {
      ...repeatingGroups,
      [groupKey]: nextEntries.filter((_, i) => i !== index)
    };
  }

  function handleAddTop() {
    cprForm = createInitialForm();
    repeatingGroups = createInitialRepeatingGroups();
    submitError = '';
    submitSuccess = '';
    activeTab = 0;
  }

  function handleCancel() {
    activeTab = 4;
    submitError = '';
    emissionDiscountCode = '';
  }

  function ensureAuthContext() {
    const token = get(authToken);
    if (!token) {
      throw new Error('Sessão expirada. Faça login novamente.');
    }
    return { token };
  }

  async function parseJsonResponse(res) {
    const raw = await res.text();
    if (!raw) return null;
    const trimmed = raw.trim();

    if (trimmed.startsWith('<')) {
      console.error('Resposta HTML inesperada do endpoint de histórico/detalhe de CPR:', trimmed.slice(0, 300));
      const statusMsg =
        res.status === 404
          ? 'Endpoint /cpr/history não encontrado (404). Verifique a URL da API.'
          : `Resposta inesperada do servidor (status ${res.status}).`;
      throw new Error(statusMsg);
    }

    try {
      return JSON.parse(trimmed);
    } catch (err) {
      console.error('Resposta inválida do histórico de CPRs:', err, trimmed);
      throw new Error('Resposta inválida do servidor.');
    }
  }

  function normalizeHistoryList(payload) {
    if (Array.isArray(payload)) return payload;
    if (Array.isArray(payload?.data)) return payload.data;
    return [];
  }

  function sanitizeDetail(detail) {
    if (!detail || typeof detail !== 'object') return null;
    const cleaned = {};
    Object.entries(detail).forEach(([key, value]) => {
      if (value === null || value === undefined) return;
      if (typeof value === 'string' && value.trim().toUpperCase() === 'NA') return;
      cleaned[key] = value;
    });
    return Object.keys(cleaned).length ? cleaned : null;
  }

  function formatDetailValue(value) {
    if (value == null) return '—';
    if (typeof value === 'number') {
      return value.toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 4 });
    }
    return String(value);
  }

  function humanizeKey(key = '') {
    if (!key) return '';
    return key
      .replace(/^cpr_/i, '')
      .replace(/_/g, ' ')
      .replace(/\b\w/g, (match) => match.toUpperCase());
  }

  function formatCurrency(value) {
    if (value == null || value === '') return '—';
    const numeric = Number(value);
    if (Number.isNaN(numeric)) return value;
    return numeric.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
  }

  function formatCountdown(ms) {
    if (ms == null || Number.isNaN(ms)) return '--:--';
    const totalSeconds = Math.max(0, Math.floor(ms / 1000));
    const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
    const seconds = String(totalSeconds % 60).padStart(2, '0');
    return `${minutes}:${seconds}`;
  }

  function persistPaymentState() {
    if (!browser || !paymentId || !paymentCode) return;
    try {
      const payload = {
        paymentId,
        paymentCode,
        startedAt: paymentStartedAt ?? Date.now()
      };
      localStorage.setItem(PAYMENT_STORAGE_KEY, JSON.stringify(payload));
    } catch (err) {
      console.warn('[CPR] Não foi possível salvar o estado do pagamento', err);
    }
  }

  function removePaymentStateFromStorage() {
    if (!browser) return;
    try {
      localStorage.removeItem(PAYMENT_STORAGE_KEY);
    } catch {}
  }

  function stopPaymentPolling() {
    if (paymentPollIntervalId) {
      clearInterval(paymentPollIntervalId);
      paymentPollIntervalId = null;
    }
  }

  function stopPaymentCountdown() {
    if (paymentCountdownIntervalId) {
      clearInterval(paymentCountdownIntervalId);
      paymentCountdownIntervalId = null;
    }
  }

  function stopPaymentCopyTimeout() {
    if (paymentCopyTimeoutId) {
      clearTimeout(paymentCopyTimeoutId);
      paymentCopyTimeoutId = null;
    }
  }

  function startPaymentCountdown(startTimestamp = Date.now()) {
    if (!browser) return;
    paymentStartedAt = startTimestamp;
    updatePaymentCountdown();
    stopPaymentCountdown();
    paymentCountdownIntervalId = window.setInterval(updatePaymentCountdown, 1000);
  }

  function updatePaymentCountdown() {
    if (!paymentStartedAt) {
      paymentCountdownMs = PAYMENT_TIMEOUT_MS;
      return;
    }
    const elapsed = Date.now() - paymentStartedAt;
    const remaining = PAYMENT_TIMEOUT_MS - elapsed;
    paymentCountdownMs = remaining > 0 ? remaining : 0;
    if (remaining <= 0) {
      handlePaymentExpired();
    }
  }

  function handlePaymentExpired() {
    if (!paymentId) return;
    stopPaymentPolling();
    stopPaymentCountdown();
    removePaymentStateFromStorage();
    paymentStatusMessage = '';
    paymentError = 'O tempo limite para pagamento expirou. Gere uma nova CPR para emitir outro QR Code.';
    paymentId = null;
    paymentCode = '';
  }

  function startPaymentPolling(immediate = true) {
    if (!browser || !paymentId) return;
    stopPaymentPolling();
    if (immediate) {
      void pollPaymentStatus();
    }
    paymentPollIntervalId = window.setInterval(() => {
      void pollPaymentStatus();
    }, PAYMENT_POLL_INTERVAL_MS);
  }

  async function pollPaymentStatus() {
    if (!paymentId || isCheckingPayment) return;
    isCheckingPayment = true;
    paymentError = '';
    try {
      const result = await requestPaymentConfirmation();
      if (result.state === 'success') {
        handlePaymentConfirmationSuccess(result.data);
      } else if (result.state === 'pending') {
        paymentStatusMessage = result.message ?? 'Pagamento pendente. Continuaremos monitorando.';
      } else if (result.state === 'error') {
        paymentStatusMessage = '';
        paymentError = result.message ?? 'Falha ao confirmar pagamento.';
        stopPaymentPolling();
      }
    } catch (err) {
      console.error('[CPR] Erro ao confirmar pagamento', err);
      paymentError = err?.message ?? 'Não foi possível verificar o pagamento.';
    } finally {
      isCheckingPayment = false;
    }
  }

  async function requestPaymentConfirmation() {
    if (!paymentId) {
      return { state: 'error', message: 'Pagamento inválido. Gere um novo QR Code.' };
    }
    const { token } = ensureAuthContext();
    const res = await fetch(paymentConfirmEndpoint, {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
        Authorization: `Bearer ${token}`
      },
      body: JSON.stringify({ payment_id: paymentId })
    });
    const raw = await res.text();
    let body = null;
    if (raw) {
      try {
        body = JSON.parse(raw);
      } catch (err) {
        console.error('[CPR] Resposta inválida ao confirmar pagamento:', err, raw);
      }
    }
    const isSuccessResponse = Boolean(body?.success || body?.status === 'ok');
    if (res.ok && isSuccessResponse) {
      console.log('[CPR] Confirmação de pagamento bem-sucedida:', body);
      return { state: 'success', data: body };
    }
    const code = body?.code ?? body?.error;
    const backendMessage = body?.message ?? body?.msg ?? body?.data?.message ?? raw ?? '';
    const backendMessageText = typeof backendMessage === 'string' ? backendMessage.trim() : '';
    const isKnownPending =
      code === 'E_PAYMENT_PENDING' ||
      body?.data?.status === 0 ||
      res.status === 409 ||
      backendMessageText.toLowerCase?.().includes('pagamento ainda não confirmado');
    if (isKnownPending) {
      return {
        state: 'pending',
        message: backendMessageText || 'Pagamento pendente. Assim que confirmado, você será avisado.'
      };
    }
    const normalizedBackendMessage = typeof backendMessage === 'string' ? backendMessage.trim() : '';
    const normalizedRaw = typeof raw === 'string' ? raw.trim() : '';
    const message = normalizedBackendMessage || normalizedRaw || 'Não foi possível confirmar o pagamento.';
    return { state: 'error', message };
  }

  function handlePaymentConfirmationSuccess(payload) {
    const message = payload?.data?.message ?? payload?.message ?? 'Pagamento confirmado com sucesso.';
    submitSuccess = message;
    paymentSuccessMessage = message;
    paymentError = '';
    paymentStatusMessage = '';
    paymentSuccessOverlayVisible = true;
    stopPaymentPolling();
    stopPaymentCountdown();
    stopPaymentCopyTimeout();
    removePaymentStateFromStorage();
    paymentId = null;
    paymentCode = '';
    paymentStartedAt = null;
    paymentCountdownMs = PAYMENT_TIMEOUT_MS;
    paymentCopyFeedback = '';
  }

  function resetPaymentTracking({ hideModal = true } = {}) {
    stopPaymentPolling();
    stopPaymentCountdown();
    stopPaymentCopyTimeout();
    removePaymentStateFromStorage();
    paymentId = null;
    paymentCode = '';
    paymentStartedAt = null;
    paymentCountdownMs = PAYMENT_TIMEOUT_MS;
    paymentCopyFeedback = '';
    paymentSuccessOverlayVisible = false;
    paymentSuccessMessage = '';
    if (hideModal) {
      paymentModalVisible = false;
    }
  }

  function handlePaymentSuccessAcknowledge() {
    paymentSuccessOverlayVisible = false;
    paymentModalVisible = false;
    activeTab = 4;
    void fetchHistory();
  }

  function handleCancelPaymentFlow() {
    resetPaymentTracking({ hideModal: true });
    paymentStatusMessage = '';
    paymentError = '';
  }

  function handleRetryPaymentCheck() {
    if (!paymentId) return;
    paymentError = '';
    paymentStatusMessage = 'Verificando status do pagamento...';
    startPaymentPolling(true);
  }

  async function renderPaymentQrCode(link) {
    if (!browser || !link) return;
    try {
      if (!paymentQrInstance) {
        const module = await import('qr-code-styling');
        const QRCodeStyles = module.default ?? module;
        paymentQrInstance = new QRCodeStyles({
          width: 240,
          height: 240,
          type: 'svg',
          data: link,
          dotsOptions: {
            color: '#0f172a',
            type: 'rounded'
          },
          backgroundOptions: {
            color: '#ffffff'
          }
        });
      } else {
        paymentQrInstance.update({ data: link });
      }
      await tick();
      if (paymentQrContainer) {
        paymentQrContainer.innerHTML = '';
        paymentQrInstance.append(paymentQrContainer);
      }
    } catch (error) {
      console.error('[CPR] Falha ao renderizar QR Code de pagamento', error);
      paymentError = 'Não foi possível gerar o QR Code. Use o código Pix copiado para pagar.';
    }
  }

  async function openPaymentModalWithPayment(data, startedAt = Date.now(), immediatePoll = true) {
    if (!data?.payment_id || !data?.payment_code) return;
    paymentModalVisible = true;
    paymentId = Number(data.payment_id);
    paymentCode = data.payment_code;
    paymentError = '';
    paymentStatusMessage = 'Aguardando pagamento via Pix.';
    paymentCopyFeedback = '';
    paymentStartedAt = startedAt;
    const remaining = PAYMENT_TIMEOUT_MS - (Date.now() - startedAt);
    paymentCountdownMs = remaining > 0 ? remaining : PAYMENT_TIMEOUT_MS;
    persistPaymentState();
    await tick();
    await renderPaymentQrCode(paymentCode);
    startPaymentCountdown(startedAt);
    startPaymentPolling(immediatePoll);
  }

  async function restorePersistedPayment() {
    if (!browser) return;
    try {
      const raw = localStorage.getItem(PAYMENT_STORAGE_KEY);
      if (!raw) return;
      const stored = JSON.parse(raw);
      if (!stored?.paymentId || !stored?.paymentCode) {
        removePaymentStateFromStorage();
        return;
      }
      const startedAt = stored.startedAt ?? Date.now();
      const remaining = PAYMENT_TIMEOUT_MS - (Date.now() - startedAt);
      if (remaining <= 0) {
        removePaymentStateFromStorage();
        return;
      }
      await openPaymentModalWithPayment(
        { payment_id: stored.paymentId, payment_code: stored.paymentCode },
        startedAt,
        false
      );
      paymentStatusMessage = 'Retomamos a verificação do pagamento pendente.';
      startPaymentPolling(true);
    } catch (err) {
      console.error('[CPR] Não foi possível restaurar o pagamento pendente', err);
      removePaymentStateFromStorage();
    }
  }

  async function handleCopyPaymentCode() {
    if (!browser || !paymentCode) return;
    try {
      await navigator.clipboard.writeText(paymentCode);
      paymentCopyFeedback = 'Código Pix copiado!';
    } catch {
      paymentCopyFeedback = 'Não foi possível copiar automaticamente. Copie manualmente.';
    } finally {
      stopPaymentCopyTimeout();
      if (browser) {
        paymentCopyTimeoutId = window.setTimeout(() => {
          paymentCopyFeedback = '';
          paymentCopyTimeoutId = null;
        }, 2000);
      }
    }
  }

  async function fetchHistory() {
    historyLoading = true;
    historyError = '';
    detailError = '';
    detailLoading = false;
    try {
      const { token } = ensureAuthContext();
      const res = await fetch(historyEndpoint, {
        method: 'POST',
        headers: {
          'content-type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({})
      });
      const body = await parseJsonResponse(res);
      if (!res.ok) {
        throw new Error(body?.message ?? 'Falha ao carregar histórico.');
      }
      historyRows = normalizeHistoryList(body);
      selectedDetail = null;
      selectedDetailId = null;
      historyInitialized = true;
    } catch (err) {
      historyRows = [];
      historyError = err?.message ?? 'Falha ao carregar histórico.';
    } finally {
      historyLoading = false;
    }
  }

  async function fetchDetail(cprId) {
    if (!cprId) return;
    detailLoading = true;
    detailError = '';
    try {
      const { token } = ensureAuthContext();
      const res = await fetch(historyEndpoint, {
        method: 'POST',
        headers: {
          'content-type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({ cpr_id: cprId })
      });
      const body = await parseJsonResponse(res);
      if (!res.ok) {
        throw new Error(body?.message ?? 'Falha ao carregar detalhes da CPR.');
      }
      const detail = Array.isArray(body) ? body[0] : body?.data ?? body;
      selectedDetail = sanitizeDetail(detail) ?? detail ?? {};
    } catch (err) {
      detailError = err?.message ?? 'Falha ao carregar detalhes da CPR.';
      selectedDetail = null;
    } finally {
      detailLoading = false;
    }
  }

  function handleViewDetails(cprId) {
    if (!cprId) return;
    selectedDetailId = cprId;
    selectedDetail = null;
    detailError = '';
    showDetailModal = true;
    void fetchDetail(cprId);
  }

  function handleCloseDetail() {
    selectedDetail = null;
    selectedDetailId = null;
    detailError = '';
    showDetailModal = false;
    detailLoading = false;
  }

  function handleRetryDetail() {
    if (selectedDetailId) {
      detailError = '';
      detailLoading = true;
      void fetchDetail(selectedDetailId);
    }
  }

  onMount(() => {
    void fetchHistory();
    void restorePersistedPayment();
    updateB3OfflineState();
    if (browser) {
      b3OfflineIntervalId = window.setInterval(updateB3OfflineState, B3_OFFLINE_POLL_INTERVAL_MS);
    }
  });

  onDestroy(() => {
    stopPaymentPolling();
    stopPaymentCountdown();
    stopPaymentCopyTimeout();
    if (b3OfflineIntervalId) {
      clearInterval(b3OfflineIntervalId);
      b3OfflineIntervalId = null;
    }
  });

  function getMissingRequiredFields() {
    const missing = [];
    requiredFields.forEach((key) => {
      const groupKey = repeatingFieldToGroup[key];
      if (groupKey) {
        const config = repeatingGroupDefinitions.find((c) => c.key === groupKey);
        const entries = repeatingGroups[groupKey] ?? [];
        if (!entries.length) {
          missing.push(`${key} (${config?.itemLabel ?? groupKey})`);
          return;
        }
        entries.forEach((entry, index) => {
          const raw = entry?.[key];
          if (!raw || String(raw).trim() === '') {
            missing.push(`${key} (${config?.itemLabel ?? groupKey} ${index + 1})`);
          }
        });
      } else {
        const raw = cprForm[key];
        if (!raw || String(raw).trim() === '') {
          missing.push(key);
        }
      }
    });
    return missing;
  }

  function buildPayload() {
    const payload = {};
    for (const key of allFieldKeys) {
      const groupKey = repeatingFieldToGroup[key];
      if (groupKey) {
        const entries = repeatingGroups[groupKey] ?? [];
        const values = entries
          .map((entry) => entry?.[key])
          .map((value) => (typeof value === 'string' ? value.trim() : value))
          .filter((value) => value && value !== '');
        payload[key] = values.length
          ? values.join('; ')
          : requiredFields.has(key)
          ? ''
          : 'NA';
        continue;
      }

      const raw = cprForm[key];
      const trimmed = typeof raw === 'string' ? raw.trim() : raw;
      if (trimmed === '' || trimmed === undefined || trimmed === null) {
        payload[key] = requiredFields.has(key) ? '' : 'NA';
      } else {
        payload[key] = raw;
      }
    }
    return payload;
  }

  async function handleFinalize(event) {
    event?.preventDefault();
    submitError = '';
    submitSuccess = '';

    const missing = getMissingRequiredFields();
    if (missing.length) {
      submitError = `Preencha os campos obrigatórios: ${missing.join(', ')}`;
      return;
    }

    const token = $authToken;
    if (!token) {
      submitError = 'Sessão expirada. Faça login novamente.';
      return;
    }

    const payload = buildPayload();
    payload.discount = typeof emissionDiscountCode === 'string' ? emissionDiscountCode.trim() : '';
    isSubmitting = true;
    paymentLoadingVisible = true;

    try {
      const res = await fetch(`${apiUrl}/b3/cpr/register`, {
        method: 'POST',
        headers: {
          'content-type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(payload)
      });

      const raw = await res.text();
      let response = null;
      if (raw) {
        try {
          response = JSON.parse(raw);
        } catch (err) {
          console.error('Resposta inválida ao registrar CPR:', err, raw);
          throw new Error('Resposta inválida do servidor ao registrar CPR.');
        }
      }

      const serverStatus = response?.status?.toLowerCase?.() ?? '';
      if (!res.ok || (response?.status && serverStatus !== 'ok')) {
        console.error('[CPR] Falha ao registrar CPR', {
          status: res.status,
          statusText: res.statusText,
          raw,
          response
        });
        throw new Error((response?.msg ?? raw) || 'Falha ao registrar CPR.');
      }

      submitSuccess = response?.msg ?? 'CPR registrada com sucesso.';
      const paymentData = response?.data;
      cprForm = createInitialForm();
      repeatingGroups = createInitialRepeatingGroups();
      emissionDiscountCode = '';
      if (paymentData?.payment_id && paymentData?.payment_code) {
        await openPaymentModalWithPayment(paymentData);
      }
    } catch (err) {
      console.error('[CPR] Erro inesperado ao registrar CPR', err);
      submitError = err?.message ?? 'Falha ao registrar CPR.';
    } finally {
      isSubmitting = false;
      paymentLoadingVisible = false;
    }
  }

  function isWithinB3OfflineWindow(date = new Date()) {
    let hour = date.getHours();
    try {
      const parts = new Intl.DateTimeFormat('pt-BR', {
        timeZone: 'America/Sao_Paulo',
        hour: '2-digit',
        hourCycle: 'h23'
      }).formatToParts(date);
      const hourPart = parts.find((part) => part.type === 'hour')?.value;
      const parsed = Number(hourPart);
      if (Number.isFinite(parsed)) {
        hour = parsed;
      }
    } catch (err) {
      hour = date.getHours();
    }
    return hour >= B3_OFFLINE_START_HOUR || hour < B3_OFFLINE_END_HOUR;
  }

  function updateB3OfflineState() {
    if (!browser) {
      isB3OfflineWindow = false;
      return;
    }
    isB3OfflineWindow = isWithinB3OfflineWindow(new Date());
  }

  function handleB3OfflineRedirect() {
    goto('/dashboard');
  }
</script>

{#if isB3OfflineWindow}
  <div class="fixed inset-0 z-50 flex items-center justify-center px-4 bg-black/70 backdrop-blur-sm">
    <div class="w-full max-w-xl rounded-2xl bg-white shadow-2xl border border-red-200 dark:bg-gray-900 dark:border-red-800/40 overflow-hidden">
      <div class="px-6 py-5 space-y-4 text-center">
        <p class="text-sm uppercase tracking-[0.3em] text-red-500 font-semibold">Manutenção programada</p>
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">B3 indisponível entre 20h e 8h (horário de Brasília)</h2>
        <p class="text-base text-gray-600 dark:text-gray-300">
          A emissão de novas CPRs fica temporariamente suspensa enquanto a B3 está offline. Retorne ao dashboard e tente novamente após as 08:00 (horário de Brasília).
        </p>
        <button
          type="button"
          class="mt-2 inline-flex items-center justify-center rounded-lg bg-gray-900 text-white font-semibold px-6 py-3 hover:bg-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-900 dark:bg-white dark:text-gray-900"
          on:click={handleB3OfflineRedirect}
        >
          Voltar para o dashboard
        </button>
      </div>
    </div>
  </div>
{/if}

<div>
  <Header title="CPR - Cédula de Produto Rural" subtitle="Gestão de contratos, emissão e registro de CPRs" breadcrumb={breadcrumb} />
  <div class="p-4">
    <div class="max-w-6xl mx-auto mt-4">
    
      {#if submitError}
        <div class="mb-4 rounded border border-red-300 bg-red-50 text-red-700 px-3 py-2 text-sm">{submitError}</div>
      {/if}
      {#if submitSuccess}
        <div class="mb-4 rounded border border-green-300 bg-green-50 text-green-700 px-3 py-2 text-sm">{submitSuccess}</div>
      {/if}

      {#if activeTab === 4}
        <section class="space-y-4">
          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-50">Histórico de CPRs</h2>
              <p class="text-sm text-gray-500 dark:text-gray-400">
                Consulte as últimas CPRs emitidas e visualize os detalhes completos.
              </p>
            </div>
            <div class="flex gap-2">
              <button
                type="button"
                class="inline-flex items-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-60"
                on:click={handleAddTop}
              >
                Nova CPR
              </button>
              <button
                type="button"
                class="inline-flex items-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-60"
                on:click={() => fetchHistory()}
                disabled={historyLoading}
              >
                {historyLoading ? 'Atualizando...' : 'Atualizar'}
              </button>
            </div>
          </div>

          {#if historyError}
            <div class="rounded border border-red-200 bg-red-50 dark:border-red-900/40 dark:bg-red-900/20 px-3 py-2 text-sm text-red-700 dark:text-red-300">
              {historyError}
            </div>
          {/if}

          <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
              <thead class="bg-gray-50 dark:bg-gray-900/40 text-gray-600 dark:text-gray-300 uppercase text-xs">
                <tr>
                  {#each historyColumns as column}
                    <th class="px-4 py-3 text-left font-semibold">{column.label}</th>
                  {/each}
                  <th class="px-4 py-3 text-left font-semibold">Monitoramento</th>
                  <th class="px-4 py-3 text-left font-semibold">Ação</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200 dark:divide-gray-700 text-gray-800 dark:text-gray-100">
                {#if historyLoading && !historyInitialized}
                  <tr>
                    <td class="px-4 py-6 text-center" colspan={historyColumns.length + 2}>
                      Carregando histórico...
                    </td>
                  </tr>
                {:else if !historyRows.length}
                  <tr>
                    <td class="px-4 py-6 text-center text-gray-500 dark:text-gray-400" colspan={historyColumns.length + 2}>
                      Nenhuma CPR encontrada.
                    </td>
                  </tr>
                {:else}
                  {#each historyRows as row}
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/60">
                      <td class="px-4 py-3 font-medium">{row.cpr_id ?? '—'}</td>
                      <td class="px-4 py-3">{row.cpr_product_class_name ?? '—'}</td>
                      <td class="px-4 py-3">{row.cpr_issue_date ?? '—'}</td>
                      <td class="px-4 py-3">{row.cpr_issuer_name ?? '—'}</td>
                      <td class="px-4 py-3">{formatCurrency(row.cpr_issue_financial_value)}</td>
                      <td class="px-4 py-3">
                        {#if row.cpr_id}
                          <a
                            class="inline-flex items-center justify-center rounded-full p-1.5 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
                            href={`/cpr/monitoring?cpr_id=${encodeURIComponent(String(row.cpr_id))}`}
                            aria-label="Abrir monitoramento"
                          >
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                              <path
                                d="M4 7h3l2-2h6l2 2h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M12 18a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>
                          </a>
                        {:else}
                          —
                        {/if}
                      </td>
                      <td class="px-4 py-3">
                        <button
                          type="button"
                          class="inline-flex items-center justify-center rounded-full p-1.5 text-blue-600 hover:text-blue-500 disabled:opacity-60"
                          on:click={() => handleViewDetails(row.cpr_id)}
                          disabled={!row.cpr_id || detailLoading && selectedDetailId === row.cpr_id}
                          aria-label={detailLoading && selectedDetailId === row.cpr_id ? 'Carregando detalhes' : 'Mais informações'}
                        >
                          <svg
                            class="h-4 w-4"
                            viewBox="0 0 20 20"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.8"
                          >
                            <path d="M7 5l5 5-5 5" stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                        </button>
                      </td>
                    </tr>
                  {/each}
                {/if}
              </tbody>
            </table>
          </div>

        </section>
        <CprDetailModal
          visible={showDetailModal}
          title="Detalhes da CPR"
          detailId={selectedDetailId}
          loading={detailLoading}
          error={detailError}
          detail={selectedDetail}
          formatKey={humanizeKey}
          formatValue={formatDetailValue}
          on:close={handleCloseDetail}
          on:retry={handleRetryDetail}
        />
      {:else if activeTab === 0}
      <Tabs {tabs} bind:active={activeTab} showCloseIcon={true} on:close={handleCancel} />
      <div class="mt-4">
        <ContractCpr formData={cprForm} onFieldChange={handleFieldChange} {requiredFields} />
      </div>
      <!-- Navigation Controls -->
      <div class="flex justify-between mt-6">
        <button 
          type="button"
          class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg cursor-not-allowed" 
          disabled
        >
          Anterior
        </button>
        <button 
          type="button"
          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          on:click={() => activeTab = 1}
        >
          Próximo
        </button>
      </div>
      {:else if activeTab === 1}
      <Tabs {tabs} bind:active={activeTab} showCloseIcon={true} on:close={handleCancel} />
      <div class="mt-4">
        <RegisterCpr formData={cprForm} onFieldChange={handleFieldChange} {requiredFields} />
      </div>
      <!-- Navigation Controls -->
      <div class="flex justify-between mt-6">
        <button 
          type="button"
          class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
          on:click={() => activeTab = 0}
        >
          Anterior
        </button>
        <button 
          type="button"
          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          on:click={() => activeTab = 2}
        >
          Próximo
        </button>
      </div>
      {:else if activeTab === 2}
      <Tabs {tabs} bind:active={activeTab} showCloseIcon={true} on:close={handleCancel} />
      <div class="mt-4">
        <EmissionCpr
          formData={cprForm}
          onFieldChange={handleFieldChange}
          {requiredFields}
          repeatingConfigs={repeatingGroupDefinitions}
          {repeatingGroups}
          onRepeatingFieldChange={handleRepeatingFieldChange}
          onAddRepeatingEntry={handleAddRepeatingEntry}
          onRemoveRepeatingEntry={handleRemoveRepeatingEntry}
        />
      </div>
      <div class="mt-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
        <div class="p-4 space-y-1">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="cpr-emission-discount-code">
            Código de desconto de emissão
          </label>
          <input
            id="cpr-emission-discount-code"
            type="text"
            class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            bind:value={emissionDiscountCode}
            disabled={isSubmitting}
            placeholder="Opcional"
            autocomplete="off"
          />
        </div>
      </div>
      <!-- Navigation Controls -->
      <div class="flex justify-between mt-6">
        <button 
          type="button"
          class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
          on:click={() => activeTab = 1}
        >
          Anterior
        </button>
        <button 
          type="button"
          class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold"
          on:click|preventDefault={handleFinalize}
          disabled={isSubmitting}
        >
          {isSubmitting ? 'Enviando...' : 'Finalizar CPR'}
        </button>
      </div>

      {/if}
    </div>
  </div>

  {#if paymentModalVisible}
    <div class="fixed inset-0 z-40 flex items-center justify-center bg-black/60 px-4">
      <div class="w-full max-w-xl rounded-2xl bg-white dark:bg-gray-900 p-6 shadow-2xl relative">
        <button
          class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
          aria-label="Fechar"
          on:click={handleCancelPaymentFlow}
        >
          ✕
        </button>
        <div class="space-y-4">
          <div>
            <p class="text-sm uppercase tracking-wider text-blue-500 font-semibold">Pagamento pendente</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Finalize a CPR via Pix</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300">
              Utilize o QR Code ou copie o código Pix para concluir o pagamento. O QR Code expira em
              <span class="font-semibold">{formatCountdown(paymentCountdownMs)}</span>.
            </p>
          </div>

          <div class="flex flex-col gap-6 md:flex-row">
            <div class="flex-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/80 p-4 flex flex-col items-center gap-4">
              <div class="text-center">
                <p class="text-xs uppercase tracking-wider text-gray-500">QR Code Pix</p>
                <p class="text-sm text-gray-600 dark:text-gray-300">Escaneie com o app do banco</p>
              </div>
              <div
                class="w-56 h-56 flex items-center justify-center bg-white rounded-xl shadow-inner"
                bind:this={paymentQrContainer}
                aria-label="QR Code do pagamento"
              ></div>
              <button
                type="button"
                class="w-full rounded-lg bg-blue-600 hover:bg-blue-700 text-white py-2 text-sm font-semibold transition disabled:opacity-60"
                on:click={handleCopyPaymentCode}
                disabled={!paymentCode}
              >
                {paymentCopyFeedback ? paymentCopyFeedback : 'Copiar código Pix'}
              </button>
            </div>

            <div class="flex-1 space-y-4">
              <div class="rounded-lg border border-amber-200 bg-amber-50 text-amber-900 px-3 py-2 text-sm">
                <p class="font-semibold text-amber-900">Tempo restante</p>
                <p class="text-3xl font-mono tracking-widest">{formatCountdown(paymentCountdownMs)}</p>
              </div>

              <div class="space-y-2">
                <label class="text-sm font-medium text-gray-700 dark:text-gray-300" for="payment-code-copy">Código Pix copia e cola</label>
                <textarea
                  id="payment-code-copy"
                  class="w-full text-sm rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-2 resize-none"
                  rows="4"
                  readonly
                  value={paymentCode}
                ></textarea>
              </div>

              {#if paymentStatusMessage}
                <div class="rounded-lg border border-blue-200 bg-blue-50 text-blue-900 px-3 py-2 text-sm">
                  {paymentStatusMessage}
                </div>
              {/if}
              {#if paymentError}
                <div class="rounded-lg border border-red-200 bg-red-50 text-red-900 px-3 py-2 text-sm">
                  {paymentError}
                </div>
              {/if}

              <div class="flex flex-wrap gap-2">
                <button
                  type="button"
                  class="flex-1 min-w-[140px] inline-flex items-center justify-center rounded-lg border border-gray-300 dark:border-gray-700 px-3 py-2 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-60"
                  on:click={handleRetryPaymentCheck}
                  disabled={isCheckingPayment}
                >
                  {isCheckingPayment ? 'Verificando...' : 'Reverificar agora'}
                </button>
                <button
                  type="button"
                  class="flex-1 min-w-[140px] inline-flex items-center justify-center rounded-lg border border-red-300 px-3 py-2 text-sm font-semibold text-red-600 hover:bg-red-50"
                  on:click={handleCancelPaymentFlow}
                >
                  Cancelar pagamento
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {/if}

  {#if paymentLoadingVisible}
    <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 backdrop-blur-sm">
      <div class="flex flex-col items-center gap-4 text-white">
        <div class="w-12 h-12 border-4 border-white/30 border-t-white rounded-full animate-spin"></div>
        <p class="text-base font-semibold">Gerando QR Code do Pix...</p>
      </div>
    </div>
  {/if}

  {#if paymentSuccessOverlayVisible}
    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm px-4">
      <div class="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 p-6 text-center space-y-4 shadow-2xl">
        <div class="text-green-600 dark:text-green-400 flex justify-center">
          <svg class="w-16 h-16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 6L9 17l-5-5" />
          </svg>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-50">Pagamento confirmado!</h3>
        <p class="text-gray-600 dark:text-gray-300">{paymentSuccessMessage || 'A CPR foi emitida com sucesso. Você será redirecionado para o histórico.'}</p>
        <button
          type="button"
          class="w-full rounded-lg bg-green-600 hover:bg-green-700 text-white font-semibold py-2"
          on:click={handlePaymentSuccessAcknowledge}
        >
          Ir para histórico de CPRs
        </button>
      </div>
    </div>
  {/if}
</div>