"use client";
import CustomDropdown from "@/app/components/form/CustomDropdown";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from 'react';
import Cookies from "js-cookie";




const requestStatus = [
  { label: "All Request", value: "all_request" },
  { label: "In Process", value: "in_process" },
  { label: "Under Review", value: "under_review" },
  { label: "Converted into Project", value: "converted_inro_project" },
  { label: "On Hold", value: "on_hold" },
  { label: "Declined", value: "declined" },
];



export default function LargeOrderRequest() {
  const handleOrderRequest = (value: string | number) => {
    console.log("Selected:", value);
  };

  type OrderItem = {
    request_id: string;
    status: string;
    product_name: string;
    product_price: string;
    product_image: string;
    product_id: string;
    how_many_piece: string;
    price: string;
    order_type: string;
    bonus_add_ons: string;
    tell_us: string;
  };

  type MappedItem = {
    id: string;
    status: string;
    date: string;
    productinfo: {
      title: string;
      price: string;
      img: string;
      url: string;
    };
    quantity: string;
    offerPrice: string;
    liketodo: string;
    bonusAddOns: { label: string }[];
    aboutProject: string;
  };

  const [requestOrderData, setRequestOrderData] = useState<MappedItem[]>([]);

  useEffect(() => {
    const fetchRequests = async () => {
      try {
        const token = Cookies.get("token");
        if (!token) {
          console.error("Bearer token not found in cookies.");
          return;
        }

        const response = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/bulkorder/list/`, {
          method: "GET",
          headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "application/json",
          },
        });

        const result = await response.json();
        if (result.success && result.data) {
          const mappedData: MappedItem[] = result.data.map((item: OrderItem) => ({
            id: item.request_id,
            status: item.status,
            date: new Date().toLocaleDateString(),
            productinfo: {
              title: item.product_name,
              price: item.product_price,
              img: `/products/${item.product_image}`,
              url: `/product/${item.product_id}`,
            },
            quantity: item.how_many_piece,
            offerPrice: item.price,
            liketodo: item.order_type,
            bonusAddOns: item.bonus_add_ons
              ? item.bonus_add_ons.split(",").map((label) => ({ label: label.trim() }))
              : [],
            aboutProject: item.tell_us,
          }));

          setRequestOrderData(mappedData);
        }
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchRequests();
  }, []);


  return (
    <div className="flex w-full flex-1 flex-col gap-4">
      <div className="flex w-full flex-col">
        <div className="flex flex-col">
          <h1 className="med">Large Order Request</h1>
        </div>
        <div className="mt-5 flex w-full flex-col justify-between gap-10 align-top">
          
          <div className="flex w-full flex-col gap-5">
            {requestOrderData.map((item) => (
              <div
                key={item.id}
                className="flex flex-col gap-5 border-1 border-transparent bg-white/50 p-5 duration-300 hover:border-gray-950/25 hover:bg-white md:p-10"
              >
                <div className="flex w-full flex-row items-center justify-between align-baseline">
                  <div className="flex flex-col">
                    <span className="text-xs">Request ID:</span>
                    <p className="font-bogart">{item.id}</p>
                  </div>
                  <div className="flex flex-col items-end justify-end">
                    <p>{item.status}</p>
                    <span className="text-xs">{item.date}</span>
                  </div>
                </div>
                <div className="grid grid-cols-1 gap-10 border-t-1 border-b-1 border-dashed border-gray-950/10 py-5 md:grid-cols-5">
                  <div className="col-span-1">
                    <Link
                      href={item.productinfo.url}
                      className="grid grid-cols-2 gap-5 md:grid-cols-1 md:gap-1"
                    >
                      <div>
                        <Image
                          src={item.productinfo.img}
                          alt={item.productinfo.title}
                          width={200}
                          height={200}
                          className="img-responsive"
                        />
                      </div>

                      <div>
                        <p className="text-xs/3">{item.productinfo.title}</p>
                        <p className="font-bogart">${item.productinfo.price}</p>
                      </div>
                    </Link>
                  </div>
                  <div className="col-span-4">
                    <div className="flex flex-col gap-4">
                      <div className="grid grid-cols-2 gap-5">
                        <div>
                          <span className="text-xs font-medium">Qty</span>
                          <p>{item.quantity}</p>
                        </div>
                        <div>
                          <span className="text-xs font-medium">
                            Offer Price
                          </span>
                          <p>${item.offerPrice}</p>
                        </div>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-xs font-medium">
                          You like to do
                        </span>
                        <p>{item.liketodo}</p>
                      </div>
                      <div className="flex flex-col">
                        <span className="text-xs font-medium">
                          Bonus Add-ons
                        </span>
                        <p className="flex flex-wrap gap-2 text-xs font-medium">
                          {item.bonusAddOns.map((list, index) => (
                            <span
                              key={index}
                              className="rounded-full border-1 border-gray-950/25 bg-gray-950/5 px-4 py-2"
                            >
                              {list.label}
                            </span>
                          ))}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <span className="text-xs font-medium">About Project</span>
                  <div className="font-bogart font-light">
                    {item.aboutProject}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}