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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

interface Props {
    roles: string[];
    institutions: { id: number; name: string }[];
}

export default function UserCreate({ roles, institutions }: Props) {
    const { data, setData, post, processing, errors } = useForm({
        name: '',
        email: '',
        role: '',
        institution_id: '',
        title: '',
        profession: '',
    });

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

                <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_320px]">
                    {/* Main */}
                    <div className="space-y-6">
                        <div className="rounded-xl border border-border bg-card p-6 space-y-4">
                            <h2 className="font-semibold">Account</h2>
                            <div className="grid gap-4 sm:grid-cols-2">
                                <div className="space-y-1.5">
                                    <Label htmlFor="name">Full Name *</Label>
                                    <Input id="name" value={data.name} onChange={(e) => setData('name', e.target.value)} required />
                                    {errors.name && <p className="text-xs text-destructive">{errors.name}</p>}
                                </div>
                                <div className="space-y-1.5">
                                    <Label htmlFor="email">Email *</Label>
                                    <Input id="email" type="email" value={data.email} onChange={(e) => setData('email', e.target.value)} required />
                                    {errors.email && <p className="text-xs text-destructive">{errors.email}</p>}
                                </div>
                                <div className="col-span-2 rounded-lg bg-muted/50 border px-4 py-3 text-sm text-muted-foreground">
                                    A password set link will be emailed to the user automatically.
                                </div>
                            </div>
                        </div>

                        <div className="rounded-xl border border-border bg-card p-6 space-y-4">
                            <h2 className="font-semibold">Profile</h2>
                            <div className="grid gap-4 sm:grid-cols-2">
                                <div className="space-y-1.5">
                                    <Label htmlFor="title">Title</Label>
                                    <Input id="title" value={data.title} onChange={(e) => setData('title', e.target.value)} placeholder="Dr, Prof, Mr, Ms..." />
                                </div>
                                <div className="space-y-1.5">
                                    <Label htmlFor="profession">Profession</Label>
                                    <Input id="profession" value={data.profession} onChange={(e) => setData('profession', e.target.value)} />
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Sidebar */}
                    <div className="space-y-6">
                        <div className="rounded-xl border border-border bg-card p-6 space-y-4">
                            <h2 className="font-semibold">Access</h2>
                            <div className="space-y-1.5">
                                <Label>Role</Label>
                                <Select value={data.role} onValueChange={(v) => setData('role', v)}>
                                    <SelectTrigger><SelectValue placeholder="Select role (optional)" /></SelectTrigger>
                                    <SelectContent>
                                        {roles.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-1.5">
                                <Label>Institution</Label>
                                <Select value={data.institution_id} onValueChange={(v) => setData('institution_id', v)}>
                                    <SelectTrigger><SelectValue placeholder="Select institution (optional)" /></SelectTrigger>
                                    <SelectContent>
                                        {institutions.map((i) => <SelectItem key={i.id} value={String(i.id)}>{i.name}</SelectItem>)}
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </>
    );
}
