import { Form, Head } from '@inertiajs/react';
import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

type ManagedUser = {
    id: number;
    name: string;
    email: string;
    is_admin: boolean;
    email_verified_at: string | null;
    created_at: string;
};

export default function AdminUsersIndex({
    users,
}: {
    users: ManagedUser[];
}) {
    return (
        <>
            <Head title="Manage users" />

            <div className="space-y-6 p-4 md:p-6">
                <Heading
                    title="User management"
                    description="Create administrators and club users, then maintain account access from one secure admin page."
                />

                <div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
                    <Card className="border-border/70">
                        <CardHeader>
                            <CardTitle>Add a user</CardTitle>
                            <CardDescription>
                                New registrations always start as standard users unless you explicitly grant admin access here.
                            </CardDescription>
                        </CardHeader>
                        <CardContent>
                            <Form
                                {...UserManagementController.store.form()}
                                resetOnSuccess={[
                                    'name',
                                    'email',
                                    'password',
                                    'password_confirmation',
                                ]}
                                className="space-y-4"
                            >
                                {({ processing, errors }) => (
                                    <>
                                        <div className="grid gap-2">
                                            <Label htmlFor="create-name">Full name</Label>
                                            <Input id="create-name" name="name" placeholder="Range manager" />
                                            <InputError message={errors.name} />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="create-email">Email</Label>
                                            <Input id="create-email" name="email" type="email" placeholder="manager@club.com" />
                                            <InputError message={errors.email} />
                                        </div>
                                        <div className="grid gap-2 sm:grid-cols-2">
                                            <div className="grid gap-2">
                                                <Label htmlFor="create-password">Password</Label>
                                                <Input id="create-password" name="password" type="password" />
                                            </div>
                                            <div className="grid gap-2">
                                                <Label htmlFor="create-password-confirmation">Confirm password</Label>
                                                <Input id="create-password-confirmation" name="password_confirmation" type="password" />
                                            </div>
                                        </div>
                                        <InputError message={errors.password} />
                                        <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-muted/20 px-4 py-3">
                                            <input type="hidden" name="is_admin" value="0" />
                                            <input
                                                id="create-is-admin"
                                                name="is_admin"
                                                type="checkbox"
                                                value="1"
                                                className="size-4 rounded border-border text-primary focus:ring-primary"
                                            />
                                            <Label htmlFor="create-is-admin" className="cursor-pointer">
                                                Grant administrator access
                                            </Label>
                                        </div>
                                        <InputError message={errors.is_admin} />
                                        <Button disabled={processing} className="w-full sm:w-auto">
                                            Create user
                                        </Button>
                                    </>
                                )}
                            </Form>
                        </CardContent>
                    </Card>

                    <Card className="border-border/70">
                        <CardHeader>
                            <CardTitle>Existing users</CardTitle>
                            <CardDescription>
                                Update names, emails, passwords, and admin privileges without leaving the page.
                            </CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            {users.map((user) => (
                                <div
                                    key={user.id}
                                    className="rounded-2xl border border-border/70 bg-muted/15 p-4"
                                >
                                    <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                        <div>
                                            <p className="font-medium">{user.name}</p>
                                            <p className="text-sm text-muted-foreground">
                                                {user.email}
                                            </p>
                                        </div>
                                        <div className="flex gap-2">
                                            <Badge variant="secondary">
                                                {user.email_verified_at
                                                    ? 'Verified'
                                                    : 'Pending verification'}
                                            </Badge>
                                            {user.is_admin && (
                                                <Badge className="bg-amber-500/10 text-amber-700 hover:bg-amber-500/10 dark:text-amber-300">
                                                    Admin
                                                </Badge>
                                            )}
                                        </div>
                                    </div>

                                    <Form
                                        {...UserManagementController.update.form(
                                            user.id,
                                        )}
                                        className="space-y-4"
                                    >
                                        {({ processing, errors }) => (
                                            <>
                                                <div className="grid gap-4 lg:grid-cols-2">
                                                    <div className="grid gap-2">
                                                        <Label htmlFor={`user-name-${user.id}`}>Name</Label>
                                                        <Input
                                                            id={`user-name-${user.id}`}
                                                            name="name"
                                                            defaultValue={user.name}
                                                        />
                                                        <InputError message={errors.name} />
                                                    </div>
                                                    <div className="grid gap-2">
                                                        <Label htmlFor={`user-email-${user.id}`}>Email</Label>
                                                        <Input
                                                            id={`user-email-${user.id}`}
                                                            name="email"
                                                            type="email"
                                                            defaultValue={user.email}
                                                        />
                                                        <InputError message={errors.email} />
                                                    </div>
                                                </div>

                                                <div className="grid gap-4 lg:grid-cols-2">
                                                    <div className="grid gap-2">
                                                        <Label htmlFor={`user-password-${user.id}`}>New password</Label>
                                                        <Input
                                                            id={`user-password-${user.id}`}
                                                            name="password"
                                                            type="password"
                                                            placeholder="Leave blank to keep existing"
                                                        />
                                                    </div>
                                                    <div className="grid gap-2">
                                                        <Label htmlFor={`user-password-confirmation-${user.id}`}>
                                                            Confirm password
                                                        </Label>
                                                        <Input
                                                            id={`user-password-confirmation-${user.id}`}
                                                            name="password_confirmation"
                                                            type="password"
                                                        />
                                                    </div>
                                                </div>
                                                <InputError message={errors.password} />

                                                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                                    <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-background px-4 py-3">
                                                        <input type="hidden" name="is_admin" value="0" />
                                                        <input
                                                            id={`user-admin-${user.id}`}
                                                            name="is_admin"
                                                            type="checkbox"
                                                            value="1"
                                                            defaultChecked={user.is_admin}
                                                            className="size-4 rounded border-border text-primary focus:ring-primary"
                                                        />
                                                        <Label
                                                            htmlFor={`user-admin-${user.id}`}
                                                            className="cursor-pointer"
                                                        >
                                                            Administrator
                                                        </Label>
                                                    </div>
                                                    <Button disabled={processing}>
                                                        Save user
                                                    </Button>
                                                </div>
                                                <InputError message={errors.is_admin} />
                                            </>
                                        )}
                                    </Form>
                                </div>
                            ))}
                        </CardContent>
                    </Card>
                </div>
            </div>
        </>
    );
}

AdminUsersIndex.layout = {
    breadcrumbs: [
        {
            title: 'Dashboard',
            href: '/dashboard',
        },
        {
            title: 'Users',
            href: UserManagementController.index(),
        },
    ],
};
