@extends('backend.layouts.app')

@section('title', 'Model Generator')

@push('styles')
    <link href="{{ asset('vendor/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container {
            width: 100% !important;
            max-width: 100%;
        }

        .select2-container--default .select2-selection--single {
            min-height: 44px;
            border-radius: 0.5rem;
            border-color: rgb(209 213 219);
            background-color: transparent;
            padding: 4px 8px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 34px;
            color: rgb(31 41 55);
            padding-left: 8px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px;
        }

        .dark .select2-container--default .select2-selection--single,
        .dark .select2-dropdown {
            border-color: rgb(55 65 81);
            background-color: rgb(17 24 39);
            color: rgb(243 244 246);
        }

        .dark .select2-container--default .select2-selection--single .select2-selection__rendered,
        .dark .select2-container--default .select2-search--dropdown .select2-search__field,
        .dark .select2-results__option {
            color: rgb(243 244 246);
        }

        .dark .select2-container--default .select2-search--dropdown .select2-search__field {
            border-color: rgb(55 65 81);
            background-color: rgb(17 24 39);
        }
    </style>
@endpush

@section('content')
<!-- Header with back button -->
<div class="mb-8 flex flex-row items-start justify-between gap-4 sm:items-center">
    <div class="min-w-0">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white/90">Model Generator</h2>
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-2xl">
            Generate a Laravel Eloquent model from an existing database table. Choose between PHP Attributes or Class Properties style.
        </p>
    </div>
    <a href="{{ route('artisangen.index') }}" class="inline-flex flex-shrink-0 items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 hover:text-gray-900 dark:border-gray-700 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.05] dark:hover:text-white">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        Back to ArtisanGen
    </a>
</div>

<!-- How it works -->
<div class="mb-6 rounded-xl border border-blue-100 bg-blue-50/50 p-5 dark:border-blue-800 dark:bg-blue-900/10">
    <div class="flex items-start gap-3">
        <div class="mt-0.5 text-blue-600 dark:text-blue-400">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <div class="min-w-0">
            <h3 class="text-sm font-semibold text-blue-800 dark:text-blue-200">How it works</h3>
            <ul class="mt-2 list-disc space-y-1 pl-4 text-sm text-blue-700 dark:text-blue-300">
                <li class="break-words">Select an <strong>existing database table</strong>. The generator reads its schema (columns, types, primary key).</li>
                <li class="break-words">The <strong>Model Name</strong> is auto-filled from the table name, but you can change it.</li>
                <li class="break-words">Click <strong>Preview</strong> to see the generated PHP code before creating the file.</li>
                <li class="break-words">Click <strong>Generate</strong> to create the file. The save location follows the Namespace you enter (e.g. <code class="break-words">app/Models/Backend/{ModelName}.php</code>).</li>
            </ul>
        </div>
    </div>
</div>

