'use client';

import React from 'react';
import { Star, Wind, Utensils, Droplets, Users, Check, ChevronDown, CheckCircle2 } from 'lucide-react';
import TagSelector from './TagSelector';

interface TastingFormBodyProps {
    rating: number;
    setRating: (val: number) => void;
    isSample: boolean;
    setIsSample: (val: boolean) => void;

    nose: string;
    setNose: (val: string) => void;
    noseTagIds: string[];
    setNoseTagIds: (ids: string[]) => void;

    palate: string;
    setPalate: (val: string) => void;
    palateTagIds: string[];
    setPalateTagIds: (ids: string[]) => void;

    finish: string;
    setFinish: (val: string) => void;
    finishTagIds: string[];
    setFinishTagIds: (ids: string[]) => void;

    selectedBuddyIds: string[];
    setSelectedBuddyIds: (ids: string[]) => void;
    availableBuddies: Array<{ id: string; name: string }>;

    suggestedTags?: string[];
    suggestedCustomTags?: string[];

    defaultExpanded?: boolean;
    t: (key: string) => string;
}

export default function TastingFormBody({
    rating, setRating,
    isSample, setIsSample,
    nose, setNose, noseTagIds, setNoseTagIds,
    palate, setPalate, palateTagIds, setPalateTagIds,
    finish, setFinish, finishTagIds, setFinishTagIds,
    selectedBuddyIds, setSelectedBuddyIds, availableBuddies,
    suggestedTags = [],
    suggestedCustomTags = [],
    defaultExpanded = false,
    t
}: TastingFormBodyProps) {
    const [isNoseExpanded, setIsNoseExpanded] = React.useState(defaultExpanded);
    const [isPalateExpanded, setIsPalateExpanded] = React.useState(defaultExpanded);
    const [isFinishExpanded, setIsFinishExpanded] = React.useState(defaultExpanded);

    const toggleBuddy = (id: string) => {
        setSelectedBuddyIds(selectedBuddyIds.includes(id)
            ? selectedBuddyIds.filter(bid => bid !== id)
            : [...selectedBuddyIds, id]);
    };

    return (
        <div className="space-y-8 pb-10">
            {/* Rating Section */}
            <div className="space-y-5 bg-zinc-900/40 p-6 rounded-3xl border border-zinc-800/50 shadow-inner">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <div className="p-2.5 rounded-2xl bg-orange-500/10 text-orange-500 border border-orange-500/20">
                            <Star size={20} className="fill-orange-500" />
                        </div>
                        <div>
                            <span className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500">{t('tasting.rating')}</span>
                            <p className="text-[9px] text-zinc-600 font-bold uppercase mt-0.5">Persönliche Wertung</p>
                        </div>
                    </div>
                    <div className="flex flex-col items-end">
                        <span className="text-4xl font-black text-orange-500 tracking-tighter leading-none">{rating}</span>
                        <span className="text-[10px] font-black text-zinc-600 uppercase mt-1">/ 100 PTS</span>
                    </div>
                </div>
                <input
                    type="range"
                    min="0"
                    max="100"
                    value={rating}
                    onChange={(e) => setRating(parseInt(e.target.value))}
                    className="w-full h-1.5 bg-zinc-800 rounded-full appearance-none cursor-pointer accent-orange-600 transition-all hover:accent-orange-500"
                />
                <div className="flex justify-between px-1">
                    <span className="text-[8px] font-black text-zinc-700 uppercase tracking-widest">Swill</span>
                    <div className="h-1 w-1 rounded-full bg-zinc-800 mt-1" />
                    <span className="text-[8px] font-black text-zinc-700 uppercase tracking-widest">Dram</span>
                    <div className="h-1 w-1 rounded-full bg-zinc-800 mt-1" />
                    <span className="text-[8px] font-black text-zinc-400 uppercase tracking-widest">Legend</span>
                </div>
            </div>

            {/* Bottle / Sample Toggle */}
            <div className="grid grid-cols-2 gap-3 p-1.5 bg-zinc-900/50 rounded-2xl border border-zinc-800/50">
                <button
                    type="button"
                    onClick={() => setIsSample(false)}
                    className={`py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2 ${!isSample ? 'bg-zinc-800 text-orange-500 shadow-xl ring-1 ring-white/5' : 'text-zinc-600 hover:text-zinc-400'}`}
                >
                    <CheckCircle2 size={14} className={!isSample ? 'opacity-100' : 'opacity-0'} />
                    Flasche
                </button>
                <button
                    type="button"
                    onClick={() => setIsSample(true)}
                    className={`py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2 ${isSample ? 'bg-zinc-800 text-orange-500 shadow-xl ring-1 ring-white/5' : 'text-zinc-600 hover:text-zinc-400'}`}
                >
                    <CheckCircle2 size={14} className={isSample ? 'opacity-100' : 'opacity-0'} />
                    Sample
                </button>
            </div>

            {/* Sensoric Sections */}
            <div className="space-y-4">
                {/* Nose Section */}
                <div className={`bg-zinc-900 border transition-all duration-300 overflow-hidden ${isNoseExpanded ? 'rounded-[32px] border-orange-500/20' : 'rounded-2xl border-zinc-800'}`}>
                    <button
                        type="button"
                        onClick={() => setIsNoseExpanded(!isNoseExpanded)}
                        className={`w-full px-6 py-5 flex items-center justify-between transition-colors ${isNoseExpanded ? 'bg-zinc-950/50' : 'hover:bg-zinc-800/50'}`}
                    >
                        <div className="flex items-center gap-4">
                            <div className={`p-2.5 rounded-xl border transition-all ${isNoseExpanded ? 'bg-orange-600/10 text-orange-500 border-orange-500/20' : 'bg-zinc-800/50 text-zinc-500 border-transparent'}`}>
                                <Wind size={20} />
                            </div>
                            <div className="text-left">
                                <h3 className={`text-xs font-black uppercase tracking-[0.2em] leading-none ${isNoseExpanded ? 'text-zinc-50' : 'text-zinc-500'}`}>
                                    {t('tasting.nose')}
                                </h3>
                                <div className="mt-1 flex items-center gap-2">
                                    {(noseTagIds.length > 0 || nose) ? (
                                        <span className="flex items-center gap-1.5 text-[9px] font-black text-orange-500 uppercase tracking-widest">
                                            <Check size={10} /> {noseTagIds.length} Tags {nose ? '+ Notiz' : ''}
                                        </span>
                                    ) : (
                                        <span className="text-[9px] text-zinc-600 font-bold uppercase tracking-widest">Aroma & Eindruck</span>
                                    )}
                                </div>
                            </div>
                        </div>
                        <ChevronDown size={20} className={`text-zinc-700 transition-transform duration-300 ${isNoseExpanded ? 'rotate-180 text-orange-500' : ''}`} />
                    </button>
                    {isNoseExpanded && (
                        <div className="p-6 space-y-6 animate-in slide-in-from-top-4 duration-300">
                            <TagSelector
                                category="nose"
                                selectedTagIds={noseTagIds}
                                onToggleTag={(id) => setNoseTagIds(noseTagIds.includes(id) ? noseTagIds.filter(t => t !== id) : [...noseTagIds, id])}
                                label=""
                                suggestedTagNames={suggestedTags}
                                suggestedCustomTagNames={suggestedCustomTags}
                            />
                            <div className="space-y-2">
                                <label className="text-[10px] font-black uppercase text-zinc-500 ml-1">Freitext Notizen</label>
                                <textarea
                                    value={nose}
                                    onChange={(e) => setNose(e.target.value)}
                                    placeholder={t('tasting.notesPlaceholder')}
                                    rows={2}
                                    className="w-full p-4 bg-zinc-950 border border-zinc-800 rounded-2xl text-sm focus:ring-1 focus:ring-orange-600 outline-none resize-none transition-all text-zinc-200 placeholder:text-zinc-700"
                                />
                            </div>
                        </div>
                    )}
                </div>

                {/* Palate Section */}
                <div className={`bg-zinc-900 border transition-all duration-300 overflow-hidden ${isPalateExpanded ? 'rounded-[32px] border-orange-500/20' : 'rounded-2xl border-zinc-800'}`}>
                    <button
                        type="button"
                        onClick={() => setIsPalateExpanded(!isPalateExpanded)}
                        className={`w-full px-6 py-5 flex items-center justify-between transition-colors ${isPalateExpanded ? 'bg-zinc-950/50' : 'hover:bg-zinc-800/50'}`}
                    >
                        <div className="flex items-center gap-4">
                            <div className={`p-2.5 rounded-xl border transition-all ${isPalateExpanded ? 'bg-orange-600/10 text-orange-500 border-orange-500/20' : 'bg-zinc-800/50 text-zinc-500 border-transparent'}`}>
                                <Utensils size={20} />
                            </div>
                            <div className="text-left">
                                <h3 className={`text-xs font-black uppercase tracking-[0.2em] leading-none ${isPalateExpanded ? 'text-zinc-50' : 'text-zinc-500'}`}>
                                    {t('tasting.palate')}
                                </h3>
                                <div className="mt-1 flex items-center gap-2">
                                    {(palateTagIds.length > 0 || palate) ? (
                                        <span className="flex items-center gap-1.5 text-[9px] font-black text-orange-500 uppercase tracking-widest">
                                            <Check size={10} /> {palateTagIds.length} Tags {palate ? '+ Notiz' : ''}
                                        </span>
                                    ) : (
                                        <span className="text-[9px] text-zinc-600 font-bold uppercase tracking-widest">Geschmack & Körper</span>
                                    )}
                                </div>
                            </div>
                        </div>
                        <ChevronDown size={20} className={`text-zinc-700 transition-transform duration-300 ${isPalateExpanded ? 'rotate-180 text-orange-500' : ''}`} />
                    </button>
                    {isPalateExpanded && (
                        <div className="p-6 space-y-6 animate-in slide-in-from-top-4 duration-300">
                            <TagSelector
                                category="taste"
                                selectedTagIds={palateTagIds}
                                onToggleTag={(id) => setPalateTagIds(palateTagIds.includes(id) ? palateTagIds.filter(t => t !== id) : [...palateTagIds, id])}
                                label=""
                                suggestedTagNames={suggestedTags}
                                suggestedCustomTagNames={suggestedCustomTags}
                            />
                            <div className="space-y-2">
                                <label className="text-[10px] font-black uppercase text-zinc-500 ml-1">Freitext Notizen</label>
                                <textarea
                                    value={palate}
                                    onChange={(e) => setPalate(e.target.value)}
                                    placeholder={t('tasting.notesPlaceholder')}
                                    rows={2}
                                    className="w-full p-4 bg-zinc-950 border border-zinc-800 rounded-2xl text-sm focus:ring-1 focus:ring-orange-600 outline-none resize-none transition-all text-zinc-200 placeholder:text-zinc-700"
                                />
                            </div>
                        </div>
                    )}
                </div>

                {/* Finish Section */}
                <div className={`bg-zinc-900 border transition-all duration-300 overflow-hidden ${isFinishExpanded ? 'rounded-[32px] border-orange-500/20' : 'rounded-2xl border-zinc-800'}`}>
                    <button
                        type="button"
                        onClick={() => setIsFinishExpanded(!isFinishExpanded)}
                        className={`w-full px-6 py-5 flex items-center justify-between transition-colors ${isFinishExpanded ? 'bg-zinc-950/50' : 'hover:bg-zinc-800/50'}`}
                    >
                        <div className="flex items-center gap-4">
                            <div className={`p-2.5 rounded-xl border transition-all ${isFinishExpanded ? 'bg-orange-600/10 text-orange-500 border-orange-500/20' : 'bg-zinc-800/50 text-zinc-500 border-transparent'}`}>
                                <Droplets size={20} />
                            </div>
                            <div className="text-left">
                                <h3 className={`text-xs font-black uppercase tracking-[0.2em] leading-none ${isFinishExpanded ? 'text-zinc-50' : 'text-zinc-500'}`}>
                                    {t('tasting.finish')}
                                </h3>
                                <div className="mt-1 flex items-center gap-2">
                                    {(finishTagIds.length > 0 || finish) ? (
                                        <span className="flex items-center gap-1.5 text-[9px] font-black text-orange-500 uppercase tracking-widest">
                                            <Check size={10} /> {finishTagIds.length} Tags {finish ? '+ Notiz' : ''}
                                        </span>
                                    ) : (
                                        <span className="text-[9px] text-zinc-600 font-bold uppercase tracking-widest">Abgang & Nachhall</span>
                                    )}
                                </div>
                            </div>
                        </div>
                        <ChevronDown size={20} className={`text-zinc-700 transition-transform duration-300 ${isFinishExpanded ? 'rotate-180 text-orange-500' : ''}`} />
                    </button>
                    {isFinishExpanded && (
                        <div className="p-6 space-y-6 animate-in slide-in-from-top-4 duration-300">
                            <TagSelector
                                category="finish"
                                selectedTagIds={finishTagIds}
                                onToggleTag={(id) => setFinishTagIds(finishTagIds.includes(id) ? finishTagIds.filter(t => t !== id) : [...finishTagIds, id])}
                                label=""
                                suggestedTagNames={suggestedTags}
                                suggestedCustomTagNames={suggestedCustomTags}
                            />

                            <div className="space-y-4 pt-4 border-t border-zinc-800/50">
                                <div className="flex items-center gap-2 px-1">
                                    <div className="w-1 h-3 bg-orange-600 rounded-full" />
                                    <label className="text-[10px] font-black uppercase text-zinc-500 tracking-widest">Gefühl & Textur</label>
                                </div>
                                <TagSelector
                                    category="texture"
                                    selectedTagIds={finishTagIds}
                                    onToggleTag={(id) => setFinishTagIds(finishTagIds.includes(id) ? finishTagIds.filter(t => t !== id) : [...finishTagIds, id])}
                                    label=""
                                    suggestedTagNames={suggestedTags}
                                    suggestedCustomTagNames={suggestedCustomTags}
                                />
                            </div>

                            <div className="space-y-2">
                                <label className="text-[10px] font-black uppercase text-zinc-500 ml-1">Freitext Notizen</label>
                                <textarea
                                    value={finish}
                                    onChange={(e) => setFinish(e.target.value)}
                                    placeholder={t('tasting.notesPlaceholder')}
                                    rows={2}
                                    className="w-full p-4 bg-zinc-950 border border-zinc-800 rounded-2xl text-sm focus:ring-1 focus:ring-orange-600 outline-none resize-none transition-all text-zinc-200 placeholder:text-zinc-700"
                                />
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* Buddies Selection */}
            {availableBuddies.length > 0 && (
                <div className="space-y-5 px-1">
                    <div className="flex items-center gap-3">
                        <Users size={18} className="text-zinc-600" />
                        <h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500">{t('tasting.participants')}</h3>
                    </div>
                    <div className="flex flex-wrap gap-2.5">
                        {availableBuddies.map((buddy) => (
                            <button
                                key={buddy.id}
                                type="button"
                                onClick={() => toggleBuddy(buddy.id)}
                                className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all border flex items-center gap-2.5 ${selectedBuddyIds.includes(buddy.id)
                                    ? 'bg-orange-600 border-orange-600 text-white shadow-xl shadow-orange-950/40 ring-2 ring-orange-500/20'
                                    : 'bg-zinc-900/50 border-zinc-800 text-zinc-600 hover:border-zinc-700 hover:text-zinc-400'
                                    }`}
                            >
                                {selectedBuddyIds.includes(buddy.id) ? <CheckCircle2 size={14} /> : <div className="w-3.5 h-3.5 rounded-full border border-zinc-700" />}
                                {buddy.name}
                            </button>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}
