import { Link } from "react-router-dom";
import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";

const ITEMS = [
  { to: "/system/workspace", icon: "dashboard_customize", title: "工作区设置", description: "导航与模块显隐。" },
  { to: "/people", icon: "badge", title: "人员管理", description: "入转调离与档案。" },
  { to: "/system/approval-rules", icon: "account_tree", title: "审批规则", description: "审批链与规则。" },
  { to: "/system/expense-standards", icon: "rule_settings", title: "费用标准", description: "费用上限与管控。" },
  { to: "/system/reimbursement-templates", icon: "receipt_long", title: "报销模板", description: "常见报销模板。" },
  { to: "/system/master-data", icon: "database", title: "主数据", description: "法体、成本中心、供应商。" },
  { to: "/system/notification-channels", icon: "notifications", title: "通知渠道", description: "IM / 邮件补充通知。" },
  { to: "/system/integrations/erp", icon: "hub", title: "外部系统桥接", description: "财务出入口与桥接。" },
];

export function SystemSettingsPage() {
  return (
    <ListWorkspace>
      <WorkspaceHeader title="系统设置" subtitle="后台能力入口按管理职责收拢。" />
      <div className="finance-status-strip" data-testid="system-settings-summary">
        <div className="finance-metric-card"><div className="finance-metric-card__label">入口总数</div><div className="finance-metric-card__value">{ITEMS.length}</div></div>
        <div className="finance-metric-card"><div className="finance-metric-card__label">业务配置</div><div className="finance-metric-card__value">5</div></div>
        <div className="finance-metric-card"><div className="finance-metric-card__label">外部桥接</div><div className="finance-metric-card__value">2</div></div>
        <div className="finance-metric-card"><div className="finance-metric-card__label">人员相关</div><div className="finance-metric-card__value">1</div></div>
        <div className="finance-metric-card"><div className="finance-metric-card__label">模式</div><div className="finance-metric-card__value text-base">小团队</div></div>
      </div>
      <div className="admin-tile-grid">
        {ITEMS.map((item) => (
          <Link key={item.to} to={item.to} className="admin-tile-card">
            <div className="flex items-start gap-3">
              <span className="admin-tile-card__icon">
                <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
              </span>
              <span className="min-w-0">
                <span className="block text-base font-semibold text-zinc-900">{item.title}</span>
                <span className="mt-1 block text-sm leading-5 text-zinc-600">{item.description}</span>
              </span>
            </div>
          </Link>
        ))}
      </div>
    </ListWorkspace>
  );
}

export default SystemSettingsPage;