import { Link } from "react-router-dom";
import { PageHeader } from "../components/common/PageHeader";

const ITEMS = [
  { to: "/system/workspace", title: "工作区设置", description: "调整小团队模式的导航与模块显隐。" },
  { to: "/people", title: "人员管理", description: "处理入职、转正、调岗、离职与档案。" },
  { to: "/system/approval-rules", title: "审批规则", description: "维护仍在使用的简单审批链与规则。" },
  { to: "/system/expense-standards", title: "费用标准", description: "维护报销费用类型上限与 warn/block 管控模式。" },
  { to: "/system/reimbursement-templates", title: "报销模板", description: "维护差旅费、招待费、办公用品等常见报销模板。" },
  { to: "/system/master-data", title: "主数据", description: "维护费用、法体、成本中心等主数据。" },
  { to: "/system/notification-channels", title: "通知渠道", description: "继续保留 IM/邮件等补充通知渠道。" },
  { to: "/system/integrations/erp", title: "外部系统桥接", description: "查看财务与外部系统桥接能力及出入口。" },
];

export function SystemSettingsPage() {
  return (
    <div className="space-y-6">
      <PageHeader title="系统设置" subtitle="小团队模式下的后台设置总入口。" />
      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {ITEMS.map((item) => (
          <Link key={item.to} to={item.to} className="card-std p-6 hover:bg-zinc-50">
            <div className="text-base font-semibold text-zinc-900">{item.title}</div>
            <div className="mt-2 text-sm text-zinc-600">{item.description}</div>
          </Link>
        ))}
      </div>
    </div>
  );
}

export default SystemSettingsPage;