lcbp3/frontend/app/(admin)/admin/access-control/organizations/page.tsx

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { DataTable } from '@/components/common/data-table';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { useOrganizations, useDeleteOrganization } from '@/hooks/use-master-data';
import { ColumnDef } from '@tanstack/react-table';
import { Pencil, Trash, Plus, Search, MoreHorizontal } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Organization } from '@/types/organization';
import { OrganizationDialog } from '@/components/admin/organization-dialog';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Skeleton } from '@/components/ui/skeleton';

// Organization role types for display
const ORGANIZATION_ROLES = [
  { value: '1', label: 'Owner' },
  { value: '2', label: 'Designer' },
  { value: '3', label: 'Consultant' },
  { value: '4', label: 'Contractor' },
  { value: '5', label: 'Third Party' },
] as const;

export default function OrganizationsPage() {
  const [search, setSearch] = useState('');
  const { data: organizations, isLoading } = useOrganizations({
    search: search || undefined,
  });

  const deleteOrg = useDeleteOrganization();

  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedOrganization, setSelectedOrganization] = useState<Organization | null>(null);

  // Stats for Delete Dialog
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [orgToDelete, setOrgToDelete] = useState<Organization | null>(null);

  const handleDeleteClick = (org: Organization) => {
    setOrgToDelete(org);
    setDeleteDialogOpen(true);
  };

  const confirmDelete = () => {
    if (orgToDelete) {
      deleteOrg.mutate(orgToDelete.uuid, {
        onSuccess: () => {
          setDeleteDialogOpen(false);
          setOrgToDelete(null);
        },
      });
    }
  };

  const columns: ColumnDef<Organization>[] = [
    {
      accessorKey: 'organizationCode',
      header: 'Code',
      cell: ({ row }) => <span className="font-medium">{row.original.organizationCode}</span>,
    },
    { accessorKey: 'organizationName', header: 'Name' },
    {
      accessorKey: 'roleId',
      header: 'Role',
      cell: ({ row }) => {
        const roleId = row.getValue('roleId') as number;
        const role = ORGANIZATION_ROLES.find((r) => r.value === roleId?.toString());
        return role ? role.label : '-';
      },
    },
    {
      accessorKey: 'isActive',
      header: 'Status',
      cell: ({ row }) => (
        <Badge variant={row.original.isActive ? 'default' : 'destructive'}>
          {row.original.isActive ? 'Active' : 'Inactive'}
        </Badge>
      ),
    },
    {
      accessorKey: 'createdAt',
      header: 'Created At',
      cell: ({ row }) => {
        if (!row.original.createdAt) return '-';
        return new Date(row.original.createdAt).toLocaleDateString('en-GB');
      },
    },
    {
      id: 'actions',
      header: 'Actions',
      cell: ({ row }) => {
        const org = row.original;
        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="h-8 w-8 p-0">
                <span className="sr-only">Open menu</span>
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem
                onClick={() => {
                  setSelectedOrganization(org);
                  setDialogOpen(true);
                }}
              >
                <Pencil className="mr-2 h-4 w-4" /> Edit
              </DropdownMenuItem>
              <DropdownMenuItem className="text-red-600 focus:text-red-600" onClick={() => handleDeleteClick(org)}>
                <Trash className="mr-2 h-4 w-4" /> Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
    },
  ];

  return (
    <div className="space-y-6 p-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold">Organizations</h1>
          <p className="text-muted-foreground mt-1">Manage project organizations system-wide</p>
        </div>
        <Button
          onClick={() => {
            setSelectedOrganization(null);
            setDialogOpen(true);
          }}
        >
          <Plus className="mr-2 h-4 w-4" /> Add Organization
        </Button>
      </div>

      <div className="flex items-center space-x-2 bg-muted/30 p-4 rounded-lg">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search organizations..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="pl-8 bg-background"
          />
        </div>
      </div>

      {isLoading ? (
        <div className="space-y-2">
          {[1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="flex items-center space-x-4">
              <Skeleton className="h-12 w-full" />
            </div>
          ))}
        </div>
      ) : (
        <DataTable columns={columns} data={organizations || []} />
      )}

      <OrganizationDialog open={dialogOpen} onOpenChange={setDialogOpen} organization={selectedOrganization} />

      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the organization
              <span className="font-semibold text-foreground"> {orgToDelete?.organizationName} </span>
              and remove it from the system.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
              {deleteOrg.isPending ? 'Deleting...' : 'Delete Organization'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}