'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import {
  AlertTriangle,
  ScrollText,
  Layers,
  ArrowUpRight,
} from 'lucide-react';
import {
  listEmergencyBypass,
  queryIamAuditLogs,
} from '@/services/api/iam-admin';

export default function IamAdminOverviewPage() {
  const { t } = useTranslation();
  const [stats, setStats] = useState<{ bypass: number; audits: number }>({ bypass: 0, audits: 0 });

  useEffect(() => {
    // 失败时统计回 0，但 warn 出来——避免 dashboard 静默吞错让用户分不清"真没数据"还是"接口挂了"
    const safe = <T,>(p: Promise<T>, fb: T, label: string) =>
      p.catch((e) => { console.warn(`[iam-admin/dashboard] ${label} 拉取失败`, e); return fb; });
    Promise.all([
      safe(listEmergencyBypass().then((r) => r.length), 0, 'emergency-bypass'),
      safe(queryIamAuditLogs({ pageSize: 1 }).then((r) => r.total), 0, 'audit-logs'),
    ]).then(([bypass, audits]) => setStats({ bypass, audits }));
  }, []);

  const cards = [
    {
      icon: AlertTriangle,
      title: t.iamAdmin.nav.emergencyBypass,
      desc: t.iamAdmin.overview.emergencyBypassDesc,
      path: '/iam-admin/emergency-bypass',
      stat: `${stats.bypass}`,
      statLabel: t.iamAdmin.overview.activeCount,
      warn: stats.bypass > 0,
    },
    {
      icon: ScrollText,
      title: t.iamAdmin.nav.auditLogs,
      desc: t.iamAdmin.overview.auditLogsDesc,
      path: '/iam-admin/audit-logs',
      stat: `${stats.audits}`,
      statLabel: t.iamAdmin.overview.totalCount,
    },
  ];

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-semibold text-gray-900">{t.iamAdmin.title}</h1>
        <p className="mt-1 text-sm text-gray-500">{t.iamAdmin.overview.subtitle}</p>
      </div>

      {/* 跳到组织管理的 RBAC 配置入口 */}
      <div className="mb-6 p-4 rounded-lg bg-blue-50 border border-blue-200 flex items-center justify-between">
        <div className="flex items-center">
          <Layers className="w-5 h-5 mr-3 text-blue-600" />
          <div>
            <div className="text-sm font-medium text-gray-900">
              {t.iamAdmin.overview.rbacConfigTitle}
            </div>
            <div className="text-sm text-gray-600">
              {t.iamAdmin.overview.rbacConfigDesc}
            </div>
          </div>
        </div>
        <div className="flex gap-2 shrink-0">
          <Link
            href="/organization/roles/system-roles"
            className="text-sm text-blue-700 hover:underline flex items-center"
          >
            {t.iamAdmin.overview.openRoles}
            <ArrowUpRight className="w-3.5 h-3.5 ml-0.5" />
          </Link>
          <Link
            href="/organization/data-scopes"
            className="text-sm text-blue-700 hover:underline flex items-center"
          >
            {t.iamAdmin.overview.openDataScopes}
            <ArrowUpRight className="w-3.5 h-3.5 ml-0.5" />
          </Link>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {cards.map((c) => {
          const Icon = c.icon;
          return (
            <Link
              key={c.path}
              href={c.path}
              className="block bg-white rounded-lg border border-gray-200 p-4 hover:border-blue-400 hover:shadow-sm transition"
            >
              <div className="flex items-start justify-between">
                <div className="flex items-center">
                  <Icon className={`w-5 h-5 mr-2 ${c.warn ? 'text-red-500' : 'text-blue-600'}`} />
                  <h3 className="text-base font-medium text-gray-900">{c.title}</h3>
                </div>
                <div className="text-right">
                  <div className={`text-xl font-semibold ${c.warn ? 'text-red-600' : 'text-gray-900'}`}>
                    {c.stat}
                  </div>
                  <div className="text-xs text-gray-500">{c.statLabel}</div>
                </div>
              </div>
              <p className="mt-2 text-sm text-gray-500">{c.desc}</p>
            </Link>
          );
        })}
      </div>
    </div>
  );
}