'use client';

import React, { useState } from 'react';
import { saveTasting } from '@/services/save-tasting';
import { Loader2, Send, Star } from 'lucide-react';

interface TastingNoteFormProps {
    bottleId: string;
}

export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
    const [rating, setRating] = useState(85);
    const [nose, setNose] = useState('');
    const [palate, setPalate] = useState('');
    const [finish, setFinish] = useState('');
    const [isSample, setIsSample] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setError(null);

        try {
            const result = await saveTasting({
                bottle_id: bottleId,
                rating,
                nose_notes: nose,
                palate_notes: palate,
                finish_notes: finish,
                is_sample: isSample,
            });

            if (result.success) {
                setNose('');
                setPalate('');
                setFinish('');
                // We don't need to manually refresh because of revalidatePath in the server action
            } else {
                setError(result.error || 'Fehler beim Speichern');
            }
        } catch (err) {
            setError('Ein unerwarteter Fehler ist aufgetreten');
        } finally {
            setLoading(false);
        }
    };

    return (
        <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-4">
                <div className="flex items-center justify-between">
                    <label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-2">
                        <Star size={14} className="text-amber-500 fill-amber-500" />
                        Rating
                    </label>
                    <span className="text-2xl font-black text-amber-600 tracking-tighter">{rating}<span className="text-zinc-400 text-sm ml-0.5 font-bold">/100</span></span>
                </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-200 dark:bg-zinc-800 rounded-full appearance-none cursor-pointer accent-amber-600 hover:accent-amber-500 transition-all"
                />
                <div className="flex justify-between text-[9px] text-zinc-400 font-black uppercase tracking-widest px-1">
                    <span>Swill</span>
                    <span>Dram</span>
                    <span>Legendary</span>
                </div>
            </div>

            <div className="space-y-3">
                <label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest">Art der Probe</label>
                <div className="grid grid-cols-2 gap-2 p-1 bg-zinc-100 dark:bg-zinc-900/50 rounded-2xl border border-zinc-200/50 dark:border-zinc-800/50">
                    <button
                        type="button"
                        onClick={() => setIsSample(false)}
                        className={`py-2.5 px-4 rounded-xl text-xs font-black uppercase tracking-tight transition-all pb-3 ${!isSample
                            ? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm ring-1 ring-black/5'
                            : 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'
                            }`}
                    >
                        Bottle
                    </button>
                    <button
                        type="button"
                        onClick={() => setIsSample(true)}
                        className={`py-2.5 px-4 rounded-xl text-xs font-black uppercase tracking-tight transition-all pb-3 ${isSample
                            ? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm ring-1 ring-black/5'
                            : 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'
                            }`}
                    >
                        Sample
                    </button>
                </div>
            </div>

            <div className="space-y-2">
                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Nose</label>
                <textarea
                    value={nose}
                    onChange={(e) => setNose(e.target.value)}
                    placeholder="Aromen in der Nase..."
                    rows={2}
                    className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
                />
            </div>

            <div className="space-y-2">
                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Palate</label>
                <textarea
                    value={palate}
                    onChange={(e) => setPalate(e.target.value)}
                    placeholder="Geschmack am Gaumen..."
                    rows={2}
                    className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
                />
            </div>

            <div className="space-y-2">
                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Finish</label>
                <textarea
                    value={finish}
                    onChange={(e) => setFinish(e.target.value)}
                    placeholder="Nachhall..."
                    rows={2}
                    className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
                />
            </div>

            {error && (
                <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs rounded-lg border border-red-100 dark:border-red-900/50">
                    {error}
                </div>
            )}

            <button
                type="submit"
                disabled={loading}
                className="w-full py-4 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 font-black uppercase tracking-widest text-xs rounded-2xl flex items-center justify-center gap-3 hover:bg-amber-600 dark:hover:bg-amber-600 hover:text-white transition-all active:scale-[0.98] disabled:opacity-50 shadow-xl shadow-black/10 dark:shadow-amber-900/10"
            >
                {loading ? <Loader2 className="animate-spin" size={18} /> : (
                    <>
                        <Send size={16} />
                        Note Speichern
                    </>
                )}
            </button>
        </form>
    );
}