import { MoreHorizontal, RotateCcw, Sliders, Trash2, X } from 'lucide-react';

import { useCallback, useMemo, useState } from 'react';

import { Head, Link, router } from '@inertiajs/react';

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import { SortHeader } from '@/Components/admin/SortHeader';
import PageHeader from '@/Components/layout/PageHeader';
import { Badge } from '@/Components/ui/badge';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/Components/ui/breadcrumb';
import { Button } from '@/Components/ui/button';
import { Checkbox } from '@/Components/ui/checkbox';
import { ConfirmDialog } from '@/Components/ui/confirm-dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/Components/ui/dropdown-menu';
import { ExportButton } from '@/Components/ui/export-button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import { useAdminFilters } from '@/hooks/useAdminFilters';
import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts';
import { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatRelativeTime } from '@/lib/format';
import type { AdminLimitPoliciesIndexProps } from '@/types/admin';

export default function LimitPoliciesIndex({
  policies,
  limit_keys,
  filters,
}: AdminLimitPoliciesIndexProps) {
  const { updateFilter, handleSort, handlePage, clearFilters } = useAdminFilters({
    route: '/admin/limit-policies',
    filters,
  });
  const isNavigating = useNavigationState();

  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
  const [bulkConfirmOpen, setBulkConfirmOpen] = useState(false);
  const [keyPurgeConfirm, setKeyPurgeConfirm] = useState<string | null>(null);
  const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);

  const currentPage = policies.current_page;
  const lastPage = policies.last_page;
  useAdminKeyboardShortcuts({
    onNextPage: currentPage < lastPage ? () => handlePage(currentPage + 1) : undefined,
    onPrevPage: currentPage > 1 ? () => handlePage(currentPage - 1) : undefined,
  });

  const selectableIds = useMemo(() => new Set(policies.data.map((p) => p.id)), [policies.data]);
  const allSelectableSelected =
    selectableIds.size > 0 && [...selectableIds].every((id) => selectedIds.has(id));

  const togglePolicy = useCallback((id: number) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }, []);

  const toggleAll = useCallback(() => {
    if (allSelectableSelected) {
      setSelectedIds(new Set());
    } else {
      setSelectedIds(new Set(selectableIds));
    }
  }, [allSelectableSelected, selectableIds]);

  const executeBulkDelete = useCallback((): Promise<void> => {
    return new Promise((resolve, reject) => {
      const ids = Array.from(selectedIds);
      if (ids.length === 0) {
        resolve();
        return;
      }
      router.delete('/admin/limit-policies/bulk', {
        data: { ids },
        preserveState: true,
        onSuccess: () => {
          setSelectedIds(new Set());
          setBulkConfirmOpen(false);
          resolve();
        },
        onError: () => reject(),
      });
    });
  }, [selectedIds]);

  const executeDeleteSingle = useCallback((id: number): Promise<void> => {
    return new Promise((resolve, reject) => {
      router.delete('/admin/limit-policies/bulk', {
        data: { ids: [id] },
        preserveState: true,
        onSuccess: () => {
          setDeleteConfirm(null);
          resolve();
        },
        onError: () => reject(),
      });
    });
  }, []);

  const executeKeyPurge = useCallback((key: string): Promise<void> => {
    return new Promise((resolve, reject) => {
      router.delete(`/admin/limit-policies/key/${key}`, {
        preserveState: true,
        onSuccess: () => {
          setKeyPurgeConfirm(null);
          resolve();
        },
        onError: () => reject(),
      });
    });
  }, []);

  const deletingPolicy =
    deleteConfirm !== null ? policies.data.find((p) => p.id === deleteConfirm) : null;

  return (
    <AdminLayout>
      <Head title="Admin - Limit Policies" />
      <div className="container pt-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Limit Policies</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <PageHeader
        title="Limit Policies"
        subtitle="Manage per-user limit overrides"
        actions={<ExportButton href={route('admin.limit-policies.export')} params={filters.key ? { key: filters.key } : {}} />}
      />

      <div className="container py-8 space-y-4">
        {/* Filters */}
        <fieldset className="flex flex-col sm:flex-row gap-3">
          <legend className="sr-only">Limit Policy Filters</legend>
          <Select
            value={filters.key ?? 'all'}
            onValueChange={(value) => updateFilter({ key: value === 'all' ? undefined : value })}
          >
            <SelectTrigger className="w-full sm:w-[280px]" aria-label="Filter by limit key">
              <SelectValue placeholder="All Keys" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Keys</SelectItem>
              {limit_keys.map((key) => (
                <SelectItem key={key} value={key}>
                  {key}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {filters.key && (
            <Button variant="ghost" size="sm" onClick={clearFilters}>
              <X className="mr-1 h-4 w-4" />
              Clear filters
            </Button>
          )}
        </fieldset>

        {/* Bulk Action Bar */}
        {selectedIds.size > 0 && (
          <div
            className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2"
            role="status"
            aria-live="polite"
          >
            <span className="text-sm font-medium">{selectedIds.size} {selectedIds.size === 1 ? 'override' : 'overrides'} selected</span>
            <Button variant="destructive" size="sm" onClick={() => setBulkConfirmOpen(true)}>
              <Trash2 className="mr-1 h-4 w-4" />
              Delete Selected
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setSelectedIds(new Set())}
              aria-label="Clear selection"
            >
              <X className="mr-1 h-4 w-4" />
              Clear
            </Button>
          </div>
        )}

        <AdminDataTable
          isEmpty={policies.data.length === 0}
          isNavigating={isNavigating}
          pagination={policies}
          onPage={handlePage}
          paginationLabel="limit overrides"
          emptyIcon={Sliders}
          emptyTitle="No limit overrides found"
          emptyDescription={
            filters.key
              ? 'No overrides match the selected key. Try a different filter.'
              : 'All users are using default limits.'
          }
          emptyAction={
            filters.key ? (
              <Button variant="outline" size="sm" onClick={clearFilters}>
                Clear filters
              </Button>
            ) : undefined
          }
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[40px]">
                  <Checkbox
                    checked={allSelectableSelected && selectableIds.size > 0}
                    onCheckedChange={toggleAll}
                    aria-label="Select all overrides"
                    disabled={selectableIds.size === 0}
                  />
                </TableHead>
                <TableHead>User</TableHead>
                <SortHeader
                  column="key"
                  label="Key"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <SortHeader
                  column="value"
                  label="Override"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <TableHead>Default</TableHead>
                <SortHeader
                  column="created_at"
                  label="Changed At"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <TableHead className="w-[50px]" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {policies.data.map((policy) => (
                <TableRow key={policy.id} data-selected={selectedIds.has(policy.id) || undefined}>
                  <TableCell>
                    <Checkbox
                      checked={selectedIds.has(policy.id)}
                      onCheckedChange={() => togglePolicy(policy.id)}
                      aria-label={`Select override for ${policy.user_name}`}
                    />
                  </TableCell>
                  <TableCell>
                    <Link
                      href={`/admin/users/${policy.user_id}`}
                      className="font-medium hover:underline"
                    >
                      {policy.user_name}
                    </Link>
                    <div
                      className="text-sm text-muted-foreground truncate max-w-48"
                      title={policy.user_email}
                    >
                      {policy.user_email}
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">{policy.key}</Badge>
                  </TableCell>
                  <TableCell>
                    <span className={policy.value !== policy.config_default ? 'font-semibold' : ''}>
                      {policy.value}
                    </span>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {policy.config_default}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(policy.created_at)}
                  </TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8"
                          aria-label="Override actions"
                        >
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem
                          className="text-destructive focus:text-destructive"
                          onClick={() => setDeleteConfirm(policy.id)}
                        >
                          <Trash2 className="mr-2 h-4 w-4" />
                          Delete Override
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          className="text-destructive focus:text-destructive"
                          onClick={() => setKeyPurgeConfirm(policy.key)}
                        >
                          <RotateCcw className="mr-2 h-4 w-4" />
                          Reset Key for All Users
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </div>

      {/* Bulk Delete Confirm */}
      <ConfirmDialog
        open={bulkConfirmOpen}
        onOpenChange={setBulkConfirmOpen}
        onConfirm={executeBulkDelete}
        title="Delete Selected Overrides"
        description={`Are you sure you want to delete ${selectedIds.size} limit override(s)? Affected users will revert to default limits.`}
        variant="destructive"
        confirmLabel="Delete"
      />

      {/* Single Delete Confirm */}
      <ConfirmDialog
        open={deleteConfirm !== null}
        onOpenChange={(open) => !open && setDeleteConfirm(null)}
        onConfirm={() =>
          deleteConfirm !== null ? executeDeleteSingle(deleteConfirm) : Promise.resolve()
        }
        title="Delete Override"
        description={
          deletingPolicy
            ? `Remove the ${deletingPolicy.key} override (${deletingPolicy.value}) for ${deletingPolicy.user_name}? They will revert to the default (${deletingPolicy.config_default}).`
            : ''
        }
        variant="destructive"
        confirmLabel="Delete"
      />

      {/* Key Purge Confirm */}
      <ConfirmDialog
        open={keyPurgeConfirm !== null}
        onOpenChange={(open) => !open && setKeyPurgeConfirm(null)}
        onConfirm={() =>
          keyPurgeConfirm !== null ? executeKeyPurge(keyPurgeConfirm) : Promise.resolve()
        }
        title="Reset Key for All Users"
        description={
          keyPurgeConfirm
            ? `This will remove ALL user overrides for "${keyPurgeConfirm}". All affected users will revert to the default limit. This cannot be undone.`
            : ''
        }
        variant="destructive"
        confirmLabel="Reset All"
      />
    </AdminLayout>
  );
}