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

<script>
  import { onMount } 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, companyId as companyIdStore } 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_issue_date',
    'cpr_maturity_date',
    'cpr_reference_date',
    'cpr_profitability_start_date',
    'cpr_payment_start_date',
    'cpr_amortization_start_date',
    'cpr_interest_payment_date',
    'cpr_issue_quantity',
    'cpr_issue_value',
    'cpr_issue_financial_value',
    'cpr_unit_value',
    'cpr_unit_price_value',
    'cpr_interest_unit_price_value',
    'cpr_residual_value',
    'cpr_amortization_percentage',
    'cpr_event_quantity',
    'cpr_creditor_name',
    'cpr_creditor_document_number',
    '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_type_code',
    'cpr_internal_control_number',
    'cpr_isin_code',
    'cpr_electronic_emission_indicator',
    'cpr_automatic_expiration_indicator',
    '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_type_code',
    'cpr_otc_register_account_code',
    'cpr_otc_custodian_account_code',
    'cpr_electronic_emission_indicator',
    'cpr_issue_date',
    'cpr_maturity_date',
    'cpr_issue_quantity',
    'cpr_issue_value',
    'cpr_issue_financial_value',
    'cpr_profitability_start_date',
    'cpr_automatic_expiration_indicator',
    'cpr_collateral_type_code',
    'cpr_collateral_type_name',
    'cpr_constitution_process_indicator',
    'cpr_otc_bondsman_account_code',
    '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_document_deadline_days_number',
    'cpr_place_name',
    '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_scr_type_code',
    'cpr_finality_code',
    'cpr_contract_code',
    'cpr_creditor_name',
    'cpr_creditor_document_number',
    '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: 'Razão Social do Emissor' },
        { key: 'cpr_issuers_document_number', label: 'Documento' },
        { key: 'cpr_issuers_person_type_acronym', label: 'Tipo de pessoa' },
        { key: 'cpr_issuer_legal_nature_code', label: 'Natureza jurídica' },
        { 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' },
        { 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 breadcrumb = [{ label: 'Início' }, { label: 'CPR', active: true }];
  let activeTab = 4;
  const tabs = ['Contrato', 'Registro', 'Emissão'];

  const historyEndpoint = `${apiUrl}/cpr/history`;
  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;

  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 = '';
  }

  function ensureAuthContext() {
    const token = get(authToken);
    if (!token) {
      throw new Error('Sessão expirada. Faça login novamente.');
    }
    const company = Number(get(companyIdStore));
    if (!company || Number.isNaN(company) || company <= 0) {
      throw new Error('company_id inválido. Refaça o login.');
    }
    return { token, company_id: company };
  }

  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' });
  }

  async function fetchHistory() {
    historyLoading = true;
    historyError = '';
    detailError = '';
    detailLoading = false;
    try {
      const { token, company_id } = ensureAuthContext();
      const res = await fetch(historyEndpoint, {
        method: 'POST',
        headers: {
          'content-type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({ company_id })
      });
      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, company_id } = ensureAuthContext();
      const res = await fetch(historyEndpoint, {
        method: 'POST',
        headers: {
          'content-type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({ company_id, 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();
  });

  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();
    isSubmitting = 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')) {
        throw new Error(response?.msg ?? 'Falha ao registrar CPR.');
      }

      submitSuccess = response?.msg ?? 'CPR registrada com sucesso.';
      cprForm = createInitialForm();
      repeatingGroups = createInitialRepeatingGroups();
      activeTab = 4;
    } catch (err) {
      submitError = err?.message ?? 'Falha ao registrar CPR.';
    } finally {
      isSubmitting = false;
    }
  }
</script>

<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">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 + 1}>
                      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 + 1}>
                      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">
                        <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>
      <!-- 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>
</div>