@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <div class="pb-2 border-b border-slate-800">
        <h1 class="text-2xl font-black text-white">Studio Settings & Production Checklist</h1>
        <p class="text-xs text-slate-400 mt-1">Configure global video defaults, storage retention, security preferences, and Namecheap cPanel cron.</p>
    </div>

    <form method="POST" action="{{ route('settings.update') }}" class="space-y-6">
        @csrf

        <!-- 1. General & Video Defaults -->
        <div class="studio-card p-5 space-y-4">
            <h2 class="font-bold text-sm text-slate-100 flex items-center gap-2 border-b border-slate-800 pb-2">
                <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                General Studio Defaults
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                <div>
                    <label class="block font-medium text-slate-300 mb-1">Timezone</label>
                    <input type="text" name="app_timezone" value="{{ $settings['app_timezone'] ?? 'Africa/Nairobi' }}" required
                        class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200">
                    <p class="text-[10px] text-slate-500 mt-0.5">Fixed default: Africa/Nairobi (East Africa Time, UTC+3)</p>
                </div>

                <div>
                    <label class="block font-medium text-slate-300 mb-1">Default Aspect Ratio</label>
                    <select name="default_aspect_ratio" class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200">
                        <option value="9:16" {{ ($settings['default_aspect_ratio'] ?? '') === '9:16' ? 'selected' : '' }}>9:16 Vertical (Reels / TikTok / Shorts)</option>
                        <option value="1:1" {{ ($settings['default_aspect_ratio'] ?? '') === '1:1' ? 'selected' : '' }}>1:1 Square (Instagram / Facebook)</option>
                        <option value="16:9" {{ ($settings['default_aspect_ratio'] ?? '') === '16:9' ? 'selected' : '' }}>16:9 Landscape (YouTube)</option>
                    </select>
                </div>

                <div>
                    <label class="block font-medium text-slate-300 mb-1">Default Resolution</label>
                    <select name="default_resolution" class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200">
                        <option value="1080p" {{ ($settings['default_resolution'] ?? '') === '1080p' ? 'selected' : '' }}>1080p Full HD</option>
                        <option value="720p" {{ ($settings['default_resolution'] ?? '') === '720p' ? 'selected' : '' }}>720p HD</option>
                    </select>
                </div>

                <div>
                    <label class="block font-medium text-slate-300 mb-1">Default Sound Profile</label>
                    <select name="default_sound_profile" class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200">
                        <option value="mechanical" {{ ($settings['default_sound_profile'] ?? '') === 'mechanical' ? 'selected' : '' }}>Mechanical Keyboard</option>
                        <option value="typewriter" {{ ($settings['default_sound_profile'] ?? '') === 'typewriter' ? 'selected' : '' }}>Vintage Typewriter</option>
                        <option value="soft" {{ ($settings['default_sound_profile'] ?? '') === 'soft' ? 'selected' : '' }}>Soft Chiclet Laptop</option>
                    </select>
                </div>

                <div>
                    <label class="block font-medium text-slate-300 mb-1">Default Audio Volume (0.0 - 1.0)</label>
                    <input type="number" step="0.05" min="0" max="1" name="default_sound_volume" value="{{ $settings['default_sound_volume'] ?? 0.75 }}" required
                        class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200 font-mono">
                </div>

                <div>
                    <label class="block font-medium text-slate-300 mb-1">Default Typing Speed (ms/char)</label>
                    <input type="number" name="default_typing_speed" value="{{ $settings['default_typing_speed'] ?? 45 }}" required
                        class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200 font-mono">
                </div>
            </div>
        </div>

        <!-- 2. Storage & Retention -->
        <div class="studio-card p-5 space-y-4">
            <h2 class="font-bold text-sm text-slate-100 flex items-center gap-2 border-b border-slate-800 pb-2">
                <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2 1.5 3 3.5 3h9c2 0 3.5-1 3.5-3V7M4 7c0-2 1.5-3 3.5-3h9c2 0 3.5 1 3.5 3M4 7h16m-5 4v6m-6-6v6"/></svg>
                Storage Management & Shared Hosting Quotas
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                <div>
                    <label class="block font-medium text-slate-300 mb-1">Media Retention Policy (Days)</label>
                    <input type="number" name="media_retention_days" value="{{ $settings['media_retention_days'] ?? 90 }}" required
                        class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200 font-mono">
                    <p class="text-[10px] text-slate-500 mt-0.5">Days to retain rendered MP4s after successful publication.</p>
                </div>

                <div>
                    <label class="block font-medium text-slate-300 mb-1">Max Video File Size (MB)</label>
                    <input type="number" name="max_video_size_mb" value="{{ $settings['max_video_size_mb'] ?? 250 }}" required
                        class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200 font-mono">
                    <p class="text-[10px] text-slate-500 mt-0.5">Protects shared hosting inode and disk space.</p>
                </div>
            </div>
        </div>

        <!-- 3. Security & Credentials -->
        <div class="studio-card p-5 space-y-4">
            <h2 class="font-bold text-sm text-slate-100 flex items-center gap-2 border-b border-slate-800 pb-2">
                <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                Administrator Password Update (Optional)
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
                <div>
                    <label class="block text-slate-300 mb-1">Current Password</label>
                    <input type="password" name="current_password" placeholder="••••••••"
                        class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200">
                </div>
                <div>
                    <label class="block text-slate-300 mb-1">New Password</label>
                    <input type="password" name="new_password" placeholder="••••••••"
                        class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200">
                </div>
                <div>
                    <label class="block text-slate-300 mb-1">Confirm New Password</label>
                    <input type="password" name="new_password_confirmation" placeholder="••••••••"
                        class="w-full px-3 py-2 bg-[#07090E] border border-slate-700 rounded-lg text-slate-200">
                </div>
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="btn-primary text-xs py-2 px-6">
                Save All Settings
            </button>
        </div>
    </form>

    <!-- 4. Production Deployment & cPanel Guide Card -->
    <div class="studio-card p-5 space-y-4">
        <h2 class="font-bold text-sm text-slate-100 flex items-center gap-2 border-b border-slate-800 pb-2">
            <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
            Namecheap cPanel Shared Hosting Deployment Checklist
        </h2>

        <div class="space-y-3 text-xs text-slate-300">
            <div class="p-3 bg-black/60 rounded-lg border border-slate-800 space-y-1.5 font-mono text-[11px]">
                <div class="text-amber-400 font-bold">1. cPanel Cron Configuration</div>
                <div class="text-slate-400">Add the following single cron command in cPanel &rarr; Cron Jobs (Set to Once Per Minute <code>* * * * *</code>):</div>
                <div class="p-2 bg-slate-950 rounded border border-slate-800 text-amber-300 select-all break-all">
                    /usr/local/bin/php /home/username/public_html/studio/artisan schedule:run >> /dev/null 2>&1
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                <div class="p-3 bg-slate-900/60 rounded-lg border border-slate-800">
                    <div class="font-bold text-slate-100 mb-1">PHP Version & Extensions</div>
                    <ul class="list-disc list-inside space-y-0.5 text-slate-400 text-[11px]">
                        <li>PHP 8.2 or 8.3 via cPanel MultiPHP Manager</li>
                        <li>Extensions: <code>pdo_mysql</code>, <code>openssl</code>, <code>curl</code>, <code>fileinfo</code>, <code>mbstring</code></li>
                    </ul>
                </div>

                <div class="p-3 bg-slate-900/60 rounded-lg border border-slate-800">
                    <div class="font-bold text-slate-100 mb-1">Public Web Root Setup</div>
                    <ul class="list-disc list-inside space-y-0.5 text-slate-400 text-[11px]">
                        <li>Point domain document root to <code>/studio/public</code></li>
                        <li>Keeps <code>.env</code>, <code>storage</code>, and code out of the public web</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection