@extends('layouts.app')

@section('content')
<h3 class="mb-3">Header Mapping & Import Options</h3>
<form method="POST" action="{{ route('imports.execute') }}" class="card" id="mappingForm">
    @csrf
    <input type="hidden" name="stored_path" value="{{ $stored_path }}">
    <input type="hidden" name="file_name" value="{{ $file_name }}">

    <div class="card-body">
        <div class="alert alert-info mb-3">
            <strong>File:</strong> {{ $file_name }}<br>
            <strong>Detected headers:</strong> {{ count($headers) }}
            @if(isset($matched_profile) && $matched_profile)
                <br><strong>Auto-matched profile:</strong> {{ $matched_profile->name }}
            @endif
        </div>

        <div class="row g-3 mb-3">
            <div class="col-md-4"><label class="form-label">Global Tag (mandatory)</label><input class="form-control" name="tag" required placeholder="e.g. Expo Visitors"></div>
            <div class="col-md-4"><label class="form-label">Global Source (optional)</label><input class="form-control" name="source" placeholder="e.g. IndiaMART"></div>
            <div class="col-md-4">
                <label class="form-label">Import Mode</label>
                <select class="form-select" name="import_mode">
                    <option value="safe_merge">SAFE MERGE (default)</option>
                    <option value="overwrite">OVERWRITE</option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">Dedupe Strategy</label>
                <select class="form-select" name="dedupe_strategy">
                    <option value="advanced">Advanced: Email OR Phone OR Composite (DEFAULT)</option>
                    <option value="email">Email</option>
                    <option value="phone">Phone</option>
                    <option value="email_or_phone">Email OR Phone</option>
                    <option value="composite">Composite: full_name + company (+ city if available)</option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">Normalization</label>
                <div class="d-flex flex-wrap gap-3 pt-2">
                    <label class="form-check"><input class="form-check-input" type="checkbox" name="normalization[trim]" value="1" checked><span class="form-check-label">Trim spaces</span></label>
                    <label class="form-check"><input class="form-check-input" type="checkbox" name="normalization[title_case_names]" value="1" checked><span class="form-check-label">Title case names</span></label>
                    <label class="form-check"><input class="form-check-input" type="checkbox" name="normalization[lowercase_email]" value="1" checked><span class="form-check-label">Lowercase email</span></label>
                    <label class="form-check"><input class="form-check-input" type="checkbox" name="normalization[phone_normalize]" value="1" checked><span class="form-check-label">Phone normalize</span></label>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-md-4"><label class="form-label">Save Mapping As Profile?</label><select class="form-select" name="save_mapping_profile"><option value="0">No</option><option value="1">Yes</option></select></div>
            <div class="col-md-8"><label class="form-label">Profile Name</label><input class="form-control" name="mapping_profile_name" placeholder="e.g. Indiamart Leads"></div>
            <div class="col-md-4"><label class="form-label">Create Missing Dynamic Schema?</label><select class="form-select" name="create_missing_dynamic_schema"><option value="0">No (force remap/ignore)</option><option value="1">Yes create + continue</option></select></div>
        </div>

        <h5 class="mb-2">Header Mapping</h5>
        <div class="table-responsive border rounded">
            <table class="table table-sm align-middle mb-0" id="mappingTable">
                <thead class="table-light">
                    <tr>
                        <th style="width:20%">Excel Header</th>
                        <th style="width:20%">Target Type</th>
                        <th style="width:20%">Customer/Pseudo Field</th>
                        <th style="width:20%">Dynamic Table</th>
                        <th style="width:20%">Target Field</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $effectiveMap = $profile_mapping ?? ($matched_profile ? $matched_profile->fields->mapWithKeys(fn($f)=>[$f->excel_header => ['target_type'=>$f->target_type,'target_table'=>$f->target_table,'target_field'=>$f->target_field,'is_ignored'=>$f->is_ignored]])->all() : $auto_mapping);
                        $customerFields = ['first_name','last_name','full_name','email','phone','alt_phone','address_line1','address_line2','city','state','pincode','country','company','designation','department','industry','source','primary_tag'];
                    @endphp
                    @foreach($headers as $i => $header)
                        @php
                            $rowMap = $effectiveMap[$header] ?? ['target_type'=>'ignore','target_field'=>null,'target_table'=>null];
                        @endphp
                        <tr class="{{ ($rowMap['target_type'] ?? 'ignore') === 'ignore' ? 'table-warning' : '' }}">
                            <td>
                                <strong>{{ $header }}</strong>
                                <input type="hidden" name="mapping[{{ $header }}][excel_header]" value="{{ $header }}">
                            </td>
                            <td>
                                <select class="form-select form-select-sm target-type" name="mapping[{{ $header }}][target_type]">
                                    <option value="customer" @selected(($rowMap['target_type'] ?? '')==='customer')>Customer Field</option>
                                    <option value="pseudo" @selected(($rowMap['target_type'] ?? '')==='pseudo')>Pseudo (TAG/SOURCE)</option>
                                    <option value="dynamic_table" @selected(($rowMap['target_type'] ?? '')==='dynamic_table')>Custom Table</option>
                                    <option value="eav" @selected(($rowMap['target_type'] ?? '')==='eav')>Store in Attributes (EAV)</option>
                                    <option value="ignore" @selected(($rowMap['target_type'] ?? 'ignore')==='ignore')>Ignore</option>
                                </select>
                            </td>
                            <td>
                                <select class="form-select form-select-sm customer-field" name="mapping[{{ $header }}][target_field]">
                                    <option value="">-- select --</option>
                                    @foreach($customerFields as $field)
                                        <option value="{{ $field }}" @selected(($rowMap['target_type'] ?? '')==='customer' && ($rowMap['target_field'] ?? '')===$field)>{{ $field }}</option>
                                    @endforeach
                                    <option value="TAG" @selected(($rowMap['target_type'] ?? '')==='pseudo' && ($rowMap['target_field'] ?? '')==='TAG')>TAG</option>
                                    <option value="SOURCE" @selected(($rowMap['target_type'] ?? '')==='pseudo' && ($rowMap['target_field'] ?? '')==='SOURCE')>SOURCE</option>
                                    <option value="{{ \Illuminate\Support\Str::snake($header) }}" @selected(($rowMap['target_type'] ?? '')==='eav')>EAV: {{ \Illuminate\Support\Str::snake($header) }}</option>
                                </select>
                            </td>
                            <td>
                                <input class="form-control form-control-sm" name="mapping[{{ $header }}][target_table]" value="{{ $rowMap['target_table'] ?? '' }}" list="dynamicTables" placeholder="dataset_expo_visitors">
                            </td>
                            <td>
                                <input class="form-control form-control-sm" name="mapping[{{ $header }}][target_field_custom]" value="{{ ($rowMap['target_type'] ?? '')==='dynamic_table' ? ($rowMap['target_field'] ?? '') : '' }}" placeholder="{{ \Illuminate\Support\Str::snake($header) }}">
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <datalist id="dynamicTables">
            @foreach($dynamicTables as $t)
                <option value="{{ $t->table_name }}">{{ $t->label }}</option>
            @endforeach
        </datalist>

        <div class="mt-3">
            <h6>Preview Rows</h6>
            <div class="table-responsive border rounded">
                <table class="table table-sm mb-0">
                    <thead class="table-light"><tr>@foreach($headers as $header)<th>{{ $header }}</th>@endforeach</tr></thead>
                    <tbody>
                        @foreach($rows as $row)
                            <tr>@foreach($headers as $header)<td>{{ $row[$header] ?? '' }}</td>@endforeach</tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="alert alert-warning mt-3 mb-0">
            <strong>Unmapped headers detected:</strong> highlight rows in yellow. For each, choose Ignore, Customer Field, Existing Custom Table, Create New Custom Table (enter new table name + field), or Store in Attributes (EAV).
        </div>
    </div>

    <div class="card-footer d-flex justify-content-between">
        <a href="{{ route('imports.index') }}" class="btn btn-outline-secondary">Back</a>
        <button class="btn btn-primary">Start Import</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.getElementById('mappingForm').addEventListener('submit', function () {
    document.querySelectorAll('#mappingTable tbody tr').forEach(function (tr) {
        const type = tr.querySelector('.target-type').value;
        const customerField = tr.querySelector('.customer-field');
        const customField = tr.querySelector('input[name$="[target_field_custom]"]');
        const tableInput = tr.querySelector('input[name$="[target_table]"]');

        if (type === 'dynamic_table') {
            customerField.name = customerField.name.replace('[target_field]', '[target_field_unused]');
            customField.name = customField.name.replace('[target_field_custom]', '[target_field]');
            if (!customField.value.trim()) {
                customField.value = 'col_' + Math.random().toString(36).slice(2,8);
            }
        } else if (type === 'eav') {
            customerField.name = customerField.name.replace('[target_field]', '[target_field]');
            if (!customerField.value) {
                customerField.value = customField.placeholder || 'attribute_key';
            }
            tableInput.value = '';
        } else {
            customerField.name = customerField.name.replace('[target_field_unused]', '[target_field]');
            customField.name = customField.name.replace('[target_field]', '[target_field_custom]');
            if (type !== 'dynamic_table') tableInput.value = '';
        }
    });
});
</script>
@endpush