"use client";

import * as React from "react";
import { GitBranch, Edit2, Trash2, Shield, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { PipelineStageName } from "@/api/rtk/pipeline-stage-names-api";
import { Pipeline } from "@/api/rtk/pipelines-api";
import { Checkbox } from "@/components/ui/checkbox";

interface StageNamesTableProps {
  data: PipelineStageName[];
  pipelines: Pipeline[];
  isAdmin: boolean;
  canEditStageNames?: boolean;
  canManageStagePermissions?: (stageNameId: string) => boolean;
  onEdit: (row: PipelineStageName) => void;
  onDelete: (id: string) => void;
  onManagePermissions?: (stageNameId: string) => void;
  selectedStageNameId?: string | null;
  selectedIds: string[];
  onSelect: (id: string, checked: boolean) => void;
  onSelectAll: (checked: boolean) => void;
}

export function StageNamesTable({
  data,
  pipelines,
  isAdmin,
  canEditStageNames = false,
  canManageStagePermissions,
  onEdit,
  onDelete,
  onManagePermissions,
  selectedStageNameId,
  selectedIds,
  onSelect,
  onSelectAll,
}: StageNamesTableProps) {
  const allSelected = data.length > 0 && selectedIds.length === data.length;
  const isAnySelected = selectedIds.length > 0;
  return (
    <div className="flex-1 min-h-0 overflow-auto scrollbar-themed">
      <Table variant="transparent">
        <TableHeader>
          <TableRow className="bg-muted/40 border-b border-border hover:bg-muted/40">
            <TableHead className="w-[40px] pl-4">
              <Checkbox
                checked={allSelected}
                onCheckedChange={(checked) => onSelectAll(!!checked)}
                aria-label="Select all"
              />
            </TableHead>
            <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca']">
              Name
            </TableHead>
            <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] min-w-[140px]">
              Pipeline
            </TableHead>
            {/* {onManagePermissions && (
              <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca']">
                Permissions
              </TableHead>
            )} */}
            <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] hidden sm:table-cell">
              Created
            </TableHead>
            <TableHead className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] hidden sm:table-cell">
              Updated
            </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((row) => (
            <TableRow
              key={row.id}
              className={`border-b border-border/60 hover:bg-muted/20 transition-colors ${selectedStageNameId === row.id || selectedIds.includes(row.id) ? 'bg-accent/5' : ''
                }`}
            >
              <TableCell className="py-3 pl-4">
                <Checkbox
                  checked={selectedIds.includes(row.id)}
                  onCheckedChange={(checked) => onSelect(row.id, !!checked)}
                  aria-label={`Select ${row.name}`}
                />
              </TableCell>
              <TableCell className="py-3 text-[13px] font-semibold text-text">
                {row.name}
              </TableCell>
              <TableCell className="py-3">
                {row.pipelineId ? (
                  <div className="flex items-center gap-2 min-w-0">
                    <div className="h-6 w-6 rounded-md bg-accent/10 flex items-center justify-center text-accent shrink-0">
                      <GitBranch size={12} />
                    </div>
                    <span className="text-[13px] text-gray-800 truncate">
                      {pipelines.find((p) => p.id === row.pipelineId)?.name ?? row.pipelineId}
                    </span>
                  </div>
                ) : (
                  // <span className="text-[12px] text-gray-500 italic">Global (Any pipeline)</span>
                  null
                )}
              </TableCell>
              {/* {onManagePermissions && (isAdmin || canEditStageNames || (canManageStagePermissions && canManageStagePermissions(row.id))) && (
                <TableCell className="py-3">
                  <Button
                    variant={selectedStageNameId === row.id ? "default" : "ghost"}
                    size="sm"
                    className={`h-8 rounded-lg text-xs ${selectedStageNameId === row.id
                      ? "bg-accent text-white"
                      : "text-gray-500 hover:text-accent"
                      }`}
                  // onClick={() => onManagePermissions(row.id)}
                  >
                    <Users size={12} className="mr-1" />
                    {selectedStageNameId === row.id ? "Managing" : "Manage"}
                  </Button>
                </TableCell>
              )} */}
              <TableCell className="py-3 text-[11px] text-gray-500 font-mono hidden sm:table-cell">
                {row.createdAt ? new Date(row.createdAt).toLocaleDateString() : 'N/A'}
              </TableCell>
              <TableCell className="py-3 text-[11px] text-gray-500 font-mono hidden sm:table-cell">
                {row.updatedAt ? new Date(row.updatedAt).toLocaleDateString() : 'N/A'}
              </TableCell>
              <TableCell className="py-1 text-right pr-4">
                {(isAdmin || canEditStageNames || (canManageStagePermissions && canManageStagePermissions(row.id))) && (
                  <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(row)}
                    >
                      <Edit2 size={14} />
                    </Button>
                    {isAdmin && (
                      <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(row.id)}
                      >
                        <Trash2 size={14} />
                      </Button>
                    )}
                  </div>
                )}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}