'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 { deleteTasting } from '@/services/delete-tasting';

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_tags?: {
        buddies: {
            id: string;
            name: string;
        }
    }[];
    tasting_sessions?: {
        id: string;
        name: string;
    };
    user_id: string;
}

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

export default function TastingList({ initialTastings, currentUserId }: TastingListProps) {
    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 (!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 sortedTastings = useMemo(() => {
        const result = [...initialTastings];
        return result.sort((a, b) => {
            switch (sortBy) {
                case 'date-desc':
                    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
                case 'date-asc':
                    return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
                case 'rating-desc':
                    return b.rating - a.rating;
                case 'rating-asc':
                    return a.rating - b.rating;
                default:
                    return 0;
            }
        });
    }, [initialTastings, sortBy]);

    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>
                                <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) && (
                                    <button
                                        onClick={() => 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="pt-3 flex flex-wrap gap-2 border-t border-zinc-100 dark:border-zinc-800">
                                <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" />
                                    Gekostet mit:
                                </span>
                                {note.tasting_tags.map((tag) => (
                                    <span key={tag.buddies.id} className="text-[10px] font-bold text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800/80 px-2 py-0.5 rounded-full">
                                        {tag.buddies.name}
                                    </span>
                                ))}
                            </div>
                        )}
                    </div>
                ))}
            </div>
        </div>
    );
}