import { Link } from "react-router-dom";
import { Button } from "../ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog";

type WelcomeLinkItem = {
  icon: string;
  label: string;
  description: string;
  to: string;
};

const WELCOME_LINKS: WelcomeLinkItem[] = [
  {
    icon: "fact_check",
    label: "处理待办",
    description: "先看今天需要审批或跟进的事项",
    to: "/workflow/tasks",
  },
  {
    icon: "request_quote",
    label: "提交报销",
    description: "录入票据和报销说明，查看进度",
    to: "/reimbursements",
  },
  {
    icon: "event_available",
    label: "请假记录",
    description: "日常请假走企业微信，OA 查看记录和状态",
    to: "/leave-requests",
  },
];

export function WelcomeDialog({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  return (
    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
      <DialogContent className="max-w-2xl" data-testid="onboarding-welcome-dialog">
        <DialogHeader>
          <DialogTitle>常用入口</DialogTitle>
          <DialogDescription>
            你的账号已就绪。先从工作台处理待办，也可以直接进入常用业务。
          </DialogDescription>
        </DialogHeader>

        <div className="grid gap-3 sm:grid-cols-3">
          {WELCOME_LINKS.map((item) => (
            <Link
              key={item.label}
              to={item.to}
              onClick={onClose}
              className="rounded-lg border border-zinc-200 bg-white px-4 py-4 shadow-sm transition-colors hover:bg-zinc-50"
            >
              <div className="flex h-full flex-col gap-3">
                <div className="flex size-10 items-center justify-center rounded-md bg-primary/10 text-primary">
                  <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
                </div>
                <div className="min-w-0">
                  <div className="font-medium text-zinc-900">{item.label}</div>
                  <div className="mt-1 text-sm leading-6 text-zinc-500">{item.description}</div>
                </div>
              </div>
            </Link>
          ))}
        </div>

        <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-600">
          关闭后不再显示这个提示；所有功能都可以从左侧菜单进入。
        </div>

        <DialogFooter>
          <Button
            type="button"
            data-testid="onboarding-welcome-close"
            onClick={onClose}
          >
            开始使用
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}