// Quản lý 12 role mặc định + custom role admin tự thêm. Edit chỉ ShortName +
// Description (Mã = Identity Name là FK + [Authorize] attr — không cho đổi).
// Delete chỉ cho custom role chưa có user assigned (BE block 12 hardcoded).
import { useState, type FormEvent } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { Pencil, Plus, Shield, Trash2, AlertCircle } from 'lucide-react'
import { toast } from 'sonner'
import { PageHeader } from '@/components/PageHeader'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Label } from '@/components/ui/Label'
import { Textarea } from '@/components/ui/Textarea'
import { Dialog } from '@/components/ui/Dialog'
import { api } from '@/lib/api'
import { getErrorMessage } from '@/lib/apiError'
import { AVAILABLE_ROLES } from '@/types/users'
import type { Role } from '@/types/menu'

const HARDCODED_ROLES = new Set<string>(AVAILABLE_ROLES)

const fmtDate = (s: string) => new Date(s).toLocaleDateString('vi-VN')

export function RolesPage() {
  const qc = useQueryClient()

  const [createOpen, setCreateOpen] = useState(false)
  const [createForm, setCreateForm] = useState({ name: '', shortName: '', description: '' })

  const [editTarget, setEditTarget] = useState<Role | null>(null)
  const [editForm, setEditForm] = useState({ shortName: '', description: '' })

  const list = useQuery({
    queryKey: ['roles'],
    queryFn: async () => (await api.get<Role[]>('/roles')).data,
  })

  const createMut = useMutation({
    mutationFn: async () => {
      await api.post('/roles', {
        name: createForm.name.trim(),
        shortName: createForm.shortName.trim() || null,
        description: createForm.description.trim() || null,
      })
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['roles'] })
      toast.success('Đã tạo role')
      setCreateOpen(false)
      setCreateForm({ name: '', shortName: '', description: '' })
    },
    onError: err => toast.error(getErrorMessage(err)),
  })

  const editMut = useMutation({
    mutationFn: async () => {
      if (!editTarget) return
      await api.put(`/roles/${editTarget.id}`, {
        id: editTarget.id,
        shortName: editForm.shortName.trim() || null,
        description: editForm.description.trim() || null,
      })
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['roles'] })
      toast.success('Đã lưu')
      setEditTarget(null)
    },
    onError: err => toast.error(getErrorMessage(err)),
  })

  const deleteMut = useMutation({
    mutationFn: async (id: string) => { await api.delete(`/roles/${id}`) },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['roles'] })
      toast.success('Đã xóa role')
    },
    onError: err => toast.error(getErrorMessage(err)),
  })

  function openEdit(r: Role) {
    setEditTarget(r)
    setEditForm({ shortName: r.shortName ?? '', description: r.description ?? '' })
  }

  return (
    <div className="p-6">
      <PageHeader
        title={
          <span className="flex items-center gap-2">
            <Shield className="h-5 w-5" />
            Vai trò (Roles)
          </span>
        }
        description="12 role mặc định seed lúc startup + custom role admin thêm. Chỉ sửa Mã viết tắt + Tên đầy đủ; không đổi Mã code (FK)."
        actions={
          <Button onClick={() => setCreateOpen(true)}>
            <Plus className="h-4 w-4" />
            Thêm role tùy chỉnh
          </Button>
        }
      />

      <div className="mb-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
        <AlertCircle className="mr-1 inline h-3.5 w-3.5" />
        Mã code (Name) là khóa kỹ thuật — KHÔNG đổi sau khi tạo (tham chiếu UserRoles + WorkflowStepApprover + [Authorize]).
        Chỉ Mã viết tắt + Tên đầy đủ tiếng Việt được sửa.
      </div>

      <div className="overflow-x-auto rounded-lg border border-slate-200 bg-white">
        <table className="min-w-full text-sm">
          <thead className="bg-slate-50 text-[11px] uppercase tracking-wider text-slate-500">
            <tr>
              <th className="px-3 py-2 text-left">Mã code</th>
              <th className="px-3 py-2 text-left">Mã viết tắt</th>
              <th className="px-3 py-2 text-left">Tên đầy đủ</th>
              <th className="px-3 py-2 text-left">Loại</th>
              <th className="w-28 px-3 py-2 text-left">Ngày tạo</th>
              <th className="w-24 px-3 py-2"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {list.isLoading && <tr><td colSpan={6} className="p-6 text-center text-slate-400">Đang tải…</td></tr>}
            {!list.isLoading && (list.data?.length ?? 0) === 0 && (
              <tr><td colSpan={6} className="p-6 text-center text-slate-400">Không có role.</td></tr>
            )}
            {list.data?.map(r => {
              const isSystem = HARDCODED_ROLES.has(r.name)
              return (
                <tr key={r.id} className="hover:bg-slate-50">
                  <td className="px-3 py-2 font-mono text-xs">{r.name}</td>
                  <td className="px-3 py-2 font-semibold text-brand-700">{r.shortName ?? '—'}</td>
                  <td className="px-3 py-2">{r.description ?? <span className="text-slate-400">—</span>}</td>
                  <td className="px-3 py-2">
                    {isSystem ? (
                      <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-600">Mặc định</span>
                    ) : (
                      <span className="rounded-full bg-brand-50 px-2 py-0.5 text-[10px] text-brand-700">Tùy chỉnh</span>
                    )}
                  </td>
                  <td className="px-3 py-2 text-xs text-slate-500">{fmtDate(r.createdAt)}</td>
                  <td className="px-3 py-2">
                    <div className="flex justify-end gap-1">
                      <button
                        onClick={() => openEdit(r)}
                        title="Sửa Mã viết tắt + Tên đầy đủ"
                        className="rounded p-1 text-slate-500 hover:bg-slate-100 hover:text-brand-600"
                      >
                        <Pencil className="h-3.5 w-3.5" />
                      </button>
                      <button
                        onClick={() => {
                          if (isSystem) {
                            toast.error('Không xóa được role mặc định')
                            return
                          }
                          if (confirm(`Xóa role "${r.name}"?`)) deleteMut.mutate(r.id)
                        }}
                        title={isSystem ? 'Role mặc định — không xóa được' : 'Xóa role'}
                        disabled={isSystem || deleteMut.isPending}
                        className={`rounded p-1 transition ${
                          isSystem
                            ? 'cursor-not-allowed text-slate-300'
                            : 'text-slate-500 hover:bg-slate-100 hover:text-red-600'
                        }`}
                      >
                        <Trash2 className="h-3.5 w-3.5" />
                      </button>
                    </div>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>

      {/* Create custom role */}
      <Dialog
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        title="Thêm role tùy chỉnh"
        size="md"
        footer={
          <>
            <Button variant="outline" onClick={() => setCreateOpen(false)}>Hủy</Button>
            <Button onClick={(e: FormEvent) => { e.preventDefault(); createMut.mutate() }} disabled={createMut.isPending}>
              {createMut.isPending ? 'Đang tạo…' : 'Tạo'}
            </Button>
          </>
        }
      >
        <form className="space-y-3" onSubmit={e => { e.preventDefault(); createMut.mutate() }}>
          <div className="space-y-1.5">
            <Label>Mã code (English, không đổi sau tạo) *</Label>
            <Input
              value={createForm.name}
              onChange={e => setCreateForm(f => ({ ...f, name: e.target.value }))}
              placeholder="Auditor, ITSupport, Reception..."
              required
              pattern="^[A-Za-z][A-Za-z0-9_]*$"
            />
            <div className="text-xs text-slate-500">
              Chỉ chữ + số + underscore, bắt đầu bằng chữ. Dùng cho [Authorize(Roles="...")] + workflow guard.
            </div>
          </div>
          <div className="space-y-1.5">
            <Label>Mã viết tắt (Vietnamese)</Label>
            <Input
              value={createForm.shortName}
              onChange={e => setCreateForm(f => ({ ...f, shortName: e.target.value }))}
              placeholder="vd: KSV, IT, LT..."
            />
          </div>
          <div className="space-y-1.5">
            <Label>Tên đầy đủ tiếng Việt</Label>
            <Textarea
              rows={2}
              value={createForm.description}
              onChange={e => setCreateForm(f => ({ ...f, description: e.target.value }))}
              placeholder="vd: Kiểm soát viên nội bộ"
            />
          </div>
        </form>
      </Dialog>

      {/* Edit existing role */}
      <Dialog
        open={!!editTarget}
        onClose={() => setEditTarget(null)}
        title={`Sửa role: ${editTarget?.name}`}
        size="md"
        footer={
          <>
            <Button variant="outline" onClick={() => setEditTarget(null)}>Hủy</Button>
            <Button onClick={() => editMut.mutate()} disabled={editMut.isPending}>
              {editMut.isPending ? 'Đang lưu…' : 'Lưu'}
            </Button>
          </>
        }
      >
        {editTarget && (
          <div className="space-y-3">
            <div className="space-y-1.5">
              <Label>Mã code</Label>
              <Input value={editTarget.name} disabled className="bg-slate-50 font-mono" />
              <div className="text-xs text-slate-500">Không đổi được sau khi tạo.</div>
            </div>
            <div className="space-y-1.5">
              <Label>Mã viết tắt</Label>
              <Input
                value={editForm.shortName}
                onChange={e => setEditForm(f => ({ ...f, shortName: e.target.value }))}
              />
            </div>
            <div className="space-y-1.5">
              <Label>Tên đầy đủ tiếng Việt</Label>
              <Textarea
                rows={2}
                value={editForm.description}
                onChange={e => setEditForm(f => ({ ...f, description: e.target.value }))}
              />
            </div>
          </div>
        )}
      </Dialog>
    </div>
  )
}