"use client";

import React from "react";
import Link from "next/link";
import { Shield, ChevronRight, CheckCircle2 } from "lucide-react";
import { toast } from "sonner";

interface RoleItem {
  role: string;
  assignedUsers: number;
  description: string;
  permissionsCount: number;
}

const roles: RoleItem[] = [
  { role: "Super Administrator", assignedUsers: 2, description: "Full root access across all system parameters, RBAC permissions, audit logs, and backups.", permissionsCount: 48 },
  { role: "Academic / Department Administrator", assignedUsers: 6, description: "Academic session, course, semester, subject, faculty allocation, student registration, group, timetable, holiday, attendance rules, medical adjustments, reports, and APR generation.", permissionsCount: 38 },
  { role: "Academic Administrator", assignedUsers: 4, description: "Manage sessions, courses, batches, timetables, and APR generation.", permissionsCount: 36 },
  { role: "Faculty / Instructor", assignedUsers: 86, description: "Mark attendance, record kitchen hours, view assigned timetable, and submit APR.", permissionsCount: 14 },
  { role: "Student / Trainee", assignedUsers: 785, description: "View monthly attendance %, timetable, and request medical adjustments.", permissionsCount: 6 },
];

export default function RolesPermissionsPage() {
  return (
    <div className="space-y-5 font-sans">
      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        <div>
          <nav className="flex items-center gap-1.5 text-[13px] text-[#64748B] mb-1 font-medium font-sans">
            <Link href="/admin/dashboard" className="hover:text-[#1769E8] hover:underline">
              Home
            </Link>
            <ChevronRight className="w-3.5 h-3.5 text-[#94A3B8]" />
            <span className="text-[#071A4D] font-semibold">Roles & Permissions</span>
          </nav>

          <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
            Role-Based Access Control (RBAC)
          </h1>
          <p className="text-[15px] text-[#64748B] mt-1 font-normal font-sans">
            Manage institutional user roles, permission policies, and security tiers.
          </p>
        </div>

        <button
          onClick={() => toast.info("Create custom role modal...")}
          className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-[#1769E8] hover:bg-[#1257C7] rounded-lg shadow-sm transition-colors cursor-pointer"
        >
          <span>+ Create Role</span>
        </button>
      </div>

      <div className="rounded-xl bg-white border border-[#E5EAF0] shadow-2xs overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead>
              <tr className="bg-[#F8FAFC] border-b border-[#E5EAF0] text-[#64748B] uppercase tracking-wider font-bold text-[11px]">
                <th className="py-3 px-3">Role Name</th>
                <th className="py-3 px-3">Role Description</th>
                <th className="py-3 px-3 text-center">Active Users</th>
                <th className="py-3 px-3 text-center">Permissions</th>
                <th className="py-3 px-3 text-center">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#E5EAF0] text-[#334155]">
              {roles.map((r) => (
                <tr key={r.role} className="hover:bg-[#F8FAFC] transition-colors">
                  <td className="py-3.5 px-3 font-semibold text-[#071A4D]">{r.role}</td>
                  <td className="py-3.5 px-3 text-[#64748B]">{r.description}</td>
                  <td className="py-3.5 px-3 text-center font-bold text-[#071A4D]">{r.assignedUsers}</td>
                  <td className="py-3.5 px-3 text-center font-mono text-[#1769E8]">{r.permissionsCount} Policies</td>
                  <td className="py-3.5 px-3 text-center">
                    <Link
                      href="/admin/roles/permissions"
                      className="px-2.5 py-1 text-[11px] font-semibold text-[#1769E8] hover:bg-blue-50 border border-blue-200 rounded-md transition-colors cursor-pointer inline-block"
                    >
                      Configure Permissions
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}