import { Activity, AlertTriangle, ShieldCheck, Users } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import type { AuditLog, PublicAccount, RoleDefinition } from "@/modules/core/types";
import { ROLE_LABELS } from "@/modules/core/types";

type SettingsOverviewProps = {
  accounts: PublicAccount[];
  roles: RoleDefinition[];
  auditLogs: AuditLog[];
};

export function SettingsOverview({
  accounts,
  roles,
  auditLogs,
}: SettingsOverviewProps): React.ReactElement {
  const activeAccountCount = accounts.filter((account) => account.status === "active").length;
  const disabledAccountCount = accounts.length - activeAccountCount;
  const deniedAuditCount = auditLogs.filter((log) => log.result === "denied").length;
  const failureAuditCount = auditLogs.filter((log) => log.result === "failure").length;
  const successAuditCount = auditLogs.filter((log) => log.result === "success").length;
  const totalPermissionCount = roles.reduce((sum, role) => sum + role.permissions.length, 0);
  const actionCounts = auditLogs.reduce<Record<string, number>>((counts, log) => {
    counts[log.action] = (counts[log.action] ?? 0) + 1;
    return counts;
  }, {});
  const topActions = Object.entries(actionCounts)
    .sort((left, right) => right[1] - left[1])
    .slice(0, 4);

  return (
    <div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
      <section className="border-b pb-5">
        <Badge variant="success">RBAC + Audit</Badge>
        <h1 className="mt-3 text-3xl font-semibold tracking-normal">权限设置</h1>
        <p className="mt-2 text-sm text-muted-foreground">内置角色、账号状态和关键操作审计。</p>
      </section>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <div>
              <CardDescription>系统账号</CardDescription>
              <CardTitle className="mt-2 text-3xl">{accounts.length}</CardTitle>
            </div>
            <Users className="size-5 text-primary" aria-hidden="true" />
          </CardHeader>
          <CardContent className="pt-0">
            <p className="text-sm text-muted-foreground">启用 {activeAccountCount} 个，停用 {disabledAccountCount} 个</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <div>
              <CardDescription>角色数量</CardDescription>
              <CardTitle className="mt-2 text-3xl">{roles.length}</CardTitle>
            </div>
            <ShieldCheck className="size-5 text-primary" aria-hidden="true" />
          </CardHeader>
          <CardContent className="pt-0">
            <p className="text-sm text-muted-foreground">累计覆盖 {totalPermissionCount} 项权限</p>
          </CardContent>
        </Card>
        <Card className="border-red-200 bg-red-50/70">
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <div>
              <CardDescription className="text-red-700">红色审计</CardDescription>
              <CardTitle className="mt-2 text-3xl text-red-700">{deniedAuditCount + failureAuditCount}</CardTitle>
            </div>
            <AlertTriangle className="size-5 text-red-600" aria-hidden="true" />
          </CardHeader>
          <CardContent className="pt-0">
            <p className="text-sm text-red-700">拒绝 {deniedAuditCount} 条，失败 {failureAuditCount} 条</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <div>
              <CardDescription>审计日志</CardDescription>
              <CardTitle className="mt-2 text-3xl">{auditLogs.length}</CardTitle>
            </div>
            <Activity className="size-5 text-primary" aria-hidden="true" />
          </CardHeader>
          <CardContent className="pt-0">
            <p className="text-sm text-muted-foreground">成功 {successAuditCount} 条，最近 100 条</p>
          </CardContent>
        </Card>
      </section>

      <section className="grid gap-4 lg:grid-cols-[0.8fr_1.2fr]">
        <Card>
          <CardHeader>
            <CardTitle>风险标记</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-3">
            <div className="flex items-center justify-between rounded-md border border-red-200 bg-red-50 p-3">
              <span className="text-sm text-red-700">红色：拒绝/失败审计</span>
              <Badge variant="danger">{deniedAuditCount + failureAuditCount}</Badge>
            </div>
            <div className="flex items-center justify-between rounded-md border border-amber-200 bg-amber-50 p-3">
              <span className="text-sm text-amber-700">黄色：停用账号</span>
              <Badge variant="warning">{disabledAccountCount}</Badge>
            </div>
            <div className="flex items-center justify-between rounded-md border border-emerald-200 bg-emerald-50 p-3">
              <span className="text-sm text-emerald-700">绿色：成功审计</span>
              <Badge variant="success">{successAuditCount}</Badge>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>高频动作</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-3">
            {topActions.map(([action, count]) => (
              <div key={action} className="grid gap-2 rounded-md border p-3">
                <div className="flex items-center justify-between gap-3 text-sm">
                  <span className="font-medium">{action}</span>
                  <span className="text-muted-foreground">{count} 次</span>
                </div>
                <div className="h-2 rounded-full bg-muted">
                  <div
                    className="h-2 rounded-full bg-primary"
                    style={{ width: `${Math.max(10, Math.min(100, count * 18))}%` }}
                  />
                </div>
              </div>
            ))}
            {topActions.length === 0 ? <p className="text-sm text-muted-foreground">暂无审计动作统计</p> : null}
          </CardContent>
        </Card>
      </section>

      <section className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
        <Card>
          <CardHeader>
            <CardTitle>内置角色</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {roles.map((role) => (
              <div key={role.id} className="rounded-md border p-3">
                <div className="flex items-center justify-between gap-3">
                  <p className="font-medium">{role.label}</p>
                  <Badge variant="secondary">{role.permissions.length} 权限</Badge>
                </div>
                <p className="mt-2 text-sm text-muted-foreground">{role.description}</p>
                <div className="mt-3 flex flex-wrap gap-2">
                  {role.permissions.map((permission) => (
                    <Badge key={permission} variant="outline">
                      {permission}
                    </Badge>
                  ))}
                </div>
              </div>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>账号列表</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto rounded-md border">
              <table className="w-full min-w-[620px] text-sm">
                <thead className="bg-secondary text-left text-xs text-muted-foreground">
                  <tr>
                    <th className="px-4 py-3 font-medium">账号</th>
                    <th className="px-4 py-3 font-medium">角色</th>
                    <th className="px-4 py-3 font-medium">状态</th>
                    <th className="px-4 py-3 text-right font-medium">创建时间</th>
                  </tr>
                </thead>
                <tbody className="divide-y bg-card">
                  {accounts.map((account) => (
                    <tr key={account.id}>
                      <td className="px-4 py-3">
                        <p className="font-medium">{account.name}</p>
                        <p className="text-xs text-muted-foreground">{account.email}</p>
                      </td>
                      <td className="px-4 py-3">{ROLE_LABELS[account.role]}</td>
                      <td className="px-4 py-3">
                        <Badge variant={account.status === "active" ? "success" : "danger"}>
                          {account.status === "active" ? "启用" : "停用"}
                        </Badge>
                      </td>
                      <td className="px-4 py-3 text-right text-muted-foreground">
                        {new Date(account.createdAt).toLocaleString("zh-CN")}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </section>

      <Card>
        <CardHeader>
          <CardTitle>审计日志</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto rounded-md border">
            <table className="w-full min-w-[860px] text-sm">
              <thead className="bg-secondary text-left text-xs text-muted-foreground">
                <tr>
                  <th className="px-4 py-3 font-medium">时间</th>
                  <th className="px-4 py-3 font-medium">操作者</th>
                  <th className="px-4 py-3 font-medium">动作</th>
                  <th className="px-4 py-3 font-medium">对象</th>
                  <th className="px-4 py-3 font-medium">结果</th>
                  <th className="px-4 py-3 font-medium">原因</th>
                </tr>
              </thead>
              <tbody className="divide-y bg-card">
                {auditLogs.map((log) => (
                  <tr key={log.id}>
                    <td className="px-4 py-3 text-muted-foreground">
                      {new Date(log.timestamp).toLocaleString("zh-CN")}
                    </td>
                    <td className="px-4 py-3">{log.actorEmail ?? "系统"}</td>
                    <td className="px-4 py-3">{log.action}</td>
                    <td className="px-4 py-3 text-muted-foreground">
                      {log.targetType}
                      {log.targetId ? ` / ${log.targetId.slice(0, 8)}` : ""}
                    </td>
                    <td className="px-4 py-3">
                      <Badge
                        variant={
                          log.result === "success" ? "success" : log.result === "denied" ? "warning" : "danger"
                        }
                      >
                        {log.result}
                      </Badge>
                    </td>
                    <td className="px-4 py-3 text-muted-foreground">{log.reason}</td>
                  </tr>
                ))}
                {auditLogs.length === 0 ? (
                  <tr>
                    <td className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
                      暂无审计日志
                    </td>
                  </tr>
                ) : null}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}