@extends('backend.layouts.app')

@section('title', 'CRUD 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">CRUD Generator</h2>
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-2xl">
            Select an existing Model, preview the generated controller, form request, and views, then generate.
        </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 existing <strong>Model Class</strong>. The generator reads its database table.</li>
                <li class="break-words">Customize the <strong>Controller Namespace</strong>, <strong>Request Namespace</strong>, and <strong>View Path</strong> if needed.</li>
                <li class="break-words">Click <strong>Preview</strong> to see the generated files before creating them.</li>
                <li class="break-words">Click <strong>Generate</strong> to create the files.</li>
                <li class="break-words"><strong>After generating:</strong> manually add the route to <code class="break-words">routes/web.php</code>, create permissions (e.g. <code class="break-words">module.view</code>, <code class="break-words">module.create</code>, etc.), assign them to roles, and add a sidebar menu item if needed.</li>
            </ul>
        </div>
    </div>
</div>

<div x-data="crudGen()" class="space-y-6">
    @if($flashSuccess)
    <div x-init="showFlashSuccess({{ json_encode($flashSuccess) }})"></div>
    @endif
    <!-- 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 CRUD</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">Model Class</label>
                    <select x-ref="modelSelect" x-init="initModelSelect()" x-model="form.modelClass" class="js-model-select 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="">-- Select Model --</option>
                        @foreach($models as $m)
                            <option value="{{ $m }}">{{ $m }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Controller Namespace</label>
                    <input type="text" x-model="form.controllerNamespace" placeholder="app\Http\Controllers\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">Example: <code class="break-words">app\Http\Controllers\Backend</code>. The controller will be saved under this namespace.</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="controllerPath()"></span></span>
                    </div>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Request Namespace</label>
                    <input type="text" x-model="form.requestNamespace" placeholder="app\Http\Requests\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">Example: <code class="break-words">app\Http\Requests\Backend</code>. The form request will be saved under this namespace.</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="requestPath()"></span></span>
                    </div>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">View Path</label>
                    <input type="text" x-model="form.viewPath" placeholder="backend.module._gen.products" 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">Example: <code class="break-words">backend.module._gen.products</code>. Views will be saved to <code class="break-words">resources/views/backend/module/_gen/products/</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">Folder: <span x-text="viewPath()"></span></span>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap justify-end gap-3 border-t border-gray-100 pt-4 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($event)" :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>

    <!-- 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 files before creating them.</p>
                </div>
                <button type="button" @click="generate($event)" :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="min-w-0 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>
                    <div class="mt-4 space-y-2 rounded-xl border border-green-200 bg-white/80 p-4 dark:border-green-800 dark:bg-green-900/30">
                        <p class="break-words text-sm font-semibold text-green-800 dark:text-green-200">Next steps:</p>
                        <ol class="list-decimal space-y-1 pl-4 text-sm text-green-700 dark:text-green-300">
                            <li class="break-words">Add route: <code class="break-words" x-text="routeSuggestion"></code></li>
                            <li class="break-words">Create permissions (<span x-text="routePrefix"></span>.view, .create, .update, .delete) and assign to roles.</li>
                            <li class="break-words">Add a sidebar menu item in <code class="break-words">BackendMenuSeeder.php</code> if needed.</li>
                            <li class="break-words">See <code class="break-words">resources/views/backend/module/_gen/<span x-text="viewFolder"></span>/CRUD-SETUP.md</code> for full guide.</li>
                        </ol>
                    </div>
                </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 crudGen() {
    return {
        loading: false,
        hasPreview: false,
        files: [],
        result: null,
        error: null,
        routeSuggestion: '',
        routePrefix: '',
        viewFolder: '',
        form: {
            modelClass: '',
            controllerNamespace: 'app\\Http\\Controllers\\Backend',
            requestNamespace: 'app\\Http\\Requests\\Backend',
            viewPath: ''
        },
        modelName() {
            return (this.form.modelClass || 'Model').split('\\').pop() || 'Model';
        },
        namespaceToFilePath(namespace, suffix = '') {
            let ns = (namespace || '').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';
            return 'app/' + parts.slice(1).join('/') + suffix;
        },
        controllerPath() {
            return this.namespaceToFilePath(this.form.controllerNamespace, '/' + this.modelName() + 'Controller.php');
        },
        requestPath() {
            return this.namespaceToFilePath(this.form.requestNamespace, '/' + this.modelName() + 'Request.php');
        },
        viewPath() {
            const defaultPath = 'backend.module._gen.' + this.modelName().charAt(0).toLowerCase() + this.modelName().slice(1);
            let path = (this.form.viewPath || defaultPath).trim().replace(/[\\/]+/g, '.').replace(/^\.|\.$/g, '');
            return 'resources/views/' + path.replace(/\./g, '/') + '/';
        },
        initModelSelect() {
            const $select = $(this.$refs.modelSelect);
            $select.select2({
                width: '100%',
                placeholder: '-- Select Model --',
                allowClear: true
            });
            $select.on('change', () => {
                this.form.modelClass = $select.val() || '';
                this.autoPaths();
            });
        },
        autoPaths() {
            if (!this.form.modelClass) return;
            const modelName = this.form.modelClass.split('\\').pop();
            const viewFolder = modelName.charAt(0).toLowerCase() + modelName.slice(1);
            if (!this.form.viewPath) {
                this.form.viewPath = 'backend.module._gen.' + viewFolder;
            }
        },
        validate() {
            if (!this.form.modelClass) return 'Model Class is required.';
            if (!this.form.controllerNamespace) return 'Controller Namespace is required.';
            if (!this.form.requestNamespace) return 'Request Namespace is required.';
            if (!this.form.viewPath) return 'View Path is required.';
            return null;
        },
        preview() {
            const err = this.validate();
            if (err) { this.error = err; return; }
            this.loading = true;
            this.result = null;
            this.error = null;
            fetch('{{ route('artisangen.preview-crud') }}', {
                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.hasPreview = true; this.loading = false; })
            .catch(e => { this.error = e.message; this.loading = false; });
        },
        generate(e) {
            if (e) { e.preventDefault(); e.stopPropagation(); }
            const err = this.validate();
            if (err) { this.error = err; return; }
            this.loading = true;
            this.error = null;
            this.files = [];
            fetch('{{ route('artisangen.generate-crud') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: JSON.stringify(this.form),
                redirect: 'error'
            })
            .then(async r => {
                const data = await r.json();
                if (!r.ok) throw new Error(data.error || 'Server error');
                return data;
            })
            .then(d => {
                this.setResult(d);
            })
            .catch(e => { this.error = e.message; this.loading = false; });
        },
        setResult(d) {
            this.result = d;
            this.routePrefix = d.route;
            this.routeSuggestion = `Route::controller(${d.controllerClass}::class)->prefix('${d.route}')->group(function () { /* index, create, store, edit, update, destroy */ });`;
            this.viewFolder = d.viewFolder;
            this.hasPreview = false;
            this.loading = false;
        },
        showFlashSuccess(d) {
            this.setResult(d);
        }
    }
}
</script>
@endpush
@endsection