"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { PageHeader } from "@/components/shared/page-header";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar } from "@/components/ui/avatar";
import { LoadingPage, LoadingSpinner } from "@/components/ui/loading";
import { usersApi, User } from "@/lib/api-client";
import { formatDate } from "@/lib/utils";
import { Check, X, ArrowLeft, Mail, Phone, Calendar } from "lucide-react";
import Link from "next/link";

export default function PendingApprovalsPage() {
  const queryClient = useQueryClient();
  const [page, setPage] = useState(1);
  const [processingIds, setProcessingIds] = useState<Set<string>>(new Set());

  const { data, isLoading } = useQuery({
    queryKey: ["users-pending", page],
    queryFn: async () => {
      const response = await usersApi.getPending({ page, limit: 20 });
      return response.data;
    },
  });

  const approveMutation = useMutation({
    mutationFn: (id: string) => usersApi.approve(id),
    onMutate: (id) => {
      setProcessingIds((prev) => new Set(prev).add(id));
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["users-pending"] });
      queryClient.invalidateQueries({ queryKey: ["dashboard-analytics"] });
    },
    onSettled: (_, __, id) => {
      setProcessingIds((prev) => {
        const next = new Set(prev);
        next.delete(id);
        return next;
      });
    },
  });

  const denyMutation = useMutation({
    mutationFn: (id: string) => usersApi.deny(id),
    onMutate: (id) => {
      setProcessingIds((prev) => new Set(prev).add(id));
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["users-pending"] });
      queryClient.invalidateQueries({ queryKey: ["dashboard-analytics"] });
    },
    onSettled: (_, __, id) => {
      setProcessingIds((prev) => {
        const next = new Set(prev);
        next.delete(id);
        return next;
      });
    },
  });

  if (isLoading) {
    return <LoadingPage />;
  }

  const pendingUsers = data?.data || [];

  return (
    <div className="space-y-6">
      <PageHeader
        title="Pending Approvals"
        description={`${pendingUsers.length} users waiting for approval`}
      >
        <Link href="/users">
          <Button variant="outline">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Users
          </Button>
        </Link>
      </PageHeader>

      {pendingUsers.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <div className="rounded-full bg-success/10 p-4 mb-4">
              <Check className="h-8 w-8 text-success" />
            </div>
            <h3 className="text-lg font-semibold">All caught up!</h3>
            <p className="text-muted-foreground mt-1">No pending user approvals at the moment.</p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {pendingUsers.map((user: User) => {
            const isProcessing = processingIds.has(user.id);

            return (
              <Card key={user.id} className="relative overflow-hidden">
                {isProcessing && (
                  <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-10">
                    <LoadingSpinner />
                  </div>
                )}
                <CardContent className="pt-6">
                  <div className="flex flex-col items-center text-center">
                    <Avatar
                      src={user.avatarUrl}
                      fallback={`${user.firstName} ${user.lastName}`}
                      size="lg"
                      className="mb-4"
                    />
                    <h3 className="font-semibold text-lg">
                      {user.firstName} {user.lastName}
                    </h3>
                    
                    <div className="mt-4 space-y-2 w-full text-sm text-muted-foreground">
                      {user.email && (
                        <div className="flex items-center justify-center gap-2">
                          <Mail className="h-4 w-4" />
                          <span className="truncate">{user.email}</span>
                        </div>
                      )}
                      <div className="flex items-center justify-center gap-2">
                        <Phone className="h-4 w-4" />
                        <span>{user.phone}</span>
                      </div>
                      <div className="flex items-center justify-center gap-2">
                        <Calendar className="h-4 w-4" />
                        <span>Applied {formatDate(user.createdAt)}</span>
                      </div>
                    </div>

                    <div className="flex gap-2 mt-6 w-full">
                      <Button
                        variant="outline"
                        className="flex-1"
                        onClick={() => denyMutation.mutate(user.id)}
                        disabled={isProcessing}
                      >
                        <X className="mr-2 h-4 w-4" />
                        Deny
                      </Button>
                      <Button
                        variant="success"
                        className="flex-1"
                        onClick={() => approveMutation.mutate(user.id)}
                        disabled={isProcessing}
                      >
                        <Check className="mr-2 h-4 w-4" />
                        Approve
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      {/* Pagination */}
      {data && data.totalPages > 1 && (
        <div className="flex justify-center gap-2">
          <Button
            variant="outline"
            onClick={() => setPage((p) => Math.max(1, p - 1))}
            disabled={page === 1}
          >
            Previous
          </Button>
          <span className="flex items-center px-4 text-sm text-muted-foreground">
            Page {page} of {data.totalPages}
          </span>
          <Button
            variant="outline"
            onClick={() => setPage((p) => p + 1)}
            disabled={page >= data.totalPages}
          >
            Next
          </Button>
        </div>
      )}
    </div>
  );
}