// import React, {useState } from 'react';
import Link from 'next/link';
import { useState, Fragment, useEffect } from 'react';
import { Menu, Dialog, Transition } from '@headlessui/react';
import Swal from 'sweetalert2';
import sortBy from 'lodash/sortBy';
import Tippy from '@tippyjs/react';
import { useDispatch, useSelector } from 'react-redux';
import { setPageTitle } from '../../store/themeConfigSlice';
import 'mantine-datatable/styles.css';
import { IRootState } from '@/store';
import FilterProduct from './Fragments/FilterProduct';
import Image from 'next/image';
import { coloredToast } from '@/lib/toast';
import Pagination from './Fragments/Pagination';
import { logActivity } from '@/utils/activityLogger';
import { DataTable, type DataTableSortStatus } from '@/components/Shared/DataTable';

interface Product {
    id: string;
    product_sku: string;
    product_title: string;
    product_is_new: boolean;
    product_images: string[];
    product_qty: number;
    product_reg_price_display: number;
    product_sale_price_display: number;
    product_status: string;
    product_categories: string[];
    product_tags: string[];
    product_items: any[];
    product_is_coming_soon: boolean;
    product_is_pre_order: boolean;
    product_is_purchasable: boolean;
    createdAt: Date;
}

interface Filter {
    product_sku: string;
    product_category: string;
    product_tag: string;
    product_min_qty: number | null;
    product_max_qty: number | null;
    product_is_new: boolean | null;
    product_is_coming_soon: boolean | null;
    product_is_pre_order: boolean | null;
    product_is_purchasable: boolean | null;
}

