'use client';

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

import { passwordResetCodesApi, type PasswordResetCode, type PasswordResetCodeListParams } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
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 PasswordResetCodesPage() {
  const queryClient = useQueryClient();
  const [params, setParams] = useState<PasswordResetCodeListParams>({
    page: 1,
    per_page: 20,
  });
  const [search, setSearch] = useState('');
  const [selectedRows, setSelectedRows] = useState<number[]>([]);

  const { data, isLoading, error } = useQuery({
    queryKey: ['password-reset-codes', params],
    queryFn: () => passwordResetCodesApi.list(params),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => passwordResetCodesApi.delete(id),
    onSuccess: () => {
      toast.success('Password reset code deleted successfully');
      queryClient.invalidateQueries({ queryKey: ['password-reset-codes'] });
    },
    onError: () => {
      toast.error('Failed to delete password reset code');
    },
  });

  const bulkDeleteMutation = useMutation({
    mutationFn: (ids: number[]) => passwordResetCodesApi.bulkDelete(ids),
    onSuccess: () => {
      toast.success('Password reset codes deleted successfully');
      queryClient.invalidateQueries({ queryKey: ['password-reset-codes'] });
      setSelectedRows([]);
    },
    onError: () => {
      toast.error('Failed to delete password reset codes');
    },
  });

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

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

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

  const isExpired = (expiresAt: string) => {
    return new Date(expiresAt) < new Date();
  };

  const getStatusBadge = (code: PasswordResetCode) => {
    if (code.used) {
      return (
        <Badge variant="secondary" className="gap-1">
          <CheckCircle className="h-3 w-3" />
          Used
        </Badge>
      );
    }
    if (code.attempts >= code.max_attempts) {
      return (
        <Badge variant="destructive" className="gap-1">
          <AlertTriangle className="h-3 w-3" />
          Max Attempts
        </Badge>
      );
    }
    if (isExpired(code.expires_at)) {
      return (
        <Badge variant="destructive" className="gap-1">
          <XCircle className="h-3 w-3" />
          Expired
        </Badge>
      );
    }
    return (
      <Badge variant="default" className="gap-1">
        Active
      </Badge>
    );
  };

  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 password reset codes</div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Password Reset Codes</h1>
          <p className="text-muted-foreground">
            Manage password reset requests
          </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 token..."
              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" />
                Delete Selected ({selectedRows.length})
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete Selected Codes?</AlertDialogTitle>
                <AlertDialogDescription>
                  This will permanently delete {selectedRows.length} password reset code(s).
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => bulkDeleteMutation.mutate(selectedRows)}
                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                >
                  Delete
                </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>Status</TableHead>
              <TableHead>Attempts</TableHead>
              <TableHead>Expires</TableHead>
              <TableHead>Created</TableHead>
              <TableHead className="w-24">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={9} className="text-center py-8">
                  Loading...
                </TableCell>
              </TableRow>
            ) : data?.data?.length === 0 ? (
              <TableRow>
                <TableCell colSpan={9} className="text-center py-8">
                  No password reset codes found
                </TableCell>
              </TableRow>
            ) : (
              data?.data?.map((code) => (
                <TableRow key={code.id}>
                  <TableCell>
                    <Checkbox
                      checked={selectedRows.includes(code.id)}
                      onCheckedChange={(checked) =>
                        handleSelectRow(code.id, checked as boolean)
                      }
                    />
                  </TableCell>
                  <TableCell className="font-mono text-sm text-muted-foreground">{code.id}</TableCell>
                  <TableCell>
                    <Link
                      href={`/users/${code.user_id}`}
                      className="font-medium text-blue-600 hover:underline"
                    >
                      {code.username}
                    </Link>
                  </TableCell>
                  <TableCell>{code.email}</TableCell>
                  <TableCell>
                    <code className="text-xs bg-muted px-2 py-1 rounded">
                      {code.reset_token}
                    </code>
                  </TableCell>
                  <TableCell>{getStatusBadge(code)}</TableCell>
                  <TableCell>
                    <span className={code.attempts >= code.max_attempts ? 'text-red-600 font-medium' : ''}>
                      {code.attempts} / {code.max_attempts}
                    </span>
                  </TableCell>
                  <TableCell>
                    {new Date(code.expires_at).toLocaleString()}
                  </TableCell>
                  <TableCell>
                    {new Date(code.created_at).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>Delete Code?</AlertDialogTitle>
                          <AlertDialogDescription>
                            This will permanently delete the password reset code for {code.username}.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>Cancel</AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => deleteMutation.mutate(code.id)}
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                          >
                            Delete
                          </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} codes
          </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>
  );
}
