@extends('admin.layouts.app')

@section('title', 'Developer Settings')

@section('content')
    <div class="max-w-4xl">
        <h1 class="text-2xl font-bold text-white mb-8 tracking-tight">Developer Settings</h1>

        @if(session('success'))
            <div
                class="bg-blue-500/10 border border-blue-500/20 text-blue-400 px-6 py-4 rounded-2xl mb-8 flex items-center gap-3">
                <i data-lucide="info" class="w-5 h-5"></i>
                <span class="font-medium">{{ session('success') }}</span>
            </div>
        @endif

        @if(session('error'))
            <div
                class="bg-red-500/10 border border-red-500/20 text-red-500 px-6 py-4 rounded-2xl mb-8 flex items-center gap-3">
                <i data-lucide="alert-circle" class="w-5 h-5"></i>
                <span class="font-medium">{{ session('error') }}</span>
            </div>
        @endif

        <div class="space-y-6">
            <!-- Cache Management -->
            <div class="glass-card rounded-[2rem] p-8 border-white/5">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xl font-bold text-white mb-1">Cache Management</h3>
                        <p class="text-slate-400 text-sm font-medium">Clear Application Cache</p>
                        <p class="text-[11px] text-slate-500 mt-2">Clears route, config, and view cache. Equivalent to
                            <code>php artisan optimize:clear</code>.
                        </p>
                    </div>
                    <form action="{{ route('admin.settings.developer.clear-cache') }}" method="POST">
                        @csrf
                        <button type="submit"
                            class="px-8 py-3 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-amber-600/20">
                            Execute
                        </button>
                    </form>
                </div>
            </div>

            <!-- System Build -->
            <div class="glass-card rounded-[2rem] p-8 border-white/5">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-xl font-bold text-white mb-1">System Build</h3>
                        <p class="text-slate-400 text-sm font-medium">Build Frontend Assets</p>
                        <p class="text-[11px] text-slate-500 mt-2">Runs <code>npm run build</code> to compile assets. Use
                            this after UI changes.</p>
                    </div>
                    <form action="{{ route('admin.settings.developer.build-assets') }}" method="POST">
                        @csrf
                        <button type="submit"
                            class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-blue-500/20">
                            Execute
                        </button>
                    </form>
                </div>
            </div>

            <!-- Database Management -->
            <div class="glass-card rounded-[2rem] p-8 border-white/5 space-y-12">
                <h3 class="text-xl font-bold text-white">Database Management</h3>

                <!-- Migrate -->
                <div class="flex items-center justify-between border-b border-white/5 pb-8">
                    <div>
                        <p class="text-slate-400 text-sm font-medium">Migrate Database</p>
                        <p class="text-[11px] text-slate-500 mt-2">Run pending migrations to update database schema.</p>
                    </div>
                    <form action="{{ route('admin.settings.developer.migrate') }}" method="POST"
                        onsubmit="return confirm('Running migrations on production can be destructive. Continue?')">
                        @csrf
                        <button type="submit"
                            class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-indigo-600/20">
                            Execute
                        </button>
                    </form>
                </div>

                <!-- Run Seeder -->
                <div class="flex items-center justify-between border-b border-white/5 pb-8">
                    <div class="flex-1 mr-8">
                        <p class="text-slate-400 text-sm font-medium">Run Database Seeder</p>
                        <p class="text-[11px] text-slate-500 mt-2">Populate database with seed data.</p>
                        <input type="text" name="seeder_class" form="seeder_form"
                            placeholder="Seeder Class (e.g. DatabaseSeeder)"
                            class="mt-2 w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 focus:border-blue-500 outline-none">
                    </div>
                    <form id="seeder_form" action="{{ route('admin.settings.developer.seed') }}" method="POST"
                        onsubmit="return confirm('Running seeders might duplicate data. Continue?')">
                        @csrf
                        <button type="submit"
                            class="px-8 py-3 bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-fuchsia-600/20">
                            Execute
                        </button>
                    </form>
                </div>

                <!-- Export -->
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-400 text-sm font-medium">Export Database</p>
                        <p class="text-[11px] text-slate-500 mt-2">Download a SQL dump of the current database.</p>
                    </div>
                    <button type="button"
                        class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-emerald-600/20">
                        Execute
                    </button>
                </div>

                <!-- Import -->
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-slate-400 text-sm font-medium">Import Database</p>
                        <p class="text-[11px] text-slate-500 mt-2">Upload a SQL file to import into the database. <span
                                class="text-red-400 font-bold">Warning: This will overwrite existing data.</span></p>
                    </div>
                    <button type="button"
                        class="px-8 py-3 bg-slate-700 text-slate-400 font-bold rounded-xl cursor-not-allowed">
                        Execute
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection