import { redirect, type LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import ruleGroupsNewStyles from "~/styles/pages/rule-groups_new.css?url";

export function links() {
  return [{ rel: "stylesheet", href: ruleGroupsNewStyles }];
}

export const handle = {
  breadcrumb: "规则导航说明",
};

export const meta: MetaFunction = () => {
  return [
    { title: "规则导航说明 - 中国烟草AI合同及卷宗审核系统" },
    { name: "description", content: "旧评查点分组编辑入口已下线，请改用新规则导航页。" },
  ];
};

interface LoaderData {
  redirectTarget: string;
}

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);

  if (url.searchParams.get("id") || url.searchParams.get("mode")) {
    throw redirect("/rule-groups");
  }

  return Response.json({ redirectTarget: "/rule-groups" } satisfies LoaderData);
}

export default function RuleGroupsLegacyRedirect() {
  const { redirectTarget } = useLoaderData<LoaderData>();

  return (
    <div className="rule-group-form-page">
      <Card className="card p-6 max-w-3xl mx-auto mt-6">
        <div className="text-center space-y-4">
          <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-amber-50 text-amber-700 text-2xl mx-auto">
            <i className="ri-route-line"></i>
          </div>
          <div>
            <h1 className="page-title">旧分组编辑入口已下线</h1>
            <p className="page-subtitle">
              `/rule-groups/new` 原来对应的是老评查点分组维护语义，当前系统已改为新规则导航视图，
              不再在这里维护老分组树。
            </p>
          </div>
          <div className="bg-[rgba(11,109,77,0.05)] border border-[rgba(11,109,77,0.12)] rounded-2xl p-4 text-left text-sm leading-7 text-slate-600">
            <p>现在请改用以下入口：</p>
            <p>1. `规则导航`：查看 入口模块 → 文档类型 → 规则集 / 版本</p>
            <p>2. `文档类型管理`：调整文档类型与规则集绑定关系</p>
            <p>3. `规则管理`：维护规则集版本与 YAML 内容</p>
          </div>
          <div className="flex items-center justify-center gap-3 pt-2">
            <Link to={redirectTarget}>
              <Button type="primary">前往规则导航</Button>
            </Link>
            <Link to="/document-types">
              <Button type="default">前往文档类型管理</Button>
            </Link>
          </div>
        </div>
      </Card>
    </div>
  );
}