import { useMemo, useState } from 'react';
import Link from 'next/link';
import { useQuery } from '@tanstack/react-query';
import {
  ColumnDef,
  ExpandedState,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  PaginationState,
  SortingState,
  useReactTable,
} from '@tanstack/react-table';
import {
  Plus,
  Search,
  Settings2,
  SquareMinus,
  SquarePlus,
  X,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { apiClient } from '@/lib/api';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardFooter,
  CardHeader,
  CardHeading,
  CardTable,
  CardToolbar,
} from '@/components/ui/card';
import { DataGrid, useDataGrid } from '@/components/ui/data-grid';
import { DataGridColumnHeader } from '@/components/ui/data-grid-column-header';
import { DataGridColumnVisibility } from '@/components/ui/data-grid-column-visibility';
import { DataGridPagination } from '@/components/ui/data-grid-pagination';
import { DataGridTable } from '@/components/ui/data-grid-table';
import { Input } from '@/components/ui/input';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';

interface PermitBackend {
  id: number;
  permit_number: string;
  service_type: string;
  permit_status: string;
  urgency_level: string;
  permit_end_date: string;
}

interface ProjectBackend {
  id: number;
  name: string;
  end_date: string;
  is_active: boolean;
  consultant_name: string;
  project_status: string;
  permits: PermitBackend[];
}

interface BackendPaginationLinks {
  first: string;
  last: string;
  prev: string | null;
  next: string | null;
}

interface BackendPaginationMeta {
  current_page: number;
  from: number;
  last_page: number;
  path: string;
  per_page: number;
  to: number;
  total: number;
}

interface BackendResponse<T> {
  success: boolean;
  data: T;
  links: BackendPaginationLinks;
  meta: BackendPaginationMeta;
  message: string;
}

// Sub-table component for work permits
function WorkPermitsSubTable({
  permits,
}: {
  permits: PermitBackend[];
  projectId: number;
}) {
  const { t } = useTranslation();
  const [sorting, setSorting] = useState<SortingState>([]);

  const columns = useMemo<ColumnDef<PermitBackend>[]>(
    () => [
      {
        accessorKey: 'permit_number',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.permits.columns.permit_number')}
            column={column}
          />
        ),
        cell: ({ row }) => {
          return (
            <span className="text-sm font-medium text-foreground">
              {row.original.permit_number}
            </span>
          );
        },
        enableSorting: true,
        size: 150,
      },
      {
        accessorKey: 'service_type',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.permits.columns.services_type')}
            column={column}
          />
        ),
        cell: (info) => (
          <span className="text-foreground font-normal">
            {info.getValue() as string}
          </span>
        ),
        enableSorting: true,
        size: 220,
      },
      {
        accessorKey: 'permit_status',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.permits.columns.status')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <Badge
            variant={
              row.original.permit_status === 'نشط' ||
              row.original.permit_status === 'Working'
                ? 'success'
                : 'outline'
            }
          >
            {row.original.permit_status}
          </Badge>
        ),
        enableSorting: true,
        size: 140,
      },

      {
        accessorKey: 'urgency_level',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.permits.columns.urgency')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <Badge
            variant={
              row.original.urgency_level === 'Emergency' ||
              row.original.urgency_level === 'طارئ'
                ? 'destructive'
                : 'warning'
            }
          >
            {row.original.urgency_level}
          </Badge>
        ),
        enableSorting: true,
        size: 140,
      },
      {
        accessorKey: 'permit_end_date',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.permits.columns.end_date')}
            column={column}
          />
        ),
        cell: (info) => (
          <span className="text-foreground font-normal">
            {info.getValue() as string}
          </span>
        ),
        enableSorting: true,
        size: 140,
      },
    ],
    [t],
  );

  const table = useReactTable({
    data: permits,
    columns,
    state: {
      sorting,
    },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getRowId: (row: PermitBackend) => row.id.toString(),
  });

  return (
    <div className="bg-muted/30 p-4">
      <DataGrid
        table={table}
        recordCount={permits.length}
        tableLayout={{
          cellBorder: true,
          rowBorder: true,
          headerBackground: true,
          headerBorder: true,
        }}
      >
        <div className="w-full space-y-2.5">
          <div className="bg-card rounded-lg border border-muted-foreground/20">
            <ScrollArea>
              <DataGridTable />
              <ScrollBar orientation="horizontal" />
            </ScrollArea>
          </div>
        </div>
      </DataGrid>
    </div>
  );
}

