"use client";

import { useEffect, useState } from "react";

import axios from "axios";

import Cookies from "js-cookie";

import toast, { Toaster } from "react-hot-toast";

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/shadcnui/card";

import { Button } from "@/components/shadcnui/button";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/shadcnui/table";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/shadcnui/select";

interface ReferralType {
  _id: string;

  referralName: string;

  mobile: string;

  email: string;

  profileType: string;

  status: string;

  isRegistered: boolean;

  createdAt: string;

  referredBy: {
    _id: string;
    name: string;
    mobile: string;
    role: string;
  };

  registeredUserId?: {
    _id: string;
    name: string;
    mobile: string;
    role: string;
  };
}

const ReferralsPage = () => {
  const token = Cookies.get("kero_token");

  const [loadingId, setLoadingId] = useState("");

  const [referrals, setReferrals] = useState<ReferralType[]>([]);

  const getAllReferrals = async () => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/referrals/admin/all`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      if (response.data.success) {
        setReferrals(response.data.data || []);
      }
    } catch (error) {
      console.log(error);

      toast.error("Failed to load referrals");
    }
  };

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

  const updateStatus = async (
    referralId: string,
    status: "APPROVED" | "REJECTED",
  ) => {
    try {
      setLoadingId(referralId);

      await axios.patch(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/referrals/${referralId}/status`,
        {
          status,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      toast.success("Referral status updated");

      getAllReferrals();
    } catch (error) {
      console.log(error);

      if (axios.isAxiosError(error)) {
        toast.error(
          error.response?.data?.message || "Failed to update referral status",
        );
      } else {
        toast.error("Something went wrong");
      }
    } finally {
      setLoadingId("");
    }
  };

  return (
    <div className="mt-6">
      <Toaster
        position="top-center"
        reverseOrder={false}
      />

      <Card>
        <CardHeader>
          <CardTitle>Referral Management</CardTitle>
        </CardHeader>

        <CardContent className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Referral Name</TableHead>

                <TableHead>Mobile</TableHead>

                <TableHead>Email</TableHead>

                <TableHead>Profile Type</TableHead>

                <TableHead>Referred By</TableHead>

                <TableHead>Referrer Role</TableHead>

                <TableHead>Registered</TableHead>

                <TableHead>Status</TableHead>

                <TableHead>Created Date</TableHead>

                <TableHead>Action</TableHead>
              </TableRow>
            </TableHeader>

            <TableBody>
              {referrals.map((item) => (
                <TableRow key={item._id}>
                  <TableCell>{item.referralName}</TableCell>

                  <TableCell>{item.mobile}</TableCell>

                  <TableCell>{item.email}</TableCell>

                  <TableCell>{item.profileType}</TableCell>

                  <TableCell>{item.referredBy?.name}</TableCell>

                  <TableCell>{item.referredBy?.role}</TableCell>

                  <TableCell>{item.isRegistered ? "Yes" : "No"}</TableCell>

                  <TableCell>{item.status}</TableCell>

                  <TableCell>
                    {new Date(item.createdAt).toLocaleDateString()}
                  </TableCell>

                  <TableCell>
                    <Select
                      value={item.status}
                      onValueChange={(value) =>
                        updateStatus(item._id, value as "APPROVED" | "REJECTED")
                      }
                      disabled={loadingId === item._id}>
                      <SelectTrigger className="w-36">
                        <SelectValue />
                      </SelectTrigger>

                      <SelectContent>
                        <SelectItem value="APPROVED">APPROVED</SelectItem>

                        <SelectItem value="REJECTED">REJECTED</SelectItem>
                      </SelectContent>
                    </Select>
                  </TableCell>
                </TableRow>
              ))}

              {referrals.length === 0 && (
                <TableRow>
                  <TableCell
                    colSpan={10}
                    className="text-center">
                    No referrals found
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
};

export default ReferralsPage;