import { Link } from "react-router-dom";
import { useAuth } from "../auth/AuthContext";
import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
import { getVisibleManagementItems, MANAGEMENT_GROUPS } from "../features/navigation/managementRoutes";

export function SystemSettingsPage() {
  const { permissions } = useAuth();
  const visibleItems = getVisibleManagementItems(permissions);
  const visibleGroups = MANAGEMENT_GROUPS.map((group) => ({
    group,
    items: visibleItems.filter((item) => item.group === group),
  })).filter((entry) => entry.items.length > 0);

  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">{visibleItems.length}</div>
        </div>
        <div className="finance-metric-card">
          <div className="finance-metric-card__label">人员与组织</div>
          <div className="finance-metric-card__value">{visibleItems.filter((item) => item.group === "人员与组织").length}</div>
        </div>
        <div className="finance-metric-card">
          <div className="finance-metric-card__label">流程与规则</div>
          <div className="finance-metric-card__value">{visibleItems.filter((item) => item.group === "流程与规则").length}</div>
        </div>
        <div className="finance-metric-card">
          <div className="finance-metric-card__label">系统与审计</div>
          <div className="finance-metric-card__value">{visibleItems.filter((item) => item.group === "系统与审计").length}</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="space-y-5">
        {visibleGroups.map(({ group, items }) => (
          <section key={group} className="admin-command-panel space-y-3">
            <h2 className="text-base font-semibold text-zinc-900">{group}</h2>
            <div className="admin-tile-grid">
              {items.map((item) => (
                <Link key={item.key} to={item.path} 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>
          </section>
        ))}
      </div>
    </ListWorkspace>
  );
}

export default SystemSettingsPage;