'use client';

import React, { useState, useMemo } from 'react';
import { Calendar, Star, ArrowUpDown, Clock, Trash2, Loader2, Users, GlassWater } from 'lucide-react';
import Link from 'next/link';
import AvatarStack from './AvatarStack';
import { useI18n } from '@/i18n/I18nContext';
import { deleteTasting } from '@/services/delete-tasting';
import { useLiveQuery } from 'dexie-react-hooks';
import { db } from '@/lib/db';

interface Tasting {
    id: string;
    rating: number;
    nose_notes?: string;
    palate_notes?: string;
    finish_notes?: string;
    is_sample?: boolean;
    bottle_id?: string;
    created_at: string;
    tasting_buddies?: {
        buddies: {
            id: string;
            name: string;
        }
    }[];
    tasting_sessions?: {
        id: string;
        name: string;
    };
    tasting_tags?: {
        tags: {
            id: string;
            name: string;
            category: string;
            is_system_default: boolean;
        }
    }[];
    user_id: string;
    isPending?: boolean;
}

interface TastingListProps {
    initialTastings: Tasting[];
    currentUserId?: string;
    bottleId?: string;
}

export default function TastingList({ initialTastings, currentUserId, bottleId }: TastingListProps) {
    const { t } = useI18n();
    const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'rating-desc' | 'rating-asc'>('date-desc');
    const [isDeleting, setIsDeleting] = useState<string | null>(null);

    const handleDelete = async (tastingId: string, bottleId: string) => {
        if (tastingId.startsWith('pending-')) return;
        if (!confirm('Bist du sicher, dass du diese Notiz löschen möchtest?')) return;

        setIsDeleting(tastingId);
        try {
            const res = await deleteTasting(tastingId, bottleId);
            if (!res.success) {
                alert(res.error || 'Fehler beim Löschen');
            }
        } catch (err) {
            alert('Löschen fehlgeschlagen');
        } finally {
            setIsDeleting(null);
        }
    };

    const pendingTastings = useLiveQuery(
        () => bottleId
            ? db.pending_tastings.where('bottle_id').equals(bottleId).toArray()
            : db.pending_tastings.toArray(),
        [bottleId],
        []
    );

    const sortedTastings = useMemo(() => {
        const merged = [
            ...initialTastings,
            ...(pendingTastings || []).map(p => ({
                id: `pending-${p.id}`,
                rating: p.data.rating,
                nose_notes: p.data.nose_notes,
                palate_notes: p.data.palate_notes,
                finish_notes: p.data.finish_notes,
                is_sample: p.data.is_sample,
                bottle_id: p.bottle_id,
                created_at: p.tasted_at,
                user_id: currentUserId || '',
                isPending: true,
                tasting_buddies: [],
                tasting_sessions: undefined,
                tasting_tags: []
            }))
        ];

        return merged.sort((a, b) => {
            const timeA = new Date(a.created_at).getTime();
            const timeB = new Date(b.created_at).getTime();
            switch (sortBy) {
                case 'date-desc': return timeB - timeA;
                case 'date-asc': return timeA - timeB;
                case 'rating-desc': return b.rating - a.rating;
                case 'rating-asc': return a.rating - b.rating;
                default: return 0;
            }
        });
    }, [initialTastings, pendingTastings, sortBy, currentUserId]);

    if (!initialTastings || initialTastings.length === 0) {
        return (
            <div className="text-center py-12 bg-zinc-100 dark:bg-zinc-900/30 rounded-3xl border-2 border-dashed border-zinc-200 dark:border-zinc-800">
                <p className="text-zinc-400 italic font-medium">Noch keine Tasting Notes vorhanden. Zeit für ein Glas? 🥃</p>
            </div>
        );
    }

    return (
        <div className="space-y-6">
            <div className="flex justify-end">
                <div className="flex items-center gap-2 bg-zinc-100 dark:bg-zinc-900 p-1 rounded-xl border border-zinc-200 dark:border-zinc-800">
                    <ArrowUpDown size={14} className="ml-2 text-zinc-400" />
                    <select
                        value={sortBy}
                        onChange={(e) => setSortBy(e.target.value as any)}
                        className="bg-transparent border-none text-xs font-bold uppercase tracking-tight focus:ring-0 cursor-pointer pr-8 py-1.5 dark:text-zinc-300"
                    >
                        <option value="date-desc">Neueste zuerst</option>
                        <option value="date-asc">Älteste zuerst</option>
                        <option value="rating-desc">Beste Bewertung</option>
                        <option value="rating-asc">Niedrigste Bewertung</option>
                    </select>
                </div>
            </div>

            <div className="space-y-6">
                {sortedTastings.map((note) => (
                    <div
                        key={note.id}
                        className="bg-white dark:bg-zinc-900 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 hover:border-amber-500/30 transition-all hover:shadow-md group"
                    >
                        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                            <div className="flex flex-wrap items-center gap-2 sm:gap-3">
                                <div className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-3 py-1.5 rounded-2xl text-sm font-black ring-1 ring-amber-500/20 flex items-center gap-1.5">
                                    <Star size={14} fill="currentColor" className="text-amber-500" />
                                    {note.rating}/100
                                </div>
                                <span className={`text-[10px] font-black px-2 py-0.5 rounded-lg uppercase tracking-tighter ${note.is_sample
                                    ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
                                    : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                                    }`}>
                                    {note.is_sample ? 'Sample' : 'Bottle'}
                                </span>
                                {note.isPending && (
                                    <div className="bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 px-2 py-0.5 rounded-lg text-[10px] font-black uppercase tracking-tighter flex items-center gap-1.5 animate-pulse">
                                        <Clock size={10} />
                                        Wartet auf Sync...
                                    </div>
                                )}
                                <div className="text-[10px] text-zinc-500 font-bold bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-lg flex items-center gap-1">
                                    <Clock size={10} />
                                    {new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
                                </div>
                                {note.tasting_sessions && (
                                    <Link
                                        href={`/sessions/${note.tasting_sessions.id}`}
                                        className="text-[10px] text-zinc-500 font-bold bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded-lg flex items-center gap-1 border border-amber-200/50 dark:border-amber-800/50 transition-all hover:bg-amber-100 dark:hover:bg-amber-900/40 truncate max-w-[120px] sm:max-w-none"
                                    >
                                        <GlassWater size={10} className="text-amber-600" />
                                        {note.tasting_sessions.name}
                                    </Link>
                                )}
                            </div>
                            <div className="flex items-center justify-between w-full sm:w-auto gap-4">
                                <div className="text-[10px] text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
                                    <Calendar size={12} />
                                    {new Date(note.created_at).toLocaleDateString('de-DE')}
                                </div>
                                {(!currentUserId || note.user_id === currentUserId) && !note.isPending && (
                                    <button
                                        onClick={() => note.id && note.bottle_id && handleDelete(note.id, note.bottle_id)}
                                        disabled={!!isDeleting}
                                        className="px-3 py-1.5 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-xl transition-all disabled:opacity-50 flex items-center gap-2 border border-red-100 dark:border-red-900/30 font-black text-[10px] uppercase tracking-widest shadow-sm hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white"
                                        title="Tasting löschen"
                                    >
                                        {isDeleting === note.id ? (
                                            <Loader2 size={14} className="animate-spin" />
                                        ) : (
                                            <>
                                                <Trash2 size={14} fill="currentColor" />
                                                <span>Löschen</span>
                                            </>
                                        )}
                                    </button>
                                )}
                            </div>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative">
                            {/* Visual Divider for MD and up */}
                            <div className="hidden md:block absolute left-1/3 top-0 bottom-0 w-px bg-zinc-100 dark:bg-zinc-800/50" />
                            <div className="hidden md:block absolute left-2/3 top-0 bottom-0 w-px bg-zinc-100 dark:bg-zinc-800/50" />

                            {note.nose_notes && (
                                <div className="space-y-1">
                                    <div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Nose</div>
                                    <p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
                                        {note.nose_notes}
                                    </p>
                                </div>
                            )}
                            {note.palate_notes && (
                                <div className="space-y-1">
                                    <div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Palate</div>
                                    <p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
                                        {note.palate_notes}
                                    </p>
                                </div>
                            )}
                            {note.finish_notes && (
                                <div className="space-y-1">
                                    <div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Finish</div>
                                    <p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
                                        {note.finish_notes}
                                    </p>
                                </div>
                            )}
                        </div>

                        {note.tasting_tags && note.tasting_tags.length > 0 && (
                            <div className="flex flex-wrap gap-1.5 pt-2">
                                {note.tasting_tags.map(tt => (
                                    <span
                                        key={tt.tags.id}
                                        className={`px-2 py-0.5 rounded-lg text-[10px] font-bold uppercase tracking-tight border ${tt.tags.category === 'nose' ? 'bg-green-50 text-green-700 border-green-100 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800/50' :
                                            tt.tags.category === 'taste' ? 'bg-blue-50 text-blue-700 border-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800/50' :
                                                tt.tags.category === 'finish' ? 'bg-amber-50 text-amber-700 border-amber-100 dark:bg-amber-900/20 dark:text-amber-400 dark:border-amber-800/50' :
                                                    'bg-zinc-50 text-zinc-700 border-zinc-100 dark:bg-zinc-900/20 dark:text-zinc-400 dark:border-zinc-800/50'
                                            }`}
                                    >
                                        {tt.tags.is_system_default ? t(`aroma.${tt.tags.name}`) : tt.tags.name}
                                    </span>
                                ))}
                            </div>
                        )}

                        {note.tasting_buddies && note.tasting_buddies.length > 0 && (
                            <div className="pt-3 flex items-center justify-between border-t border-zinc-100 dark:border-zinc-800">
                                <div className="flex items-center gap-2">
                                    <span className="text-[10px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-1.5 mr-1">
                                        <Users size={12} className="text-amber-500" />
                                        {t('tasting.with') || 'Mit'}:
                                    </span>
                                    <AvatarStack names={note.tasting_buddies.map(tag => tag.buddies.name)} />
                                </div>
                            </div>
                        )}
                    </div>
                ))}
            </div>
        </div>
    );
}