"use client";

import { useEffect, useState } from "react";
import { CheckCircle2, XCircle, Mail, Calendar, Loader2 } from "lucide-react";
import { getAdminUsers, userDecision, type AdminUser } from "@/lib/api/admin.api";
import { PageHeader } from "@/components/ui/page-components";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { SimpleTooltip } from "@/components/ui/tooltip";
import { useToast } from "@/store";
import { formatDate } from "@/lib/utils";

export default function AdminUsersPage() {
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [actionLoading, setActionLoading] = useState<number | null>(null);
  const [filter, setFilter] = useState<"all" | "approved" | "pending" | "denied">("all");
  const { success, error } = useToast();

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      try {
        const params = filter === "all" ? {} : { approval_status: filter };
        const res = await getAdminUsers(params);
        if (res.success) setUsers(res.data);
      } catch {
        error("Error", "Failed to load users");
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, [filter]);

  const handleDecision = async (userId: number, action: "approve" | "deny") => {
    setActionLoading(userId);
    try {
      const res = await userDecision(userId, action);
      if (res.success) {
        success(
          action === "approve" ? "User Approved" : "User Denied",
          res.message
        );
        // Update local state to reflect new approval_status
        setUsers((prev) =>
          prev.map((u) =>
            u.id === userId
              ? { ...u, approval_status: res.data.approval_status as AdminUser["approval_status"] }
              : u
          )
        );
      }
    } catch {
      error("Failed", `Could not ${action} user`);
    } finally {
      setActionLoading(null);
    }
  };

  const filteredUsers = users.filter((u) => {
    if (filter === "all") return true;
    return u.approval_status === filter;
  });

  const counts = {
    all:      users.length,
    approved: users.filter((u) => u.approval_status === "approved").length,
    pending:  users.filter((u) => u.approval_status === "pending").length,
    denied:   users.filter((u) => u.approval_status === "denied").length,
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="User Management"
        backLink={{ href: "/admin", label: "Back to Dashboard" }}
        description={`${users.length} total users`}
      />

      <Tabs value={filter} onValueChange={(v) => setFilter(v as typeof filter)}>
        <TabsList>
          <TabsTrigger value="all">All ({counts.all})</TabsTrigger>
          <TabsTrigger value="approved">Approved ({counts.approved})</TabsTrigger>
          <TabsTrigger value="pending">
            Pending
            {counts.pending > 0 && (
              <span className="ml-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-[10px] font-bold text-white">
                {counts.pending}
              </span>
            )}
          </TabsTrigger>
          <TabsTrigger value="denied">Denied ({counts.denied})</TabsTrigger>
        </TabsList>

        <TabsContent value={filter} className="space-y-3 mt-4">
          {loading ? (
            <div className="space-y-3">
              {[...Array(3)].map((_, i) => (
                <Card key={i} className="animate-pulse">
                  <CardContent className="p-4">
                    <div className="h-5 w-48 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
                    <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : filteredUsers.length > 0 ? (
            filteredUsers.map((user) => (
              <Card key={user.id}>
                <CardContent className="p-4 flex items-center justify-between gap-4">
                  <div className="flex-1 space-y-2 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
                        {user.name || user.email}
                      </h3>
                      {user.approval_status === "approved" && (
                        <Badge variant="success" className="text-xs">Approved</Badge>
                      )}
                      {user.approval_status === "pending" && (
                        <Badge variant="warning" className="text-xs">Pending</Badge>
                      )}
                      {user.approval_status === "denied" && (
                        <Badge variant="destructive" className="text-xs">Denied</Badge>
                      )}
                      {user.role === "admin" && (
                        <Badge variant="secondary" className="text-xs">Admin</Badge>
                      )}
                    </div>
                    <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400 flex-wrap">
                      <span className="flex items-center gap-1.5">
                        <Mail className="h-3 w-3" />
                        {user.email}
                      </span>
                      {user.approved_at && (
                        <span className="flex items-center gap-1.5">
                          <Calendar className="h-3 w-3" />
                          Approved {formatDate(user.approved_at)}
                        </span>
                      )}
                      {user.denied_at && (
                        <span className="flex items-center gap-1.5">
                          <Calendar className="h-3 w-3" />
                          Denied {formatDate(user.denied_at)}
                        </span>
                      )}
                    </div>
                  </div>

                  {/* Only show actions for non-admin users */}
                  {user.role !== "admin" && (
                    <div className="flex items-center gap-2 shrink-0">
                      {user.approval_status !== "approved" && (
                        <SimpleTooltip content="Approve user access">
                          <Button
                            size="sm"
                            onClick={() => handleDecision(user.id, "approve")}
                            disabled={actionLoading === user.id}
                          >
                            {actionLoading === user.id ? (
                              <Loader2 className="h-4 w-4 animate-spin" />
                            ) : (
                              <CheckCircle2 className="h-4 w-4" />
                            )}
                            Approve
                          </Button>
                        </SimpleTooltip>
                      )}
                      {user.approval_status !== "denied" && (
                        <SimpleTooltip content="Deny user access">
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => handleDecision(user.id, "deny")}
                            disabled={actionLoading === user.id}
                          >
                            {actionLoading === user.id ? (
                              <Loader2 className="h-4 w-4 animate-spin" />
                            ) : (
                              <XCircle className="h-4 w-4" />
                            )}
                            Deny
                          </Button>
                        </SimpleTooltip>
                      )}
                    </div>
                  )}
                </CardContent>
              </Card>
            ))
          ) : (
            <Card>
              <CardContent className="p-8 text-center">
                <p className="text-sm text-gray-500 dark:text-gray-400">No users found</p>
              </CardContent>
            </Card>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}