'use client';

import React, { useState, useEffect } from 'react';
import { createClient } from '@/lib/supabase/client';
import Link from 'next/link';
import { ChevronLeft, Tag as TagIcon, Plus, Search, Trash2, Shield, User, Filter, Download } from 'lucide-react';
import { Tag, TagCategory, getTagsByCategory } from '@/services/tags';
import { useI18n } from '@/i18n/I18nContext';

export default function AdminTagsPage() {
    const { t } = useI18n();
    const supabase = createClient();
    const [tags, setTags] = useState<Tag[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [search, setSearch] = useState('');
    const [categoryFilter, setCategoryFilter] = useState<TagCategory | 'all'>('all');

    useEffect(() => {
        fetchTags();
    }, []);

    const fetchTags = async () => {
        setIsLoading(true);
        const { data, error } = await supabase
            .from('tags')
            .select('*')
            .order('popularity_score', { ascending: false })
            .order('name');

        if (data) setTags(data);
        setIsLoading(false);
    };

    const filteredTags = tags.filter(tag => {
        const matchesSearch = tag.name.toLowerCase().includes(search.toLowerCase());
        const matchesCategory = categoryFilter === 'all' || tag.category === categoryFilter;
        return matchesSearch && matchesCategory;
    });

    const handleDelete = async (id: string) => {
        if (!confirm('Tag wirklich löschen?')) return;
        const { error } = await supabase.from('tags').delete().eq('id', id);
        if (!error) setTags(prev => prev.filter(t => t.id !== id));
    };

    const toggleSystemDefault = async (tag: Tag) => {
        const { error } = await supabase
            .from('tags')
            .update({ is_system_default: !tag.is_system_default })
            .eq('id', tag.id);

        if (!error) {
            setTags(prev => prev.map(t => t.id === tag.id ? { ...t, is_system_default: !t.is_system_default } : t));
        }
    };

    const updatePopularity = async (tagId: string, score: number) => {
        const { error } = await supabase
            .from('tags')
            .update({ popularity_score: score })
            .eq('id', tagId);

        if (!error) {
            setTags(prev => prev.map(t => t.id === tagId ? { ...t, popularity_score: score } : t));
        }
    };

    return (
        <main className="min-h-screen bg-zinc-50 dark:bg-black p-4 md:p-12">
            <div className="max-w-6xl mx-auto space-y-8">
                <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                    <div>
                        <Link href="/admin" className="text-zinc-500 hover:text-amber-600 transition-colors flex items-center gap-2 text-sm font-bold mb-2">
                            <ChevronLeft size={16} /> Admin Dashboard
                        </Link>
                        <h1 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tighter flex items-center gap-3">
                            <TagIcon className="text-amber-600" /> Aroma Tags verwalten
                        </h1>
                    </div>
                </div>

                <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-xl overflow-hidden">
                    <div className="p-6 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 flex flex-col md:flex-row gap-4 justify-between">
                        <div className="relative flex-1 max-w-md">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
                            <input
                                type="text"
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                                placeholder="Tags suchen..."
                                className="w-full pl-10 pr-4 py-2 bg-white 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 transition-all dark:text-zinc-200"
                            />
                        </div>
                        <div className="flex items-center gap-2">
                            <Filter size={18} className="text-zinc-400" />
                            <select
                                value={categoryFilter}
                                onChange={(e) => setCategoryFilter(e.target.value as any)}
                                className="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-3 py-2 text-sm font-bold uppercase tracking-tight outline-none focus:ring-2 focus:ring-amber-500 dark:text-zinc-200"
                            >
                                <option value="all">Alle Kategorien</option>
                                <option value="nose">Nose</option>
                                <option value="taste">Taste</option>
                                <option value="finish">Finish</option>
                                <option value="texture">Texture</option>
                            </select>
                        </div>
                    </div>

                    <div className="overflow-x-auto">
                        <table className="w-full text-left">
                            <thead>
                                <tr className="text-[10px] font-black text-zinc-400 uppercase tracking-[0.15em] border-b border-zinc-100 dark:border-zinc-800">
                                    <th className="px-6 py-4">Name</th>
                                    <th className="px-6 py-4">Kategorie</th>
                                    <th className="px-6 py-4">Popularität</th>
                                    <th className="px-6 py-4">Typ</th>
                                    <th className="px-6 py-4 text-right">Aktionen</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
                                {isLoading ? (
                                    <tr>
                                        <td colSpan={4} className="px-6 py-12 text-center text-zinc-400 italic">Lade Tags...</td>
                                    </tr>
                                ) : filteredTags.length === 0 ? (
                                    <tr>
                                        <td colSpan={4} className="px-6 py-12 text-center text-zinc-400 italic">Keine Tags gefunden.</td>
                                    </tr>
                                ) : (
                                    filteredTags.map((tag) => (
                                        <tr key={tag.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/30 transition-colors group">
                                            <td className="px-6 py-4">
                                                <div className="font-bold text-zinc-900 dark:text-zinc-100">
                                                    {tag.is_system_default ? t(`aroma.${tag.name}`) : tag.name}
                                                </div>
                                                {tag.is_system_default && (
                                                    <div className="text-[10px] text-zinc-400 font-mono">{tag.name} (Key)</div>
                                                )}
                                            </td>
                                            <td className="px-6 py-4">
                                                <span className={`text-[10px] font-black px-2 py-1 rounded-lg uppercase tracking-widest ${tag.category === 'nose' ? 'bg-green-100 text-green-700' :
                                                    tag.category === 'taste' ? 'bg-blue-100 text-blue-700' :
                                                        tag.category === 'finish' ? 'bg-amber-100 text-amber-700' :
                                                            'bg-zinc-100 text-zinc-700'
                                                    }`}>
                                                    {tag.category}
                                                </span>
                                            </td>
                                            <td className="px-6 py-4">
                                                <div className="flex items-center gap-1">
                                                    {[1, 2, 3, 4, 5].map((score) => (
                                                        <button
                                                            key={score}
                                                            onClick={() => updatePopularity(tag.id, score)}
                                                            className={`w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-black transition-all ${tag.popularity_score === score
                                                                ? 'bg-amber-600 text-white shadow-sm'
                                                                : 'bg-zinc-100 text-zinc-400 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700'
                                                                }`}
                                                        >
                                                            {score}
                                                        </button>
                                                    ))}
                                                </div>
                                            </td>
                                            <td className="px-6 py-4">
                                                <button
                                                    onClick={() => toggleSystemDefault(tag)}
                                                    className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${tag.is_system_default
                                                        ? 'bg-amber-600 text-white'
                                                        : 'bg-zinc-100 text-zinc-400 dark:bg-zinc-800 hover:bg-zinc-200'
                                                        }`}
                                                >
                                                    {tag.is_system_default ? <Shield size={10} /> : <User size={10} />}
                                                    {tag.is_system_default ? 'System' : 'Custom'}
                                                </button>
                                            </td>
                                            <td className="px-6 py-4 text-right">
                                                <button
                                                    onClick={() => handleDelete(tag.id)}
                                                    className="p-2 text-zinc-400 hover:text-red-600 transition-colors opacity-0 group-hover:opacity-100"
                                                >
                                                    <Trash2 size={16} />
                                                </button>
                                            </td>
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    );
}
