@extends('admin.layouts.app')

@section('content')
<div class="space-y-6">
    <style>
        .lang-page{
            color:#fff;
        }

        .lang-hero{
            position:relative;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.08);
            border-radius:24px;
            background:
                radial-gradient(circle at top right, rgba(229,9,20,.16), transparent 28%),
                linear-gradient(135deg, rgba(11,18,32,.98), rgba(7,13,26,.96));
            box-shadow:0 20px 50px rgba(0,0,0,.28);
            padding:28px;
        }

        .lang-hero-grid{
            display:grid;
            grid-template-columns:1.25fr .75fr;
            gap:20px;
            align-items:end;
        }

        @media (max-width: 900px){
            .lang-hero-grid{
                grid-template-columns:1fr;
            }
        }

        .lang-eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:12px;
            font-weight:800;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:#fecaca;
            background:rgba(229,9,20,.14);
            border:1px solid rgba(229,9,20,.2);
            padding:8px 12px;
            border-radius:999px;
            margin-bottom:14px;
        }

        .lang-title{
            font-size:40px;
            line-height:1;
            letter-spacing:-.04em;
            font-weight:900;
            margin:0 0 10px;
        }

        .lang-subtitle{
            color:#94a3b8;
            font-size:15px;
            line-height:1.8;
            max-width:760px;
            margin:0;
        }

        .lang-hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:20px;
        }

        .lang-btn-primary,
        .lang-btn-secondary,
        .lang-btn-danger,
        .lang-btn-edit,
        .lang-btn-toggle{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            border:none;
            border-radius:12px;
            font-weight:800;
            text-decoration:none;
            cursor:pointer;
            transition:.2s ease;
        }

        .lang-btn-primary{
            background:#e50914;
            color:#fff;
            padding:13px 18px;
            box-shadow:0 12px 24px rgba(229,9,20,.24);
        }

        .lang-btn-secondary{
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.08);
            color:#fff;
            padding:13px 18px;
        }

        .lang-btn-danger{
            background:rgba(239,68,68,.12);
            border:1px solid rgba(239,68,68,.18);
            color:#fecaca;
            padding:10px 14px;
            font-size:13px;
        }

        .lang-btn-edit{
            background:rgba(59,130,246,.14);
            border:1px solid rgba(59,130,246,.18);
            color:#bfdbfe;
            padding:10px 14px;
            font-size:13px;
        }

        .lang-btn-toggle{
            background:rgba(34,197,94,.12);
            border:1px solid rgba(34,197,94,.18);
            color:#bbf7d0;
            padding:10px 14px;
            font-size:13px;
        }

        .lang-btn-primary:hover,
        .lang-btn-secondary:hover,
        .lang-btn-danger:hover,
        .lang-btn-edit:hover,
        .lang-btn-toggle:hover{
            transform:translateY(-1px);
            filter:brightness(1.04);
        }

        .lang-stat-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:12px;
        }

        .lang-stat{
            border-radius:18px;
            padding:18px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.06);
        }

        .lang-stat strong{
            display:block;
            font-size:24px;
            line-height:1;
            margin-bottom:6px;
        }

        .lang-stat span{
            color:#94a3b8;
            font-size:12px;
        }

        .lang-toolbar{
            display:grid;
            grid-template-columns:1fr auto;
            gap:16px;
            align-items:center;
        }

        @media (max-width: 820px){
            .lang-toolbar{
                grid-template-columns:1fr;
            }
        }

        .lang-search-panel,
        .lang-form-panel,
        .lang-table-panel{
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
            border:1px solid rgba(255,255,255,.08);
            border-radius:22px;
            box-shadow:0 18px 40px rgba(0,0,0,.20);
        }

        .lang-search-panel{
            padding:16px;
        }

        .lang-search-form{
            display:grid;
            grid-template-columns:1fr auto;
            gap:12px;
        }

        @media (max-width: 640px){
            .lang-search-form{
                grid-template-columns:1fr;
            }
        }

        .lang-input,
        .lang-select{
            width:100%;
            border-radius:14px;
            background:#111827;
            border:1px solid rgba(255,255,255,.08);
            color:#fff;
            padding:14px 16px;
            font-size:14px;
            outline:none;
        }

        .lang-input:focus,
        .lang-select:focus{
            border-color:rgba(59,130,246,.65);
            box-shadow:0 0 0 4px rgba(59,130,246,.10);
        }

        .lang-form-panel{
            padding:20px;
        }

        .lang-form-title{
            margin:0 0 6px;
            font-size:22px;
            font-weight:900;
        }

        .lang-form-subtitle{
            margin:0 0 18px;
            color:#94a3b8;
            font-size:13px;
        }

        .lang-form-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:14px;
        }

        @media (max-width: 760px){
            .lang-form-grid{
                grid-template-columns:1fr;
            }
        }

        .lang-form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:16px;
        }

        .lang-table-head{
            padding:20px 22px;
            border-bottom:1px solid rgba(255,255,255,.06);
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
        }

        .lang-table-head h2{
            margin:0;
            font-size:22px;
            font-weight:900;
        }

        .lang-table-head p{
            margin:4px 0 0;
            color:#94a3b8;
            font-size:13px;
        }

        .lang-count-badge{
            display:inline-flex;
            align-items:center;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.08);
            color:#dbe4f0;
            font-size:12px;
            font-weight:800;
        }

        .lang-table-wrap{
            overflow:auto;
        }

        .lang-table{
            width:100%;
            border-collapse:collapse;
            min-width:920px;
        }

        .lang-table thead{
            background:rgba(255,255,255,.03);
        }

        .lang-table th{
            text-align:left;
            padding:16px 18px;
            color:#e5e7eb;
            font-size:13px;
            font-weight:800;
            border-bottom:1px solid rgba(255,255,255,.06);
        }

        .lang-table td{
            padding:18px;
            border-bottom:1px solid rgba(255,255,255,.06);
            vertical-align:top;
        }

        .lang-table tbody tr:hover{
            background:rgba(255,255,255,.02);
        }

        .lang-name{
            font-size:15px;
            font-weight:900;
            color:#fff;
            margin:0 0 6px;
        }

        .lang-meta{
            color:#94a3b8;
            font-size:12px;
            line-height:1.7;
        }

        .lang-code{
            display:inline-flex;
            align-items:center;
            padding:8px 10px;
            border-radius:10px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.06);
            font-size:12px;
            font-weight:800;
            color:#e5e7eb;
            letter-spacing:.04em;
        }

        .lang-status{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            font-size:12px;
            font-weight:800;
        }

        .lang-status.active{
            background:rgba(34,197,94,.12);
            border:1px solid rgba(34,197,94,.18);
            color:#bbf7d0;
        }

        .lang-status.inactive{
            background:rgba(239,68,68,.10);
            border:1px solid rgba(239,68,68,.16);
            color:#fecaca;
        }

        .lang-actions{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }

        .lang-empty{
            padding:24px;
            color:#94a3b8;
            text-align:center;
        }

        .lang-alert{
            border-radius:18px;
            padding:14px 16px;
            font-size:14px;
            margin-bottom:18px;
        }

        .lang-alert.success{
            background:rgba(34,197,94,.10);
            border:1px solid rgba(34,197,94,.16);
            color:#bbf7d0;
        }

        .lang-alert.error{
            background:rgba(239,68,68,.10);
            border:1px solid rgba(239,68,68,.16);
            color:#fecaca;
        }
    </style>

    @php
        $languages = $languages ?? collect();
        $editingLanguage = $editingLanguage ?? null;

        $activeCount = $languages->filter(function ($item) {
            return (bool)($item->is_active ?? false);
        })->count();

        $inactiveCount = max(0, $languages->count() - $activeCount);
    @endphp

    <div class="lang-page">
        @if(session('success'))
            <div class="lang-alert success">{{ session('success') }}</div>
        @endif

        @if($errors->any())
            <div class="lang-alert error">
                {{ $errors->first() }}
            </div>
        @endif

        <section class="lang-hero">
            <div class="lang-hero-grid">
                <div>
                    <div class="lang-eyebrow">Content Settings</div>
                    <h1 class="lang-title">Languages</h1>
                    <p class="lang-subtitle">
                        Create, organize, and activate the languages available across your streaming platform.
                    </p>

                    <div class="lang-hero-actions">
                        <a href="#language-form" class="lang-btn-primary">+ Add Language</a>
                        <a href="#language-table" class="lang-btn-secondary">View All Languages</a>
                    </div>
                </div>

                <div class="lang-stat-grid">
                    <div class="lang-stat">
                        <strong>{{ $languages->count() }}</strong>
                        <span>Total languages</span>
                    </div>
                    <div class="lang-stat">
                        <strong>{{ $activeCount }}</strong>
                        <span>Active languages</span>
                    </div>
                    <div class="lang-stat">
                        <strong>{{ $inactiveCount }}</strong>
                        <span>Inactive languages</span>
                    </div>
                    <div class="lang-stat">
                        <strong>{{ $languages->pluck('code')->filter()->count() }}</strong>
                        <span>Codes assigned</span>
                    </div>
                </div>
            </div>
        </section>

        <div class="lang-toolbar">
            <div class="lang-search-panel">
                <form method="GET" action="{{ route('admin.languages.index') }}" class="lang-search-form">
                    <input
                        type="text"
                        name="search"
                        class="lang-input"
                        placeholder="Search language name or code..."
                        value="{{ request('search') }}"
                    >
                    <button class="lang-btn-secondary" type="submit">Search</button>
                </form>
            </div>
        </div>

        <section id="language-form" class="lang-form-panel mt-6">
            <h2 class="lang-form-title">
                {{ $editingLanguage ? 'Edit Language' : 'Add New Language' }}
            </h2>
            <p class="lang-form-subtitle">
                Use short codes like <strong>en</strong>, <strong>fr</strong>, <strong>es</strong>. Mark a language active when it should appear across content and filtering.
            </p>

            <form
                action="{{ $editingLanguage ? route('admin.languages.update', $editingLanguage->id) : route('admin.languages.store') }}"
                method="POST"
            >
                @csrf
                @if($editingLanguage)
                    @method('PUT')
                @endif

                <div class="lang-form-grid">
                    <div>
                        <label class="block text-sm font-semibold mb-2">Language Name</label>
                        <input
                            type="text"
                            name="name"
                            class="lang-input"
                            placeholder="e.g. English"
                            value="{{ old('name', $editingLanguage->name ?? '') }}"
                            required
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-semibold mb-2">Language Code</label>
                        <input
                            type="text"
                            name="code"
                            class="lang-input"
                            placeholder="e.g. en"
                            value="{{ old('code', $editingLanguage->code ?? '') }}"
                            required
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-semibold mb-2">Native Name</label>
                        <input
                            type="text"
                            name="native_name"
                            class="lang-input"
                            placeholder="e.g. English / Français"
                            value="{{ old('native_name', $editingLanguage->native_name ?? '') }}"
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-semibold mb-2">Status</label>
                        <select name="is_active" class="lang-select">
                            <option value="1" @selected(old('is_active', $editingLanguage->is_active ?? 1) == 1)>Active</option>
                            <option value="0" @selected(old('is_active', $editingLanguage->is_active ?? 1) == 0)>Inactive</option>
                        </select>
                    </div>
                </div>

                <div class="lang-form-actions">
                    <button type="submit" class="lang-btn-primary">
                        {{ $editingLanguage ? 'Update Language' : 'Save Language' }}
                    </button>

                    @if($editingLanguage)
                        <a href="{{ route('admin.languages.index') }}" class="lang-btn-secondary">Cancel Edit</a>
                    @endif
                </div>
            </form>
        </section>

        <section id="language-table" class="lang-table-panel mt-6">
            <div class="lang-table-head">
                <div>
                    <h2>Language Library</h2>
                    <p>Manage all languages available in your admin panel.</p>
                </div>

                <div class="lang-count-badge">
                    {{ $languages->count() }} language{{ $languages->count() === 1 ? '' : 's' }}
                </div>
            </div>

            <div class="lang-table-wrap">
                <table class="lang-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Native Name</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th style="width: 260px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($languages as $language)
                            <tr>
                                <td>
                                    <div class="lang-name">{{ $language->name ?? 'Untitled' }}</div>
                                    <div class="lang-meta">
                                        ID: {{ $language->id }}
                                    </div>
                                </td>

                                <td>
                                    <span class="lang-code">{{ strtoupper($language->code ?? '--') }}</span>
                                </td>

                                <td>
                                    <div class="lang-meta">
                                        {{ $language->native_name ?? 'Not set' }}
                                    </div>
                                </td>

                                <td>
                                    <span class="lang-status {{ !empty($language->is_active) ? 'active' : 'inactive' }}">
                                        {{ !empty($language->is_active) ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>

                                <td>
                                    <div class="lang-meta">
                                        {{ optional($language->created_at)->format('M d, Y') ?? '—' }}
                                    </div>
                                </td>

                                <td>
                                    <div class="lang-actions">
                                        <a href="{{ route('admin.languages.edit', $language->id) }}" class="lang-btn-edit">
                                            Edit
                                        </a>

                                        <form action="{{ route('admin.languages.toggle', $language->id) }}" method="POST">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="lang-btn-toggle">
                                                {{ !empty($language->is_active) ? 'Deactivate' : 'Activate' }}
                                            </button>
                                        </form>

                                        <form action="{{ route('admin.languages.destroy', $language->id) }}" method="POST" onsubmit="return confirm('Delete this language?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="lang-btn-danger">
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">
                                    <div class="lang-empty">
                                        No languages found yet. Add your first language above.
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>
@endsection