import { Clock3, MailCheck, ShieldCheck } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { LinkButton } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { SignOutButton } from "@/modules/auth/components/SignOutButton";
import type { PublicAccount } from "@/modules/core/types";
import { UserAvatar } from "@/modules/shared/components/UserAvatar";

type PendingAssignmentProps = {
  account: PublicAccount;
};

export function PendingAssignment({ account }: PendingAssignmentProps): React.ReactElement {
  return (
    <main className="flex min-h-svh items-center justify-center bg-background px-4 py-10">
      <section className="page-enter w-full max-w-2xl">
        <div className="mb-6 flex items-center justify-between">
          <div className="flex min-w-0 items-center gap-3">
            <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="lg" />
            <div className="min-w-0">
              <p className="truncate text-sm font-medium">{account.name}</p>
              <p className="truncate text-xs text-muted-foreground">{account.email}</p>
            </div>
          </div>
          <SignOutButton />
        </div>

        <Card className="overflow-hidden">
          <CardHeader className="border-b bg-secondary/35">
            <Badge className="w-fit" variant="warning">
              等待分配
            </Badge>
            <CardTitle className="mt-3 text-2xl leading-tight">账号已创建，等待管理员分配机构和角色</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 pt-5">
            <div className="grid gap-3 md:grid-cols-3">
              <div className="rounded-md border bg-background p-4">
                <Clock3 className="size-5 text-amber-600" aria-hidden="true" />
                <p className="mt-3 text-sm font-medium">账号状态</p>
                <p className="mt-1 text-xs text-muted-foreground">可登录，暂无后台权限。</p>
              </div>
              <div className="rounded-md border bg-background p-4">
                <MailCheck className="size-5 text-primary" aria-hidden="true" />
                <p className="mt-3 text-sm font-medium">机构申请</p>
                <p className="mt-1 text-xs text-muted-foreground">管理员可在用户管理审批。</p>
              </div>
              <div className="rounded-md border bg-background p-4">
                <ShieldCheck className="size-5 text-emerald-600" aria-hidden="true" />
                <p className="mt-3 text-sm font-medium">权限生效</p>
                <p className="mt-1 text-xs text-muted-foreground">分配角色后重新进入即可使用。</p>
              </div>
            </div>
            <LinkButton className="w-fit" href="/app/dashboard" variant="outline">
              刷新状态
            </LinkButton>
          </CardContent>
        </Card>
      </section>
    </main>
  );
}