'use client';

import { useEffect, useMemo, useState } from 'react';
import { Plus, X, Shield } from 'lucide-react';
import { useMemberStore } from '@/stores/useMemberStore';
import { PERMISSION_GROUPS, ALL_PERMISSIONS } from '@/lib/permissions';
import { RouteGuard, useHasPermission } from '@/components/auth/Guard';
import type { RoleItem } from '@/lib/members';

export default function RolesPage() {
  return (
    <RouteGuard permission="role:view">
      <RolesPageContent />
    </RouteGuard>
  );
}

function RolesPageContent() {
  const { roles, fetchMembers, createRole, updateRole, deleteRole } = useMemberStore();
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState<RoleItem | null>(null);
  const canCreate = useHasPermission('role:create');
  const canEdit = useHasPermission('role:edit');
  const canDelete = useHasPermission('role:delete');

  useEffect(() => { fetchMembers(); }, [fetchMembers]);

  return (
    <div className="flex h-full flex-col">
      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
        <div className="flex items-center gap-2.5">
          <h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">角色管理</h1>
          <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">{roles.length}</span>
        </div>
        <button onClick={() => { setEditing(null); setShowModal(true); }} disabled={!canCreate} className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
          <Plus className="h-3.5 w-3.5" strokeWidth={2} />
          新建角色
        </button>
      </header>

      <div className="flex-1 overflow-y-auto bg-[var(--bg)] px-5 py-4">
        <div className="grid gap-3">
          {roles.map((role) => (
            <div key={role.id} className="flex items-center justify-between rounded-xl border border-[var(--line)] bg-[var(--bg-card)] px-4 py-3 shadow-[var(--shadow-sm)]">
              <div className="flex items-center gap-3">
                <div className={`flex h-8 w-8 items-center justify-center rounded-lg ${role.isSystem ? 'bg-amber-50' : 'bg-[var(--bg-subtle)]'}`}>
                  <Shield className={`h-4 w-4 ${role.isSystem ? 'text-amber-600' : 'text-[var(--ink-muted)]'}`} />
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <span className="text-[13px] font-medium text-[var(--ink)]">{role.name}</span>
                    {role.isSystem && (
                      <span className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 border border-amber-200">系统</span>
                    )}
                    <span className="text-[11px] text-[var(--ink-muted)]">{role.permissions.includes('*') ? '全部权限' : `${role.permissions.length} 项权限`}</span>
                  </div>
                  {role.description && (
                    <p className="text-[12px] text-[var(--ink-muted)] mt-0.5">{role.description}</p>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-1">
                <button onClick={() => { setEditing(role); setShowModal(true); }} className="h-7 px-2.5 rounded-md text-[11px] font-medium text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] transition-colors">{role.isSystem || !canEdit ? '查看' : '编辑'}</button>
                {!role.isSystem && canDelete && (
                  <button onClick={() => deleteRole(role.id)} className="h-7 px-2.5 rounded-md text-[11px] font-medium text-red-500 hover:bg-red-50 transition-colors">删除</button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>

      {showModal && (
        <RoleModal
          initial={editing}
          onClose={() => setShowModal(false)}
          onSubmit={(data) => {
            if (editing) updateRole(editing.id, data);
            else createRole(data);
            setShowModal(false);
          }}
        />
      )}
    </div>
  );
}

function RoleModal({ initial, onClose, onSubmit }: {
  initial: RoleItem | null;
  onClose: () => void;
  onSubmit: (data: { name: string; description?: string; permissions: string[] }) => void;
}) {
  const [name, setName] = useState(initial?.name ?? '');
  const [description, setDescription] = useState(initial?.description ?? '');
  const [permissions, setPermissions] = useState<Set<string>>(new Set(initial?.permissions ?? []));
  const isReadOnly = !!initial?.isSystem;
  const isAdminWildcard = permissions.has('*');

  const togglePerm = (p: string) => {
    if (isReadOnly) return;
    const next = new Set(permissions);
    if (next.has(p)) next.delete(p); else next.add(p);
    setPermissions(next);
  };

  const handleSelectAll = () => setPermissions(new Set(ALL_PERMISSIONS));
  const handleSelectNone = () => setPermissions(new Set());
  const handleViewOnly = () => {
    const viewOnly = ALL_PERMISSIONS.filter((p) => p.endsWith(':view'));
    setPermissions(new Set(viewOnly));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim() || isReadOnly) return;
    onSubmit({ name: name.trim(), description: description.trim() || undefined, permissions: Array.from(permissions) });
  };

  const mainGroups = useMemo(() => PERMISSION_GROUPS.filter((g) => g.category === 'main'), []);
  const tabGroups = useMemo(() => PERMISSION_GROUPS.filter((g) => g.category === 'version_tab'), []);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
      <div className="w-full max-w-2xl max-h-[85vh] flex flex-col rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-5 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-4 shrink-0">
          <h3 className="text-[13px] font-semibold text-[var(--ink)]">{initial ? (isReadOnly ? '查看角色' : '编辑角色') : '新建角色'}</h3>
          <button onClick={onClose} className="p-1 rounded hover:bg-[var(--bg-subtle)] text-[var(--ink-muted)]"><X className="h-4 w-4" /></button>
        </div>
        <form onSubmit={handleSubmit} className="flex flex-col gap-3 overflow-hidden">
          {isReadOnly && (
            <div className="rounded-lg bg-amber-50 border border-amber-200 px-3 py-2 text-[11px] text-amber-700">
              系统角色不可修改，权限为系统预设
            </div>
          )}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">角色名称 *</label>
              <input value={name} onChange={(e) => setName(e.target.value)} required disabled={isReadOnly} placeholder="如：项目经理" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none disabled:bg-zinc-50 disabled:text-[var(--ink-soft)]" />
            </div>
            <div>
              <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">描述</label>
              <input value={description} onChange={(e) => setDescription(e.target.value)} disabled={isReadOnly} placeholder="可选" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none disabled:bg-zinc-50 disabled:text-[var(--ink-soft)]" />
            </div>
          </div>

          <div className="flex-1 flex flex-col gap-2 overflow-hidden">
            <div className="flex items-center justify-between shrink-0">
              <label className="text-[12px] font-medium text-[var(--ink-soft)]">权限</label>
              {!isReadOnly && (
                <div className="flex gap-1.5">
                  <button type="button" onClick={handleSelectAll} className="h-6 px-2 rounded text-[11px] border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">全选</button>
                  <button type="button" onClick={handleViewOnly} className="h-6 px-2 rounded text-[11px] border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">仅查看</button>
                  <button type="button" onClick={handleSelectNone} className="h-6 px-2 rounded text-[11px] border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">反选</button>
                </div>
              )}
            </div>
            {isAdminWildcard ? (
              <div className="rounded-lg bg-emerald-50 border border-emerald-200 px-3 py-2 text-[11px] text-emerald-700">
                此角色拥有所有权限（通配符 *）
              </div>
            ) : (
              <div className="flex-1 overflow-y-auto space-y-3 rounded-lg border border-[var(--line)] bg-[var(--bg-subtle)] p-3">
                <PermissionSection title="主模块" groups={mainGroups} permissions={permissions} togglePerm={togglePerm} disabled={isReadOnly} />
                <PermissionSection title="版本详情 Tab" groups={tabGroups} permissions={permissions} togglePerm={togglePerm} disabled={isReadOnly} />
              </div>
            )}
          </div>

          <div className="flex justify-end gap-2 pt-2 shrink-0">
            <button type="button" onClick={onClose} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">{isReadOnly ? '关闭' : '取消'}</button>
            {!isReadOnly && (
              <button type="submit" className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">{initial ? '保存' : '创建'}</button>
            )}
          </div>
        </form>
      </div>
    </div>
  );
}

function PermissionSection({ title, groups, permissions, togglePerm, disabled }: {
  title: string;
  groups: typeof PERMISSION_GROUPS;
  permissions: Set<string>;
  togglePerm: (p: string) => void;
  disabled: boolean;
}) {
  return (
    <div>
      <div className="text-[11px] font-medium text-[var(--ink-muted)] mb-2">{title}</div>
      <div className="space-y-1.5">
        {groups.map((g) => (
          <div key={g.module} className="flex items-center gap-3 rounded-md bg-[var(--bg-card)] px-3 py-1.5">
            <span className="text-[12px] font-medium text-[var(--ink)] w-28 shrink-0">{g.moduleLabel}</span>
            <div className="flex flex-wrap gap-3">
              {g.actions.map((a) => (
                <label key={a.permission} className={`flex items-center gap-1 text-[11px] ${disabled ? 'cursor-default' : 'cursor-pointer'} ${disabled ? 'text-[var(--ink-muted)]' : 'text-[var(--ink-soft)]'}`}>
                  <input
                    type="checkbox"
                    checked={permissions.has(a.permission)}
                    onChange={() => togglePerm(a.permission)}
                    disabled={disabled}
                    className="h-3.5 w-3.5 rounded border-[var(--line)]"
                  />
                  {a.label}
                </label>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}