{% extends "admin/base_site.html" %}
{% load i18n admin_urls import_export_tags %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block extrastyle %}{{ block.super }}
<style>
    .import-export-container select, 
    .import-export-container input[type="file"] {
        width: 100%;
        padding: 8px 12px;
        border: 2px solid #e0e0e0;
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.3s ease;
    }
    
    .import-export-container select:focus, 
    .import-export-container input[type="file"]:focus {
        outline: none;
        border-color: #1976d2;
        box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
    }
    
    .import-export-container button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
    }
</style>
{% endblock %}

{% block extrahead %}{{ block.super }}
  <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
  {% if confirm_form %}
    {{ confirm_form.media }}
  {% else %}
    {{ form.media }}
  {% endif %}
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    &rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
    &rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
    &rsaquo; {% trans 'Import' %}
</div>
{% endblock %}

{% block content %}
<div class="import-export-container" style="max-width: 1200px; margin: 0 auto;">
    <h1 style="color: #1976d2; border-bottom: 2px solid #e3f2fd; padding-bottom: 10px; margin-bottom: 20px;">
        📊 Import Parts Pricing Data
    </h1>

    <div class="import-steps" style="background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%); padding: 20px; border-radius: 8px; margin-bottom: 20px;">
        <h3 style="margin-top: 0; color: #1976d2;">📋 Import Process</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
            <div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #4CAF50;">
                <strong>Step 1:</strong> Choose File Format<br>
                <small>Select CSV or Excel file format</small>
            </div>
            <div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #FF9800;">
                <strong>Step 2:</strong> Select Resource<br>
                <small>Choose pricing import resource</small>
            </div>
            <div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #2196F3;">
                <strong>Step 3:</strong> Upload File<br>
                <small>Upload your pricing data file</small>
            </div>
        </div>
    </div>

    {% if confirm_form %}
        <div class="confirmation-section" style="background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 20px; margin-bottom: 20px;">
            <h3 style="color: #856404; margin-top: 0;">⚠️ Confirm Import</h3>
            <p>Please review the import preview below and confirm the import.</p>
            
            {% if result.has_errors %}
                <div style="background: #f8d7da; border: 1px solid #dc3545; border-radius: 4px; padding: 15px; margin: 10px 0;">
                    <h4 style="color: #721c24; margin-top: 0;">❌ Errors Found</h4>
                    <p>{{ result.base_errors|join:", " }}</p>
                    {% for row_errors in result.row_errors %}
                        <p>Row {{ row_errors.0 }}: {{ row_errors.1|join:", " }}</p>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="import-summary" style="background: white; border-radius: 6px; padding: 15px; margin: 15px 0;">
                <h4 style="margin-top: 0;">📈 Import Summary</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;">
                    <div><strong>New:</strong> {{ result.totals.new }} records</div>
                    <div><strong>Updated:</strong> {{ result.totals.update }} records</div>
                    <div><strong>Deleted:</strong> {{ result.totals.delete }} records</div>
                    <div><strong>Skipped:</strong> {{ result.totals.skip }} records</div>
                    <div><strong>Errors:</strong> {{ result.totals.error }} records</div>
                </div>
            </div>

            <form action="" method="post" style="margin-top: 20px;">
                {% csrf_token %}
                {{ confirm_form.as_p }}
                <div style="display: flex; gap: 10px; margin-top: 20px;">
                    <button type="submit" class="default" style="background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
                        ✅ Confirm Import
                    </button>
                    <a href="{% url opts|admin_urlname:'changelist' %}" class="button" style="background: #6c757d; color: white; text-decoration: none; padding: 10px 20px; border-radius: 4px; display: inline-block;">
                        ❌ Cancel
                    </a>
                </div>
            </form>
        </div>
    {% else %}
        <div class="upload-section" style="background: white; border-radius: 8px; padding: 25px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
            <form action="" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div style="display: grid; gap: 20px;">
                    {% for field in form %}
                        <div class="form-field">
                            <label for="{{ field.id_for_label }}" style="display: block; font-weight: bold; margin-bottom: 5px; color: #333;">
                                {{ field.label }}
                            </label>
                            {% if field.name == 'input_format' %}
                                <div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                                    <small style="color: #666;">Recommended: CSV format for best compatibility</small>
                                </div>
                            {% endif %}
                            {% if field.name == 'resource' %}
                                <div style="background: #e3f2fd; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                                    <small style="color: #1976d2;">
                                        <strong>PartPricingResource:</strong> For importing/updating prices<br>
                                        <strong>PartPricingExportResource:</strong> For exporting current data<br>
                                        <strong>PartBulkDataResource:</strong> For full data export
                                    </small>
                                </div>
                            {% endif %}
                            
                            <div style="position: relative;">
                                {{ field }}
                                {% if field.errors %}
                                    <div style="color: #dc3545; font-size: 12px; margin-top: 5px;">
                                        {{ field.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                    
                    <div class="csv-format-help" style="background: #e8f5e8; border: 1px solid #4CAF50; border-radius: 6px; padding: 15px;">
                        <h4 style="margin-top: 0; color: #2e7d32;">📄 Expected CSV Format</h4>
                        <div style="background: #f1f8e9; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 12px; overflow-x: auto;">
                            Boodmo ID,Part Name,Part Number,Brand,Current MRP (₹),New MRP (₹),In Master Price List,Pack Quantity,HSN Code,GST %<br>
                            12345,"Brake Pad","BP001","Bosch",500.00,520.00,TRUE,1,"8708",18<br>
                            67890,"Oil Filter","OF002","Mann",250.00,260.00,FALSE,1,"8421",18
                        </div>
                        <small style="color: #2e7d32; margin-top: 10px; display: block;">
                            💡 <strong>Tip:</strong> Export existing data first to get the exact format, then modify the "New MRP" column
                        </small>
                    </div>
                </div>

                <div style="margin-top: 30px; text-align: center;">
                    <button type="submit" class="default" style="background: #1976d2; color: white; border: none; padding: 12px 30px; border-radius: 6px; cursor: pointer; font-size: 16px;">
                        📤 Upload and Preview Import
                    </button>
                </div>
            </form>
        </div>
    {% endif %}

    <div class="help-section" style="background: #f8f9fa; border-radius: 6px; padding: 20px; margin-top: 20px;">
        <h3 style="margin-top: 0; color: #495057;">💡 Import Help & Tips</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;">
            <div>
                <h4 style="color: #007bff;">🔍 Before Importing</h4>
                <ul style="color: #666;">
                    <li>Export current data to get the correct format</li>
                    <li>Use "Boodmo ID" as the unique identifier</li>
                    <li>Only modify the "New MRP" column for price updates</li>
                </ul>
            </div>
            <div>
                <h4 style="color: #28a745;">✅ Best Practices</h4>
                <ul style="color: #666;">
                    <li>Test with a small subset first</li>
                    <li>Keep backups of original data</li>
                    <li>Verify price changes after import</li>
                </ul>
            </div>
            <div>
                <h4 style="color: #dc3545;">⚠️ Common Issues</h4>
                <ul style="color: #666;">
                    <li>Missing Boodmo ID (required field)</li>
                    <li>Invalid decimal format for prices</li>
                    <li>Brand name not matching existing records</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}