@extends('layouts.app')

@section('title', 'Instagram Reel Downloader')
@section('meta_description', 'Paste an Instagram reel link to preview the video and download it.')
@section('meta_keywords', 'instagram reel downloader, reel preview, reel download')

@section('content')
    <div class="mx-auto max-w-4xl py-10">
        <div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
            <div class="bg-gradient-to-r from-slate-900 via-cyan-900 to-slate-800 px-6 py-10 text-white sm:px-10">
                <p class="text-xs uppercase tracking-[0.35em] text-cyan-200">Instagram Tool</p>
                <h1 class="mt-3 text-3xl font-bold sm:text-5xl">Preview and download Instagram reels</h1>
                <p class="mt-4 max-w-2xl text-sm text-slate-200 sm:text-base">
                    Paste a public Instagram reel link, check the preview, then download the video with one click.
                </p>
            </div>

            <div class="p-6 sm:p-10">
                <form action="{{ route('frontend.instagram.reel.index') }}" method="get" class="grid gap-4 rounded-2xl border border-slate-200 bg-slate-50 p-4 sm:grid-cols-[1fr_auto]">
                    <div>
                        <label for="url" class="block text-sm font-medium text-slate-700">Instagram Reel URL</label>
                        <input
                            id="url"
                            name="url"
                            type="url"
                            value="{{ $url }}"
                            placeholder="https://www.instagram.com/reel/SHORTCODE/"
                            class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm focus:border-cyan-500 focus:outline-none"
                            required
                        >
                        @if ($error)
                            <p class="mt-2 text-sm text-rose-600">{{ $error }}</p>
                        @endif
                    </div>
                    <div class="flex items-end">
                        <button class="inline-flex w-full items-center justify-center rounded-xl bg-cyan-600 px-5 py-3 text-sm font-semibold text-white hover:bg-cyan-700 sm:w-auto">
                            Preview Reel
                        </button>
                    </div>
                </form>

                @if ($preview)
                    <div class="mt-8 grid gap-6 lg:grid-cols-[1.25fr_0.75fr]">
                        <div class="overflow-hidden rounded-3xl border border-slate-200 bg-slate-950">
                            @if (!empty($preview['video_url']))
                                <div class="relative">
                                    <video class="h-full w-full max-h-[520px] object-cover" controls playsinline preload="metadata" poster="{{ $preview['thumbnail'] ?? '' }}">
                                        <source src="{{ $preview['video_url'] }}" type="video/mp4">
                                    </video>
                                    <div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                                        <a
                                            href="{{ route('frontend.instagram.reel.index', ['url' => $url, 'download' => 1]) }}"
                                            class="pointer-events-auto inline-flex items-center gap-2 rounded-xl bg-white/95 px-4 py-2 text-sm font-semibold text-slate-900 shadow-lg hover:bg-white"
                                        >
                                            Download Reel
                                        </a>
                                    </div>
                                </div>
                            @elseif (!empty($preview['thumbnail']))
                                <img src="{{ $preview['thumbnail'] }}" alt="{{ $preview['title'] ?? 'Instagram reel' }}" class="h-full w-full max-h-[520px] object-cover">
                            @endif
                        </div>

                        <div class="space-y-4 rounded-3xl border border-slate-200 bg-white p-5">
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-wide text-cyan-600">Preview ready</p>
                                <h2 class="mt-2 text-2xl font-bold text-slate-900">{{ $preview['title'] ?? 'Instagram Reel' }}</h2>
                                <p class="mt-1 text-sm text-slate-500">Shortcode: {{ $preview['shortcode'] ?? '-' }}</p>
                            </div>

                            <dl class="grid grid-cols-2 gap-3 text-sm">
                                <div class="rounded-2xl bg-slate-50 p-3">
                                    <dt class="text-slate-500">Source</dt>
                                    <dd class="mt-1 font-semibold text-slate-900">Instagram</dd>
                                </div>
                                <div class="rounded-2xl bg-slate-50 p-3">
                                    <dt class="text-slate-500">Duration</dt>
                                    <dd class="mt-1 font-semibold text-slate-900">
                                        {{ !empty($preview['duration']) ? gmdate('i:s', (int) $preview['duration']) : 'Unknown' }}
                                    </dd>
                                </div>
                            </dl>

                            <a
                                href="{{ route('frontend.instagram.reel.index', ['url' => $url, 'download' => 1]) }}"
                                class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white hover:bg-slate-800"
                            >
                                Download Reel
                            </a>

                            <p class="text-xs leading-5 text-slate-500">
                                Only use public content you have permission to download.
                            </p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection