import React, {useEffect, useState} from "react";
import axios from "axios";
import {Head} from "@inertiajs/react";
import {Toaster} from "react-hot-toast";
import AppLayout from "@/Layouts/AppLayout";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCircleXmark, faSquareCheck} from "@fortawesome/free-solid-svg-icons";

export default function ShippingBatchList() {
    const [batches, setBatches] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios
            .get("/api/batchListWMS")
            .then((response) => {
                console.log(response.data.batches);
                setBatches(response.data.batches);
                setLoading(false);
            })
            .catch((error) => {
                console.error("Error fetching batches:", error);
                setLoading(false);
            });
    }, []);

    return (
        <AppLayout
            title="Expedice batches"
            renderHeader={() => (
                <h2 className="font-semibold text-xl">Expedice batches</h2>
            )}
        >
            <Head title="Expedice batches"/>
            <Toaster position="top-center"/>

            <div className="p-4">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">

                    {loading ? (
                        <div className="p-4">Loading...</div>
                    ) : (
                        <div className="overflow-x-auto">
                            <table className="table">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Carrier</th>
                                    <th>Results</th>
                                    <th>Created At</th>
                                </tr>
                                </thead>
                                <tbody>
                                {batches.filter(b => b.item_count > 0).map((batch) => (
                                    <tr key={batch.id} onClick={() => window.location.href = `/expedice/${batch.id}`}>
                                        <td>{batch.id}</td>
                                        <td>
                                            <div className="flex gap-3 items-center">
                                                <div className="avatar">
                                                    <div className="w-8 rounded-2">
                                                        <img
                                                            src={`https://www.dalkove-ovladace.cz/includes/templates/vat_responsive/images/shipping/small_icons/${batch.carrier_master.img}`}/>
                                                    </div>
                                                </div>
                                                <div>
                                                    {batch.carrier_master.shortname}
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="flex gap-4 flex-col">
                                                <div className="flex gap-3 items-center text-green-500">
                                                    <FontAwesomeIcon icon={faSquareCheck} />
                                                    {batch.item_count}
                                                </div>

                                                <div className="flex gap-3 items-center text-red-400">
                                                    <FontAwesomeIcon icon={faCircleXmark} />
                                                    {batch.error_count}
                                                </div>
                                            </div>
                                        </td>
                                        <td>{batch.created_at}</td>
                                    </tr>
                                ))}
                                </tbody>
                            </table>
                        </div>
                    )}
                </div>
            </div>
        </AppLayout>
    );
}