const Draft = (props: { view?: string; status?: any; refreshKey?: number }) => {
    const { view = 'list', status, refreshKey = 0 } = props;

    const [record, setRecord] = useState<Product[]>([]);
    const PAGE_SIZES = [10, 20, 30, 50, 100];

    const savedPage = localStorage.getItem('datatable_page_draft_product');
    const savedPageSize = localStorage.getItem('datatable_pageSize_draft_product');
    const savedSearch = localStorage.getItem('datatable_search_draft_product');
    const savedFilter = JSON.parse(localStorage.getItem('datatable_filter_product') || '{}');

    const [page, setPage] = useState(savedPage ? parseInt(savedPage, 10) : 1);
    const [pageSize, setPageSize] = useState(savedPageSize ? parseInt(savedPageSize, 10) : PAGE_SIZES[0]);
    const [totalRecords, setTotalRecords] = useState(0);
    const [search, setSearch] = useState(savedSearch || '');

    const [isFiltered, setIsFiltered] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [showModalFilter, setShowModalFilter] = useState(false);
    const [appliedFilter, setAppliedFilter] = useState<Filter>({
        product_sku: '',
        product_category: '',
        product_tag: '',
        product_min_qty: null,
        product_max_qty: null,
        product_is_new: null,
        product_is_coming_soon: null,
        product_is_pre_order: null,
        product_is_purchasable: null,
        ...savedFilter, // Load saved filter from local storage
    });

    // Save state to localStorage whenever there is a change
    useEffect(() => {
        localStorage.setItem('datatable_page_draft_product', page.toString());
        localStorage.setItem('datatable_pageSize_draft_product', pageSize.toString());
        localStorage.setItem('datatable_search_draft_product', search);
        localStorage.setItem('datatable_filter_product', JSON.stringify(appliedFilter));
    }, [page, pageSize, search, appliedFilter]);

    const generateData = async () => {
        setIsLoading(true); // Set isLoading to true before fetching data
        try {
            const filterConditions = [];

            if (appliedFilter.product_sku) {
                filterConditions.push(`product_sku=${appliedFilter.product_sku}`);
            }

            if (appliedFilter.product_category) {
                filterConditions.push(`product_category=${appliedFilter.product_category}`);
            }
            if (appliedFilter.product_tag) {
                filterConditions.push(`product_tag=${appliedFilter.product_tag}`);
            }
            if (appliedFilter.product_min_qty !== null && appliedFilter.product_min_qty !== undefined) {
                filterConditions.push(`product_min_qty=${appliedFilter.product_min_qty}`);
            }
            if (appliedFilter.product_max_qty !== null && appliedFilter.product_max_qty !== undefined) {
                filterConditions.push(`product_max_qty=${appliedFilter.product_max_qty}`);
            }
            if (appliedFilter.product_is_new !== undefined && appliedFilter.product_is_new !== null) {
                filterConditions.push(`product_is_new=${appliedFilter.product_is_new}`);
            }

            const filter = filterConditions.join('&');

            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/products/list?page=${page}&per_page=${pageSize}&product_status=draft&q=${search}&${filter}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include', // Include this option
            });
            const { data, currentPage, totalData } = await response.json();

            setPage(currentPage);
            setTotalRecords(totalData);
            setRecord(data);
            status('draft');
            setIsLoading(false); // Set isLoading to false after data is fetched
        } catch (error) {
            console.error('Error fetching data:', error);
            setIsLoading(false); // Set isLoading to false even if there's an error
        }
    };

    useEffect(() => {
        generateData();
    }, [page, pageSize, refreshKey]);

    const handleKeypress = (event: React.KeyboardEvent<HTMLInputElement>) => {
        if (event.keyCode === 13) {
            if (page !== 1) {
                setPage(1);
            } else {
                generateData();
            }
        }
    };

    const applyFilter = () => {
        setIsFiltered(true);
        setShowModalFilter(false);
        if (page !== 1) {
            setPage(1);
        } else {
            generateData();
        }
    };

    const removeFilter = () => {
        setAppliedFilter({
            product_sku: '',
            product_category: '',
            product_tag: '',
            product_min_qty: null,
            product_max_qty: null,
            product_is_new: null,
            product_is_coming_soon: null,
            product_is_pre_order: null,
            product_is_purchasable: null,
        });
        setIsFiltered(false);
    };

    useEffect(() => {
        if (!isFiltered) {
            generateData();
        }
    }, [isFiltered]);

    useEffect(() => {
        const savedFilter = JSON.parse(localStorage.getItem('datatable_filter_product') || '{}');
        const hasFilterValues = Object.values(savedFilter).some((value) => value !== '' && value !== null && value !== undefined);
        if (hasFilterValues) {
            setIsFiltered(true);
        }
        setAppliedFilter((prevFilter) => ({
            ...prevFilter,
            ...savedFilter,
        }));
    }, []);

    const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl' ? true : false;

    const [isMounted, setIsMounted] = useState(false);
    useEffect(() => {
        setIsMounted(true);
    }, []);

    const totalPages = Math.ceil(totalRecords / pageSize);

    const handlePageChange = (newPage: number) => {
        if (newPage >= 1 && newPage <= totalPages) {
            setPage(newPage);
        }
    };

    const publishProduct = async (id: string, product_title: string) => {
        const result = await Swal.fire({
            title: 'Are you sure?',
            text: 'Produk yang di publish akan me-reset harga sale dan discount, Lanjutkan ?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Publish!',
        });

        if (result.isConfirmed && id) {
            try {
                const api_url = process.env.API_URL;
                const response = await fetch(`${api_url}api/products/publish/${id}`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'include', // Include this option
                });
                if (!response.ok) {
                    coloredToast('warning', 'Publish unsuccessfully');
                    return;
                }
                coloredToast('success', 'Publish successfully');
                await logActivity({
                    location: 'Products',
                    description: `Publish Product - ${product_title}`,
                });
                generateData();
            } catch (error) {
                console.error('Error fetching data:', error);
                coloredToast('warning', 'publish unsuccessfully');
                await logActivity({
                    location: 'Products',
                    description: `Publish Product - ${product_title} gagal di Publish`,
                });
            }
        }
    };
    const archiveProduct = async (id: string, product_title: string) => {
        const result = await Swal.fire({
            title: 'Are you sure?',
            text: `Archive Product ${product_title} ?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Archive!',
        });

        if (result.isConfirmed && id) {
            try {
                const api_url = process.env.API_URL;
                const response = await fetch(`${api_url}api/products/archive/${id}`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'include', // Include this option
                });
                if (!response.ok) {
                    coloredToast('warning', 'Archive unsuccessfully');
                    return;
                }
                coloredToast('success', 'Archive successfully');
                await logActivity({
                    location: 'Products',
                    description: `Archive Product - ${product_title}`,
                });
                generateData();
            } catch (error) {
                console.error('Error fetching data:', error);
                coloredToast('warning', 'Archive unsuccessfully');
                await logActivity({
                    location: 'Products',
                    description: `Archive Product - ${product_title} gagal di Archive`,
                });
            }
        }
    };
    const unArchiveProduct = async (id: string, product_title: string) => {
        const result = await Swal.fire({
            title: 'Are you sure?',
            text: `Unarchive Product ${product_title} ?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Unarchive!',
        });

        if (result.isConfirmed && id) {
            try {
                const api_url = process.env.API_URL;
                const response = await fetch(`${api_url}api/products/unarchive/${id}`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'include', // Include this option
                });
                if (!response.ok) {
                    coloredToast('warning', 'unarchive unsuccessfully');
                    return;
                }
                coloredToast('success', 'unarchive successfully');
                await logActivity({
                    location: 'Products',
                    description: `Unarchive Product - ${product_title}`,
                });
                generateData();
            } catch (error) {
                console.error('Error fetching data:', error);
                await logActivity({
                    location: 'Products',
                    description: `Unarchive Product - ${product_title} gagal di Unarchive`,
                });
                coloredToast('warning', 'unarchive unsuccessfully');
            }
        }
    };

    const renderTitleSearch = () => {
        return (
            <div className="mb-4.5 flex flex-col justify-between gap-5 px-5 md:flex-row md:items-center">
                <h5 className="text-lg font-semibold dark:text-white-light">Draft Product</h5>
                <div className="flex items-center">
                    <Tippy content="Filter">
                        <button type="button" className={`flex items-center hover:text-primary ${isFiltered ? 'text-primary' : ''}`} onClick={() => setShowModalFilter(true)}>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path
                                    opacity="0.5"
                                    d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                />
                                <path
                                    d="M10 14C11.1046 14 12 14.8954 12 16C12 17.1046 11.1046 18 10 18C8.89543 18 8 17.1046 8 16C8 14.8954 8.89543 14 10 14Z"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                />
                                <circle cx="2" cy="2" r="2" transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 16 10)" stroke="currentColor" strokeWidth="1.5" />
                                <path d="M14 16L19 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                <path d="M10 8L5 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                <path d="M5 16L6 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                <path d="M19 8L18 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                            </svg>
                        </button>
                    </Tippy>
                    {isFiltered && (
                        <div className="badge badge-outline-danger ms-2 cursor-pointer " onClick={() => removeFilter()}>
                            <span className="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                </svg>
                                Remove Filter
                            </span>
                        </div>
                    )}
                    <div className="ml-2">
                        <input type="text" className="form-input w-auto" placeholder="Search Product" value={search} onChange={(e) => setSearch(e.target.value)} onKeyDown={handleKeypress} />
                    </div>
                </div>
            </div>
        );
    };

    const loadingIndicator = () => {
        return (
            <div className="flex justify-center py-4 text-center">
                <svg
                    viewBox="0 0 24 24"
                    width="24"
                    height="24"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    fill="none"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5 animate-spin text-white-dark"
                >
                    <line x1="12" y1="2" x2="12" y2="6"></line>
                    <line x1="12" y1="18" x2="12" y2="22"></line>
                    <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                    <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                    <line x1="2" y1="12" x2="6" y2="12"></line>
                    <line x1="18" y1="12" x2="22" y2="12"></line>
                    <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                    <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
                </svg>
                <span className="ms-3">Please wait, we&apos;re still working to load the data...</span>
            </div>
        );
    };

    return (
        <>
            <FilterProduct showModalFilter={showModalFilter} setShowModalFilter={setShowModalFilter} appliedFilter={appliedFilter} setAppliedFilter={setAppliedFilter} applyFilter={applyFilter} />
            {view === 'list' && (
                <div className="panel border-white-light px-0 dark:border-[#1b2e4b]">
                    {renderTitleSearch()}
                    <div className="datatables  pagination-padding">
                        {isLoading ? (
                            loadingIndicator()
                        ) : (
                            <DataTable
                                className="table-hover whitespace-nowrap"
                                records={record}
                                minHeight={250}
                                columns={[
                                    {
                                        accessor: 'product_title',
                                        title: 'Product Name',
                                        render: ({ id, product_title, product_status, product_is_new, product_images }) => {
                                            const product_image = product_images.length > 0 ? product_images[0] ?? '/icon no image_2.png' : '/icon no image_2.png';
                                            return (
                                                <Link href={`/products/edit/${id}`}>
                                                    <div className="flex w-max items-center">
                                                        <div className="relative mr-2 h-9 w-9 ">
                                                            <Image fill alt="product-image" className="rounded object-cover" src={product_image} />
                                                        </div>
                                                        <span>{product_title}</span>
                                                        {product_status !== 'publish' && <span className="ml-1 font-bold capitalize text-warning">- {product_status}</span>}
                                                        {product_is_new && <span className="ml-1 font-bold text-fuchsia-400">- NEW</span>}
                                                    </div>
                                                </Link>
                                            );
                                        },
                                    },
                                    { accessor: 'product_sku', title: 'Sku' },
                                    {
                                        accessor: 'product_qty',
                                        title: 'Quantity',
                                        render: ({ product_items, product_qty }) => {
                                            let qty = product_qty;
                                            if (product_items.length > 0) {
                                                qty = product_items.reduce((accumulator: number, currentItem: { qty: number }) => {
                                                    return accumulator + currentItem.qty;
                                                }, 0);
                                            }
                                            return <>{qty}</>;
                                        },
                                    },
                                    {
                                        accessor: 'product_reg_price_display',
                                        title: 'Reg Price',
                                        render: ({ product_reg_price_display }) => <>Rp {product_reg_price_display.toLocaleString('id-ID')}</>,
                                    },
                                    {
                                        accessor: 'product_sale_price_display',
                                        title: 'Sale Price',
                                        render: ({ product_sale_price_display }) => <>Rp {product_sale_price_display.toLocaleString('id-ID')}</>,
                                    },
                                    {
                                        accessor: 'product_categories',
                                        title: 'Categories',
                                        render: ({ product_categories }) => {
                                            return product_categories.map((category: string) => {
                                                return <div key={category}>{category}</div>;
                                            });
                                        },
                                    },
                                    {
                                        accessor: 'product_tags',
                                        title: 'Tags',
                                        render: ({ product_tags }) => {
                                            return product_tags.map((tag: string) => {
                                                return <div key={tag}>{tag}</div>;
                                            });
                                        },
                                    },
                                    {
                                        accessor: 'create date',
                                        render: ({ createdAt }) => {
                                            const orderDate = new Date(createdAt);
                                            const formattedDate = orderDate.toLocaleDateString('id-ID'); // Format the date
                                            const formattedTime = orderDate.toLocaleTimeString('id-ID'); // Format the time

                                            return (
                                                <>
                                                    <div className="text-center text-xs">
                                                        <div>{formattedDate}</div>
                                                        <div>{formattedTime}</div>
                                                    </div>
                                                </>
                                            ); // Render the formatted date and time
                                        },
                                    },
                                    {
                                        accessor: 'product_status_info',
                                        title: 'Status',
                                        render: ({ product_is_coming_soon, product_is_pre_order, product_is_purchasable, product_is_new }) => {
                                            return (
                                                <div className="space-y-1 text-sm">
                                                    <div className="flex items-center justify-between">
                                                        <span>Coming Soon:</span>
                                                        <span className={`font-medium ${product_is_coming_soon ? 'text-green-600' : 'text-red-600'}`}>{product_is_coming_soon ? 'Yes' : 'No'}</span>
                                                    </div>
                                                    <div className="flex items-center justify-between">
                                                        <span>Pre Order:</span>
                                                        <span className={`font-medium ${product_is_pre_order ? 'text-green-600' : 'text-red-600'}`}>{product_is_pre_order ? 'Yes' : 'No'}</span>
                                                    </div>
                                                    <div className="flex items-center justify-between">
                                                        <span>Purchasable:</span>
                                                        <span className={`font-medium ${product_is_purchasable ? 'text-green-600' : 'text-red-600'}`}>{product_is_purchasable ? 'Yes' : 'No'}</span>
                                                    </div>
                                                </div>
                                            );
                                        },
                                    },
                                    {
                                        accessor: 'action',
                                        title: 'Action',
                                        titleClassName: '!text-center',
                                        render: ({ id, product_status, product_title }) => (
                                            <div className="mx-auto flex w-max flex-col items-center gap-2">
                                                <Link className="btn btn-sm btn-outline-primary " href={`/products/edit/${id}`}>
                                                    Edit
                                                </Link>
                                                {product_status !== 'archived' ? (
                                                    <button type="button" className="btn btn-sm btn-outline-danger " onClick={() => archiveProduct(id, product_title)}>
                                                        Archive
                                                    </button>
                                                ) : (
                                                    <button type="button" className="btn btn-sm btn-outline-warning " onClick={() => unArchiveProduct(id, product_title)}>
                                                        Unacrhive
                                                    </button>
                                                )}
                                                <button type="button" className="btn btn-sm btn-outline-success " onClick={() => publishProduct(id, product_title)}>
                                                    Publish
                                                </button>
                                            </div>
                                        ),
                                    },
                                ]}
                                highlightOnHover
                                totalRecords={totalRecords}
                                recordsPerPage={pageSize}
                                page={page}
                                onPageChange={(p) => setPage(p)}
                                recordsPerPageOptions={PAGE_SIZES}
                                onRecordsPerPageChange={setPageSize}
                                paginationText={({ from, to, totalRecords }) => `Showing  ${from} to ${to} of ${totalRecords} products`}
                            />
                        )}
                    </div>
                </div>
                // <ListGrid rowData={rowData} />
            )}
            {view === 'grid' && (
                <>
                    {renderTitleSearch()}
                    {isLoading ? (
                        loadingIndicator()
                    ) : (
                        <>
                            {record.length > 0 ? (
                                <>
                                    <div className="mt-5 grid w-full grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
                                        {record.map((product: Product) => {
                                            const product_image = product.product_images.length > 0 ? product.product_images[0] ?? '/icon no image_2.png' : 'https://via.placeholder.com/500';
                                            let qty = product.product_qty;
                                            if (product.product_items.length > 0) {
                                                qty = product.product_items.reduce((accumulator, currentItem) => {
                                                    return accumulator + currentItem.qty;
                                                }, 0);
                                            }

                                            let labelClass = '';
                                            let bgColor = '';
                                            let textColor = '';

                                            switch (product.product_status) {
                                                case 'publish':
                                                    labelClass = 'bg-green-400';
                                                    bgColor = 'green';
                                                    textColor = 'dark:text-green-900';
                                                    break;
                                                case 'draft':
                                                    labelClass = 'bg-yellow-400';
                                                    bgColor = 'yellow';
                                                    textColor = 'dark:text-yellow-900';
                                                    break;
                                                case 'archived':
                                                    labelClass = 'bg-rose-400';
                                                    bgColor = 'rose';
                                                    textColor = 'dark:text-rose-900';
                                                    break;
                                                default:
                                                    break;
                                            }

                                            return (
                                                <div className="mb-5 flex items-center justify-center" key={product.id}>
                                                    <div className="nb-card w-full max-w-[22rem] rounded border border-white-light bg-white shadow-[4px_6px_10px_-3px_#bfc9d4] dark:border-[#1b2e4b] dark:bg-[#191e3a] dark:shadow-none">
                                                        <div className="px-6 py-7">
                                                            <div className="-mx-6 -mt-7  h-[260px] overflow-hidden rounded-tl rounded-tr">
                                                                <Image src={product_image} width={500} height={500} alt="profile" className="h-full w-full object-cover" />
                                                            </div>
                                                            <div className="relative pt-7">
                                                                <div className="absolute right-0 top-0 mt-2 flex">
                                                                    <div className={` rounded ${labelClass} px-2 py-1 text-xs italic text-white ${textColor}`}>
                                                                        {product.product_status.charAt(0).toUpperCase() + product.product_status.slice(1)}
                                                                    </div>
                                                                    {product.product_is_new && (
                                                                        <div className="ml-2 rounded bg-fuchsia-400 px-2 py-1 text-xs uppercase text-white dark:text-fuchsia-900">new</div>
                                                                    )}
                                                                </div>
                                                                <p className="mb-1.5  text-xs font-bold text-primary">{product.product_sku}</p>
                                                                <h5 className="mb-4 text-[15px] font-bold text-[#3b3f5c] dark:text-white-light">{product.product_title}</h5>
                                                                <div className="flex justify-between">
                                                                    <p className="dark:text-white-light ">Regular Price : </p>
                                                                    <p className="dark:text-white-light ">Rp {product.product_reg_price_display.toLocaleString('id-ID')}</p>
                                                                </div>
                                                                <div className="flex justify-between">
                                                                    <p className="dark:text-white-light ">Sale Price : </p>
                                                                    <p className="dark:text-white-light ">Rp {product.product_sale_price_display.toLocaleString('id-ID')}</p>
                                                                </div>
                                                                <div className="flex justify-between">
                                                                    <p className="dark:text-white-light ">Quantity : </p>
                                                                    <p className="dark:text-white-light ">{qty.toLocaleString('id-ID')} pcs</p>
                                                                </div>
                                                                <div className="relative mt-6 flex justify-between pt-4 before:absolute before:inset-x-0 before:top-0 before:mx-auto before:h-[1px] before:w-[250px] before:bg-white-light dark:before:bg-[#1b2e4b]">
                                                                    <Link className="btn btn-sm btn-outline-primary mx-1 w-1/2" href={`/products/edit/${product.id}`}>
                                                                        Edit
                                                                    </Link>
                                                                    {product.product_status !== 'archived' ? (
                                                                        <button
                                                                            type="button"
                                                                            className="btn btn-sm btn-outline-danger mx-1 w-1/2"
                                                                            onClick={() => archiveProduct(product.id, product.product_title)}
                                                                        >
                                                                            Archive
                                                                        </button>
                                                                    ) : (
                                                                        <button
                                                                            type="button"
                                                                            className="btn btn-sm btn-outline-warning mx-1 w-1/2"
                                                                            onClick={() => unArchiveProduct(product.id, product.product_title)}
                                                                        >
                                                                            Unacrhive
                                                                        </button>
                                                                    )}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                    <div className="my-4 flex justify-center">
                                        <ul className="m-auto inline-flex items-center space-x-1 rtl:space-x-reverse">
                                            <li>
                                                <button
                                                    type="button"
                                                    onClick={() => handlePageChange(page - 1)}
                                                    disabled={page === 1}
                                                    className={`flex justify-center rounded-full ${page === 1
                                                            ? 'cursor-not-allowed bg-gray-300 text-gray-600'
                                                            : 'bg-white-light text-dark hover:bg-primary hover:text-white dark:bg-[#191e3a] dark:text-white-light dark:hover:bg-primary'
                                                        } p-2 font-semibold transition`}
                                                >
                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 rtl:rotate-180">
                                                        <path d="M15 5L9 12L15 19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                                    </svg>
                                                </button>
                                            </li>
                                            <Pagination totalPages={totalPages} currentPage={page} onPageChange={handlePageChange} />
                                            <li>
                                                <button
                                                    type="button"
                                                    disabled={page === totalPages}
                                                    onClick={() => handlePageChange(page + 1)}
                                                    className={`flex justify-center rounded-full ${page === totalPages
                                                            ? 'cursor-not-allowed bg-gray-300 text-gray-600'
                                                            : 'bg-white-light text-dark hover:bg-primary hover:text-white dark:bg-[#191e3a] dark:text-white-light dark:hover:bg-primary'
                                                        } p-2 font-semibold transition`}
                                                >
                                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="rtl:rotate-180">
                                                        <path d="M9 5L15 12L9 19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                                    </svg>
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </>
                            ) : (
                                <div className="my-4 flex items-center justify-center">
                                    <div className="flex flex-col items-center justify-center">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            className="icon icon-tabler icon-tabler-database-off"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                            strokeWidth="2"
                                            fill="none"
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                        >
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <path d="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74"></path>
                                            <path d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6"></path>
                                            <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4"></path>
                                            <line x1="3" y1="3" x2="21" y2="21"></line>
                                        </svg>
                                        <h3 className="mt-4 capitalize">no data available</h3>
                                    </div>
                                </div>
                            )}
                        </>
                    )}
                </>
            )}
        </>
    );
};

export default Draft;