<div class="container import-export">
  <div class="notifications-container" ng-if="notifications.length > 0">
    <div ng-repeat="notification in notifications" class="notification notification-{{notification.type}}" ng-class="{'notification-visible': notification.visible, 'notification-hidden': !notification.visible}">
      <div class="notification-content">
        <span class="notification-message">{{notification.message}}</span>
        <button class="notification-close" ng-click="hideNotification(notification.id)">×</button>
      </div>
    </div>
  </div>
  <h1>{{ t('import_page_title') }}</h1>
  <div class="progress-bar" ng-show="step > 1">
    <div class="progress-step" ng-class="{active: step >= 1, completed: step > 1}">
      <span class="step-num">1</span>
      <span class="step-label">{{ t('method') }}</span>
    </div>
    <div class="progress-step" ng-class="{active: step >= 2, completed: step > 2}">
      <span class="step-num">2</span>
      <span class="step-label">{{ t('vehicle') }}</span>
    </div>
    <div class="progress-step" ng-class="{active: step >= 3, completed: step > 3}">
      <span class="step-num">3</span>
      <span class="step-label">{{ t('declaration') }}</span>
    </div>
    <div class="progress-step" ng-class="{active: step >= 4, completed: submissionResult}">
      <span class="step-num">4</span>
      <span class="step-label">{{ t('result') }}</span>
    </div>
  </div>
  <div ng-show="step === 1" class="step-content">
    <h2 style="text-align: center; margin-bottom: 2rem;">{{ t('choose_input_method') }}</h2>
    <div class="method-cards">
      <div class="method-card" ng-click="selectMethod('ocr')">
        <div class="method-icon">📸</div>
        <h3>{{ t('scan_registration_card') }}</h3>
        <p>{{ t('auto_extraction_ai') }}</p>
      </div>
      <div class="method-card" ng-click="selectMethod('manual')">
        <div class="method-icon">⌨️</div>
        <h3>{{ t('manual_input') }}</h3>
        <p>{{ t('fill_form_step_by_step') }}</p>
      </div>
    </div>
  </div>
  <div ng-show="step === 2" class="step-content">
    <h2 style="text-align: center;">{{ t('vehicle_info') }}</h2>
    <div ng-if="method === 'ocr'" class="ocr-section">
      <div class="upload-box" ng-click="triggerFileInput()">
        <label class="upload-label">
          <span ng-if="!ocrLoading">📷 {{ t('upload_photo_pdf') }}</span>
          <span ng-if="ocrLoading">⏳ {{ t('extraction_in_progress') }}...</span>
        </label>
        <input id="file-upload" type="file" accept="image/*,application/pdf" style="display:none" onchange="const context = window.location.pathname.includes('/import') ? 'import' : 'export'; angular.element(this).scope().handleFileSelect(event, context)">
      </div>
      <p class="disclaimer" style="margin-top: 1rem; padding: 1rem; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 6px;">
        <strong>ℹ️ {{ t('privacy') }}:</strong> {{ t('privacy_notice_ocr') }}
      </p>
      <div ng-if="ocrCountdownActive" class="ocr-countdown-notice">
        <p>
          <strong>⚠️ {{ t('verify_extracted_data') }}</strong>
        </p>
        <p>{{ t('ocr_countdown_text') }}</p>
        <div class="countdown-timer">{{ ocrCountdown }}s</div>
      </div>
      <div class="form-actions" style="margin-top: 1.5rem;">
        <button type="button" class="btn btn-secondary" ng-click="prevStep()">{{ t('back') }}</button>
      </div>
    </div>
    <form name="vehicleForm" class="form" ng-show="method === 'manual' || vehicle.vin || vehicle.brand" novalidate>
      <div class="form-group">
        <label>{{ t('vin_label') }} *</label>
        <input type="text" name="vin" ng-model="vehicle.vin" maxlength="17" minlength="17" ng-change="validateVIN(); clearValidationError(this)" required style="text-transform:uppercase">
        <span class="hint" ng-if="vinValid">{{ t('vin_valid') }}: {{declaration.dispatch_country}}</span>
        <span class="error" ng-if="vinValid === false">{{ t('vin_invalid') }}</span>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>{{ t('brand') }} *</label>
          <input type="text" name="brand" ng-model="vehicle.brand" ng-change="clearValidationError(this)" required>
        </div>
        <div class="form-group">
          <label>{{ t('model') }} *</label>
          <input type="text" name="model" ng-model="vehicle.model" ng-change="clearValidationError(this)" required>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>{{ t('year_first_registration') }}</label>
          <input type="number" ng-model="vehicle.year" min="1900" max="2026">
        </div>
        <div class="form-group">
          <label>{{ t('fuel_type') }} *</label>
          <select name="fuel_type" ng-model="vehicle.fuel_type" ng-change="updateClassification(); clearValidationError(this)" required>
            <option value="">{{ t('select') }}...</option>
            <option value="essence">{{ t('petrol') }}</option>
            <option value="diesel">{{ t('diesel') }}</option>
            <option value="electrique">{{ t('electric') }}</option>
            <option value="hybride">{{ t('hybrid') }}</option>
            <option value="hybride_plugin">{{ t('hybrid_plugin') }}</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>{{ t('cylinder_capacity') }} (cm³)</label>
          <input type="number" ng-model="vehicle.cylinder_capacity" ng-change="updateClassification()" ng-disabled="vehicle.fuel_type === 'electrique'">
        </div>
        <div class="form-group">
          <label>{{ t('weight_empty') }} (kg) *</label>
          <input type="number" name="weight_empty" ng-model="vehicle.weight_empty" ng-change="updateClassification(); clearValidationError(this)" required>
        </div>
        <div class="form-group">
          <label>{{ t('weight_total') }} (kg) *</label>
          <input type="number" name="weight_total" ng-model="vehicle.weight_total" ng-change="updateClassification(); clearValidationError(this)" required>
        </div>
      </div>
      <!--
            <div class="classification-info" ng-if="classification"><h4>📋 {{ t('estimated_classification') }}</h4><p><strong>{{ t('tares_code') }}:</strong> {{ classification.commodity_code }} - {{ classification.description }}
              </p><div ng-if="classification.needs_user_selection"><p><strong>{{ t('select_statistical_key') }}: *</strong></p><label ng-repeat="(key, desc) in classification.available_keys" class="radio-label" style="margin-right: 1rem;"><input type="radio" ng-model="vehicle.statistical_key" ng-value="key" required>
                {{ key }} - {{ desc }}
                </label></div><p ng-if="!classification.needs_user_selection"><strong>{{ t('statistical_key') }}:</strong> {{ vehicle.statistical_key }} - {{ classification.statistical_key_description }}
              </p></div>
            -->
      <div class="classification-error-section" ng-if="classificationError" style="margin-top: 1.5rem; padding: 1.5rem; border: 2px solid #dc3545; border-radius: 8px; background-color: #f8d7da; color: #721c24; text-align: center;">
        <h4 style="color: #dc3545; margin-top: 0; margin-bottom: 0.5rem;">❌ {{ t('classification_error_title') }}</h4>
        <p style="margin-bottom: 1.5rem;">{{ classificationError }}</p>
        <p style="font-size: 0.9em; margin-bottom: 1rem;">
          {{ t('classification_not_found_action') }}
        </p>
        <button type="button" class="btn btn-warning" ng-click="reportClassificationError()" ng-disabled="reporting" style="display: inline-flex; align-items: center; gap: 0.5rem;">
          <i class="fa fa-flag"></i>
          {{ reporting ? (t('reporting_in_progress')) : (t('report_error_button')) }}
        </button>
      </div>
      <div class="form-actions" style="margin-top: 2rem;">
        <button type="button" class="btn btn-secondary" ng-click="prevStep()">{{ t('back') }}</button>
        <button type="button" class="btn btn-primary" ng-click="nextStep()" ng-if="!classificationError" ng-disabled="(classification && classification.needs_user_selection && !vehicle.statistical_key) || ocrCountdownActive">
          {{ t('continue') }} → </button>
      </div>
    </form>
    <div class="error" ng-if="ocrAttempted && !ocrLoading && !vehicle.vin && !vehicle.brand" style="text-align:center; margin-top:1rem;">
      {{ t('ocr_failed_retry') }}
    </div>
  </div>
  <div ng-show="step === 3" class="step-content">
    <h2 style="text-align: center;">{{ t('declaration_info') }}</h2>
    <form name="valuationForm" class="form" novalidate>
      <fieldset>
        <legend>{{ t('involved_parties') }}</legend>
        <div style="background: #f0f0f0; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
          <h4 style="margin: 0;">📍 {{ t('consignee') }}</h4>
          <p class="disclaimer" style="margin-bottom: 1rem;">{{ t('consignee_definition') }}</p>
          <div class="form-row">
            <div class="form-group">
              <label>{{ t('name_or_company') }} *</label>
              <input type="text" name="consignee_name" ng-model="parties.consignee.name" ng-change="clearValidationError(this)" required>
            </div>
            <div class="form-group">
              <label>{{ t('firstname') }}</label>
              <input type="text" name="consignee_firstname" ng-model="parties.consignee.firstname" placeholder="{{ t('for_individuals') }}" ng-disabled="consigneeHasIDE" ng-required="!consigneeHasIDE">
            </div>
          </div>
          <div class="form-group">
            <label>{{ t('address_street') }} *</label>
            <input type="text" name="consignee_address" ng-model="parties.consignee.address" required>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>{{ t('postal_code_ch') }} *</label>
              <input type="text" name="consignee_zip" ng-model="parties.consignee.zip" pattern="[0-9]{4}" maxlength="4" required placeholder="Ex: 1200">
              <small style="color: #666;">{{ t('postal_code_ch_hint') }}</small>
            </div>
            <div class="form-group">
              <label>{{ t('city') }} *</label>
              <input type="text" name="consignee_city" ng-model="parties.consignee.city" required>
            </div>
          </div>
          <div class="form-group">
            <label>{{ t('ide_number') }}</label>
            <input type="text" name="consignee_ide" ng-model="parties.consignee.ide" placeholder="{{ t('companies_only') }}" ng-disabled="consigneeHasFirstname" ng-required="!consigneeHasFirstname">
          </div>
        </div>
        <div style="background: #e7f3ff; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h4 style="margin-top: 0;">📦 {{ t('importer') }}</h4>
            <button type="button" class="btn copy btn-secondary" style="font-size: 0.9rem; padding: 0.5rem 1rem;" ng-click="copyConsigneeToImporter()"> 📋 {{ t('copy_from_consignee') }}
            </button>
          </div>
          <p class="disclaimer" style="margin-bottom: 1rem;">{{ t('importer_definition') }}</p>
          <div class="form-row">
            <div class="form-group">
              <label>{{ t('name_or_company') }} *</label>
              <input type="text" name="importer_name" ng-model="parties.importer.name" ng-change="clearValidationError(this)" required>
            </div>
            <div class="form-group">
              <label>{{ t('firstname') }}</label>
              <input type="text" name="importer_firstname" ng-model="parties.importer.firstname" placeholder="{{ t('for_individuals') }}" ng-disabled="importerHasIDE" ng-required="!importerHasIDE">
            </div>
          </div>
          <div class="form-group">
            <label>{{ t('address_street') }} *</label>
            <input type="text" name="importer_address" ng-model="parties.importer.address" required>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>{{ t('postal_code') }} *</label>
              <input type="text" name="importer_zip" ng-model="parties.importer.zip" pattern="[0-9]{4}" maxlength="4" required placeholder="Ex: 1200">
            </div>
            <div class="form-group">
              <label>{{ t('city') }} *</label>
              <input type="text" name="importer_city" ng-model="parties.importer.city" required>
            </div>
          </div>
          <div class="form-group">
            <label>{{ t('ide_number') }}</label>
            <input type="text" name="importer_ide" ng-model="parties.importer.ide" placeholder="{{ t('companies_only') }}" ng-disabled="importerHasFirstname" ng-required="!importerHasFirstname">
          </div>
        </div>
        <div style="background: #fff9e6; padding: 1.5rem; border-radius: 8px;">
          <h4 style="margin-top: 0;">✏️ {{ t('declarant') }}</h4>
          <p class="disclaimer" style="margin-bottom: 1rem;">{{ t('declarant_definition') }}</p>
          <div class="form-group">
            <label style="font-weight: bold;">{{ t('who_is_declarant') }} *</label>
            <div style="display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 0.5rem;">
              <label class="radio-label" style="cursor: pointer;">
                <input type="radio" ng-model="declarantType" value="importer" style="margin-right: 0.5rem;">
                {{ t('the_importer') }}
              </label>
              <label class="radio-label" style="cursor: pointer;">
                <input type="radio" ng-model="declarantType" value="consignee" style="margin-right: 0.5rem;">
                {{ t('the_consignee') }}
              </label>
              <label class="radio-label" style="cursor: pointer;">
                <input type="radio" ng-model="declarantType" value="other" style="margin-right: 0.5rem;">
                {{ t('other_person') }}
              </label>
            </div>
          </div>
          <div ng-if="declarantType === 'other'" style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid #ffc107;">
            <h5 style="margin-bottom: 1rem;">{{ t('declarant_info') }}</h5>
            <div class="form-row">
              <div class="form-group">
                <label>{{ t('name_or_company') }} *</label>
                <input type="text" name="declarant_name" ng-model="parties.declarant.name" ng-required="declarantType === 'other'">
              </div>
              <div class="form-group">
                <label>{{ t('firstname') }}</label>
                <input type="text" name="declarant_firstname" ng-model="parties.declarant.firstname" placeholder="{{ t('for_individuals') }}" ng-disabled="declarantHasIDE" ng-required="declarantType === 'other' && !declarantHasIDE">
              </div>
            </div>
            <div class="form-group">
              <label>{{ t('address_street') }} *</label>
              <input type="text" name="declarant_address" ng-model="parties.declarant.address" ng-required="declarantType === 'other'">
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>{{ t('postal_code') }} *</label>
                <input type="text" name="declarant_zip" ng-model="parties.declarant.zip" ng-required="declarantType === 'other'">
              </div>
              <div class="form-group">
                <label>{{ t('city') }} *</label>
                <input type="text" name="declarant_city" ng-model="parties.declarant.city" ng-required="declarantType === 'other'">
              </div>
            </div>
            <div class="form-group">
              <label>{{ t('ide_number') }}</label>
              <input type="text" name="declarant_ide" ng-model="parties.declarant.ide" placeholder="{{ t('optional') }}" ng-disabled="declarantHasFirstname" ng-required="declarantType === 'other' && !declarantHasFirstname">
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>{{ t('customs_regime') }}</legend>
        <div class="form-row">
          <div class="form-group">
            <label>
              {{ t('dispatch_country') }} * <span class="tooltip-icon" ng-click="toggleTooltip('countryMode')" ng-mouseenter="showTooltip('countryMode', true)" ng-mouseleave="showTooltip('countryMode', false)">ℹ️</span>
            </label>
            <div class="tooltip-bubble" ng-show="tooltips.countryMode">
              <strong>{{ t('dispatch_country') }} :</strong>
              <br>
              {{ t('dispatch_country_tooltip') }}
            </div>
            <select name="dispatch_country" ng-model="declaration.dispatch_country" ng-options="code as name for (code, name) in countries" ng-change="clearValidationError(this)" required>
              <option value="">{{ t('select') }}...</option>
            </select>
          </div>
          <div class="form-group">
            <label>
              {{ t('transport_mode') }} * <span class="tooltip-icon" ng-click="toggleTooltip('transportMode')" ng-mouseenter="showTooltip('transportMode', true)" ng-mouseleave="showTooltip('transportMode', false)">ℹ️</span>
            </label>
            <div class="tooltip-bubble" ng-show="tooltips.transportMode">
              <strong>{{ t('transport_modes_title') }}</strong>
              <br> • <strong>{{ t('transport_mode_9') }}</strong> : {{ t('transport_mode_9_desc') }}
              <br> • <strong>{{ t('transport_mode_3') }}</strong> : {{ t('transport_mode_3_desc') }}
              <br> • <strong>{{ t('transport_mode_2') }}</strong> : {{ t('transport_mode_2_desc') }}
              <br> • <strong>{{ t('transport_mode_4') }}</strong> : {{ t('transport_mode_4_desc') }}
              <br> • <strong>{{ t('transport_mode_8') }}</strong> : {{ t('transport_mode_8_desc') }}
              <br> • <strong>{{ t('transport_mode_7') }}</strong> : {{ t('transport_mode_7_desc') }}
            </div>
            <select name="transport_mode" ng-model="declaration.transport_mode" ng-options="mode.value as mode.label for mode in transportModes" ng-change="clearValidationError(this)" required></select>
          </div>
        </div>
        <label class="checkbox-label">
          <input type="checkbox" ng-model="declaration.is_relocation">
          {{ t('relocation_import') }}
          <span class="tooltip-icon" ng-click="toggleTooltip('relocation')" ng-mouseenter="showTooltip('relocation', true)" ng-mouseleave="showTooltip('relocation', false)">ℹ️</span>
        </label>
        <div class="tooltip-bubble" ng-show="tooltips.relocation">
          <strong>{{ t('relocation_tooltip_title') }}</strong>
          <br>
          {{ t('relocation_tooltip_text') }}
        </div>
        <label class="checkbox-label">
          <input type="checkbox" ng-model="declaration.is_iva_exempt">
          {{ t('iva_exempt') }}
          <span class="tooltip-icon" ng-click="toggleTooltip('ivaExempt')" ng-mouseenter="showTooltip('ivaExempt', true)" ng-mouseleave="showTooltip('ivaExempt', false)">ℹ️</span>
        </label>
        <div class="tooltip-bubble" ng-show="tooltips.ivaExempt">
          <strong>{{ t('iva_exempt_tooltip_title') }}</strong>
          <br>
          {{ t('iva_exempt_tooltip_text') }}
        </div>
      </fieldset>
      <fieldset>
        <legend>{{ t('financial_transactions') }}</legend>
        <div class="form-row">
          <div class="form-group">
            <label>{{ t('purchase_price') }} *</label>
            <input type="number" name="purchase_price" step="1" ng-model="declaration.purchase_price" ng-change="calculateTotal(); clearValidationError(this)" required>
          </div>
          <div class="form-group">
            <label>{{ t('invoice_currency') }} *</label>
            <select name="purchase_currency" ng-model="declaration.purchase_currency" ng-change="calculateTotal(); clearValidationError(this)" ng-options="code as code for (code, name) in currencies" required></select>
          </div>
        </div>
        <!-- Alerte prix bas < 2000 CHF -->
        <div ng-if="declaration.purchase_price > 0 && declaration.purchase_price < 2000" style="margin: 1.5rem 0; padding: 1rem; background: #fff3cd; border-left: 4px solid #ff9800; border-radius: 6px;">
          <label class="checkbox-label" style="display: flex; align-items: flex-start; cursor: pointer;">
            <input type="checkbox" ng-model="declaration.price_confirmation" required style="margin-right: 0.5rem; margin-top: 0.2rem;">
            <span>
              <strong>⚠️ {{ t('low_price_warning') || 'Prix inférieur à 2000 CHF' }}</strong>
              <br>
              <span style="font-size: 0.9em;">
                {{ t('low_price_confirmation') || 'Je confirme que le prix d\'achat du véhicule est correct et correspond bien à la valeur réelle de la transaction.' }}
              </span>
            </span>
          </label>
        </div>
        <p>
          <strong>{{ t('additional_costs') }}</strong>
        </p>
        <div class="form-row">
          <div class="form-group">
            <label>{{ t('transport_costs') }}</label>
            <input type="number" step="1" ng-model="declaration.transport_cost" ng-change="calculateTotal()">
          </div>
          <div class="form-group">
            <label>{{ t('other_costs') }}</label>
            <input type="number" step="1" ng-model="declaration.other_costs" ng-change="calculateTotal()">
          </div>
        </div>
        <div class="total-box" ng-if="vatValueCHF > 0">
          <h3>{{ t('total_value_base') }}: ~ {{ vatValueCHF | number:0 }} CHF</h3>
        </div>
      </fieldset>
      <div class="form-actions" ng-if="!showStripeButton">
        <button type="button" class="btn btn-secondary" ng-click="prevStep()">{{ t('back') }}</button>
        <button type="button" class="btn btn-primary" ng-click="prepareDeclaration()" ng-disabled="preparing">
          <span ng-if="!preparing">{{ t('pay_and_validate') }}</span>
          <span ng-if="preparing">{{ t('preparing') }}</span>
        </button>
      </div>
      <div ng-if="showStripeButton" style="text-align: center; margin-top: 2rem; padding: 2rem; background: #f8f9fa; border-radius: 12px; border: 2px solid #28a745;">
        <h3 style="color: #28a745; margin-bottom: 1rem;">{{ t('declaration_ready') }}</h3>
        <p style="margin-bottom: 1.5rem;">{{ t('click_to_pay_securely') }}</p>
        <stripe-buy-button buy-button-id="buy_btn_1SFwe0DLAThCxOAyBJwzWiRV" publishable-key="pk_test_51SF3ZMDLAThCxOAyPFDmPowjqUJyyay34PQZu8SfEHDZaVNFSNCCPjE2dAJYpvHHtqQcR0I23gEstk9V24B83PAw00g4jIHw2r"></stripe-buy-button>
        <p style="margin-top: 1rem; font-size: 0.9rem; color: #666;">
          {{ t('secure_payment_stripe') }}
        </p>
      </div>
		</form>
	</div>
  <div ng-show="step === 4" class="step-content">
    <div ng-if="showProgress" class="progress-section">
      <div class="progress-bar-container">
        <div class="progress-bar" ng-style="{'width': submissionProgress + '%'}"></div>
      </div>
      <p>{{submissionStep}} ({{submissionProgress}}%)</p>
    </div>
    <div ng-if="submissionResult" class="success-content">
      <div class="success-icon">✅</div>
      <h2>{{ t('submission_completed') }}</h2>
      <p>{{ t('submission_completed_text') }}</p>
      <div class="next-steps-box">
        <h3>{{ t('declaration_number') }}: <strong>{{ submissionResult.declarationNumber }}</strong>
        </h3>
        <p style="margin-top:1rem;">{{ t('download_documents_text') }}</p>
        <div class="form-actions" style="justify-content: center; margin-top:1.5rem; gap: 10px;">
          <button class="btn btn-primary" ng-click="downloadPDF(submissionResult.listePath)"> 📥 {{ t('download_import_list') }}
          </button>
          <button class="btn btn-primary" ng-click="downloadPDF(submissionResult.bulletinPath)"> 📥 {{ t('download_delivery_bulletin') }}
          </button>
        </div>
        <hr style="margin: 2rem 0; border-top: 1px solid #ddd;">
        <h4 style="text-align: center;">{{ t('future_access_and_sharing') }}</h4>
        <p style="text-align: center;">{{ t('unique_link_text') }}</p>
        <div class="unique-link-container" style="text-align: center;">
          <a href="/download/{{ sessionToken }}" target="_blank" class="unique-link" style="word-break: break-all; display: block; margin-bottom: 10px;">
            {{ 'monsite.ch/download/' + sessionToken }}
          </a>
          <button class="btn btn-secondary" ng-click="copyLinkToClipboard('/download/' + sessionToken)"> 📋 {{ t('copy_access_link') }}
          </button>
        </div>
        <p style="margin-top:1.5rem; font-size:0.9rem; text-align:center;">
          {{ t('documents_expire_30_days') }}
        </p>
      </div>
      <div class="form-actions" style="justify-content: center; margin-top: 2rem;">
        <button class="btn btn-secondary" ng-click="resetForm()">{{ t('new_declaration') }}</button>
      </div>
    </div>
  </div>
</div>