'use client';

import { Checkbox } from "rizzui";
import {
  PiPencilSimpleLineBold,
  PiShield,
  PiShieldBold,
  PiTrashBold,
} from "react-icons/pi";

interface Permission {
  module: string;
  add: boolean;
  edit: boolean;
  delete: boolean;
  view: boolean;
}

interface Role {
  id: number;
  role_name: string;
  description: string;
  permissions: Permission[];
  usersCount: number;
}

interface PermissionsTableProps {
  permissions: Role[];
  onEdit?: (role: Role) => void;
  onDelete?: (role: Role) => void;
}

export default function PermissionsTable({
  permissions,
  onEdit,
  onDelete
}: PermissionsTableProps) {
  return (
    <div className="space-y-6">

      {permissions.map((role) => (
        <div key={role.id} className="rounded-lg bg-white p-6 shadow-sm border">

          {/* Header */}
          <div className="mb-6 flex items-start justify-between">
            <div className="flex items-start gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary">
                <PiShieldBold className="text-white"/>
              </div>

              <div>
                <h3 className="text-base font-semibold text-gray-900">
                  {role.role_name}
                </h3>

                <span className="text-sm text-gray-500">
                  {role.permissions.length} modules • {role.usersCount} users
                </span>
              </div>
            </div>

            <div className="flex items-center gap-4">
              <button onClick={() => onEdit?.(role)}>
                <PiPencilSimpleLineBold className="h-5 w-5 text-gray-500" />
              </button>

              <button onClick={() => onDelete?.(role)}>
                <PiTrashBold className="h-5 w-5 text-red-500" />
              </button>
            </div>
          </div>

          {/* Table */}
          <div className="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="border-b border-gray-200">
                  <th className="pb-3 text-left text-sm font-medium text-gray-500">
                    Module
                  </th>
                  <th className="pb-3 text-center text-sm font-medium text-gray-500">
                    Add
                  </th>
                  <th className="pb-3 text-center text-sm font-medium text-gray-500">
                    Edit
                  </th>
                  <th className="pb-3 text-center text-sm font-medium text-gray-500">
                    Delete
                  </th>
                  <th className="pb-3 text-center text-sm font-medium text-gray-500">
                    View
                  </th>
                </tr>
              </thead>

              <tbody>
                {role.permissions.map((item) => (
                  <tr key={item.module} className="border-b border-gray-100">
                    <td className="py-4 text-sm text-gray-700">
                      {item.module}
                    </td>

                    <td className="text-center">
                      <Checkbox size="sm"  inputClassName="checked:!bg-primary checked:!border-primary" checked={item.add} disabled />
                    </td>

                    <td className="text-center">
                      <Checkbox size="sm"  inputClassName="checked:!bg-primary checked:!border-primary" checked={item.edit} disabled />
                    </td>

                    <td className="text-center">
                      <Checkbox size="sm"  inputClassName="checked:!bg-primary checked:!border-primary" checked={item.delete} disabled />
                    </td>

                    <td className="text-center">
                      <Checkbox size="sm"  inputClassName="checked:!bg-primary checked:!border-primary" checked={item.view} disabled />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

        </div>
      ))}
    </div>
  );
}