'use client';

import React, { useState } from 'react';
import { saveTasting } from '@/services/save-tasting';
import { Loader2, Send } 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-3">
                <label className="block text-sm font-bold text-zinc-700 dark:text-zinc-300 flex justify-between">
                    Rating <span>{rating}/100</span>
                </label>
                <input
                    type="range"
                    min="0"
                    max="100"
                    value={rating}
                    onChange={(e) => setRating(parseInt(e.target.value))}
                    className="w-full h-2 bg-zinc-200 dark:bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-amber-600"
                />
                <div className="flex justify-between text-[10px] text-zinc-400 font-bold uppercase tracking-widest">
                    <span>Swill</span>
                    <span>Dram</span>
                    <span>Legendary</span>
                </div>
            </div>

            <div className="space-y-2">
                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Art der Probe</label>
                <div className="grid grid-cols-2 gap-2 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-xl">
                    <button
                        type="button"
                        onClick={() => setIsSample(false)}
                        className={`py-2 px-4 rounded-lg text-sm font-bold transition-all ${!isSample
                            ? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm'
                            : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
                            }`}
                    >
                        Bottle
                    </button>
                    <button
                        type="button"
                        onClick={() => setIsSample(true)}
                        className={`py-2 px-4 rounded-lg text-sm font-bold transition-all ${isSample
                            ? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm'
                            : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
                            }`}
                    >
                        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-bold rounded-2xl flex items-center justify-center gap-2 hover:bg-amber-600 dark:hover:bg-amber-600 hover:text-white transition-all active:scale-[0.98] disabled:opacity-50 shadow-lg"
            >
                {loading ? <Loader2 className="animate-spin" size={20} /> : (
                    <>
                        <Send size={18} />
                        Note Speichern
                    </>
                )}
            </button>
        </form>
    );
}
