'use client';

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import { Key, Trash2, Search, ChevronLeft, ChevronRight } from 'lucide-react';
import { toast } from 'sonner';

import { authTokensApi, type AuthToken, type AuthTokenListParams } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';

export default function AuthTokensPage() {
  const queryClient = useQueryClient();
  const [params, setParams] = useState<AuthTokenListParams>({
    page: 1,
    per_page: 20,
  });
  const [search, setSearch] = useState('');
  const [selectedRows, setSelectedRows] = useState<number[]>([]);

  const { data, isLoading, error } = useQuery({
    queryKey: ['auth-tokens', params],
    queryFn: () => authTokensApi.list(params),
  });

  const revokeMutation = useMutation({
    mutationFn: (userId: number) => authTokensApi.revoke(userId),
    onSuccess: () => {
      toast.success('Token revoked successfully');
      queryClient.invalidateQueries({ queryKey: ['auth-tokens'] });
    },
    onError: () => {
      toast.error('Failed to revoke token');
    },
  });

  const bulkRevokeMutation = useMutation({
    mutationFn: (userIds: number[]) => authTokensApi.bulkRevoke(userIds),
    onSuccess: () => {
      toast.success('Tokens revoked successfully');
      queryClient.invalidateQueries({ queryKey: ['auth-tokens'] });
      setSelectedRows([]);
    },
    onError: () => {
      toast.error('Failed to revoke tokens');
    },
  });

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setParams({ ...params, search, page: 1 });
  };

  const handleSelectAll = (checked: boolean) => {
    if (checked && data?.data) {
      setSelectedRows(data.data.map((t) => t.user_id));
    } else {
      setSelectedRows([]);
    }
  };

  const handleSelectRow = (userId: number, checked: boolean) => {
    if (checked) {
      setSelectedRows([...selectedRows, userId]);
    } else {
      setSelectedRows(selectedRows.filter((id) => id !== userId));
    }
  };

  const totalPages = data ? Math.ceil(data.total / (params.per_page || 20)) : 0;

  if (error) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-red-500">Failed to load auth tokens</div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Auth Tokens</h1>
          <p className="text-muted-foreground">
            Manage user authentication tokens
          </p>
        </div>
      </div>

      {/* Search and Bulk Actions */}
      <div className="flex items-center justify-between gap-4">
        <form onSubmit={handleSearch} className="flex gap-2 flex-1 max-w-md">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Search by username, email, or key..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
            />
          </div>
          <Button type="submit" variant="secondary">
            Search
          </Button>
        </form>

        {selectedRows.length > 0 && (
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="destructive">
                <Trash2 className="mr-2 h-4 w-4" />
                Revoke Selected ({selectedRows.length})
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Revoke Selected Tokens?</AlertDialogTitle>
                <AlertDialogDescription>
                  This will revoke {selectedRows.length} token(s). Users will need to log in again.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => bulkRevokeMutation.mutate(selectedRows)}
                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                >
                  Revoke
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        )}
      </div>

      {/* Table */}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">
                <Checkbox
                  checked={
                    data?.data &&
                    data.data.length > 0 &&
                    selectedRows.length === data.data.length
                  }
                  onCheckedChange={handleSelectAll}
                />
              </TableHead>
              <TableHead>ID</TableHead>
              <TableHead>User</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Token</TableHead>
              <TableHead>Created</TableHead>
              <TableHead className="w-24">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8">
                  Loading...
                </TableCell>
              </TableRow>
            ) : data?.data?.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8">
                  No auth tokens found
                </TableCell>
              </TableRow>
            ) : (
              data?.data?.map((token) => (
                <TableRow key={token.user_id}>
                  <TableCell>
                    <Checkbox
                      checked={selectedRows.includes(token.user_id)}
                      onCheckedChange={(checked) =>
                        handleSelectRow(token.user_id, checked as boolean)
                      }
                    />
                  </TableCell>
                  <TableCell className="font-mono text-sm text-muted-foreground">{token.user_id}</TableCell>
                  <TableCell>
                    <Link
                      href={`/users/${token.user_id}`}
                      className="font-medium text-blue-600 hover:underline"
                    >
                      {token.username}
                    </Link>
                  </TableCell>
                  <TableCell>{token.email}</TableCell>
                  <TableCell>
                    <code className="text-xs bg-muted px-2 py-1 rounded">
                      {token.key.substring(0, 8)}...{token.key.substring(token.key.length - 4)}
                    </code>
                  </TableCell>
                  <TableCell>
                    {new Date(token.created).toLocaleDateString()}
                  </TableCell>
                  <TableCell>
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="text-red-600 hover:text-red-700 hover:bg-red-50"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>Revoke Token?</AlertDialogTitle>
                          <AlertDialogDescription>
                            This will revoke the token for {token.username}. They will need to log in again.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => revokeMutation.mutate(token.user_id)}
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                          >
                            Revoke
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      {data && totalPages > 1 && (
        <div className="flex items-center justify-between">
          <div className="text-sm text-muted-foreground">
            Showing {((params.page || 1) - 1) * (params.per_page || 20) + 1} to{' '}
            {Math.min(
              (params.page || 1) * (params.per_page || 20),
              data.total
            )}{' '}
            of {data.total} tokens
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              disabled={(params.page || 1) <= 1}
              onClick={() =>
                setParams({ ...params, page: (params.page || 1) - 1 })
              }
            >
              <ChevronLeft className="h-4 w-4" />
              Previous
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={(params.page || 1) >= totalPages}
              onClick={() =>
                setParams({ ...params, page: (params.page || 1) + 1 })
              }
            >
              Next
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}
