import { Head, router, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import AdminLayout from '@/Layouts/AdminLayout';

interface Category {
    id: number;
    name: string;
}

interface Item {
    id: number;
    name: string;
    image_path: string;
    weight: number;
    value_min: number;
    value_max: number;
    category: { name: string };
}

interface Props {
    categories: Category[];
    items: Item[];
}

export default function Index({ categories, items }: Props) {
    const categoryForm = useForm({ name: '' });
    const itemForm = useForm<{
        roulette_category_id: string;
        name: string;
        image: File | null;
        weight: string;
        value_min: string;
        value_max: string;
    }>({
        roulette_category_id: '',
        name: '',
        image: null,
        weight: '10',
        value_min: '0',
        value_max: '0',
    });

    const submitCategory: FormEventHandler = (e) => {
        e.preventDefault();
        categoryForm.post(route('admin.roulette.categories.store'), { onSuccess: () => categoryForm.reset() });
    };

    const submitItem: FormEventHandler = (e) => {
        e.preventDefault();
        itemForm.post(route('admin.roulette.items.store'), {
            forceFormData: true,
            onSuccess: () => itemForm.reset(),
        });
    };

    return (
        <AdminLayout>
            <Head title="Roulette — Admin" />
            <h1 className="mb-6 text-2xl font-bold">Roulette</h1>

            <div className="mb-8 grid gap-6 lg:grid-cols-2">
                <form onSubmit={submitCategory} className="space-y-3 rounded-lg bg-gray-900 p-5 ring-1 ring-white/10">
                    <h2 className="font-semibold">New category</h2>
                    <input
                        placeholder="Name"
                        value={categoryForm.data.name}
                        onChange={(e) => categoryForm.setData('name', e.target.value)}
                        className="w-full rounded-md border-gray-700 bg-gray-800 text-white"
                    />
                    {categoryForm.errors.name && <p className="text-sm text-red-400">{categoryForm.errors.name}</p>}
                    <button className="rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">
                        Add category
                    </button>
                </form>

                <div className="rounded-lg bg-gray-900 p-5 ring-1 ring-white/10">
                    <h2 className="mb-3 font-semibold">Categories</h2>
                    <div className="space-y-2">
                        {categories.map((c) => (
                            <div key={c.id} className="flex items-center justify-between text-sm">
                                <span>{c.name}</span>
                                <button
                                    onClick={() => confirm('Delete category?') && router.delete(route('admin.roulette.categories.destroy', c.id))}
                                    className="text-red-400 hover:text-red-300"
                                >
                                    Delete
                                </button>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            <form onSubmit={submitItem} className="mb-8 space-y-3 rounded-lg bg-gray-900 p-5 ring-1 ring-white/10">
                <h2 className="font-semibold">New item</h2>
                <div className="grid gap-3 sm:grid-cols-2">
                    <select
                        value={itemForm.data.roulette_category_id}
                        onChange={(e) => itemForm.setData('roulette_category_id', e.target.value)}
                        className="rounded-md border-gray-700 bg-gray-800 text-white"
                    >
                        <option value="">Select category</option>
                        {categories.map((c) => (
                            <option key={c.id} value={c.id}>
                                {c.name}
                            </option>
                        ))}
                    </select>
                    <input
                        placeholder="Name"
                        value={itemForm.data.name}
                        onChange={(e) => itemForm.setData('name', e.target.value)}
                        className="rounded-md border-gray-700 bg-gray-800 text-white"
                    />
                    <input
                        type="file"
                        accept="image/*"
                        onChange={(e) => itemForm.setData('image', e.target.files?.[0] ?? null)}
                        className="text-sm text-gray-300"
                    />
                    <input
                        type="number"
                        placeholder="Weight (probability)"
                        value={itemForm.data.weight}
                        onChange={(e) => itemForm.setData('weight', e.target.value)}
                        className="rounded-md border-gray-700 bg-gray-800 text-white"
                    />
                    <input
                        type="number"
                        placeholder="Min value"
                        value={itemForm.data.value_min}
                        onChange={(e) => itemForm.setData('value_min', e.target.value)}
                        className="rounded-md border-gray-700 bg-gray-800 text-white"
                    />
                    <input
                        type="number"
                        placeholder="Max value"
                        value={itemForm.data.value_max}
                        onChange={(e) => itemForm.setData('value_max', e.target.value)}
                        className="rounded-md border-gray-700 bg-gray-800 text-white"
                    />
                </div>
                {Object.values(itemForm.errors).map((err, i) => (
                    <p key={i} className="text-sm text-red-400">
                        {err}
                    </p>
                ))}
                <button className="rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">
                    Add item
                </button>
            </form>

            <div className="divide-y divide-white/10 rounded-lg bg-gray-900 ring-1 ring-white/10">
                {items.map((item) => (
                    <div key={item.id} className="flex items-center justify-between px-5 py-3">
                        <div className="flex items-center gap-3">
                            <img src={item.image_path} alt="" className="h-10 w-10 object-contain" />
                            <div>
                                <p className="font-medium">{item.name}</p>
                                <p className="text-xs text-gray-500">
                                    {item.category.name} · weight {item.weight} · {item.value_min}-{item.value_max}
                                </p>
                            </div>
                        </div>
                        <button
                            onClick={() => confirm('Delete item?') && router.delete(route('admin.roulette.items.destroy', item.id))}
                            className="text-sm text-red-400 hover:text-red-300"
                        >
                            Delete
                        </button>
                    </div>
                ))}
            </div>
        </AdminLayout>
    );
}
