'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import type { PermissionSection } from '@/network/apis/dashboard/permissions/type';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

type TableCellData = {
  value: string | number | null;
  color?: 'warning' | 'success';
};

const PermissionsList = ({
  permissions,
}: {
  permissions: PermissionSection[] | null;
}) => {
  const router = useRouter();

  const tableHead = [
    { column: 'Section (EN)' },
    { column: 'Section (AR)' },
    { column: 'Permissions Count' },
    { column: 'Permissions' },
  ];

  const [tableData, setTableData] = useState<TableCellData[][]>([]);

  useEffect(() => {
    if (!permissions?.length) {
      setTableData([]);
      return;
    }

    const data = permissions.map((section) => {
      const permissionNames =
        section.permissions
          ?.map((p) => p.name_en)
          .join(', ') || '-';

      return [
        { value: section.section.en ?? '-' },
        { value: section.section.ar ?? '-' },
        { value: section.permissions?.length ?? 0 },
        { value: permissionNames },
      ] as TableCellData[];
    });

    setTableData(data);
  }, [permissions]);

  const renderRow = (row: TableCellData[], index: number) => {
    return (
      <TableRow key={index} className="hover:bg-accent/80">
        {row.map((cell, i) =>
          cell.color && cell.value ? (
            <TableCell key={i} className="text-start">
              <Badge variant={cell.color} appearance="outline">
                {cell.value}
              </Badge>
            </TableCell>
          ) : (
            <TableCell key={i} className="text-sm text-foreground">
              {cell.value ?? '-'}
            </TableCell>
          ),
        )}
      </TableRow>
    );
  };

  return (
    <Card>
      <CardHeader className="flex-row items-center justify-between">
        <CardTitle>Permissions</CardTitle>
        <Button
          variant="outline"
          onClick={() => router.push('/permissions/add')}
        >
          Create Permission
        </Button>
      </CardHeader>

      <CardContent className="kt-scrollable-x-auto p-0">
        <Table>
          <TableHeader>
            <TableRow className="bg-accent/60">
              {tableHead.map((h) => (
                <TableHead key={h.column} className="min-w-50 h-10">
                  {h.column}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>

          <TableBody>
            {tableData.length > 0 ? (
              tableData.map((row, idx) => renderRow(row, idx))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={tableHead.length}
                  className="text-center py-8 text-muted-foreground"
                >
                  No permissions found
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
};

export { PermissionsList };