Dramlog-Prod/src/components/SessionList.tsx

'use client';

import React, { useState, useEffect } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Check } from 'lucide-react';
import Link from 'next/link';
import { useI18n } from '@/i18n/I18nContext';
import { useSession } from '@/context/SessionContext';

interface Session {
    id: string;
    name: string;
    scheduled_at: string;
    participant_count?: number;
    whisky_count?: number;
}

export default function SessionList() {
    const { t, locale } = useI18n();
    const supabase = createClientComponentClient();
    const [sessions, setSessions] = useState<Session[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [isCreating, setIsCreating] = useState(false);
    const [newName, setNewName] = useState('');
    const { activeSession, setActiveSession } = useSession();

    useEffect(() => {
        fetchSessions();
    }, []);

    const fetchSessions = async () => {
        const { data, error } = await supabase
            .from('tasting_sessions')
            .select(`
                *,
                session_participants (count),
                tastings (count)
            `)
            .order('scheduled_at', { ascending: false });

        if (error) {
            console.error('Error fetching sessions:', error);
        } else {
            setSessions(data.map(s => ({
                ...s,
                participant_count: s.session_participants[0]?.count || 0,
                whisky_count: s.tastings[0]?.count || 0
            })) || []);
        }
        setIsLoading(false);
    };

    const handleCreateSession = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newName.trim()) return;

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

        const { data, error } = await supabase
            .from('tasting_sessions')
            .insert([{ name: newName.trim(), user_id: user.id }])
            .select()
            .single();

        if (error) {
            console.error('Error creating session:', error);
        } else {
            setSessions(prev => [data, ...prev]);
            setNewName('');
            setActiveSession({ id: data.id, name: data.name });
        }
        setIsCreating(false);
    };

    return (
        <div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl">
            <h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
                <GlassWater size={24} className="text-amber-600" />
                {t('session.title')}
            </h3>

            <form onSubmit={handleCreateSession} className="flex gap-2 mb-6">
                <input
                    type="text"
                    value={newName}
                    onChange={(e) => setNewName(e.target.value)}
                    placeholder={t('session.sessionName')}
                    className="flex-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
                />
                <button
                    type="submit"
                    disabled={isCreating || !newName.trim()}
                    className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
                >
                    {isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
                </button>
            </form>

            {isLoading ? (
                <div className="flex justify-center py-8 text-zinc-400">
                    <Loader2 size={24} className="animate-spin" />
                </div>
            ) : sessions.length === 0 ? (
                <div className="text-center py-8 text-zinc-500 text-sm">
                    {t('session.noSessions')}
                </div>
            ) : (
                <div className="space-y-3">
                    {sessions.map((session) => (
                        <div
                            key={session.id}
                            className={`flex items-center justify-between p-4 rounded-2xl border group transition-all ${activeSession?.id === session.id
                                ? 'bg-amber-600 border-amber-600 shadow-lg shadow-amber-600/20'
                                : 'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-100 dark:border-zinc-800 hover:border-amber-500/30'
                                }`}
                        >
                            <Link href={`/sessions/${session.id}`} className="flex-1 space-y-1 min-w-0">
                                <div className={`font-bold truncate ${activeSession?.id === session.id ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'}`}>
                                    {session.name}
                                </div>
                                <div className={`flex items-center gap-4 text-[10px] font-black uppercase tracking-widest ${activeSession?.id === session.id ? 'text-white/80' : 'text-zinc-400'}`}>
                                    <span className="flex items-center gap-1">
                                        <Calendar size={12} />
                                        {new Date(session.scheduled_at).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
                                    </span>
                                    {session.participant_count! > 0 && (
                                        <span className="flex items-center gap-1">
                                            <Users size={12} />
                                            {session.participant_count} {t('tasting.participants')}
                                        </span>
                                    )}
                                    {session.whisky_count! > 0 && (
                                        <span className="flex items-center gap-1">
                                            <GlassWater size={12} />
                                            {session.whisky_count} Whiskys
                                        </span>
                                    )}
                                </div>
                            </Link>
                            <div className="flex items-center gap-2">
                                {activeSession?.id !== session.id ? (
                                    <button
                                        onClick={() => setActiveSession({ id: session.id, name: session.name })}
                                        className="p-2 bg-white dark:bg-zinc-700 text-amber-600 rounded-xl shadow-sm border border-zinc-200 dark:border-zinc-600 hover:scale-110 transition-transform"
                                        title="Start Session"
                                    >
                                        <GlassWater size={18} />
                                    </button>
                                ) : (
                                    <div className="p-2 bg-white/20 text-white rounded-xl">
                                        <Check size={18} />
                                    </div>
                                )}
                                <ChevronRight size={20} className={activeSession?.id === session.id ? 'text-white/50' : 'text-zinc-300'} />
                            </div>
                        </div>
                    ))
                    }
                </div >
            )}
        </div >
    );
}