// src/app/(dashboard)/superadmin/roles/page.tsx
'use client';

import React, { useState } from 'react';
import { useAllRoles, usePermissions, useRoles } from '@/services/roles/queries';
import { RoleData } from '@/services/roles/types';
import { ShieldAlert, ShieldCheck, UserCheck, Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { PermissionGuard } from '@/features/auth/guards';
import { PERMISSIONS } from '@/constants/permissions';
import PermissionToggleBoard from './_components/PermissionToggleBoard';
import { TableSkeleton } from '@/components/ui/tableSkeleton';

export default function RolesManagementPage() {
  const { data: roles, isLoading } = useAllRoles();
  const [selectedRole, setSelectedRole] = useState<RoleData | null>(null);

  if (isLoading) return <TableSkeleton />;

  const activeRole = selectedRole || roles?.[0] || null;

  return (
    <div className="space-y-4 max-w-7xl mx-auto animate-in fade-in duration-300 select-none">
      {/* PAGE HEADER AXIS */}
      <div className="flex items-center justify-between border-b border-border/10 pb-4">
        <div>
          <h1 className="text-sm font-black tracking-widest text-foreground uppercase">
            SECURITY MATRICES
          </h1>
          <p className="text-[11px] font-medium text-muted-foreground/70">
            National Scaling Ecosystem Topologies & Governance Management
          </p>
        </div>
        
        <PermissionGuard permission={PERMISSIONS.ROLES_CREATE}>
          <Button 
            className="h-8 rounded-md px-3 text-[11px] font-bold tracking-wider uppercase shadow-sm gap-1.5 bg-foreground text-background hover:bg-foreground/90">
            <Plus className="h-3.5 w-3.5 stroke-[2.5]" /> 
            New Profile
          </Button>
        </PermissionGuard>
      </div>

      {/* CORE WORKSPACE MODULE GRID */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
        {/* LEFT COLUMN: LIST PROFILE BLOCKS */}
        <div className="space-y-2 lg:col-span-1">
          {roles?.map((role) => {
            const isSelected = activeRole?.id === role.id;
            return (
              <div
                key={role.id}
                onClick={() => setSelectedRole(role)}
                className={`p-4 rounded-xl border transition-all flex flex-col justify-between h-28 cursor-pointer ${
                  isSelected
                    ? 'border-primary bg-muted/30 shadow-sm ring-1 ring-primary/30'
                    : 'border-border/40 bg-background hover:border-border hover:bg-muted/10'
                }`}
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="truncate">
                    <h3 className="text-xs font-semibold text-foreground truncate tracking-tight">
                      {role.name}
                    </h3>
                    <p className="text-[10px] text-muted-foreground/60 font-mono tracking-tight mt-0.5 truncate">
                      {role.slug}
                    </p>
                  </div>
                  {role.isSystem ? (
                    <span className="p-1 rounded bg-destructive/10 text-destructive shrink-0" title="System Protected">
                      <ShieldAlert className="h-3.5 w-3.5" />
                    </span>
                  ) : (
                    <span className="p-1 rounded bg-success/10 text-success shrink-0" title="Custom Dynamic">
                      <ShieldCheck className="h-3.5 w-3.5" />
                    </span>
                  )}
                </div>

                <div className="flex items-center text-muted-foreground/80 space-x-1.5">
                  <UserCheck className="h-3.5 w-3.5 text-muted-foreground/50" />
                  <span className="text-[11px] font-medium">{role.userCount} Active Assignments</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* RIGHT COLUMN: DETAIL ASSIGNMENTS MODULE GRID */}
        <div className="lg:col-span-2">
          {activeRole ? (
            <PermissionToggleBoard activeRole={activeRole} />
          ) : (
            <div className="p-12 text-center border border-dashed border-border/40 rounded-xl bg-background text-muted-foreground/70 text-xs">
              Select or deploy a user access group profile block to modify capability structures.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}