import { Head, Link, useForm } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';

export default function ResearchInitiativeCreate() {
    const { data, setData, post, processing, errors } = useForm({
        title:      '',
        summary:    '',
        body:       '',
        cover_url:  '',
        url:        '',
        sort_order: '0',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        post('/admin/research-initiatives');
    }

    return (
        <>
            <Head title="Add Research Initiative" />
            <form onSubmit={submit} className="space-y-0">
                <div className="sticky top-16 z-10 -mx-6 mb-6 flex items-center justify-between border-b bg-background px-6 pb-4 pt-2 lg:-mx-8 lg:px-8">
                    <div>
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Link href="/admin/research-initiatives">Research Spin-offs</Link>
                            <span>/</span>
                            <span className="text-foreground">Add Initiative</span>
                        </div>
                        <h1 className="text-2xl font-bold">Add Initiative</h1>
                    </div>
                    <div className="flex items-center gap-3">
                        <Button type="button" variant="outline" asChild><Link href="/admin/research-initiatives">Cancel</Link></Button>
                        <Button type="submit" disabled={processing}>{processing ? 'Creating…' : 'Create'}</Button>
                    </div>
                </div>

                <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_300px]">
                    <div className="space-y-6">
                        <div className="rounded-xl border border-border bg-card p-6 space-y-4">
                            <div className="space-y-1.5">
                                <Label htmlFor="title">Title *</Label>
                                <Input id="title" value={data.title} onChange={(e) => setData('title', e.target.value)} required />
                                {errors.title && <p className="text-xs text-destructive">{errors.title}</p>}
                            </div>
                            <div className="space-y-1.5">
                                <Label htmlFor="summary">Summary</Label>
                                <Textarea id="summary" value={data.summary} onChange={(e) => setData('summary', e.target.value)} rows={3} placeholder="One-paragraph overview shown on the public research page…" />
                            </div>
                            <div className="space-y-1.5">
                                <Label htmlFor="body">Full Description</Label>
                                <Textarea id="body" value={data.body} onChange={(e) => setData('body', e.target.value)} rows={6} placeholder="Extended description (optional)…" />
                            </div>
                        </div>
                    </div>

                    <div className="space-y-6">
                        <div className="rounded-xl border border-border bg-card p-6 space-y-4">
                            <div className="space-y-1.5">
                                <Label htmlFor="url">Website URL</Label>
                                <Input id="url" type="url" value={data.url} onChange={(e) => setData('url', e.target.value)} placeholder="https://…" />
                                <p className="text-xs text-muted-foreground">Opens in a new tab on the public site.</p>
                                {errors.url && <p className="text-xs text-destructive">{errors.url}</p>}
                            </div>
                            <div className="space-y-1.5">
                                <Label htmlFor="cover_url">Cover Image Path</Label>
                                <Input id="cover_url" value={data.cover_url} onChange={(e) => setData('cover_url', e.target.value)} placeholder="/images/…" />
                            </div>
                            <div className="space-y-1.5">
                                <Label htmlFor="sort_order">Sort Order</Label>
                                <Input id="sort_order" type="number" value={data.sort_order} onChange={(e) => setData('sort_order', e.target.value)} />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </>
    );
}