<div x-data="modelGen()" class="space-y-6">
    <!-- Form card -->
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-800">
            <h3 class="font-semibold text-gray-800 dark:text-white/90">Configure Model</h3>
        </div>
        <div class="p-6">
            <div class="space-y-5">
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Table Name</label>
                    <select x-ref="tableSelect" x-init="initTableSelect()" required class="js-table-select h-11 w-full rounded-lg border border-gray-300 px-4 text-sm dark:bg-gray-900 dark:border-gray-700">
                        <option value="">-- Select Table --</option>
                        @foreach($tables as $t)
                            <option value="{{ $t }}">{{ $t }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Model Name</label>
                    <input type="text" x-model="form.modelName" required placeholder="User" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm placeholder:text-gray-400 dark:bg-gray-900 dark:border-gray-700 dark:text-white/90 dark:placeholder:text-white/30">
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Namespace</label>
                    <input type="text" x-model="form.namespace" required placeholder="app\Models\Backend" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm placeholder:text-gray-400 dark:bg-gray-900 dark:border-gray-700 dark:text-white/90 dark:placeholder:text-white/30">
                    <p class="mt-1.5 break-words text-xs text-gray-400">Parent folder only. Do not include the model name. Use PHP namespace separator <code class="break-words">\</code>. Examples: <code class="break-words">app\Models</code>, <code class="break-words">app\Models\Backend</code>, <code class="break-words">app\Models\Backend\Catalog</code></p>
                    <div class="mt-2 flex items-center gap-2 rounded-lg border border-brand-100 bg-brand-50/50 px-3 py-2 dark:border-brand-800 dark:bg-brand-900/10">
                        <svg class="h-4 w-4 shrink-0 text-brand-500 dark:text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                        </svg>
                        <span class="break-words text-xs text-brand-700 dark:text-brand-300">File path: <span x-text="previewPath()"></span></span>
                    </div>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Style</label>
                    <select x-model="form.style" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm dark:bg-gray-900 dark:border-gray-700 dark:text-white/90">
                        <option value="attributes">PHP Attributes</option>
                        <option value="properties">Class Properties</option>
                    </select>
                    <p class="mt-1.5 break-words text-xs text-gray-400" x-text="form.style === 'attributes' ? 'Uses #[Table], #[Fillable], #[Hidden] attributes' : 'Uses $table, $fillable, $hidden properties'"></p>
                </div>
                <div class="flex flex-wrap justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
                    <button type="button" @click.prevent="preview()" :disabled="loading" class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-5 py-3 text-sm font-medium text-white shadow-theme-xs transition hover:bg-brand-600 disabled:opacity-50">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        Preview
                    </button>
                    <button type="button" @click="generate()" :disabled="!hasPreview || loading" class="inline-flex items-center gap-2 rounded-lg bg-success-500 px-5 py-3 text-sm font-medium text-white shadow-theme-xs transition hover:bg-success-600 disabled:opacity-50">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                        </svg>
                        Generate
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Warning -->
    <template x-if="warning">
        <div class="rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-900/20">
            <div class="flex items-start gap-3">
                <div class="mt-0.5 text-amber-600 dark:text-amber-400">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
                <p class="text-sm text-amber-800 dark:text-amber-200" x-text="warning"></p>
            </div>
        </div>
    </template>

    <!-- Preview card -->
    <template x-if="files.length">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white/90">Preview</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Review the generated code before saving.</p>
                </div>
                <button @click="generate()" :disabled="loading" class="inline-flex items-center gap-2 self-start rounded-lg bg-success-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs transition hover:bg-success-600 disabled:opacity-50 sm:self-auto">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                    Generate
                </button>
            </div>
            <div class="p-6">
                <template x-for="file in files" :key="file.path">
                    <div class="mb-4">
                        <p class="mb-2 text-xs font-medium text-gray-500 dark:text-gray-400" x-text="file.path"></p>
                        <pre class="rounded-lg bg-gray-50 p-4 text-xs overflow-x-auto dark:bg-gray-900" x-text="file.code" style="max-height: 500px;"></pre>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- Error -->
    <template x-if="error">
        <div class="rounded-2xl border border-red-200 bg-red-50 p-5 dark:border-red-800 dark:bg-red-900/20">
            <div class="flex items-start gap-3">
                <div class="mt-0.5 text-red-600 dark:text-red-400">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div>
                    <h3 class="font-semibold text-red-800 dark:text-red-200">Error</h3>
                    <p class="mt-1 text-sm text-red-700 dark:text-red-300" x-text="error"></p>
                </div>
            </div>
        </div>
    </template>

    <!-- Success -->
    <template x-if="result">
        <div class="rounded-2xl border border-green-200 bg-green-50 p-5 dark:border-green-800 dark:bg-green-900/20">
            <div class="flex items-start gap-3">
                <div class="mt-0.5 text-green-600 dark:text-green-400">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div class="w-full">
                    <h3 class="font-semibold text-green-800 dark:text-green-200">Generated Successfully</h3>
                    <ul class="mt-2 list-disc space-y-1 pl-4 text-sm text-green-700 dark:text-green-300">
                        <template x-for="f in result.files" :key="f">
                            <li class="break-words" x-text="f"></li>
                        </template>
                    </ul>
                    <template x-if="warning">
                        <div class="mt-3 rounded-lg border border-amber-200 bg-amber-100/50 px-3 py-2 dark:border-amber-800 dark:bg-amber-900/30">
                            <p class="text-sm text-amber-800 dark:text-amber-200" x-text="warning"></p>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </template>
</div>

@push('scripts')
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
<script>
function modelGen() {
    return {
        loading: false,
        hasPreview: false,
        files: [],
        result: null,
        warning: null,
        error: null,
        form: { table: '', modelName: '', namespace: 'app\\Models\\Backend', style: 'attributes' },
        previewPath() {
            let ns = (this.form.namespace || 'app\\Models\\Backend').trim().replace(/[\\/]+/g, '\\').replace(/^\\|\\$/g, '');
            let parts = ns.split('\\').filter(p => p);
            parts = parts.map(p => p.charAt(0).toUpperCase() + p.slice(1).replace(/[-_](.)/g, (_, c) => c.toUpperCase()));
            if (parts.length === 0 || parts[0] !== 'App') parts.unshift('App');
            else parts[0] = 'App';
            let path = parts.slice(1).join('/');
            let model = (this.form.modelName || 'Model').replace(/[\\/]/g, '');
            return `app/${path}/${model}.php`;
        },
        initTableSelect() {
            const $select = $(this.$refs.tableSelect);
            $select.select2({
                width: '100%',
                placeholder: '-- Select Table --',
                allowClear: true
            });
            $select.on('change', () => {
                this.form.table = $select.val() || '';
                this.autoModel();
                this.autoNamespace();
            });
        },
        autoModel() {
            if (!this.form.table) { this.form.modelName = ''; return; }
            let name = this.form.table.replace(/_id$/, '');
            name = name.replace(/_/g, ' ');
            name = name.replace(/\b\w/g, l => l.toUpperCase()).replace(/\s+/g, '');
            if (name.endsWith('ies')) name = name.slice(0, -3) + 'y';
            else if (name.endsWith('s') && !name.endsWith('ss')) name = name.slice(0, -1);
            this.form.modelName = name;
        },
        autoNamespace() {
            this.form.namespace = 'app\\Models\\Backend';
        },
        preview() {
            this.loading = true;
            this.result = null;
            this.warning = null;
            this.error = null;
            fetch('{{ route('artisangen.preview-model') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: JSON.stringify(this.form)
            })
            .then(async r => {
                const data = await r.json();
                if (!r.ok) throw new Error(data.error || 'Server error');
                return data;
            })
            .then(d => {
                this.files = d.files;
                this.warning = d.warning;
                if (d.warning && d.namespace) this.form.namespace = d.namespace;
                this.hasPreview = true;
                this.loading = false;
            })
            .catch(e => { this.error = e.message; this.loading = false; });
        },
        generate() {
            this.loading = true;
            this.error = null;
            this.warning = null;
            fetch('{{ route('artisangen.generate-model') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: JSON.stringify(this.form)
            })
            .then(async r => {
                const data = await r.json();
                if (!r.ok) throw new Error(data.error || 'Server error');
                return data;
            })
            .then(d => {
                this.result = d;
                this.warning = d.warning;
                if (d.warning && d.namespace) this.form.namespace = d.namespace;
                this.files = [];
                this.hasPreview = false;
                this.loading = false;
            })
            .catch(e => { this.error = e.message; this.loading = false; });
        }
    }
}
</script>
@endpush
@endsection