'use client';

import React, { useState, useEffect } from 'react';
import { createClient } from '@/lib/supabase/client';
import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight, Play, Square, Zap } from 'lucide-react';
import Link from 'next/link';
import AvatarStack from '@/components/AvatarStack';
import { deleteSession } from '@/services/delete-session';
import { closeSession } from '@/services/close-session';
import { useSession } from '@/context/SessionContext';
import { useParams, useRouter } from 'next/navigation';
import { useI18n } from '@/i18n/I18nContext';
import SessionTimeline from '@/components/SessionTimeline';
import SessionABVCurve from '@/components/SessionABVCurve';
import OfflineIndicator from '@/components/OfflineIndicator';
import BulkScanSheet from '@/components/BulkScanSheet';
import BottleSkeletonCard from '@/components/BottleSkeletonCard';

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

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

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

interface SessionTasting {
    id: string;
    rating: number;
    tasted_at: string;
    bottles: {
        id: string;
        name: string;
        distillery: string;
        image_url?: string | null;
        abv: number;
        category?: string;
        processing_status?: string;
    };
    tasting_tags: {
        tags: {
            name: string;
        };
    }[];
}

export default function SessionDetailPage() {
    const { t } = useI18n();
    const { id } = useParams();
    const router = useRouter();
    const supabase = createClient();
    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);
    const [isDeleting, setIsDeleting] = useState(false);
    const [isClosing, setIsClosing] = useState(false);
    const [isBulkScanOpen, setIsBulkScanOpen] = useState(false);

    useEffect(() => {
        fetchSessionData();

        // Subscribe to bottle updates for realtime processing status
        const channel = supabase
            .channel('bottle-updates')
            .on(
                'postgres_changes',
                { event: 'UPDATE', schema: 'public', table: 'bottles' },
                (payload) => {
                    // Refresh if a bottle's processing_status changed
                    if (payload.new && payload.old) {
                        if (payload.new.processing_status !== payload.old.processing_status) {
                            fetchSessionData();
                        }
                    }
                }
            )
            .subscribe();

        return () => {
            supabase.removeChannel(channel);
        };
    }, [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, 
                    tasted_at, 
                    bottles(id, name, distillery, image_url, abv, category, processing_status),
                    tasting_tags(tags(name))
                `)
                .eq('session_id', id)
                .order('tasted_at', { ascending: true });

            setTastings((tastingData as any) || []);

            // 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();
        }
    };

    const handleCloseSession = async () => {
        if (!confirm('Möchtest du diese Session wirklich abschließen?')) return;

        setIsClosing(true);
        const result = await closeSession(id as string);

        if (result.success) {
            if (activeSession?.id === id) {
                setActiveSession(null);
            }
            fetchSessionData();
        } else {
            alert(result.error);
        }
        setIsClosing(false);
    };

    const handleDeleteSession = async () => {
        if (!confirm('Möchtest du diese Session wirklich löschen? Alle Verknüpfungen gehen verloren.')) return;

        setIsDeleting(true);
        const result = await deleteSession(id as string);

        if (result.success) {
            if (activeSession?.id === id) {
                setActiveSession(null);
            }
            router.push('/');
        } else {
            alert(result.error);
            setIsDeleting(false);
        }
    };

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

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

    return (
        <main className="min-h-screen bg-zinc-950 p-4 md:p-12 lg:p-24">
            <div className="max-w-4xl mx-auto space-y-8">
                {/* Back Button */}
                <div className="flex justify-between items-center">
                    <Link
                        href="/"
                        className="inline-flex items-center gap-2 text-zinc-500 hover:text-orange-600 transition-colors font-bold uppercase text-[10px] tracking-[0.2em]"
                    >
                        <ChevronLeft size={16} />
                        Alle Sessions
                    </Link>
                    <OfflineIndicator />
                </div>

                {/* Hero */}
                <header className="bg-zinc-900 rounded-3xl p-8 border border-zinc-800 shadow-xl relative overflow-hidden group">
                    {/* Visual Eyecatcher: Background Glow */}
                    {tastings.length > 0 && tastings[0].bottles.image_url && (
                        <div className="absolute top-0 right-0 w-1/2 h-full opacity-20 dark:opacity-30 pointer-events-none">
                            <div
                                className="absolute inset-0 bg-cover bg-center scale-150 blur-3xl transition-all duration-1000 group-hover:scale-125"
                                style={{ backgroundImage: `url(${tastings[0].bottles.image_url})` }}
                            />
                        </div>
                    )}

                    <div className="absolute top-0 right-0 p-8 opacity-5 text-zinc-400">
                        <GlassWater size={120} />
                    </div>

                    <div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                        <div className="flex-1 flex flex-col md:flex-row gap-6 items-start md:items-center">
                            {/* Visual Eyecatcher: Bottle Preview */}
                            {tastings.length > 0 && tastings[0].bottles.image_url && (
                                <div className="shrink-0 relative">
                                    <div className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-zinc-800 border-2 border-orange-500/20 shadow-2xl overflow-hidden relative group-hover:rotate-3 transition-transform duration-500">
                                        <img
                                            src={tastings[0].bottles.image_url}
                                            alt={tastings[0].bottles.name}
                                            className="w-full h-full object-cover"
                                        />
                                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                                    </div>
                                    <div className="absolute -bottom-2 -right-2 bg-orange-600 text-white text-[10px] font-black px-2 py-1 rounded-lg shadow-lg rotate-12">
                                        LATEST
                                    </div>
                                </div>
                            )}

                            <div className="space-y-2">
                                <div className="flex items-center gap-2">
                                    <div className="flex items-center gap-2 text-orange-600 font-black uppercase text-[10px] tracking-widest">
                                        <Sparkles size={14} />
                                        Tasting Session
                                    </div>
                                    {session.ended_at && (
                                        <span className="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-widest border border-zinc-200 dark:border-zinc-700">Abgeschlossen</span>
                                    )}
                                </div>
                                <h1 className="text-4xl md:text-5xl font-black text-zinc-50 tracking-tighter">
                                    {session.name}
                                </h1>
                                <div className="flex flex-wrap items-center gap-3 sm:gap-6 text-zinc-500 font-bold text-sm">
                                    <span className="flex items-center gap-1.5 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm">
                                        <Calendar size={16} className="text-orange-600" />
                                        {new Date(session.scheduled_at).toLocaleDateString('de-DE')}
                                    </span>
                                    {participants.length > 0 && (
                                        <div className="flex items-center gap-2 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm">
                                            <Users size={16} className="text-orange-600" />
                                            <AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
                                        </div>
                                    )}
                                    {tastings.length > 0 && (
                                        <span className="flex items-center gap-1.5 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm transition-all animate-in fade-in slide-in-from-left-2">
                                            <GlassWater size={16} className="text-orange-600" />
                                            {tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
                                        </span>
                                    )}
                                </div>
                            </div>
                        </div>

                        <div className="flex gap-2">
                            {!session.ended_at && (
                                activeSession?.id !== session.id ? (
                                    <button
                                        onClick={() => setActiveSession({ id: session.id, name: session.name })}
                                        className="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-orange-950/20"
                                    >
                                        <Play size={18} fill="currentColor" />
                                        Starten
                                    </button>
                                ) : (
                                    <button
                                        onClick={handleCloseSession}
                                        disabled={isClosing}
                                        className="px-6 py-3 bg-zinc-100 text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-800 hover:bg-red-600 hover:text-white transition-all group"
                                    >
                                        {isClosing ? <Loader2 size={18} className="animate-spin" /> : <Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />}
                                        Beenden
                                    </button>
                                )
                            )}

                            <button
                                onClick={handleDeleteSession}
                                disabled={isDeleting}
                                title="Session löschen"
                                className="p-3 bg-red-900/10 text-red-400 rounded-2xl hover:bg-red-600 hover:text-white transition-all border border-red-900/20 disabled:opacity-50"
                            >
                                {isDeleting ? <Loader2 size={20} className="animate-spin" /> : <Trash2 size={20} />}
                            </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-zinc-900 rounded-3xl p-6 border border-zinc-800 shadow-lg">
                            <h3 className="text-sm font-black uppercase tracking-widest text-zinc-500 mb-6 flex items-center gap-2">
                                <Users size={16} className="text-orange-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-300">{p.buddies.name}</span>
                                            <button
                                                onClick={() => handleRemoveParticipant(p.buddy_id)}
                                                className="text-zinc-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
                                            >
                                                <Trash2 size={14} />
                                            </button>
                                        </div>
                                    ))
                                )}
                            </div>

                            <div className="border-t border-zinc-800 pt-6">
                                <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 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-800 border border-zinc-700 rounded-xl px-3 py-2 text-xs font-bold text-zinc-300 outline-none focus:ring-2 focus:ring-orange-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>

                        {/* ABV Curve */}
                        {tastings.length > 0 && (
                            <SessionABVCurve
                                tastings={tastings.map(t => ({
                                    id: t.id,
                                    abv: t.bottles.abv || 40,
                                    tasted_at: t.tasted_at
                                }))}
                            />
                        )}
                    </aside>

                    {/* Main Content: Bottle List */}
                    <section className="md:col-span-2 space-y-6">
                        <div className="bg-zinc-900 rounded-3xl p-6 border 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-500 flex items-center gap-2">
                                    <GlassWater size={16} className="text-orange-600" />
                                    Verkostete Flaschen
                                </h3>
                                <div className="flex gap-2">
                                    {!session.ended_at && (
                                        <button
                                            onClick={() => setIsBulkScanOpen(true)}
                                            className="bg-zinc-800 hover:bg-zinc-700 text-orange-500 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest flex items-center gap-2 transition-all border border-zinc-700"
                                        >
                                            <Zap size={16} />
                                            Bulk Scan
                                        </button>
                                    )}
                                    <Link
                                        href={`/?session_id=${id}`}
                                        className="bg-orange-600 hover:bg-orange-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-orange-600/20"
                                    >
                                        <Plus size={16} />
                                        Flasche
                                    </Link>
                                </div>
                            </div>

                            <SessionTimeline
                                tastings={tastings.map(t => ({
                                    id: t.id,
                                    bottle_id: t.bottles.id,
                                    bottle_name: t.bottles.name,
                                    tasted_at: t.tasted_at,
                                    rating: t.rating,
                                    tags: t.tasting_tags?.map((tg: any) => tg.tags.name) || [],
                                    category: t.bottles.category
                                }))}
                                sessionStart={session.scheduled_at} // Fallback to scheduled time if no started_at
                            />
                        </div>
                    </section>
                </div>
            </div>

            {/* Bulk Scan Sheet */}
            <BulkScanSheet
                isOpen={isBulkScanOpen}
                onClose={() => setIsBulkScanOpen(false)}
                sessionId={id as string}
                sessionName={session.name}
                onSuccess={(bottleIds) => {
                    setIsBulkScanOpen(false);
                    fetchSessionData();
                }}
            />
        </main>
    );
}