opsxsql/frontend/src/pages/RolesPage.tsx

import { useState, useMemo, useCallback } from 'react';
import {
  Crown, Database, Code, Eye, ChevronRight, Check, Save,
  Search, X, Copy, Users, Lock, BarChart3, XCircle,
  CheckCircle2, MinusCircle, Sparkles, ChevronDown,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { permissionTreeData } from '@/lib/mock';

/* ───────── Types ───────── */

interface Role {
  id: string;
  name: string;
  description: string;
  icon: string;
  iconClass: string;
  permissions: string[];
  userCount: number;
  permissionCount: number;
}

interface PermissionChange {
  id: string;
  label: string;
  action: 'added' | 'removed';
}

interface PermissionPreset {
  key: string;
  name: string;
  description: string;
  icon: React.ElementType;
  permissions: string[];
}

/* ───────── Constants ───────── */

const iconMap: Record<string, React.ElementType> = { Crown, Database, Code, Eye };

const PERMISSION_PRESETS: PermissionPreset[] = [
  {
    key: 'dba',
    name: 'DBA 模板',
    description: '数据库管理员：完整的数据源管理、工单审批、查询数据权限',
    icon: Database,
    permissions: ['dashboard', 'mysql', 'postgres', 'redis', 'mongo', 'tickets', 'ticket_create', 'ticket_approve', 'ticket_execute', 'ticket_rollback', 'queries', 'query_create', 'query_export', 'query_view_all', 'audit-rules', 'audit-logs', 'workflow'],
  },
  {
    key: 'developer',
    name: '开发模板',
    description: '开发人员：工单提交、查询执行、数据导出',
    icon: Code,
    permissions: ['dashboard', 'tickets', 'ticket_create', 'queries', 'query_create', 'query_export'],
  },
  {
    key: 'auditor',
    name: '审计模板',
    description: '审计人员：查看查询日志、审计规则、审批流程',
    icon: Eye,
    permissions: ['dashboard', 'queries', 'query_view_all', 'audit-rules', 'audit-logs', 'workflow'],
  },
  {
    key: 'admin',
    name: '管理员模板',
    description: '超级管理员：系统全部权限',
    icon: Crown,
    permissions: ['dashboard', 'mysql', 'postgres', 'redis', 'mongo', 'tickets', 'ticket_create', 'ticket_approve', 'ticket_execute', 'ticket_rollback', 'queries', 'query_create', 'query_export', 'query_view_all', 'roles', 'users', 'audit-rules', 'audit-logs', 'workflow', 'auto-task', 'announcement', 'config-platform', 'notifications'],
  },
];

/* ───────── Helpers ───────── */

function collectAllIds(nodes: typeof permissionTreeData): string[] {
  const ids: string[] = [];
  const walk = (list: typeof permissionTreeData) => {
    list.forEach(n => {
      ids.push(n.id);
      if (n.children) walk(n.children);
    });
  };
  walk(nodes);
  return ids;
}

function searchTree(nodes: typeof permissionTreeData, query: string): typeof permissionTreeData {
  if (!query.trim()) return nodes;
  const lower = query.toLowerCase();
  return nodes.reduce<typeof permissionTreeData>((acc, node) => {
    const matchesSelf = node.label.toLowerCase().includes(lower);
    const filteredChildren = node.children ? searchTree(node.children, query) : [];
    if (matchesSelf || filteredChildren.length > 0) {
      acc.push({ ...node, children: filteredChildren.length > 0 ? filteredChildren : node.children });
    }
    return acc;
  }, []);
}

/* ───────── Main Component ───────── */

export default function RolesPage() {
  const [checkedKeys, setCheckedKeys] = useState<Set<string>>(new Set());
  const [originalKeys, setOriginalKeys] = useState<Set<string>>(new Set());
  const [searchQuery, setSearchQuery] = useState('');
  const [showDiff, setShowDiff] = useState(false);
  const [showPresets, setShowPresets] = useState(false);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  const hasChanges = useMemo(() => {
    const allIds = collectAllIds(permissionTreeData);
    return allIds.some(id => checkedKeys.has(id) !== originalKeys.has(id));
  }, [checkedKeys, originalKeys]);

  const changes = useMemo(() => {
    const allIds = collectAllIds(permissionTreeData);
    const idToLabel: Record<string, string> = {};
    const buildLabelMap = (nodes: typeof permissionTreeData) => {
      nodes.forEach(n => {
        idToLabel[n.id] = n.label;
        if (n.children) buildLabelMap(n.children);
      });
    };
    buildLabelMap(permissionTreeData);
    const result: PermissionChange[] = [];
    allIds.forEach(id => {
      if (checkedKeys.has(id) && !originalKeys.has(id)) {
        result.push({ id, label: idToLabel[id] || id, action: 'added' });
      } else if (!checkedKeys.has(id) && originalKeys.has(id)) {
        result.push({ id, label: idToLabel[id] || id, action: 'removed' });
      }
    });
    return result;
  }, [originalKeys, checkedKeys]);

  const filteredTree = useMemo(() => searchTree(permissionTreeData, searchQuery), [searchQuery]);

  const togglePermission = useCallback((id: string) => {
    setCheckedKeys(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }, []);

  const toggleChildren = useCallback((node: typeof permissionTreeData[0], checked: boolean) => {
    setCheckedKeys(prev => {
      const next = new Set(prev);
      const toggleNode = (n: typeof node) => {
        if (checked) next.add(n.id);
        else next.delete(n.id);
        n.children?.forEach(toggleNode);
      };
      toggleNode(node);
      return next;
    });
  }, []);

  const applyPreset = (preset: PermissionPreset) => {
    setCheckedKeys(new Set(preset.permissions));
    setOriginalKeys(new Set(preset.permissions));
    setShowPresets(false);
    setToast({ message: `已应用「${preset.name}」预设`, type: 'success' });
    setTimeout(() => setToast(null), 2000);
  };

  const handleSave = () => {
    setOriginalKeys(new Set(checkedKeys));
    setToast({ message: '权限配置已保存（演示模式）', type: 'success' });
    setTimeout(() => setToast(null), 2000);
  };

  const handleDiscard = () => {
    setCheckedKeys(new Set(originalKeys));
    setShowDiff(false);
    setToast({ message: '已撤销未保存的更改', type: 'error' });
    setTimeout(() => setToast(null), 2000);
  };

  return (
    <div className="space-y-5">
      {/* Toast */}
      {toast && (
        <div className={`fixed top-4 right-4 z-[100] px-4 py-3 rounded-lg text-sm flex items-center gap-2 shadow-lg border ${
          toast.type === 'success' ? 'bg-green-500/10 text-green-400 border-green-500/20' : 'bg-red-500/10 text-red-400 border-red-500/20'
        }`}>
          {toast.type === 'success' ? <CheckCircle2 className="w-4 h-4" /> : <XCircle className="w-4 h-4" />}
          {toast.message}
          <button onClick={() => setToast(null)} className="ml-2 hover:opacity-70"><X className="w-3 h-3" /></button>
        </div>
      )}

      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold">角色权限管理</h1>
          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置 RBAC 角色权限，控制用户对系统功能和数据的访问</p>
        </div>
      </div>

      {/* Empty state info */}
      <div className="dg-card p-5 flex items-start gap-3 bg-blue-500/5 border-blue-500/20">
        <Users className="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" />
        <div>
          <p className="text-sm text-[var(--dg-text-secondary)]">
            角色数据暂未接入后端 API，当前为权限配置演示模式。您可以使用下方的权限树和预设模板来规划角色权限方案。
          </p>
        </div>
      </div>

      {/* Permission Config */}
      <Card className="dg-card">
        <CardHeader className="border-b border-[var(--dg-border)] flex flex-row items-center justify-between flex-wrap gap-3">
          <CardTitle className="text-[15px] font-semibold">权限配置</CardTitle>
          <div className="flex items-center gap-2">
            {/* Presets */}
            <div className="relative">
              <button
                onClick={() => setShowPresets(!showPresets)}
                className="flex items-center gap-2 px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-colors"
              >
                <Sparkles className="w-4 h-4" /> 预设模板 <ChevronDown className="w-3 h-3" />
              </button>
              {showPresets && (
                <>
                  <div className="fixed inset-0 z-40" onClick={() => setShowPresets(false)} />
                  <div className="absolute right-0 top-full mt-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl z-50 py-1 min-w-[260px]">
                    {PERMISSION_PRESETS.map(preset => {
                      const Icon = preset.icon;
                      return (
                        <button
                          key={preset.key}
                          onClick={() => applyPreset(preset)}
                          className="w-full flex items-start gap-3 px-4 py-3 text-left hover:bg-[var(--dg-bg-hover)] transition-colors border-b border-[var(--dg-border-light)] last:border-0"
                        >
                          <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                            <Icon className="w-4 h-4 text-blue-400" />
                          </div>
                          <div>
                            <div className="text-sm font-medium">{preset.name}</div>
                            <div className="text-xs text-[var(--dg-text-muted)] mt-0.5">{preset.description}</div>
                            <div className="text-xs text-blue-400 mt-1">{preset.permissions.length} 个权限</div>
                          </div>
                        </button>
                      );
                    })}
                  </div>
                </>
              )}
            </div>

            {/* Diff Toggle */}
            {hasChanges && (
              <button
                onClick={() => setShowDiff(!showDiff)}
                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
                  showDiff ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30' : 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]'
                }`}
              >
                变更对比
              </button>
            )}

            {/* Discard */}
            {hasChanges && (
              <button
                onClick={handleDiscard}
                className="flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-400 hover:bg-red-500/20 transition-colors"
              >
                <X className="w-4 h-4" /> 撤销
              </button>
            )}

            {/* Save */}
            <button
              onClick={handleSave}
              className="flex items-center gap-2 px-4 py-2 bg-blue-500/15 border border-blue-500/30 rounded-lg text-sm font-medium text-blue-400 hover:bg-blue-500/25 transition-all"
            >
              <Save className="w-4 h-4" /> 保存权限
            </button>
          </div>
        </CardHeader>

        <CardContent className="p-5">
          <div className="flex gap-5">
            {/* Permission Tree */}
            <div className="flex-1 min-w-0">
              {/* Search */}
              <div className="relative mb-4">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
                <input
                  value={searchQuery}
                  onChange={e => setSearchQuery(e.target.value)}
                  placeholder="搜索权限名称..."
                  className="w-full pl-10 pr-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm placeholder:text-[var(--dg-text-muted)] focus:border-blue-400 focus:outline-none"
                />
                {searchQuery && (
                  <button onClick={() => setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
                    <X className="w-3.5 h-3.5" />
                  </button>
                )}
              </div>

              {/* Tree */}
              <div className="space-y-1">
                {filteredTree.map(node => (
                  <PermissionNodeComponent
                    key={node.id}
                    node={node}
                    checkedKeys={checkedKeys}
                    onToggle={togglePermission}
                    onToggleChildren={toggleChildren}
                    depth={0}
                  />
                ))}
                {filteredTree.length === 0 && (
                  <div className="text-center py-8 text-[var(--dg-text-muted)] text-sm">
                    <Search className="w-8 h-8 mx-auto mb-2 opacity-30" />
                    未找到匹配的权限
                  </div>
                )}
              </div>
            </div>

            {/* Diff Panel */}
            {showDiff && hasChanges && (
              <div className="w-72 border-l border-[var(--dg-border)] pl-5 flex-shrink-0">
                <h3 className="text-sm font-semibold mb-3">变更详情</h3>
                <div className="space-y-2 max-h-[500px] overflow-y-auto">
                  {changes.map(change => (
                    <div
                      key={change.id}
                      className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs ${
                        change.action === 'added' ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'
                      }`}
                    >
                      {change.action === 'added' ? <CheckCircle2 className="w-3.5 h-3.5 flex-shrink-0" /> : <MinusCircle className="w-3.5 h-3.5 flex-shrink-0" />}
                      <span className="flex-1 min-w-0 truncate">{change.label}</span>
                    </div>
                  ))}
                </div>
                <div className="mt-3 pt-3 border-t border-[var(--dg-border)] flex items-center gap-3 text-xs text-[var(--dg-text-muted)]">
                  <span className="flex items-center gap-1"><CheckCircle2 className="w-3 h-3 text-green-400" /> 新增 {changes.filter(c => c.action === 'added').length}</span>
                  <span className="flex items-center gap-1"><MinusCircle className="w-3 h-3 text-red-400" /> 移除 {changes.filter(c => c.action === 'removed').length}</span>
                </div>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

/* ───────── Permission Node Component ───────── */

function PermissionNodeComponent({
  node, checkedKeys, onToggle, onToggleChildren, depth
}: {
  node: typeof permissionTreeData[0];
  checkedKeys: Set<string>;
  onToggle: (id: string) => void;
  onToggleChildren: (node: typeof permissionTreeData[0], checked: boolean) => void;
  depth: number;
}) {
  const [expanded, setExpanded] = useState(true);
  const isChecked = checkedKeys.has(node.id);
  const hasChildren = node.children && node.children.length > 0;
  const allChildrenChecked = hasChildren && node.children!.every(c => checkedKeys.has(c.id));
  const someChildrenChecked = hasChildren && node.children!.some(c => checkedKeys.has(c.id));

  return (
    <div>
      <div
        className="flex items-center gap-2 py-2 px-3 rounded-lg hover:bg-[var(--dg-bg-hover)] transition-colors cursor-pointer"
        style={{ paddingLeft: `${depth * 20 + 12}px` }}
        onClick={() => { if (hasChildren) setExpanded(!expanded); }}
      >
        {hasChildren && (
          <ChevronRight className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${expanded ? 'rotate-90' : ''}`} />
        )}
        {!hasChildren && <div className="w-4" />}
        <div
          className={`w-4 h-4 rounded border flex items-center justify-center transition-all ${
            isChecked || allChildrenChecked
              ? 'bg-blue-500 border-blue-500'
              : someChildrenChecked
              ? 'bg-blue-500/50 border-blue-500'
              : 'border-[var(--dg-text-muted)]'
          }`}
          onClick={e => {
            e.stopPropagation();
            if (hasChildren) onToggleChildren(node, !allChildrenChecked);
            else onToggle(node.id);
          }}
        >
          {(isChecked || allChildrenChecked || someChildrenChecked) && <Check className="w-3 h-3 text-white" />}
        </div>
        <span className="text-sm select-none">{node.label}</span>
      </div>
      {hasChildren && expanded && (
        <div>
          {node.children!.map(child => (
            <PermissionNodeComponent
              key={child.id}
              node={child}
              checkedKeys={checkedKeys}
              onToggle={onToggle}
              onToggleChildren={onToggleChildren}
              depth={depth + 1}
            />
          ))}
        </div>
      )}
    </div>
  );
}