@extends('layouts.demo10.base')

@section('content')

<style>
    .import-page-shell {
        margin-top: calc(var(--spacing) * -5);
        margin-inline: calc(var(--spacing) * -6);
        margin-bottom: calc(var(--spacing) * -5);
        min-height: calc(100vh - 80px);
        background: #ededed;
    }

    .import-flow {
        height: 74px;
        background: #e2e2e2;
        border-bottom: 1px solid #d8d8d8;
        padding: 0 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .import-flow-steps {
        display: flex;
        align-items: center;
        gap: 28px;
        color: #8f8f8f;
        font-size: 15px;
        font-weight: 500;
    }

    .import-flow-step {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .import-flow-step.is-active {
        color: #202020;
    }

    .import-flow-dot {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid #d0d0d0;
        background: #f5f5f5;
        color: #8f8f8f;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .import-flow-step.is-active .import-flow-dot {
        background: #2f66e8;
        border-color: #2f66e8;
        color: #ffffff;
    }

    .import-flow-arrow {
        color: #9f9f9f;
        font-size: 20px;
        line-height: 1;
    }

    .import-main {
        max-width: 1380px;
        margin: 26px auto 0;
        padding: 0 18px 24px;
    }

    .import-card {
        background: #f5f5f5;
        border: 1px solid #e6e6e6;
        border-radius: 14px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
        padding: 16px;
        min-height: 620px;
    }

    .import-title {
        margin: 0;
        color: #1f1f1f;
        font-size: 42px;
        font-weight: 600;
        line-height: 1.05;
    }

    .import-subtitle {
        margin: 2px 0 10px;
        color: #7d7d7d;
        font-size: 16px;
    }

    .import-top-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .import-connection-label {
        color: #303030;
        font-size: 30px;
        font-weight: 600;
        margin: 0;
        line-height: 1.1;
    }

    .import-connection-value {
        margin-top: 2px;
        color: #7a7a7a;
        font-size: 19px;
    }

    #importDataset {
        min-height: 40px;
        border-radius: 12px;
        font-size: 15px;
        padding-inline: 20px;
    }

    .import-search {
        display: flex;
        justify-content: flex-end;
        margin: 6px 0 10px;
    }

    .import-search .kt-input {
        width: 290px;
        border-radius: 999px;
        background: #f2f2f2;
        border: 1px solid #cfcfcf;
    }

    .import-search .kt-input input {
        height: 36px;
    }

    .import-history-card {
        border: 1px solid #d8d8d8;
        border-radius: 12px;
        background: #fbfbfb;
        overflow: hidden;
    }

    #odk_history_table thead th {
        background: #f0f0f0;
        font-size: 12px;
        font-weight: 500;
        color: #4b4b4b;
    }

    #odk_history_table tbody td {
        font-size: 12px;
        color: #323232;
    }

    .kt-scrollable-x-auto,
    .kt-card-table,
    #import_datatable,
    td {
        overflow: visible !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: none !important;
        background: none !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0 2px !important;
        border-radius: 0.375rem !important;
        color: var(--secondary-foreground) !important;
        cursor: pointer !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: var(--primary) !important;
        color: white !important;
    }

    .dataTables_wrapper .dataTables_info {
        color: var(--secondary-foreground) !important;
        font-size: 0.875rem !important;
        padding-top: 0 !important;
    }

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid var(--border) !important;
        border-radius: 0.375rem !important;
        padding: 0.25rem 2rem 0.25rem 0.5rem !important;
        background-color: transparent !important;
        color: var(--foreground) !important;
        margin: 0 0.5rem !important;
    }

    .dataTables_wrapper .dataTables_length {
        color: var(--secondary-foreground) !important;
        font-size: 0.875rem !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 0 !important;
    }

    .import-main-panel-flat-left {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    @media (min-width: 1024px) {
        .import-main-panel-flat-left {
            border-left: 0 !important;
        }
    }

    @media (min-width: 1280px) {
        .import-page-shell {
            margin-inline: calc(var(--spacing) * -7.5);
        }
    }
</style>

@can('view.import')
<div class="import-page-shell">
    <div class="import-flow">
        <div class="import-flow-steps" aria-label="ODK workflow">
            @php
                $sourceType = $activeSourceType ?? ($activeConnection->source_type ?? 'odk');
                $isCsvImport = $sourceType === 'csv';
                $isApiImport = $sourceType === 'api';
            @endphp

            <div class="import-flow-step">
                <span class="import-flow-dot">
                    <i class="ki-filled ki-file-up text-sm"></i>
                </span>
                <span>{{ $isCsvImport ? 'CSV File' : ($isApiImport ? 'API Source' : 'ODKForm') }}</span>
            </div>
            <span class="import-flow-arrow">&rarr;</span>
            <div class="import-flow-step">
                <span class="import-flow-dot">
                    <i class="ki-filled ki-document text-sm"></i>
                </span>
                <span>Generate Schema</span>
            </div>
            <span class="import-flow-arrow">&rarr;</span>
            <div class="import-flow-step is-active">
                <span class="import-flow-dot">
                    <i class="ki-filled ki-exit-down text-sm"></i>
                </span>
                <span>Import</span>
            </div>
        </div>
    </div>

    <div class="import-main">
        <div class="import-card">
            <div class="import-top-row">
                <div>
                    <h1 class="import-title">{{ $isCsvImport ? 'CSV Data Import' : ($isApiImport ? 'API Data Import' : 'ODK Data Import') }}</h1>
                    <p class="import-subtitle">Project/{{ $currentProject->name ?? 'Projects' }}/Import</p>
                </div>
                @can('process.import')
                <button
                    type="button"
                    id="importDataset"
                    class="kt-btn add-btn kt-btn-primary"
                    @if(!($canRunImport ?? false)) disabled @endif
                >
                    Import
                </button>
                @endcan
            </div>

            <form id="importForm">
                @csrf
                <p class="import-connection-label">{{ $isCsvImport ? 'Active CSV Connection' : ($isApiImport ? 'Active API Connection' : 'Active ODK Connection') }}</p>
                <div class="import-connection-value">
                    @if($connections->count() > 0)
                        @if($isCsvImport)
                            {{ $connections->first()->file_name ?? basename($connections->first()->file_path ?? '') ?? 'CSV File' }}
                            <span class="text-sm font-normal text-muted-foreground">({{ $connections->first()->project->name ?? 'N/A' }})</span>
                            <input type="hidden" name="odk_connection_id" id="odk_connection_id" value="{{ $connections->first()->id }}">
                        @elseif($isApiImport)
                            {{ $connections->first()->base_url ?? 'API Source' }}
                            <span class="text-sm font-normal text-muted-foreground">({{ $connections->first()->project->name ?? 'N/A' }})</span>
                            <input type="hidden" name="odk_connection_id" id="odk_connection_id" value="{{ $connections->first()->id }}">
                        @else
                            {{ $connections->first()->form_id }}
                            <span class="text-sm font-normal text-muted-foreground">({{ $connections->first()->project->name ?? 'N/A' }})</span>
                            <input type="hidden" name="odk_connection_id" id="odk_connection_id" value="{{ $connections->first()->id }}">
                        @endif
                    @else
                        <span class="text-danger italic">No active connection found</span>
                        <input type="hidden" name="odk_connection_id" id="odk_connection_id" value="">
                    @endif
                </div>
            </form>

            <div class="import-search">
                <div class="kt-input search">
                    <input data-kt-datatable-search="#odk_history_table" placeholder="Search Datasets" type="text" />
                </div>
            </div>

            <div class="import-history-card">
                <div class="kt-card-table">
                    <div id="import_datatable_wrapper" class="p-0 text-foreground">
                        <div class="kt-scrollable-x-auto">
                            <table class="kt-table kt-table-border w-full" id="odk_history_table">
                                <thead>
                                    <tr>
                                        <th>{{ $isCsvImport ? 'Source' : ($isApiImport ? 'API URL' : 'Form ID') }}</th>
                                        <th>Imported By</th>
                                        <th>Total Imports</th>
                                        <th>Schema File</th>
                                        <th>SQL File</th>
                                        <th>Imported At</th>
                                        <th class="text-center">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($histories as $history)
                                    <tr>
                                        <td>
                                            @php
                                                $historyConnection = $history->odkConnection;
                                                $historySource = ($historyConnection?->source_type ?? 'odk') === 'csv'
                                                    ? ($historyConnection?->file_name ?? 'CSV')
                                                    : (($historyConnection?->source_type ?? 'odk') === 'api'
                                                        ? ($historyConnection?->base_url ?? 'API')
                                                        : ($historyConnection?->form_id ?? 'Unknown'));
                                            @endphp
                                            <span class="text-sm font-semibold text-foreground">{{ $historySource }}</span>
                                        </td>
                                        <td><span class="text-sm text-foreground">{{ $history->user?->name ?? 'N/A' }}</span></td>
                                        <td><span class="text-sm font-bold text-muted-foreground">{{ $history->total_imported }}</span></td>
                                        <td>
                                            <span class="text-xs text-mono text-muted-foreground">
                                                {{ $history->schemaHistory ? basename($history->schemaHistory->schema_file) : 'N/A' }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($history->sql_file)
                                                <a href="{{ route('download.import.file', ['id' => $history->id, 'type' => 'sql']) }}" class="kt-btn kt-btn-sm kt-btn-outline">
                                                    Download SQL
                                                </a>
                                            @else
                                                <span class="text-xs text-muted-foreground">N/A</span>
                                            @endif
                                        </td>
                                        <td>{{ $history->created_at->format('M d, Y') }}</td>
                                        <td class="text-center">
                                            <span class="kt-badge kt-badge-outline {{ $history->status === 'success' ? 'kt-badge-success' : 'kt-badge-danger' }} kt-badge-sm">
                                                {{ ucfirst($history->status) }}
                                            </span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@else
<div class="flex items-center justify-center min-h-[400px]">
    <div class="text-center">
        <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
        <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
        <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
    </div>
</div>
@endcan

<!-- Progress Modal -->
<div class="kt-modal shadow" data-kt-modal="true" id="progress_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[500px] top-[20%] shadow">
        <div class="kt-modal-body p-10">
            <div class="flex flex-col items-center gap-5 text-center">
                <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
                <div class="flex flex-col gap-2">
                    <h3 class="text-lg font-semibold text-foreground">Importing Data</h3>
                    <p class="text-sm text-muted-foreground">Please wait, we are importing data from the active source.</p>
                </div>
                <div class="w-full bg-secondary rounded-full h-2 mt-4 overflow-hidden">
                    <div class="bg-primary h-full w-0" id="importProgress"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const scrollableContent = document.getElementById('scrollable_content');
        const mainPanel = scrollableContent ? scrollableContent.parentElement : null;
        if (mainPanel) {
            mainPanel.classList.add('import-main-panel-flat-left');
        }
    });
</script>
@vite('resources/js/ImportDataset/import-dataset.js')
@endsection