<div class="container">
    <h1>{{ 'import.title' | translate }}</h1>
    
    <div class="progress-indicator">
        <div class="step" ng-class="{active: step >= 1, completed: step > 1}">
            <span class="step-number">1</span>
            <span class="step-label">Méthode</span>
        </div>
        <div class="step" ng-class="{active: step >= 2, completed: step > 2}">
            <span class="step-number">2</span>
            <span class="step-label">Véhicule</span>
        </div>
        <div class="step" ng-class="{active: step >= 3, completed: step > 3}">
            <span class="step-number">3</span>
            <span class="step-label">Valeur</span>
        </div>
        <div class="step" ng-class="{active: step >= 4}">
            <span class="step-number">4</span>
            <span class="step-label">Génération</span>
        </div>
    </div>

    <!-- ÉTAPE 1: Méthode -->
    <div ng-show="step === 1" class="form-section">
        <h2>Choisissez votre méthode de saisie</h2>
        <div class="method-selector">
            <button class="method-card" ng-click="selectMethod('ocr')">
                <i class="icon-camera"></i>
                <h3>Scanner la carte grise</h3>
                <p>Extraction automatique par IA</p>
            </button>
            <button class="method-card" ng-click="selectMethod('manual')">
                <i class="icon-keyboard"></i>
                <h3>Saisie manuelle</h3>
                <p>Remplir le formulaire</p>
            </button>
        </div>
    </div>

    <!-- ÉTAPE 2: OCR ou formulaire véhicule -->
    <div ng-show="step === 2" class="form-section">
        <div ng-if="method === 'ocr'" class="ocr-upload">
            <h2>Photographier la carte grise</h2>
            <div class="upload-zone" ng-click="triggerFileInput()">
                <input type="file" id="file-input" accept="image/*" capture="camera" 
                       style="display:none" ng-model="registrationFile" 
                       onchange="angular.element(this).scope().handleFileSelect(this)">
                <i class="icon-upload"></i>
                <p>Cliquez ou déposez l'image ici</p>
            </div>
            <div ng-if="ocrLoading" class="loading">
                <div class="spinner"></div>
                <p>Extraction en cours...</p>
            </div>
        </div>

        <form name="vehicleForm" ng-show="!ocrLoading">
            <fieldset>
                <legend>Informations du véhicule</legend>
                
                <div class="form-group">
                    <label>VIN (17 caractères) *</label>
                    <input type="text" ng-model="vehicle.vin" maxlength="17" 
                           ng-change="validateVIN()" required>
                    <span ng-if="vinValidation.invalid" class="error">
                        VIN invalide
                    </span>
                    <span ng-if="vinValidation.country" class="info">
                        Pays détecté: {{ vinValidation.country }}
                    </span>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>Marque *</label>
                        <input type="text" ng-model="vehicle.brand" required>
                    </div>
                    <div class="form-group">
                        <label>Modèle *</label>
                        <input type="text" ng-model="vehicle.model" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>Année</label>
                        <input type="number" ng-model="vehicle.year" min="1900" max="2025">
                    </div>
                    <div class="form-group">
                        <label>Type de carburant *</label>
                        <select ng-model="vehicle.fuel_type" ng-change="updateClassification()" required>
                            <option value="">Sélectionner...</option>
                            <option value="essence">Essence</option>
                            <option value="diesel">Diesel</option>
                            <option value="electrique">Électrique</option>
                            <option value="hybride">Hybride</option>
                            <option value="hybride_plugin">Hybride rechargeable</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>Cylindrée (cm³)</label>
                        <input type="number" ng-model="vehicle.cylinder_capacity" 
                               ng-change="updateClassification()">
                    </div>
                    <div class="form-group">
                        <label>Poids à vide (kg) *</label>
                        <input type="number" ng-model="vehicle.weight_empty" 
                               ng-change="updateClassification()" required>
                    </div>
                    <div class="form-group">
                        <label>PTAC (kg) *</label>
                        <input type="number" ng-model="vehicle.weight_total" 
                               ng-change="updateClassification()" required>
                    </div>
                </div>

                <!-- Classification TARES automatique -->
                <div ng-if="classification" class="classification-result">
                    <h4>Classification douanière</h4>
                    <p><strong>Code TARES:</strong> {{ classification.commodity_code }}</p>
                    <p><strong>Description:</strong> {{ classification.description }}</p>
                    
                    <div ng-if="classification.needs_user_selection">
                        <label>Sélectionnez la clé statistique:</label>
                        <div ng-repeat="(key, desc) in classification.available_keys">
                            <label>
                                <input type="radio" ng-model="vehicle.statistical_key" 
                                       ng-value="key" required>
                                {{ key }} - {{ desc }}
                            </label>
                        </div>
                    </div>
                </div>
            </fieldset>

            <button type="button" class="btn btn-secondary" ng-click="step = 1">
                Retour
            </button>
            <button type="button" class="btn btn-primary" ng-click="nextStep()" 
                    ng-disabled="vehicleForm.$invalid">
                Continuer
            </button>
        </form>
    </div>

    <!-- ÉTAPE 3: Valeur et douane -->
    <div ng-show="step === 3" class="form-section">
        <form name="valuationForm">
            <fieldset>
                <legend>Informations douanières</legend>
                
                <div class="form-group">
                    <label>Pays d'expédition *</label>
                    <select ng-model="declaration.dispatch_country" required>
                        <option value="">Sélectionner...</option>
                        <option ng-repeat="(code, name) in countries" value="{{ code }}">
                            {{ name }}
                        </option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Mode de transport</label>
                    <select ng-model="declaration.transport_mode">
                        <option value="9">Autopropulsion</option>
                        <option value="3">Trafic routier</option>
                        <option value="2">Trafic ferroviaire</option>
                        <option value="4">Trafic aérien</option>
                        <option value="8">Trafic par eau</option>
                    </select>
                </div>
            </fieldset>

            <fieldset>
                <legend>Valorisation</legend>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>Prix d'achat *</label>
                        <input type="number" step="0.01" ng-model="declaration.purchase_price" 
                               ng-change="calculateTotal()" required>
                    </div>
                    <div class="form-group">
                        <label>Devise *</label>
                        <select ng-model="declaration.purchase_currency" 
                                ng-change="calculateTotal()" required>
                            <option ng-repeat="(code, name) in currencies" value="{{ code }}">
                                {{ code }}
                            </option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>Frais de transport</label>
                        <input type="number" step="0.01" ng-model="declaration.transport_cost" 
                               ng-change="calculateTotal()">
                    </div>
                    <div class="form-group">
                        <label>Autres frais</label>
                        <input type="number" step="0.01" ng-model="declaration.other_costs" 
                               ng-change="calculateTotal()">
                    </div>
                </div>

                <div class="total-display" ng-if="totalCHF">
                    <h4>Total en CHF: {{ totalCHF | currency:'CHF ' }}</h4>
                    <p class="info">Taux utilisé: 1 {{ declaration.purchase_currency }} = {{ exchangeRate }} CHF</p>
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" ng-model="declaration.is_relocation">
                        Importation dans le cadre d'un déménagement (TVA 0%)
                    </label>
                </div>
            </fieldset>

            <fieldset>
                <legend>Vos coordonnées</legend>
                
                <div class="form-row">
                    <div class="form-group">
                        <label>Nom *</label>
                        <input type="text" ng-model="declaration.user_name" required>
                    </div>
                    <div class="form-group">
                        <label>Prénom</label>
                        <input type="text" ng-model="declaration.user_firstname">
                    </div>
                </div>

                <div class="form-group">
                    <label>Adresse</label>
                    <input type="text" ng-model="declaration.user_address">
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>NPA *</label>
                        <input type="text" ng-model="declaration.user_zip" required>
                    </div>
                    <div class="form-group">
                        <label>Ville *</label>
                        <input type="text" ng-model="declaration.user_city" required>
                    </div>
                </div>

                <div class="form-group">
                    <label>IDE (entreprises)</label>
                    <input type="text" ng-model="declaration.user_ide" 
                           placeholder="CHE-XXX.XXX.XXX">
                </div>
            </fieldset>

            <button type="button" class="btn btn-secondary" ng-click="step = 2">
                Retour
            </button>
            <button type="button" class="btn btn-primary" ng-click="generateDeclaration()" 
                    ng-disabled="valuationForm.$invalid || generating">
                <span ng-if="!generating">Générer la déclaration</span>
                <span ng-if="generating">Génération en cours...</span>
            </button>
        </form>
    </div>

    <!-- ÉTAPE 4: Résultat -->
    <div ng-show="step === 4" class="form-section result-section">
        <div class="success-message">
            <i class="icon-check-circle"></i>
            <h2>Déclaration générée avec succès !</h2>
            <p>Votre fichier XML e-dec a été téléchargé automatiquement.</p>
        </div>

        <div class="next-steps">
            <h3>Prochaines étapes:</h3>
            <ol>
                <li>Ouvrez le portail e-dec de la douane suisse</li>
                <li>Importez le fichier XML téléchargé</li>
                <li>Vérifiez les informations</li>
                <li>Soumettez votre déclaration</li>
            </ol>
        </div>

        <div class="action-buttons">
            <button class="btn btn-primary" ng-click="resetForm()">
                Nouvelle déclaration
            </button>
            <a href="https://www.ezv.admin.ch/ezv/fr/home/declaration-en-douane/s-acquitter-de-ses-obligations-douanieres/importation-en-suisse/e-dec--declaration-de-marchandises--importation-.html" 
               class="btn btn-secondary" target="_blank">
                Portail e-dec
            </a>
        </div>
    </div>
</div>
