import { useState } from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import { ImageUpload } from '@/components/admin/image-upload';
import { RichText } from '@/components/admin/rich-text';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';

export default function PublicationCreate() {
    const [imageKey, setImageKey] = useState(0);

    const { data, setData, post, processing, errors } = useForm({
        title: '',
        authors: '',
        abstract: '',
        year: '',
        type: 'journal',
        doi: '',
        is_published: false,
        cover_image: null as File | null,
        cover_image_clear: false,
    });

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

    return (
        <>
            <Head title="Add Publication" />
            <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/publications">Publications</Link>
                            <span>/</span>
                            <span className="text-foreground">Add Publication</span>
                        </div>
                        <h1 className="text-2xl font-bold">Add Publication</h1>
                    </div>
                    <div className="flex items-center gap-3">
                        <Button type="button" variant="outline" asChild>
                            <Link href="/admin/publications">Cancel</Link>
                        </Button>
                        <Button type="submit" disabled={processing}>{processing ? 'Creating...' : 'Create Publication'}</Button>
                    </div>
                </div>

                <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_320px]">
                    <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="authors">Authors</Label>
                                <Input id="authors" value={data.authors} onChange={(e) => setData('authors', e.target.value)} placeholder="e.g. Smith J, Doe A" />
                                {errors.authors && <p className="text-xs text-destructive">{errors.authors}</p>}
                            </div>
                            <div className="space-y-1.5">
                                <Label htmlFor="doi">DOI</Label>
                                <Input id="doi" value={data.doi} onChange={(e) => setData('doi', e.target.value)} placeholder="10.xxxx/..." />
                                {errors.doi && <p className="text-xs text-destructive">{errors.doi}</p>}
                            </div>
                            <div className="space-y-1.5">
                                <Label>Abstract</Label>
                                <RichText value={data.abstract} onChange={(v) => setData('abstract', v)} height={300} />
                                {errors.abstract && <p className="text-xs text-destructive">{errors.abstract}</p>}
                            </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="type">Type</Label>
                                <Select value={data.type} onValueChange={(v) => setData('type', v)}>
                                    <SelectTrigger id="type"><SelectValue /></SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="journal">Journal</SelectItem>
                                        <SelectItem value="conference">Conference</SelectItem>
                                        <SelectItem value="book">Book</SelectItem>
                                        <SelectItem value="report">Report</SelectItem>
                                        <SelectItem value="other">Other</SelectItem>
                                    </SelectContent>
                                </Select>
                                {errors.type && <p className="text-xs text-destructive">{errors.type}</p>}
                            </div>
                            <div className="space-y-1.5">
                                <Label htmlFor="year">Year</Label>
                                <Input id="year" type="number" value={data.year} onChange={(e) => setData('year', e.target.value)} placeholder="2024" />
                                {errors.year && <p className="text-xs text-destructive">{errors.year}</p>}
                            </div>
                            <label className="flex items-center gap-3 cursor-pointer">
                                <Switch checked={data.is_published} onCheckedChange={(v) => setData('is_published', v)} />
                                <span className="text-sm font-medium">Published</span>
                            </label>
                            <div className="space-y-1.5">
                                <Label>Cover Image</Label>
                                <ImageUpload
                                    key={imageKey}
                                    onChange={(file) => { setData('cover_image', file); setData('cover_image_clear', false); }}
                                    onClear={() => { setData('cover_image', null); setData('cover_image_clear', true); setImageKey((k) => k + 1); }}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </>
    );
}
