@extends('layouts.dashboard')

@section('content')
    @php
        $summary = $preview['summary'] ?? ['create' => 0, 'update' => 0, 'unchanged' => 0, 'error' => 0];
        $rows = collect($preview['rows'] ?? []);
        $headers = collect($rows->first()['values'] ?? [])->keys();
        $actionTone = fn (string $action) => match ($action) {
            'create' => 'positive',
            'update' => 'primary',
            'error' => 'negative',
            default => 'neutral',
        };
        $formatValue = function ($value): string {
            if ($value instanceof \DateTimeInterface) {
                return $value->format('Y-m-d');
            }

            if (is_array($value)) {
                return json_encode($value, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?: '';
            }

            if ($value === null || $value === '') {
                return '-';
            }

            return (string) $value;
        };
    @endphp

    <div class="main-card flex-import-page">
        <div class="card-title card-title--with-actions">
            <div class="card-header-row card-header-row--title-actions">
                <div class="card-heading-block">
                    <x-ui.breadcrumbs :items="[
                        ['label' => 'Documents'],
                        ['label' => 'Excel flexImport'],
                    ]" />
                    <h3>Excel flexImport</h3>
                </div>
            </div>
        </div>

        <div class="card-body">
            <form method="POST" action="{{ route('flex-import.preview') }}" enctype="multipart/form-data" class="flex-import-upload" data-flex-import-form>
                @csrf

                <label class="flex-import-dropzone" for="flex-import-workbook-input" data-flex-import-dropzone>
                    <input id="flex-import-workbook-input" type="file" name="workbook" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx" data-flex-import-file-input>
                    <span class="flex-import-dropzone__icon" aria-hidden="true">
                        <x-ui.icon name="upload" size="28" />
                    </span>
                    <span class="flex-import-dropzone__copy">
                        <strong data-flex-import-file-label>Drop an Excel workbook here</strong>
                        <small>Workbook must contain kImportTable and kImportData named ranges.</small>
                    </span>
                </label>

                @error('workbook')
                    <div class="form-error">{{ $message }}</div>
                @enderror

                <div class="form-actions flex-import-actions">
                    <button type="submit" class="btn-primary inline">
                        <x-ui.icon name="search" size="13" />
                        Preview workbook
                    </button>

                </div>
            </form>

            @if ($preview)
                <div class="flex-import-preview-header">
                    <div>
                        <h4 class="ui-tab-section-title">Preview</h4>
                        <p class="ui-tab-section-subtitle">
                            {{ $workbook['name'] ?? 'Workbook' }} / {{ $preview['table'] ?? 'Unknown table' }} / {{ count($preview['keys'] ?? []) }} key field(s)
                        </p>
                    </div>
                    <div class="flex-import-preview-actions">
                        <form method="POST" action="{{ route('flex-import.clear') }}">
                            @csrf
                            <button type="submit" class="btn-secondary inline">
                                <x-ui.icon name="x" size="13" />
                                Clear
                            </button>
                        </form>
                        <form method="POST" action="{{ route('flex-import.apply') }}">
                            @csrf
                            <button type="submit" class="btn-primary inline" @disabled(! ($preview['can_apply'] ?? false))>
                                <x-ui.icon name="check" size="13" />
                                Apply import
                            </button>
                        </form>
                    </div>
                </div>

                <div class="flex-import-summary" aria-label="FlexImport summary">
                    <div class="flex-import-summary__item flex-import-summary__item--create">
                        <span>Create</span>
                        <strong>{{ $summary['create'] ?? 0 }}</strong>
                    </div>
                    <div class="flex-import-summary__item flex-import-summary__item--update">
                        <span>Update</span>
                        <strong>{{ $summary['update'] ?? 0 }}</strong>
                    </div>
                    <div class="flex-import-summary__item flex-import-summary__item--unchanged">
                        <span>Unchanged</span>
                        <strong>{{ $summary['unchanged'] ?? 0 }}</strong>
                    </div>
                    <div class="flex-import-summary__item flex-import-summary__item--error">
                        <span>Error</span>
                        <strong>{{ $summary['error'] ?? 0 }}</strong>
                    </div>
                </div>

                @if (! ($preview['can_apply'] ?? false))
                    <div class="flex-import-warning">
                        <x-ui.icon name="alert" size="18" />
                        <span>Fix rows in error, then upload the workbook again before applying.</span>
                    </div>
                @endif

                <div class="detail-table-wrap flex-import-table-wrap">
                    <table class="data-table flex-import-table">
                        <thead>
                            <tr>
                                <th>Row</th>
                                <th>Action</th>
                                @foreach ($headers as $header)
                                    <th>{{ $header }}</th>
                                @endforeach
                                <th>Changes / errors</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $row)
                                <tr @class(['flex-import-row--error' => $row['action'] === 'error'])>
                                    <td>{{ $row['row'] }}</td>
                                    <td>
                                        <x-ui.performance-badge :tone="$actionTone($row['action'])" icon="none">
                                            {{ ucfirst($row['action']) }}
                                        </x-ui.performance-badge>
                                    </td>
                                    @foreach ($headers as $header)
                                        <td>{{ $formatValue($row['values'][$header] ?? null) }}</td>
                                    @endforeach
                                    <td class="flex-import-diagnostics">
                                        @if (! empty($row['errors']))
                                            <ul>
                                                @foreach ($row['errors'] as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        @elseif (! empty($row['changes']))
                                            <ul>
                                                @foreach ($row['changes'] as $field => $change)
                                                    <li><strong>{{ $field }}</strong>: {{ $formatValue($change['old'] ?? null) }} ? {{ $formatValue($change['new'] ?? null) }}</li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <span class="table-cell-subtitle">No change</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ 3 + $headers->count() }}">No rows found in the workbook.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            @else
                <div class="flex-import-empty">
                    <x-ui.icon name="spreadsheet" size="24" />
                    <div>
                        <h4>No preview yet</h4>
                        <p>Upload an `.xlsx` workbook with named ranges to inspect creates, updates and errors before writing to kView INVESTOR.</p>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <style>
        .flex-import-upload {
            margin-bottom: 1.5rem;
        }

        .flex-import-dropzone {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 0.85rem;
            align-items: center;
            min-height: 148px;
            padding: 1.15rem;
            border: 1px dashed var(--color-border);
            border-radius: var(--radius-sm, 8px);
            background: color-mix(in srgb, var(--color-panel, #ffffff) 92%, var(--color-kview, #1b4d89));
            cursor: pointer;
            transition: border-color 0.16s ease, background 0.16s ease;
        }

        .flex-import-dropzone[data-state="active"] {
            border-color: var(--color-kview);
            background: color-mix(in srgb, var(--color-panel, #ffffff) 84%, var(--color-kview, #1b4d89));
        }

        .flex-import-dropzone input {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
        }

        .flex-import-dropzone__icon {
            display: inline-grid;
            place-items: center;
            width: 52px;
            height: 52px;
            border-radius: 8px;
            color: var(--color-kview);
            background: color-mix(in srgb, var(--color-kview, #1b4d89) 10%, transparent);
        }

        .flex-import-dropzone__copy {
            display: grid;
            gap: 0.25rem;
            min-width: 0;
        }

        .flex-import-dropzone__copy strong {
            color: var(--color-ink);
            font-size: 1rem;
            word-break: break-word;
        }

        .flex-import-dropzone__copy small,
        .table-cell-subtitle {
            color: var(--color-muted, #6b7280);
            font-size: 0.82rem;
            word-break: break-word;
        }

        .flex-import-preview-header,
        .flex-import-preview-actions,
        .flex-import-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
            justify-content: space-between;
        }

        .flex-import-preview-actions {
            justify-content: flex-end;
        }

        .flex-import-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.75rem;
            margin: 1rem 0;
        }

        .flex-import-summary__item {
            display: grid;
            gap: 0.15rem;
            padding: 0.85rem;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            background: var(--color-panel, #fff);
        }

        .flex-import-summary__item span {
            color: var(--color-muted, #6b7280);
            font-size: 0.78rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .flex-import-summary__item strong {
            color: var(--color-ink);
            font-size: 1.35rem;
        }

        .flex-import-summary__item--error strong {
            color: #b42318;
        }

        .flex-import-warning,
        .flex-import-empty {
            display: flex;
            gap: 0.7rem;
            align-items: flex-start;
            margin: 1rem 0;
            padding: 0.9rem;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            background: color-mix(in srgb, #fff 88%, #f59e0b);
        }

        .flex-import-empty {
            background: var(--color-panel, #fff);
        }

        .flex-import-empty h4 {
            margin: 0 0 0.2rem;
        }

        .flex-import-empty p {
            margin: 0;
            color: var(--color-muted, #6b7280);
        }

        .flex-import-table-wrap {
            overflow-x: auto;
        }

        .flex-import-table th,
        .flex-import-table td {
            white-space: nowrap;
            vertical-align: top;
        }

        .flex-import-diagnostics {
            min-width: 260px;
            white-space: normal;
        }

        .flex-import-diagnostics ul {
            margin: 0;
            padding-left: 1rem;
        }

        .flex-import-row--error {
            background: color-mix(in srgb, #fff 92%, #ef4444);
        }

        @media (max-width: 900px) {
            .flex-import-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('[data-flex-import-form]');

            if (!form) {
                return;
            }

            const dropzone = form.querySelector('[data-flex-import-dropzone]');
            const input = form.querySelector('[data-flex-import-file-input]');
            const label = form.querySelector('[data-flex-import-file-label]');

            const showFile = function () {
                label.textContent = input.files && input.files[0] ? input.files[0].name : 'Drop an Excel workbook here';
            };

            ['dragenter', 'dragover'].forEach(function (eventName) {
                dropzone.addEventListener(eventName, function (event) {
                    event.preventDefault();
                    dropzone.dataset.state = 'active';
                });
            });

            ['dragleave', 'drop'].forEach(function (eventName) {
                dropzone.addEventListener(eventName, function (event) {
                    event.preventDefault();
                    dropzone.dataset.state = '';
                });
            });

            dropzone.addEventListener('drop', function (event) {
                if (event.dataTransfer.files.length > 0) {
                    input.files = event.dataTransfer.files;
                    showFile();
                }
            });

            input.addEventListener('change', showFile);
        });
    </script>
@endsection