"use client";

import { useState, useMemo, useEffect, useCallback } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AgentTable } from "./agent-table";
import { AgentDetailsDialog } from "./agent-details-dialog";
import { BlockAgentDialog } from "./block-agent-dialog";
import { RejectAgentDialog } from "./reject-agent-dialog";
import { EditAgentDialog } from "./edit-agent-dailog";
import { ChangePasswordDialog } from "./change-password-dialog";
import {
  type Agent,
  type AgentStatus,
} from "@/roles/admin/services/agents.service";
import { useToastEnhanced } from "@/hooks/use-toast-enhanced";
import {
  getAgentsAction,
  changeUserStatusAction,
} from "@/features/users/actions/user-actions";
import { useAdminAuth } from "@/roles/admin/components/admin-auth-provider";
import { Loader2 } from "lucide-react";

export function AgentsClient() {
  const toast = useToastEnhanced();
  const { currentUser } = useAdminAuth();
  const [agents, setAgents] = useState<Agent[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
  const [isBlockDialogOpen, setIsBlockDialogOpen] = useState(false);
  const [isRejectDialogOpen, setIsRejectDialogOpen] = useState(false);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [isChangePasswordDialogOpen, setIsChangePasswordDialogOpen] =
    useState(false);
  const [agentToBlock, setAgentToBlock] = useState<Agent | null>(null);
  const [agentToReject, setAgentToReject] = useState<Agent | null>(null);
  const [agentToEdit, setAgentToEdit] = useState<Agent | null>(null);

  const fetchAgents = useCallback(async () => {
    setIsLoading(true);
    try {
      const result = await getAgentsAction(1);
      if (result.success && result.data) {
        // Map API User to UI Agent
        const mappedAgents: Agent[] = result.data.data.map((user) => {
          let status: AgentStatus = "pending";
          if (user.status === "active") status = "approved";
          else if (user.status === "reject") status = "rejected";
          else if (user.status === "block") status = "blocked";

          return {
            id: String(user.id),
            firstName: user.first_name,
            lastName: user.last_name,
            email: user.email,
            phone: user.phone_number || "",
            gstCertificate: user.gst_certificate || "",
            msmeCertificate: user.msme_certificate || "",
            officeAddress: user.office_address || user.address || "",
            visitingCard: user.business_document || "",
            status: status,
            totalBookings: 0, // Not available in User API
            totalCommission: 0, // Not available in User API
            joinedAt: user.created_at || new Date().toISOString(),
            lastActive: user.updated_at || new Date().toISOString(),
            blockReason: user.reason_for_block || undefined,
            rejectionReason: user.reason_for_reject || undefined,
            bookings: [], // Not available in User API
          };
        });
        setAgents(mappedAgents);
      } else {
        toast.error({
          title: "Failed to load agents",
          description: result.error || "Unknown error occurred",
        });
      }
    } catch (error) {
      console.error("Error fetching agents:", error);
      toast.error({
        title: "Error",
        description: "Failed to fetch agents data",
      });
    } finally {
      setIsLoading(false);
    }
  }, [toast]);

  useEffect(() => {
    fetchAgents();
  }, [fetchAgents]);

  const pendingAgents = useMemo(
    () => agents.filter((a) => a.status === "pending"),
    [agents]
  );
  const approvedAgents = useMemo(
    () => agents.filter((a) => a.status === "approved"),
    [agents]
  );
  const rejectedAgents = useMemo(
    () => agents.filter((a) => a.status === "rejected"),
    [agents]
  );
  const blockedAgents = useMemo(
    () => agents.filter((a) => a.status === "blocked"),
    [agents]
  );

  const handleViewDetails = (agent: Agent) => {
    setSelectedAgent(agent);
    setIsDetailsOpen(true);
  };

  const handleEditClick = (agent: Agent) => {
    setAgentToEdit(agent);
    setIsEditDialogOpen(true);
  };

  const handleChangePasswordClick = (agent: Agent) => {
    // When change password is clicked from Table:
    setAgentToEdit(agent); // Use the same state or a new one? agentToEdit is fine as it's used by ChangePasswordDialog
    setIsChangePasswordDialogOpen(true);
  };

  const handleApprove = async (agent: Agent) => {
    try {
      const result = await changeUserStatusAction({
        user_id: agent.id,
        status: "active",
      });

      if (result.success) {
        toast.success({
          title: "Agent Approved",
          description: `${agent.firstName} ${agent.lastName} has been approved as an agent.`,
        });
        fetchAgents(); // Refresh list
      } else {
        toast.error({
          title: "Action Failed",
          description: result.error || "Failed to approve agent",
        });
      }
    } catch {
      toast.error({
        title: "Error",
        description: "An unexpected error occurred",
      });
    }
  };

  const handleRejectClick = (agent: Agent) => {
    setAgentToReject(agent);
    setIsRejectDialogOpen(true);
  };

  const handleRejectConfirm = async (reason: string) => {
    if (!agentToReject) return;

    try {
      const result = await changeUserStatusAction({
        user_id: agentToReject.id,
        status: "reject", // Note: API expects "reject" based on users.types.ts
        reason_for_reject: reason,
      });

      if (result.success) {
        toast.error({
          title: "Agent Rejected",
          description: `${agentToReject.firstName} ${agentToReject.lastName} has been rejected.`,
        });
        fetchAgents();
      } else {
        toast.error({
          title: "Action Failed",
          description: result.error || "Failed to reject agent",
        });
      }
    } catch {
      toast.error({
        title: "Error",
        description: "An unexpected error occurred",
      });
    } finally {
      setIsRejectDialogOpen(false);
      setAgentToReject(null);
    }
  };

  const handleBlockClick = (agent: Agent) => {
    setAgentToBlock(agent);
    setIsBlockDialogOpen(true);
  };

  const handleBlockConfirm = async (reason: string) => {
    if (!agentToBlock) return;

    try {
      const result = await changeUserStatusAction({
        user_id: agentToBlock.id,
        status: "block", // Note: API expects "block" based on users.types.ts
        reason_for_block: reason,
      });

      if (result.success) {
        toast.error({
          title: "Agent Blocked",
          description: `${agentToBlock.firstName} ${agentToBlock.lastName} has been blocked.`,
        });
        fetchAgents();
      } else {
        toast.error({
          title: "Action Failed",
          description: result.error || "Failed to block agent",
        });
      }
    } catch {
      toast.error({
        title: "Error",
        description: "An unexpected error occurred",
      });
    } finally {
      setIsBlockDialogOpen(false);
      setAgentToBlock(null);
    }
  };

  const handleUnblock = async (agent: Agent) => {
    try {
      const result = await changeUserStatusAction({
        user_id: agent.id,
        status: "active",
      });

      if (result.success) {
        toast.success({
          title: "Agent Unblocked",
          description: `${agent.firstName} ${agent.lastName} has been restored to approved status.`,
        });
        fetchAgents();
      } else {
        toast.error({
          title: "Action Failed",
          description: result.error || "Failed to unblock agent",
        });
      }
    } catch {
      toast.error({
        title: "Error",
        description: "An unexpected error occurred",
      });
    }
  };

  const handleRestore = async (agent: Agent) => {
    try {
      const result = await changeUserStatusAction({
        user_id: agent.id,
        status: "pending",
      });

      if (result.success) {
        toast.success({
          title: "Agent Restored",
          description: `${agent.firstName} ${agent.lastName} has been moved to pending for review.`,
        });
        fetchAgents();
      } else {
        toast.error({
          title: "Action Failed",
          description: result.error || "Failed to restore agent",
        });
      }
    } catch {
      toast.error({
        title: "Error",
        description: "An unexpected error occurred",
      });
    }
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-12">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    );
  }

  return (
    <section aria-labelledby="agents-heading" className="admin-section">
      <header className="admin-page-header">
        <h1 id="agents-heading" className="admin-page-title">
          Agents
        </h1>
        <p className="admin-page-description">
          Manage travel agents, review applications, and monitor their activity.
        </p>
      </header>

      {currentUser && (
        <div className="mb-6 px-3 py-1 bg-primary/10 rounded-md w-fit">
          <span className="text-sm font-medium">Admin: {currentUser.name}</span>
        </div>
      )}

      <Tabs defaultValue="all" className="w-full">
        <TabsList className="mb-6 h-auto p-1.5 bg-muted/50 rounded-xl border border-border/50 flex-wrap">
          <TabsTrigger
            value="all"
            className="rounded-lg data-[state=active]:bg-background data-[state=active]:shadow-sm px-4 py-2"
          >
            All ({agents.length})
          </TabsTrigger>
          <TabsTrigger
            value="pending"
            className="rounded-lg data-[state=active]:bg-background data-[state=active]:shadow-sm px-4 py-2"
          >
            Pending ({pendingAgents.length})
          </TabsTrigger>
          <TabsTrigger
            value="approved"
            className="rounded-lg data-[state=active]:bg-background data-[state=active]:shadow-sm px-4 py-2"
          >
            Approved ({approvedAgents.length})
          </TabsTrigger>
          <TabsTrigger
            value="rejected"
            className="rounded-lg data-[state=active]:bg-background data-[state=active]:shadow-sm px-4 py-2"
          >
            Rejected ({rejectedAgents.length})
          </TabsTrigger>
          <TabsTrigger
            value="blocked"
            className="rounded-lg data-[state=active]:bg-background data-[state=active]:shadow-sm px-4 py-2"
          >
            Blocked ({blockedAgents.length})
          </TabsTrigger>
        </TabsList>

        <TabsContent value="all" className="mt-0">
          <AgentTable
            agents={agents}
            onViewDetails={handleViewDetails}
            onApprove={handleApprove}
            onReject={handleRejectClick}
            onBlock={handleBlockClick}
            onUnblock={handleUnblock}
            onRestore={handleRestore}
            onEdit={handleEditClick}
            onChangePassword={handleChangePasswordClick}
          />
        </TabsContent>

        <TabsContent value="pending" className="mt-0">
          <AgentTable
            agents={pendingAgents}
            onViewDetails={handleViewDetails}
            onApprove={handleApprove}
            onReject={handleRejectClick}
            onBlock={handleBlockClick}
            onUnblock={handleUnblock}
            onRestore={handleRestore}
            onEdit={handleEditClick}
            onChangePassword={handleChangePasswordClick}
          />
        </TabsContent>

        <TabsContent value="approved" className="mt-0">
          <AgentTable
            agents={approvedAgents}
            onViewDetails={handleViewDetails}
            onApprove={handleApprove}
            onReject={handleRejectClick}
            onBlock={handleBlockClick}
            onUnblock={handleUnblock}
            onRestore={handleRestore}
            onEdit={handleEditClick}
            onChangePassword={handleChangePasswordClick}
          />
        </TabsContent>

        <TabsContent value="rejected" className="mt-0">
          <AgentTable
            agents={rejectedAgents}
            onViewDetails={handleViewDetails}
            onApprove={handleApprove}
            onReject={handleRejectClick}
            onBlock={handleBlockClick}
            onUnblock={handleUnblock}
            onRestore={handleRestore}
            onEdit={handleEditClick}
            onChangePassword={handleChangePasswordClick}
          />
        </TabsContent>

        <TabsContent value="blocked" className="mt-0">
          <AgentTable
            agents={blockedAgents}
            onViewDetails={handleViewDetails}
            onApprove={handleApprove}
            onReject={handleRejectClick}
            onBlock={handleBlockClick}
            onUnblock={handleUnblock}
            onRestore={handleRestore}
            onEdit={handleEditClick}
            onChangePassword={handleChangePasswordClick}
          />
        </TabsContent>
      </Tabs>

      <AgentDetailsDialog
        agent={selectedAgent}
        open={isDetailsOpen}
        onOpenChange={setIsDetailsOpen}
      />

      <EditAgentDialog
        agent={agentToEdit}
        open={isEditDialogOpen}
        onOpenChange={setIsEditDialogOpen}
        onSuccess={fetchAgents}
      />

      <ChangePasswordDialog
        agent={agentToEdit}
        open={isChangePasswordDialogOpen}
        onOpenChange={setIsChangePasswordDialogOpen}
        onSuccess={() => {
          // Optional: re-open edit dialog or just stay on table?
          // Usually after password change, we're done.
        }}
      />

      <BlockAgentDialog
        agent={agentToBlock}
        open={isBlockDialogOpen}
        onOpenChange={setIsBlockDialogOpen}
        onConfirm={handleBlockConfirm}
      />

      <RejectAgentDialog
        agent={agentToReject}
        open={isRejectDialogOpen}
        onOpenChange={setIsRejectDialogOpen}
        onConfirm={handleRejectConfirm}
      />
    </section>
  );
}