import AuthenticatedLayout from '@/layouts/AuthenticatedLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { ArrowLeft, Save } from 'lucide-react';
import { FormEvent } from 'react';

export default function Create({ canCreateSystem }: { canCreateSystem: boolean }) {
    const form = useForm({ name: '', description: '', is_system: false });

    const submit = (event: FormEvent) => {
        event.preventDefault();
        form.post(route('utiplay.packs.store'));
    };

    return (
        <>
            <Head title="Buat Paket Word Pull" />
            <div className="mx-auto max-w-2xl pb-10">
                <Link href={route('utiplay.packs.index')} className="mb-4 inline-flex items-center gap-2 text-sm font-semibold text-text-muted hover:text-text-light"><ArrowLeft className="h-4 w-4" /> Kembali ke paket Word Pull</Link>
                <form onSubmit={submit} className="glass space-y-5 rounded-2xl border border-border/40 p-5 sm:p-7">
                    <div>
                        <h1 className="text-xl font-extrabold text-text-light">Buat draft paket</h1>
                        <p className="mt-1 text-sm text-text-muted">Nama dan deskripsi dapat diubah nanti. Draft belum muncul di UtiPlay.</p>
                    </div>
                    <label className="block">
                        <span className="mb-1.5 block text-sm font-bold text-text-light">Nama paket</span>
                        <input autoFocus value={form.data.name} onChange={(event) => form.setData('name', event.target.value)} maxLength={120} className="min-h-11 w-full rounded-xl border border-border/60 bg-surface/70 px-3 text-text-light outline-none focus:border-primary-500" />
                        {form.errors.name && <span className="mt-1 block text-xs text-rose-300">{form.errors.name}</span>}
                    </label>
                    <label className="block">
                        <span className="mb-1.5 block text-sm font-bold text-text-light">Deskripsi <span className="font-normal text-text-muted">(opsional)</span></span>
                        <textarea value={form.data.description} onChange={(event) => form.setData('description', event.target.value)} rows={4} maxLength={500} className="w-full rounded-xl border border-border/60 bg-surface/70 px-3 py-2 text-text-light outline-none focus:border-primary-500" />
                        {form.errors.description && <span className="mt-1 block text-xs text-rose-300">{form.errors.description}</span>}
                    </label>
                    {canCreateSystem && (
                        <label className="flex min-h-11 items-start gap-3 rounded-xl border border-violet-500/30 bg-violet-500/10 p-3 text-sm text-text-light">
                            <input type="checkbox" checked={form.data.is_system} onChange={(event) => form.setData('is_system', event.target.checked)} className="mt-1" />
                            <span><strong className="block">Jadikan paket sistem</strong><span className="text-xs text-text-muted">Paket published akan tersedia bagi seluruh guru dan hanya dapat dikelola admin.</span></span>
                        </label>
                    )}
                    <button disabled={form.processing} className="inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-4 text-sm font-bold text-white hover:bg-primary-500 disabled:opacity-50 sm:w-auto">
                        <Save className="h-4 w-4" /> {form.processing ? 'Menyimpan…' : 'Buat Draft'}
                    </button>
                </form>
            </div>
        </>
    );
}

Create.layout = (page: React.ReactNode) => <AuthenticatedLayout title="Buat Paket Word Pull">{page}</AuthenticatedLayout>;