export default function ProjectsListTable() {
  const { t } = useTranslation();

  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [sorting, setSorting] = useState<SortingState>([]);
  const [expandedRows, setExpandedRows] = useState<ExpandedState>({});
  const [columnOrder, setColumnOrder] = useState<string[]>([
    'expand',
    'name',
    'consultant_name',
    'project_status',
    'end_date',
    'actions',
  ]);
  const [searchQuery, setSearchQuery] = useState('');

  const { data: projectsResponse, isLoading } = useQuery({
    queryKey: [
      'projects',
      pagination.pageIndex,
      pagination.pageSize,
      searchQuery,
    ],
    queryFn: async () => {
      const response = await apiClient.get<BackendResponse<ProjectBackend[]>>(
        '/contractor/projects',
        {
          requireAuth: true,
          params: {
            page: pagination.pageIndex + 1,
            per_page: pagination.pageSize,
            search: searchQuery || undefined,
          },
        },
      );
      return response.data;
    },
  });

  const projectsData = projectsResponse?.data || [];
  const totalCount = projectsResponse?.meta?.total || 0;
  const pageCount = projectsResponse?.meta?.last_page || 0;

  const columns = useMemo<ColumnDef<ProjectBackend>[]>(
    () => [
      {
        id: 'expand',
        header: () => null,
        cell: ({ row }) =>
          row.getCanExpand() ? (
            <Button
              onClick={row.getToggleExpandedHandler()}
              mode="icon"
              size="sm"
              variant="ghost"
            >
              {row.getIsExpanded() ? <SquareMinus /> : <SquarePlus />}
            </Button>
          ) : null,
        size: 50,
        enableResizing: false,
        meta: {
          expandedContent: (row: ProjectBackend) => (
            <WorkPermitsSubTable permits={row.permits} projectId={row.id} />
          ),
        },
      },

      // Project Name
      {
        accessorKey: 'name',
        id: 'name',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.columns.project_name')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="font-medium text-foreground">
            {row.original.name}
          </span>
        ),
        enableSorting: true,
        size: 260,
        meta: {
          headerTitle: t('projectsTable.columns.project_name'),
        },
      },

      // Consultant Name
      {
        accessorKey: 'consultant_name',
        id: 'consultant_name',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.columns.consultant_name')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <div className="flex items-center gap-3">
            <span className="font-normal text-foreground">
              {row.original.consultant_name}
            </span>
          </div>
        ),
        enableSorting: true,
        size: 220,
        meta: {
          headerTitle: t('projectsTable.columns.consultant_name'),
        },
      },

      // Status
      {
        accessorKey: 'project_status',
        id: 'project_status',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.columns.status')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <Badge
            variant={
              row.original.project_status === 'قيد التنفيذ' ||
              row.original.project_status === 'Working'
                ? 'success'
                : 'outline'
            }
          >
            {row.original.project_status}
          </Badge>
        ),
        enableSorting: true,
        size: 140,
        meta: {
          headerTitle: t('projectsTable.columns.status'),
        },
      },

      // End Date
      {
        accessorKey: 'end_date',
        id: 'end_date',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('projectsTable.columns.end_date')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-foreground font-normal">
            {row.original.end_date}
          </span>
        ),
        enableSorting: true,
        size: 140,
        meta: {
          headerTitle: t('projectsTable.columns.end_date'),
        },
      },

      // Actions
      {
        id: 'actions',
        header: () => null,
        cell: ({ row }) => (
          <Link
            href={`/projects/new-work-permit?projectId=${row.original.id}`}
            className="flex justify-center items-center"
          >
            <Button variant="outline" size="sm">
              <Plus />
              {t('projectsTable.buttons.add_work_permit')}
            </Button>
          </Link>
        ),
        size: 200,
        enableResizing: false,
        meta: {
          headerTitle: t('projectsTable.buttons.add_work_permit'),
        },
      },
    ],
    [t],
  );

  const table = useReactTable({
    columns,
    data: projectsData,
    pageCount: pageCount,
    manualPagination: true,
    getRowId: (row: ProjectBackend) => row.id.toString(),
    getRowCanExpand: (row) =>
      Boolean(row.original.permits && row.original.permits.length > 0),
    state: {
      pagination,
      sorting,
      expanded: expandedRows,
      columnOrder,
    },
    columnResizeMode: 'onChange',
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    onExpandedChange: setExpandedRows,
    onColumnOrderChange: setColumnOrder,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  const Toolbar = () => {
    const { table } = useDataGrid();

    return (
      <CardToolbar>
        <DataGridColumnVisibility
          table={table}
          trigger={
            <Button variant="outline">
              <Settings2 /> {t('projectsTable.buttons.table_columns')}
            </Button>
          }
        />
      </CardToolbar>
    );
  };

  return (
    <DataGrid
      emptyMessage={
        isLoading ? t('projectsTable.loading') : t('projectsTable.empty')
      }
      table={table}
      recordCount={totalCount}
      tableLayout={{
        columnsPinnable: true,
        columnsMovable: true,
        columnsVisibility: true,
        cellBorder: true,
      }}
    >
      <Card>
        <CardHeader>
          <CardHeading>
            <div className="flex items-center gap-2.5">
              <div className="relative">
                <Search className="size-4 text-muted-foreground absolute start-3 top-1/2 -translate-y-1/2" />
                <Input
                  placeholder={t('projectsTable.search_placeholder')}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="ps-9 w-60"
                />
                {searchQuery.length > 0 && (
                  <Button
                    mode="icon"
                    variant="ghost"
                    className="absolute end-1.5 top-1/2 -translate-y-1/2 h-6 w-6"
                    onClick={() => setSearchQuery('')}
                  >
                    <X />
                  </Button>
                )}
              </div>
            </div>
          </CardHeading>
          <Toolbar />
        </CardHeader>
        <CardTable>
          <ScrollArea>
            <DataGridTable />
            <ScrollBar orientation="horizontal" />
          </ScrollArea>
        </CardTable>
        <CardFooter>
          <DataGridPagination />
        </CardFooter>
      </Card>
    </DataGrid>
  );
}