import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import {
    Field,
    FieldDescription,
    FieldGroup,
    FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function LoginForm({
    className,
    action,
    error,
    ...props
}: React.ComponentProps<"div"> & {
    action?: React.ComponentProps<"form">["action"];
    error?: string;
}) {
    return (
        <div className={cn("flex flex-col gap-6", className)} {...props}>
            <Card>
                <CardHeader className="text-center">
                    <CardTitle className="text-xl">管理员登录</CardTitle>
                    <CardDescription>
                        使用管理员账号密码进入 Wallora 后台
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <form action={action}>
                        <FieldGroup>
                            <Field data-invalid={Boolean(error)}>
                                <FieldLabel htmlFor="email">Email</FieldLabel>
                                <Input
                                    id="email"
                                    name="email"
                                    type="email"
                                    placeholder="admin@example.com"
                                    autoComplete="username"
                                    aria-invalid={Boolean(error)}
                                    required
                                />
                            </Field>
                            <Field data-invalid={Boolean(error)}>
                                <FieldLabel htmlFor="password">
                                    Password
                                </FieldLabel>
                                <Input
                                    id="password"
                                    name="password"
                                    type="password"
                                    autoComplete="current-password"
                                    aria-invalid={Boolean(error)}
                                    required
                                />
                                {error ? (
                                    <FieldDescription className="text-destructive">
                                        {error}
                                    </FieldDescription>
                                ) : null}
                            </Field>
                            <Field>
                                <Button type="submit">登录</Button>
                            </Field>
                        </FieldGroup>
                    </form>
                </CardContent>
            </Card>
            <FieldDescription className="px-6 text-center">
                后台仅限授权管理员访问。登录状态由 NextAuth session 保存。
            </FieldDescription>
        </div>
    );
}