"use client";
import AppTable from "@/components/UiComponents/table/AppTable";
import React, { useState } from "react";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import { useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { Input, Button } from "antd";
import toast from "react-hot-toast";
import axiosInstance from "@/services/axiosClient";
import { ReloadOutlined } from "@ant-design/icons";

const OutStockProducts = ({ data }: { data: any }) => {
  const t = useTranslations();
  const searchParams = useSearchParams();
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const handlePageChange = (page: number) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("page", page.toString());
    router.push(`?${params.toString()}`);
  };



  const handleChangeQuantity = async (product_id: string,quantity:number) => {

    try {
      setLoading(true);
      const { data } = await axiosInstance.patch(`/products/incerement-stock/${product_id}`, {quantity});
      if (data) {
        toast.success(data?.message);
      
      }
    } catch (error: any) {
      toast.error(error?.response?.data?.message || "Error updating stock");
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: t("tables.productName"),
      dataIndex: "name",
      key: "name",
      render: (_: any, record: any) => (
        <div className="flex items-center gap-2 min-w-40 text-ellipsis max-w-[95%] overflow-hidden">
          <ImageWithFallback
            src={record?.main}
            width={80}
            height={80}
            alt={record.name}
            className="size-12 object-contain bg-greynormal rounded-2xl border border-platinum"
            style={{ mixBlendMode: "multiply" }}
          />
          {record.name}
        </div>
      ),
    },
    {
      title: t("tables.mainCategory"),
      dataIndex: "category",
      key: "category",
    },
    {
      title: t("tables.subCategory1"),
      dataIndex: "sub_category",
      key: "sub_category",
    },
    {
      title: t("tables.subCategory2"),
      dataIndex: "sub_sub_category",
      key: "sub_sub_category",
    },
    {
      title: t("tables.stock"),
      dataIndex: "stock",
      key: "stock",
      render: (_: any, record: any) => {
        const handleChange = (value:any)=>{
          if( record.stock != Number(value)){
              handleChangeQuantity(record.id, Number(value))
          }
        }
        return(
        <div className="flex gap-2 items-center">
          <Input
            type="number"
            min={0}
            defaultValue={record.stock}
            onBlur={(e) =>handleChange(e.target.value)}
            className="border border-platinum rounded-2xl py-4 px-2"
          />
        </div>
      )},
    },
  ];

  return (
    <AppTable
      columns={columns}
      dataSource={data?.data}
      pagination={{
        pageSize: data?.meta?.per_page,
        total: data?.meta?.total,
        current: data?.meta?.current_page,
        onChange: handlePageChange,
      }}
      hasSearch
      showSelection={false}
    />
  );
};

export default OutStockProducts;