import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { notFound } from 'next/navigation';
import Link from 'next/link';
import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Package, PlusCircle } from 'lucide-react';
import { getStorageUrl } from '@/lib/supabase';
import TastingNoteForm from '@/components/TastingNoteForm';
import StatusSwitcher from '@/components/StatusSwitcher';
import TastingList from '@/components/TastingList';
import DeleteBottleButton from '@/components/DeleteBottleButton';
import EditBottleForm from '@/components/EditBottleForm';
import { validateSession } from '@/services/validate-session';

export default async function BottlePage({
    params,
    searchParams
}: {
    params: { id: string },
    searchParams: { session_id?: string }
}) {
    let sessionId = searchParams.session_id;

    // Validate Session Age (12 hour limit)
    if (sessionId) {
        const isValid = await validateSession(sessionId);
        if (!isValid) {
            sessionId = undefined;
        }
    }
    const supabase = createServerComponentClient({ cookies });

    const { data: bottle } = await supabase
        .from('bottles')
        .select('*')
        .eq('id', params.id)
        .single();

    if (!bottle) {
        notFound();
    }

    const { data: tastings } = await supabase
        .from('tastings')
        .select(`
            *,
            tasting_sessions (
                id,
                name
            ),
            tasting_tags (
                buddies (
                    id,
                    name
                )
            )
        `)
        .eq('bottle_id', params.id)
        .order('created_at', { ascending: false });

    return (
        <main className="min-h-screen bg-zinc-50 dark:bg-black p-4 md:p-12 lg:p-24">
            <div className="max-w-4xl mx-auto space-y-6 md:space-y-12">
                {/* Back Button */}
                <Link
                    href={`/${sessionId ? `?session_id=${sessionId}` : ''}`}
                    className="inline-flex items-center gap-2 text-zinc-500 hover:text-amber-600 transition-colors font-medium mb-4"
                >
                    <ChevronLeft size={20} />
                    Zurück zur Sammlung
                </Link>


                {/* Hero Section */}
                <section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
                    <div className="aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl border border-zinc-200 dark:border-zinc-800">
                        <img
                            src={getStorageUrl(bottle.image_url)}
                            alt={bottle.name}
                            className="w-full h-full object-cover"
                        />
                    </div>

                    <div className="space-y-6">
                        <div>
                            <h1 className="text-2xl md:text-4xl font-black text-zinc-900 dark:text-white tracking-tighter leading-tight">
                                {bottle.name}
                            </h1>
                            <p className="text-sm md:text-xl text-amber-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>

                            {bottle.whiskybase_id && (
                                <div className="mt-4">
                                    <a
                                        href={`https://www.whiskybase.com/whiskies/whisky/${bottle.whiskybase_id}`}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="inline-flex items-center gap-2 px-4 py-2 bg-[#db0000] text-white rounded-xl text-sm font-bold shadow-lg shadow-red-600/20 hover:scale-[1.05] transition-transform"
                                    >
                                        <ExternalLink size={16} />
                                        Whiskybase ID: {bottle.whiskybase_id}
                                    </a>
                                </div>
                            )}
                        </div>

                        <div className="grid grid-cols-2 gap-4">
                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm flex flex-col justify-between">
                                <div>
                                    <div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
                                        <Tag size={14} /> Kategorie
                                    </div>
                                    <div className="font-semibold dark:text-zinc-200">{bottle.category || '-'}</div>
                                </div>
                            </div>
                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
                                <div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
                                    <Droplets size={14} /> Alkoholgehalt
                                </div>
                                <div className="font-semibold dark:text-zinc-200">{bottle.abv}% Vol.</div>
                            </div>
                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
                                <div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
                                    <Award size={14} /> Alter
                                </div>
                                <div className="font-semibold dark:text-zinc-200">{bottle.age ? `${bottle.age} Jahre` : '-'}</div>
                            </div>
                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
                                <div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
                                    <Calendar size={14} /> Zuletzt verkostet
                                </div>
                                <div className="font-semibold dark:text-zinc-200">
                                    {tastings && tastings.length > 0
                                        ? new Date(tastings[0].created_at).toLocaleDateString('de-DE')
                                        : 'Noch nie'}
                                </div>
                            </div>
                        </div>

                        <div className="pt-2 space-y-4">
                            <StatusSwitcher bottleId={bottle.id} currentStatus={bottle.status} />
                            <EditBottleForm bottle={bottle} />
                            <DeleteBottleButton bottleId={bottle.id} />
                        </div>
                    </div>
                </section>

                <hr className="border-zinc-200 dark:border-zinc-800" />

                {/* Tasting Notes Section */}
                <section className="space-y-8">
                    <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                        <div>
                            <h2 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">Tasting Notes</h2>
                            <p className="text-zinc-500 mt-1">Hier findest du deine bisherigen Eindrücke.</p>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 items-start">
                        {/* Form */}
                        <div className="lg:col-span-1 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 bg-white dark:bg-zinc-900/50 md:sticky md:top-24">
                            <h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-amber-600">
                                <Droplets size={20} /> Dram bewerten
                            </h3>
                            <TastingNoteForm bottleId={bottle.id} sessionId={sessionId} />
                        </div>

                        {/* List */}
                        <div className="lg:col-span-2">
                            <TastingList initialTastings={tastings || []} />
                        </div>
                    </div>
                </section>
            </div>
        </main>
    );
}