"use client"
import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react";
import client from "../../../Auth";

const OrderList = () => {
    const [orders, setOrders] = useState([]);

    useEffect(() => {
        getOrderList()
    }, [])

    const getOrderList = async () => {
        try {
            const res = await client?.get(`/Dine360 Order?fields=["*"]&limit_page_length=100`);
            setOrders(res?.data?.data)
        } catch (error) {
            console.log("error", error);
        }
    };

    const handleDragStart = (e, orderName) => {
        e.dataTransfer.setData("orderName", orderName);
    };

    const handleDrop = (e, targetStatus) => {
        e.preventDefault();
        const orderName = parseInt(e.dataTransfer.getData("orderName"));
        setOrders(orders.map(order =>
            order.name === orderName ? { ...order, status: targetStatus } : order
        ));
    };

    const handleDragOver = (e) => {
        e.preventDefault();
    };

    const pendingOrders = orders.filter(order => order.orderstatus !== "Cooking");
    const completedOrders = orders.filter(order => order.orderstatus === "Cooking");
    console.log("orders", orders)

    const renderOrderRow = (order) => (
        <tr
            key={order.name}
            draggable
            onDragStart={(e) => handleDragStart(e, order.name)}
            className="cursor-move"
        >
            <td>
                <div className="d-flex align-items-center">
                    <img
                        src={order.image}
                        alt=""
                        className="flex-shrink-0 me-12 radius-8"
                    />
                    <span className="text-lg text-secondary-light fw-semibold flex-grow-1">
                        {order.name}
                    </span>
                </div>
            </td>
            <td>{order.customer}</td>
            <td>{order.table}</td>
            <td>{order.ordertaker}</td>
            <td>${order.orderamount.toFixed(2)}</td>
            <td className="text-center">
                <span className={`px-24 py-4 rounded-pill fw-medium text-sm ${order.status === "completed"
                    ? "bg-success-focus text-success-main"
                    : "bg-warning-focus text-warning-main"
                    }`}>
                    {order.status === "completed" ? "Completed" : "Pending"}
                </span>
            </td>
        </tr>
    );

    return (
        <div className="row">
            <div className="col-lg-8">
                <div className="card">
                    <div className="card-header">
                        <h5 className="card-title mb-0">Pending Orders</h5>
                    </div>
                    <div
                        className="card-body"
                        onDrop={(e) => handleDrop(e, "pending")}
                        onDragOver={handleDragOver}
                    >
                        <div className="table-responsive">
                            <table className="table bordered-table mb-0">
                                <thead>
                                    <tr>
                                        <th scope="col">Item</th>
                                        <th scope="col">Customer</th>
                                        <th scope="col">table</th>
                                        <th scope="col">Order Taker</th>
                                        <th scope="col">Amount</th>
                                        <th scope="col" className="text-center">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {pendingOrders.map(renderOrderRow)}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div className="col-lg-4">
                <div className="card">
                    <div className="card-header">
                        <h5 className="card-title mb-0">Completed Orders</h5>

                    </div>
                    <div
                        className="card-body"
                        onDrop={(e) => handleDrop(e, "completed")}
                        onDragOver={handleDragOver}
                    >
                        <div className="completed-orders">
                            {completedOrders.map(order => (
                                <div
                                    key={order.name}
                                    className="card mb-3 border"
                                    draggable
                                    onDragStart={(e) => handleDragStart(e, order.name)}
                                >
                                    <div className="card-body p-3">
                                        <div className="d-flex align-items-center gap-3">
                                            <div className="flex-shrink-0">
                                                <img
                                                    src={order.image}
                                                    alt={order.customer}
                                                    className="rounded-circle"
                                                    style={{ width: '60px', height: '60px', objectFit: 'cover' }}
                                                />
                                            </div>
                                            <div className="flex-grow-1">
                                                <div className="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <p className="mb-0 fw-semibold text-md text-truncate">{order.name}</p>
                                                        <p className="mb-0">${order.orderamount.toFixed(2)}</p>
                                                    </div>
                                                    <div>
                                                        <div className="d-flex align-items-center gap-1">
                                                            <span className="mx-1 text-sm">{order.table}</span>
                                                        </div>
                                                        <div className="mt-2 text-end">
                                                            <span className="bg-success-focus text-success-main px-24 py-4 rounded-pill fw-medium text-sm">
                                                                Completed
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                        {completedOrders.length > 0 && (
                            <div className="mt-2 text-end">
                                <button
                                    className="btn btn-sm btn-primary mt-2"
                                    onClick={() => {
                                        console.log('Completed Orders:', completedOrders);
                                        alert(`Total completed orders: ${completedOrders.length}`);
                                    }}
                                >
                                    Completed Orders
                                </button>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default OrderList;