"use client";

import { useEffect, useState } from "react";

import axios from "axios";

import Cookies from "js-cookie";

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

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

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

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/shadcnui/table";
import toast, { Toaster } from "react-hot-toast";

interface KycType {
  _id: string;

  accountHolderName: string;

  bankName: string;

  accountNumber: string;

  ifscCode: string;

  status: string;

  createdAt: string;

  userId: {
    _id: string;

    name: string;

    mobile: string;

    email: string;

    role: string;
  } | null;
}

const kycStatusFlow: Record<string, string[]> = {
  PENDING: ["APPROVED", "REJECTED"],

  APPROVED: [],

  REJECTED: [],
};

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

  const [kycList, setKycList] = useState<KycType[]>([]);

  const [loading, setLoading] = useState<string | null>(null);

  const [selectedStatus, setSelectedStatus] = useState<
    Record<string, string | null>
  >({});

  const getAllKyc = async () => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/kyc/all_kyc`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      if (response.data.success) {
        setKycList(response.data.data);
      }
    } catch (error) {
      console.log(error);
    }
  };

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

  const updateKycStatus = async (kycId: string, status: string) => {
    try {
      setLoading(kycId);

      await axios.put(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/kyc/update_kyc_status/${kycId}`,
        {
          status,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );
      toast.success("KYC status updated!");
      getAllKyc();
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(null);
    }
  };

  return (
    <div className="mt-6 space-y-6">
      <Toaster
        position="top-center"
        reverseOrder={false}
      />
      {kycList.map((item) => (
        <Card key={item._id}>
          <CardHeader className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
            <div>
              <CardTitle>{item.accountHolderName}</CardTitle>

              <p className="text-muted-foreground mt-2 text-sm">
                User: {item.userId?.name || "No User"}
              </p>

              <p className="text-muted-foreground text-sm">
                Mobile: {item.userId?.mobile || "-"}
              </p>

              <p className="text-muted-foreground text-sm">
                Role: {item.userId?.role || "-"}
              </p>
            </div>

            <div className="w-full max-w-64 space-y-3">
              <Select
                disabled={
                  item.status === "APPROVED" || item.status === "REJECTED"
                }
                value={selectedStatus[item._id] || item.status}
                onValueChange={(value) => {
                  if (value) {
                    setSelectedStatus((prev) => ({
                      ...prev,
                      [item._id]: value,
                    }));
                  }
                }}>
                <SelectTrigger>
                  <SelectValue placeholder="Select Status" />
                </SelectTrigger>

                <SelectContent>
                  {kycStatusFlow[item.status]?.map((status) => (
                    <SelectItem
                      key={status}
                      value={status}>
                      {status}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Button
                className="w-full"
                disabled={
                  loading === item._id ||
                  item.status === "APPROVED" ||
                  item.status === "REJECTED"
                }
                onClick={() =>
                  updateKycStatus(
                    item._id,
                    selectedStatus[item._id] || item.status,
                  )
                }>
                {loading === item._id ?
                  "Updating..."
                : item.status === "APPROVED" || item.status === "REJECTED" ?
                  "Status Locked"
                : "Update KYC Status"}
              </Button>
            </div>
          </CardHeader>

          <CardContent className="space-y-6">
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
              <div>
                <p className="text-muted-foreground text-sm">Account Holder</p>

                <p className="font-medium">{item.accountHolderName}</p>
              </div>

              <div>
                <p className="text-muted-foreground text-sm">Bank Name</p>

                <p className="font-medium">{item.bankName}</p>
              </div>

              <div>
                <p className="text-muted-foreground text-sm">Account Number</p>

                <p className="font-medium break-all">{item.accountNumber}</p>
              </div>

              <div>
                <p className="text-muted-foreground text-sm">IFSC Code</p>

                <p className="font-medium break-all">{item.ifscCode}</p>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-4 border-t pt-5 md:grid-cols-3">
              <div>
                <p className="text-muted-foreground text-sm">Current Status</p>

                <p className="font-medium">{item.status}</p>
              </div>

              <div>
                <p className="text-muted-foreground text-sm">Email</p>

                <p className="font-medium break-all">
                  {item.userId?.email || "-"}
                </p>
              </div>

              <div>
                <p className="text-muted-foreground text-sm">Created At</p>

                <p className="font-medium">
                  {new Date(item.createdAt).toLocaleString()}
                </p>
              </div>
            </div>

            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>User Name</TableHead>

                    <TableHead>Mobile</TableHead>

                    <TableHead>Role</TableHead>

                    <TableHead>Bank</TableHead>

                    <TableHead>Account No</TableHead>

                    <TableHead>IFSC</TableHead>

                    <TableHead>Status</TableHead>
                  </TableRow>
                </TableHeader>

                <TableBody>
                  <TableRow>
                    <TableCell>{item.userId?.name || "No User"}</TableCell>

                    <TableCell>{item.userId?.mobile || "-"}</TableCell>

                    <TableCell>{item.userId?.role || "-"}</TableCell>

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

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

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

                    <TableCell>{item.status}</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};

export default UserKycDetails;