'use client';
import { useEffect, useState } from 'react';
import { adminService } from '@/services/admin.service';
import type { PermissionInfo } from '@/types/admin.types';

export default function AdminPermissionsPage() {
  const [permissions, setPermissions] = useState<PermissionInfo[]>([]);
  const [groupedPerms, setGroupedPerms] = useState<Record<string, PermissionInfo[]>>({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      adminService.listPermissions(),
      adminService.getPermissionsByModule(),
    ]).then(([listRes, groupedRes]) => {
      setPermissions(listRes);
      setGroupedPerms(groupedRes);
      setLoading(false);
    });
  }, []);

  if (loading) return <p className="text-center text-slate-500 py-10">Loading permissions...</p>;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Permissions</h1>
        <p className="mt-1 text-sm text-white/50">All system permissions grouped by module</p>
      </div>

      <p className="text-xs text-slate-400">Total: {permissions.length} permissions</p>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {Object.entries(groupedPerms).map(([module, perms]) => (
          <div key={module} className="rounded-xl border border-white/5 bg-white/[0.02] p-4">
            <h3 className="text-sm font-semibold text-white mb-3 uppercase">{module}</h3>
            <div className="space-y-2">
              {perms.map((p) => (
                <div key={p.id} className="rounded-lg bg-white/5 p-2">
                  <p className="text-xs font-medium text-white">{p.name || p.key}</p>
                  <p className="text-[10px] text-slate-500 font-mono">{p.key}</p>
                  {p.description && <p className="text-[10px] text-slate-400 mt-1">{p.description}</p>}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}