issue-ai/src/app/(app)/settings/roles/page.tsx

'use client'
import { useState, useEffect } from 'react'
import { Card, Button, Table, Badge, Modal, Input } from '@/components/ui'
import { Plus, Pencil, Trash2 } from 'lucide-react'

interface Role {
  id: number
  name: string
  display_name: string
  permissions: string
  created_at: string
}

const allPermissions = [
  { key: 'tickets:read', label: '查看工单' },
  { key: 'tickets:write', label: '编辑工单' },
  { key: 'reports:read', label: '查看报告' },
  { key: 'reports:write', label: '编辑报告' },
  { key: 'users:read', label: '查看用户' },
  { key: 'users:write', label: '编辑用户' },
  { key: 'roles:read', label: '查看角色' },
  { key: 'roles:write', label: '编辑角色' },
]

export default function RolesPage() {
  const [roles, setRoles] = useState<Role[]>([])
  const [loading, setLoading] = useState(true)
  const [modalOpen, setModalOpen] = useState(false)
  const [editRole, setEditRole] = useState<Role | null>(null)
  const [form, setForm] = useState({ name: '', display_name: '', permissions: [] as string[] })
  const [error, setError] = useState('')

  const fetchRoles = () => {
    fetch('/api/roles').then(r => r.json()).then(d => { if (d.roles) setRoles(d.roles) }).catch(() => {}).finally(() => setLoading(false))
  }

  useEffect(() => { fetchRoles() }, [])

  const openCreate = () => {
    setEditRole(null)
    setForm({ name: '', display_name: '', permissions: [] })
    setError('')
    setModalOpen(true)
  }

  const openEdit = (r: Role) => {
    setEditRole(r)
    let perms: string[] = []
    try { perms = JSON.parse(r.permissions) } catch {}
    setForm({ name: r.name, display_name: r.display_name, permissions: perms })
    setError('')
    setModalOpen(true)
  }

  const togglePermission = (key: string) => {
    setForm(prev => ({
      ...prev,
      permissions: prev.permissions.includes(key) ? prev.permissions.filter(p => p !== key) : [...prev.permissions, key],
    }))
  }

  const handleSave = async () => {
    setError('')
    try {
      if (editRole) {
        const res = await fetch(`/api/roles/${editRole.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ display_name: form.display_name, permissions: form.permissions }) })
        if (!res.ok) { const d = await res.json(); setError(d.error || '更新失败'); return }
      } else {
        if (!form.name || !form.display_name) { setError('请填写必填项'); return }
        const res = await fetch('/api/roles', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form) })
        if (!res.ok) { const d = await res.json(); setError(d.error || '创建失败'); return }
      }
      setModalOpen(false)
      fetchRoles()
    } catch { setError('操作失败') }
  }

  const handleDelete = async (id: number) => {
    if (!confirm('确定删除此角色？')) return
    const res = await fetch(`/api/roles/${id}`, { method: 'DELETE' })
    if (res.ok) fetchRoles()
    else { const d = await res.json(); alert(d.error || '删除失败') }
  }

  const formatPermissions = (permStr: string) => {
    try {
      const perms: string[] = JSON.parse(permStr)
      if (perms.includes('*')) return '全部权限'
      return perms.map(p => { const f = allPermissions.find(a => a.key === p); return f ? f.label : p }).join(', ') || '无权限'
    } catch { return '无权限' }
  }

  const builtinRoles = ['admin', 'operator', 'viewer']

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">角色权限</h1>
          <p className="text-slate-500 dark:text-slate-400 mt-1">角色与权限配置</p>
        </div>
        <Button size="sm" onClick={openCreate}><Plus size={16} className="mr-1" />新建角色</Button>
      </div>

      {loading ? (
        <div className="text-center py-12 text-slate-500 dark:text-slate-400">加载中...</div>
      ) : (
        <Table headers={['角色名', '显示名称', '权限', '操作']}>
          {roles.map(r => (
            <tr key={r.id} className="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
              <td className="px-4 py-3 font-medium text-slate-900 dark:text-slate-100">{r.name}</td>
              <td className="px-4 py-3 text-slate-700 dark:text-slate-300">{r.display_name}</td>
              <td className="px-4 py-3 text-slate-500 dark:text-slate-400 text-sm">{formatPermissions(r.permissions)}</td>
              <td className="px-4 py-3">
                <div className="flex items-center gap-1">
                  <Button variant="ghost" size="sm" onClick={() => openEdit(r)}><Pencil size={14} /></Button>
                  {!builtinRoles.includes(r.name) && (
                    <Button variant="ghost" size="sm" onClick={() => handleDelete(r.id)}><Trash2 size={14} className="text-red-500" /></Button>
                  )}
                </div>
              </td>
            </tr>
          ))}
        </Table>
      )}

      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title={editRole ? '编辑角色' : '新建角色'}>
        <div className="space-y-4">
          {!editRole && <Input label="角色名（英文）" value={form.name} onChange={e => setForm(p => ({ ...p, name: e.target.value }))} placeholder="e.g. supervisor" />}
          <Input label="显示名称" value={form.display_name} onChange={e => setForm(p => ({ ...p, display_name: e.target.value }))} />
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">权限</label>
            <div className="space-y-2">
              {allPermissions.map(p => (
                <label key={p.key} className="flex items-center gap-2 cursor-pointer">
                  <input type="checkbox" checked={form.permissions.includes(p.key) || form.permissions.includes('*')} onChange={() => togglePermission(p.key)} className="rounded border-slate-300" />
                  <span className="text-sm text-slate-700 dark:text-slate-300">{p.label}</span>
                  <span className="text-xs text-slate-400">{p.key}</span>
                </label>
              ))}
            </div>
          </div>
          {error && <p className="text-sm text-red-500">{error}</p>}
          <div className="flex gap-3">
            <Button onClick={handleSave}>{editRole ? '保存' : '创建'}</Button>
            <Button variant="secondary" onClick={() => setModalOpen(false)}>取消</Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}