'use client';

import React, { useState, useEffect } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight, Play, Square } from 'lucide-react';
import Link from 'next/link';
import { useSession } from '@/context/SessionContext';
import { useParams, useRouter } from 'next/navigation';
import { useI18n } from '@/i18n/I18nContext';

interface Buddy {
    id: string;
    name: string;
}

interface Participant {
    buddy_id: string;
    buddies: {
        name: string;
    };
}

interface Session {
    id: string;
    name: string;
    scheduled_at: string;
}

interface SessionTasting {
    id: string;
    rating: number;
    bottles: {
        id: string;
        name: string;
        distillery: string;
    };
}

export default function SessionDetailPage() {
    const { t } = useI18n();
    const { id } = useParams();
    const router = useRouter();
    const supabase = createClientComponentClient();
    const [session, setSession] = useState<Session | null>(null);
    const [participants, setParticipants] = useState<Participant[]>([]);
    const [tastings, setTastings] = useState<SessionTasting[]>([]);
    const [allBuddies, setAllBuddies] = useState<Buddy[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const { activeSession, setActiveSession } = useSession();
    const [isAddingParticipant, setIsAddingParticipant] = useState(false);

    useEffect(() => {
        fetchSessionData();
    }, [id]);

    const fetchSessionData = async () => {
        setIsLoading(true);

        // Fetch Session
        const { data: sessionData } = await supabase
            .from('tasting_sessions')
            .select('*')
            .eq('id', id)
            .single();

        if (sessionData) {
            setSession(sessionData);

            // Fetch Participants
            const { data: partData } = await supabase
                .from('session_participants')
                .select('buddy_id, buddies(name)')
                .eq('session_id', id);

            setParticipants((partData as any)?.map((p: any) => ({
                buddy_id: p.buddy_id,
                buddies: p.buddies
            })) || []);

            // Fetch Tastings in this session
            const { data: tastingData } = await supabase
                .from('tastings')
                .select('id, rating, bottles(id, name, distillery)')
                .eq('session_id', id);

            setTastings((tastingData as any)?.map((t: any) => ({
                id: t.id,
                rating: t.rating,
                bottles: t.bottles
            })) || []);

            // Fetch all buddies for the picker
            const { data: buddies } = await supabase
                .from('buddies')
                .select('id, name')
                .order('name');
            setAllBuddies(buddies || []);
        }

        setIsLoading(false);
    };

    const handleAddParticipant = async (buddyId: string) => {
        if (participants.some(p => p.buddy_id === buddyId)) return;

        const { data: { user } } = await supabase.auth.getUser();
        if (!user) return;

        const { error } = await supabase
            .from('session_participants')
            .insert([{
                session_id: id,
                buddy_id: buddyId,
                user_id: user.id
            }]);

        if (!error) {
            fetchSessionData();
        }
    };

    const handleRemoveParticipant = async (buddyId: string) => {
        const { error } = await supabase
            .from('session_participants')
            .delete()
            .eq('session_id', id)
            .eq('buddy_id', buddyId);

        if (!error) {
            fetchSessionData();
        }
    };

    if (isLoading) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-black">
                <Loader2 size={48} className="animate-spin text-amber-600" />
            </div>
        );
    }

    if (!session) {
        return (
            <div className="min-h-screen flex flex-col items-center justify-center gap-4 bg-zinc-50 dark:bg-black p-6">
                <h1 className="text-2xl font-bold">Session nicht gefunden</h1>
                <Link href="/" className="text-amber-600 font-bold">Zurück zum Start</Link>
            </div>
        );
    }

    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-8">
                {/* Back Button */}
                <Link
                    href="/"
                    className="inline-flex items-center gap-2 text-zinc-400 hover:text-amber-600 transition-colors font-bold uppercase text-[10px] tracking-[0.2em]"
                >
                    <ChevronLeft size={16} />
                    Alle Sessions
                </Link>

                {/* Hero */}
                <header className="bg-white dark:bg-zinc-900 rounded-3xl p-8 border border-zinc-200 dark:border-zinc-800 shadow-xl relative overflow-hidden">
                    <div className="absolute top-0 right-0 p-8 opacity-5">
                        <GlassWater size={120} />
                    </div>
                    <div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
                        <div className="space-y-2">
                            <div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
                                <Sparkles size={14} />
                                Tasting Session
                            </div>
                            <h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
                                {session.name}
                            </h1>
                            <div className="flex items-center gap-4 text-zinc-500 font-bold text-sm">
                                <span className="flex items-center gap-1.5">
                                    <Calendar size={16} className="text-zinc-400" />
                                    {new Date(session.scheduled_at).toLocaleDateString('de-DE')}
                                </span>
                                {tastings.length > 0 && (
                                    <span className="flex items-center gap-1.5 transition-all animate-in fade-in slide-in-from-left-2">
                                        <GlassWater size={16} className="text-zinc-400" />
                                        {tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
                                    </span>
                                )}
                            </div>
                        </div>

                        <div className="flex gap-2">
                            {activeSession?.id !== session.id ? (
                                <button
                                    onClick={() => setActiveSession({ id: session.id, name: session.name })}
                                    className="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-amber-600/20"
                                >
                                    <Play size={18} fill="currentColor" />
                                    Session Starten
                                </button>
                            ) : (
                                <button
                                    onClick={() => setActiveSession(null)}
                                    className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800 hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all group"
                                >
                                    <Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />
                                    Session Stoppen
                                </button>
                            )}
                        </div>
                    </div>
                </header>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {/* Sidebar: Participants */}
                    <aside className="md:col-span-1 space-y-6">
                        <div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-lg">
                            <h3 className="text-sm font-black uppercase tracking-widest text-zinc-400 mb-6 flex items-center gap-2">
                                <Users size={16} className="text-amber-600" />
                                Teilnehmer
                            </h3>

                            <div className="space-y-3 mb-6">
                                {participants.length === 0 ? (
                                    <p className="text-xs text-zinc-500 italic">Noch keine Teilnehmer...</p>
                                ) : (
                                    participants.map((p) => (
                                        <div key={p.buddy_id} className="flex items-center justify-between group">
                                            <span className="text-sm font-bold text-zinc-700 dark:text-zinc-300">{p.buddies.name}</span>
                                            <button
                                                onClick={() => handleRemoveParticipant(p.buddy_id)}
                                                className="text-zinc-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
                                            >
                                                <Trash2 size={14} />
                                            </button>
                                        </div>
                                    ))
                                )}
                            </div>

                            <div className="border-t border-zinc-100 dark:border-zinc-800 pt-6">
                                <label className="text-[10px] font-black uppercase tracking-widest text-zinc-400 block mb-3">Buddy hinzufügen</label>
                                <select
                                    onChange={(e) => {
                                        if (e.target.value) handleAddParticipant(e.target.value);
                                        e.target.value = "";
                                    }}
                                    className="w-full bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-amber-500/50"
                                >
                                    <option value="">Auswählen...</option>
                                    {allBuddies
                                        .filter(b => !participants.some(p => p.buddy_id === b.id))
                                        .map(b => (
                                            <option key={b.id} value={b.id}>{b.name}</option>
                                        ))
                                    }
                                </select>
                            </div>
                        </div>
                    </aside>

                    {/* Main Content: Bottle List */}
                    <section className="md:col-span-2 space-y-6">
                        <div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-lg">
                            <div className="flex justify-between items-center mb-8">
                                <h3 className="text-sm font-black uppercase tracking-widest text-zinc-400 flex items-center gap-2">
                                    <GlassWater size={16} className="text-amber-600" />
                                    Verkostete Flaschen
                                </h3>
                                <Link
                                    href={`/?session_id=${id}`} // Redirect to home with context
                                    className="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-lg shadow-amber-600/20"
                                >
                                    <Plus size={16} />
                                    Flasche hinzufügen
                                </Link>
                            </div>

                            {tastings.length === 0 ? (
                                <div className="text-center py-12 text-zinc-500 italic text-sm">
                                    Noch keine Flaschen in dieser Session verkostet. 🥃
                                </div>
                            ) : (
                                <div className="space-y-4">
                                    {tastings.map((t) => (
                                        <div key={t.id} className="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-2xl border border-zinc-100 dark:border-zinc-800">
                                            <div>
                                                <div className="text-[9px] font-black text-amber-600 uppercase tracking-widest">{t.bottles.distillery}</div>
                                                <div className="font-bold text-zinc-800 dark:text-zinc-100">{t.bottles.name}</div>
                                            </div>
                                            <div className="flex items-center gap-4">
                                                <div className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 px-3 py-1 rounded-xl text-xs font-black">
                                                    {t.rating}/100
                                                </div>
                                                <Link
                                                    href={`/bottles/${t.bottles.id}`}
                                                    className="p-2 text-zinc-300 hover:text-amber-600 transition-colors"
                                                >
                                                    <ChevronRight size={20} />
                                                </Link>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </section>
                </div>
            </div >
        </main >
    );
}