import MainLayout from "@/Layouts/MainLayout";
import { Head, useForm, Link } from "@inertiajs/react";

export default function BukuCreate({ kategoris }) {
    const { data, setData, post, processing, errors } = useForm({
        kategori_id: "",
        judul: "",
        pengarang: "",
        penerbit: "",
        tahun_terbit: "",
        isbn: "",
        stok: 0,
        sinopsis: "",
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        post("/buku");
    };

    return (
        <MainLayout>
            <Head title="Tambah Buku" />

            <div className="max-w-2xl mx-auto">
                <div className="flex items-center gap-2 mb-6">
                    <Link
                        href="/buku"
                        className="text-indigo-600 hover:underline"
                    >
                        ← Kembali
                    </Link>
                    <span className="text-gray-400">/</span>
                    <span className="text-gray-600">Tambah Buku</span>
                </div>

                <div className="bg-white rounded-xl shadow p-6">
                    <h1 className="text-xl font-bold text-gray-800 mb-6">
                        📚 Tambah Buku Baru
                    </h1>

                    <form onSubmit={handleSubmit} className="space-y-4">
                        <FormField label="Kategori" error={errors.kategori_id}>
                            <select
                                value={data.kategori_id}
                                onChange={(e) =>
                                    setData("kategori_id", e.target.value)
                                }
                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                            >
                                <option value="">-- Pilih Kategori --</option>
                                {kategoris.map((k) => (
                                    <option key={k.id} value={k.id}>
                                        {k.nama_kategori}
                                    </option>
                                ))}
                            </select>
                        </FormField>

                        <FormField label="Judul Buku" error={errors.judul}>
                            <input
                                type="text"
                                value={data.judul}
                                onChange={(e) =>
                                    setData("judul", e.target.value)
                                }
                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                                placeholder="Masukkan judul buku"
                            />
                        </FormField>

                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                label="Pengarang"
                                error={errors.pengarang}
                            >
                                <input
                                    type="text"
                                    value={data.pengarang}
                                    onChange={(e) =>
                                        setData("pengarang", e.target.value)
                                    }
                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                                    placeholder="Nama pengarang"
                                />
                            </FormField>

                            <FormField label="Penerbit" error={errors.penerbit}>
                                <input
                                    type="text"
                                    value={data.penerbit}
                                    onChange={(e) =>
                                        setData("penerbit", e.target.value)
                                    }
                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                                    placeholder="Nama penerbit"
                                />
                            </FormField>
                        </div>

                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                label="Tahun Terbit"
                                error={errors.tahun_terbit}
                            >
                                <input
                                    type="number"
                                    value={data.tahun_terbit}
                                    onChange={(e) =>
                                        setData("tahun_terbit", e.target.value)
                                    }
                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                                    placeholder="2024"
                                    min="1900"
                                    max="2099"
                                />
                            </FormField>

                            <FormField label="ISBN" error={errors.isbn}>
                                <input
                                    type="text"
                                    value={data.isbn}
                                    onChange={(e) =>
                                        setData("isbn", e.target.value)
                                    }
                                    className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                                    placeholder="978-xxx-xxx-xxx"
                                />
                            </FormField>
                        </div>

                        <FormField label="Stok Buku" error={errors.stok}>
                            <input
                                type="number"
                                value={data.stok}
                                onChange={(e) =>
                                    setData("stok", e.target.value)
                                }
                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                                min="0"
                            />
                        </FormField>

                        <FormField label="Sinopsis" error={errors.sinopsis}>
                            <textarea
                                value={data.sinopsis}
                                onChange={(e) =>
                                    setData("sinopsis", e.target.value)
                                }
                                className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
                                rows={4}
                                placeholder="Tulis sinopsis buku..."
                            />
                        </FormField>

                        <div className="flex gap-3 pt-4">
                            <button
                                type="submit"
                                disabled={processing}
                                className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
                            >
                                {processing ? "Menyimpan..." : "💾 Simpan Buku"}
                            </button>
                            <Link
                                href="/buku"
                                className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
                            >
                                Batal
                            </Link>
                        </div>
                    </form>
                </div>
            </div>
        </MainLayout>
    );
}

function FormField({ label, error, children }) {
    return (
        <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
                {label}
            </label>
            {children}
            {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
        </div>
    );
}
