@extends('layouts.admin')

@section('title', 'Categories')

@section('content')
    <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold sm:text-3xl">Category Explorer</h1>
            <p class="text-sm text-slate-500">
                {{ $currentCategory ? 'Current folder: '.$currentCategory->name : 'Root folders' }}
            </p>
        </div>
        <a href="{{ route('admin.categories.create', $currentCategory ? ['parent_id' => $currentCategory->id] : []) }}" title="{{ $currentCategory ? 'Create Subcategory' : 'Create Folder' }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-700">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 5v14m-7-7h14"/>
            </svg>
            <span>{{ $currentCategory ? 'Subcategory' : 'Add Folder' }}</span>
        </a>
    </div>

    <div class="mb-5 flex flex-wrap items-center gap-2 text-sm">
        <a href="{{ route('admin.categories.index') }}" title="Go to root folders" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 hover:text-cyan-700">Root</a>
        @foreach ($breadcrumbs as $crumb)
            <span class="text-slate-400">/</span>
            <a href="{{ route('admin.categories.index', ['parent_id' => $crumb->id]) }}" title="Open {{ $crumb->name }}" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 hover:text-cyan-700">
                {{ $crumb->name }}
            </a>
        @endforeach
    </div>

    @if ($currentCategory)
        @php
            $currentHasChildren = (int) ($currentCategory->children_count ?? 0) > 0;
            $currentHasContent = (int) ($currentCategory->ringtones_count ?? 0) > 0;
        @endphp
        <div class="mb-4 grid grid-cols-1 gap-2 text-xs sm:flex sm:flex-wrap">
            @if (! $currentHasContent)
                <a href="{{ route('admin.categories.create', ['parent_id' => $currentCategory->id]) }}" title="Create Subcategory in {{ $currentCategory->name }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-indigo-600 sm:w-auto">
                    <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 5v14m-7-7h14"/>
                    </svg>
                    <span>Subcategory</span>
                </a>
            @endif
            @if (! $currentHasChildren)
                <a href="{{ route('admin.contents.create', ['category_id' => $currentCategory->id]) }}" title="Create Content in {{ $currentCategory->name }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-emerald-600 sm:w-auto">
                    <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 19V6l12-2v13"/>
                        <circle cx="6" cy="18" r="3" stroke-width="1.8"/>
                        <circle cx="18" cy="16" r="3" stroke-width="1.8"/>
                    </svg>
                    <span>Add Content</span>
                </a>
            @endif
            <a href="{{ route('admin.categories.edit', $currentCategory) }}" title="Edit Folder {{ $currentCategory->name }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-sky-600 sm:w-auto">
                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 20h4l10-10-4-4L4 16v4z"/>
                </svg>
                <span>Edit Folder</span>
            </a>
        </div>
    @endif

    @if ($categories->isNotEmpty())
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($categories as $category)
                <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                    <a href="{{ route('admin.categories.index', ['parent_id' => $category->id]) }}" title="Open {{ $category->name }}" class="block">
                        <div class="inline-flex items-center gap-2">
                            <svg class="h-6 w-6 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>
                            </svg>
                            <div>
                                <p class="font-semibold">{{ $category->name }}</p>
                                <p class="text-xs text-slate-500">{{ $category->children_count }} subfolders | {{ (int) ($category->subtree_contents_count ?? $category->ringtones_count) }} contents</p>
                            </div>
                        </div>
                    </a>

                    @php
                        $hasChildren = (int) $category->children_count > 0;
                        $hasContent = (int) $category->ringtones_count > 0;
                    @endphp
                    <div class="mt-3 grid grid-cols-2 gap-2 text-xs sm:flex sm:flex-wrap">
                        @if (! $hasContent)
                            <a href="{{ route('admin.categories.create', ['parent_id' => $category->id]) }}" title="Create Subcategory in {{ $category->name }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-indigo-600">
                                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 5v14m-7-7h14"/>
                                </svg>
                                <span>Subcategory</span>
                            </a>
                        @endif
                        @if (! $hasChildren)
                            <a href="{{ route('admin.contents.create', ['category_id' => $category->id]) }}" title="Create Content in {{ $category->name }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-emerald-600">
                                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 19V6l12-2v13"/>
                                    <circle cx="6" cy="18" r="3" stroke-width="1.8"/>
                                    <circle cx="18" cy="16" r="3" stroke-width="1.8"/>
                                </svg>
                                <span>Add Content</span>
                            </a>
                        @endif
                        <a href="{{ route('admin.categories.edit', $category) }}" title="Edit Folder {{ $category->name }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-sky-600">
                            <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 20h4l10-10-4-4L4 16v4z"/>
                            </svg>
                            <span>Edit Folder</span>
                        </a>
                        <form action="{{ route('admin.categories.toggle-active', $category) }}" method="post">
                            @csrf
                            @method('PATCH')
                            <button title="{{ $category->is_active ? 'Deactivate' : 'Activate' }} {{ $category->name }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 {{ $category->is_active ? 'text-amber-600' : 'text-green-600' }}">
                                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="{{ $category->is_active ? 'M5 12h14' : 'M12 5v14m-7-7h14' }}"/>
                                </svg>
                                <span>{{ $category->is_active ? 'Deactivate' : 'Activate' }}</span>
                            </button>
                        </form>
                        <form action="{{ route('admin.categories.destroy', $category) }}" method="post" onsubmit="return confirmDeleteWithPassword(this, 'Delete this category?');">
                            @csrf
                            @method('DELETE')
                            <button title="Delete {{ $category->name }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-red-200 px-2 py-1.5 text-red-600">
                                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M6 7h12m-9 0v12m6-12v12M9 7l1-2h4l1 2"/>
                                </svg>
                                <span>Delete</span>
                            </button>
                        </form>
                    </div>
                </article>
            @endforeach
        </div>
    @elseif ($currentCategory && $ringtones->isNotEmpty())
        <div class="mb-3 flex items-center justify-between">
            <h2 class="font-semibold">Contents in {{ $currentCategory->name }}</h2>
            <a href="{{ route('admin.contents.create', ['category_id' => $currentCategory->id]) }}" title="Create Content in {{ $currentCategory->name }}" class="inline-flex items-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-xs text-emerald-600">
                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 5v14m-7-7h14"/>
                </svg>
                <span>Add Content</span>
            </a>
        </div>

        <div class="space-y-3 md:hidden">
            @foreach ($ringtones as $ringtone)
                <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                    <div class="flex items-start justify-between gap-2">
                        <div>
                            <h3 class="font-semibold">{{ $ringtone->title }}</h3>
                            <p class="mt-1 text-xs text-slate-500">Downloads: {{ number_format($ringtone->downloads) }}</p>
                        </div>
                        <span class="rounded px-2 py-1 text-xs {{ $ringtone->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                            {{ $ringtone->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                    <div class="mt-2">
                        <a href="{{ $ringtone->file_url }}" download title="Download {{ $ringtone->title }}" class="truncate text-xs text-cyan-700 hover:underline">
                            {{ $ringtone->file_path }}
                        </a>
                    </div>
                    <div class="mt-2">
                        <audio controls preload="none" class="w-full">
                            <source src="{{ $ringtone->file_url }}" type="audio/mpeg">
                        </audio>
                    </div>
                    <div class="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-2">
                        <form action="{{ route('admin.contents.toggle-active', $ringtone) }}" method="post">
                            @csrf
                            @method('PATCH')
                            <button title="{{ $ringtone->is_active ? 'Deactivate' : 'Activate' }} {{ $ringtone->title }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 {{ $ringtone->is_active ? 'text-amber-600' : 'text-green-600' }}">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    @if ($ringtone->is_active)
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 2v10m0 10h.01M4.93 4.93a10 10 0 1014.14 0"/>
                                    @else
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    @endif
                                </svg>
                                <span>{{ $ringtone->is_active ? 'Deactivate' : 'Activate' }}</span>
                            </button>
                        </form>
                        <a href="{{ route('admin.contents.edit', $ringtone) }}" title="Edit {{ $ringtone->title }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-sky-600">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M16.86 3.49a2.1 2.1 0 113 3L8 18.36 4 19l.64-4L16.86 3.49z"/>
                            </svg>
                            <span>Edit</span>
                        </a>
                    </div>
                    <form class="mt-2" action="{{ route('admin.contents.destroy', $ringtone) }}" method="post" onsubmit="return confirmDeleteWithPassword(this, 'Delete this content?');">
                        @csrf
                        @method('DELETE')
                        <button title="Delete {{ $ringtone->title }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-red-200 bg-red-50 px-2 py-1.5 text-red-700">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 6h18M8 6V4h8v2m-9 0l1 14h8l1-14"/>
                            </svg>
                            <span>Delete</span>
                        </button>
                    </form>
                </article>
            @endforeach
        </div>

        <div class="hidden overflow-x-auto rounded-2xl border border-slate-200 bg-white shadow-sm md:block">
            <table class="w-full text-sm">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="p-3 text-left">Title</th>
                        <th class="p-3 text-left">File Path</th>
                        <th class="p-3 text-left">Preview</th>
                        <th class="p-3 text-left">Downloads</th>
                        <th class="p-3 text-left">Status</th>
                        <th class="p-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($ringtones as $ringtone)
                        <tr class="border-t border-slate-100">
                            <td class="p-3 font-medium">{{ $ringtone->title }}</td>
                            <td class="p-3">
                                <a href="{{ $ringtone->file_url }}" download title="Download {{ $ringtone->title }}" class="block max-w-52 truncate text-cyan-700 hover:underline">
                                    {{ $ringtone->file_path }}
                                </a>
                            </td>
                            <td class="p-3 min-w-56">
                                <audio controls preload="none" class="w-full">
                                    <source src="{{ $ringtone->file_url }}" type="audio/mpeg">
                                </audio>
                            </td>
                            <td class="p-3">{{ number_format($ringtone->downloads) }}</td>
                            <td class="p-3">
                                <span class="rounded px-2 py-1 text-xs {{ $ringtone->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                    {{ $ringtone->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="p-3">
                                <div class="flex justify-end gap-2 text-xs">
                                    <form action="{{ route('admin.contents.toggle-active', $ringtone) }}" method="post">
                                        @csrf
                                        @method('PATCH')
                                        <button title="{{ $ringtone->is_active ? 'Deactivate' : 'Activate' }} {{ $ringtone->title }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1 {{ $ringtone->is_active ? 'text-amber-600' : 'text-green-600' }}">
                                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                @if ($ringtone->is_active)
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 2v10m0 10h.01M4.93 4.93a10 10 0 1014.14 0"/>
                                                @else
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                                @endif
                                            </svg>
                                            <span>{{ $ringtone->is_active ? 'Deactivate' : 'Activate' }}</span>
                                        </button>
                                    </form>
                                    <a href="{{ route('admin.contents.edit', $ringtone) }}" title="Edit {{ $ringtone->title }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1 text-sky-600">
                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M16.86 3.49a2.1 2.1 0 113 3L8 18.36 4 19l.64-4L16.86 3.49z"/>
                                        </svg>
                                        <span>Edit</span>
                                    </a>
                                    <form action="{{ route('admin.contents.destroy', $ringtone) }}" method="post" onsubmit="return confirmDeleteWithPassword(this, 'Delete this content?');">
                                        @csrf
                                        @method('DELETE')
                                        <button title="Delete {{ $ringtone->title }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-red-200 px-2 py-1 text-red-600">
                                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 6h18M8 6V4h8v2m-9 0l1 14h8l1-14"/>
                                            </svg>
                                            <span>Delete</span>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600">
            {{ $currentCategory ? 'No subfolders or content found in this folder.' : 'No categories found.' }}
        </div>
    @endif
@endsection