"use client";

import * as React from "react";
import { Users, Shield, Edit2, Trash2, Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { RoleStagePermission } from "@/api/rtk/role-stage-permissions-api";
import { Checkbox } from "@/components/ui/checkbox";

interface StagePermissionsTableProps {
  data: RoleStagePermission[];
  isAdmin: boolean;
  onEdit?: (permission: RoleStagePermission) => void;
  onDelete?: (id: string) => void;
  onCreateNew?: () => void;
}

export function StagePermissionsTable({
  data,
  isAdmin,
  onEdit,
  onDelete,
  onCreateNew,
}: StagePermissionsTableProps) {
  return (
    <div className="flex-1 min-h-0 overflow-auto scrollbar-themed">
      <div className="flex items-center justify-between p-4 border-b border-border/60">
        <div className="flex items-center gap-2">
          <Shield className="h-5 w-5 text-accent" />
          <h3 className="text-sm font-semibold text-text">Role Permissions</h3>
          <Badge variant="secondary" className="text-xs">
            {data.length} roles
          </Badge>
        </div>
        {isAdmin && onCreateNew && (
          <Button
            variant="outline"
            size="sm"
            className="h-8 rounded-lg text-xs"
            onClick={onCreateNew}
          >
            <Plus size={12} className="mr-1" />
            Add Role
          </Button>
        )}
      </div>

      {data.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-8 text-center">
          <Users className="h-12 w-12 text-gray-300 mb-3" />
          <p className="text-sm text-gray-500 font-medium">No role permissions found</p>
          <p className="text-xs text-gray-400 mt-1">
            Add roles to manage access for this stage name
          </p>
          {isAdmin && onCreateNew && (
            <Button
              variant="outline"
              size="sm"
              className="mt-3 h-8 rounded-lg text-xs"
              onClick={onCreateNew}
            >
              <Plus size={12} className="mr-1" />
              Add First Role
            </Button>
          )}
        </div>
      ) : (
        <Table variant="transparent">
          <TableHeader>
            <TableRow className="bg-muted/40 border-b border-border hover:bg-muted/40">
              <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] pl-4">
                Role
              </TableHead>
              <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca']">
                View
              </TableHead>
              <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca']">
                Edit
              </TableHead>
              <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca']">
                Delete
              </TableHead>
              <TableHead className="w-[100px] text-right text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca']">
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.map((permission) => (
              <TableRow
                key={permission.id}
                className="border-b border-border/60 hover:bg-muted/20 transition-colors"
              >
                <TableCell className="py-3">
                  <div className="flex items-center gap-2">
                    <span className="text-[13px] font-medium text-text">
                      {permission.role.name}
                    </span>
                  </div>
                </TableCell>
                <TableCell className="py-3">
                  <div className="flex items-center justify-center">
                    <Checkbox
                      checked={permission.canView}
                      disabled={!isAdmin}
                      className="scale-90"
                    />
                  </div>
                </TableCell>
                <TableCell className="py-3">
                  <div className="flex items-center justify-center">
                    <Checkbox
                      checked={permission.canEdit}
                      disabled={!isAdmin}
                      className="scale-90"
                    />
                  </div>
                </TableCell>
                <TableCell className="py-3">
                  <div className="flex items-center justify-center">
                    <Checkbox
                      checked={permission.canDelete}
                      disabled={!isAdmin}
                      className="scale-90"
                    />
                  </div>
                </TableCell>
                <TableCell className="py-1 text-right pr-4">
                  {isAdmin && (
                    <div className="flex items-center justify-end gap-1">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 text-gray-500 hover:text-blue-600 rounded-lg"
                        onClick={() => onEdit?.(permission)}
                      >
                        <Edit2 size={14} />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg"
                        onClick={() => onDelete?.(permission.id)}
                      >
                        <Trash2 size={14} />
                      </Button>
                    </div>
                  )}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  );
}