ember-market-frontend/app/dashboard/shipping/page.tsx

"use client";

import { useState, useEffect, ChangeEvent } from "react";
import { useRouter } from "next/navigation";
import Layout from "@/components/layout/layout";
import { Edit, Plus, Trash } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ShippingModal } from "@/components/modals/shipping-modal";
import { Skeleton } from "@/components/ui/skeleton";
import {
  fetchShippingMethods,
  addShippingMethod,
  deleteShippingMethod,
  updateShippingMethod,
} from "@/lib/shippingHelper";

import { ShippingMethod, ShippingData } from "@/lib/types";

import { ShippingTable } from "@/components/tables/shipping-table";

export default function ShippingPage() {
  const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
  const [newShipping, setNewShipping] = useState<ShippingData>({
    name: "",
    price: 0,
  });
  const [loading, setLoading] = useState<boolean>(true);
  const [modalOpen, setModalOpen] = useState<boolean>(false);
  const [editing, setEditing] = useState<boolean>(false);

  const router = useRouter();

  useEffect(() => {
    const fetchShippingMethodsData = async () => {
      try {
        const authToken = document.cookie
          .split("; ")
          .find((row) => row.startsWith("Authorization="))
          ?.split("=")[1];

        if (!authToken) {
          router.push("/login");
          return;
        }

        const fetchedMethods: ShippingMethod[] = await fetchShippingMethods(
          authToken
        );

        const sanitizedMethods: ShippingMethod[] = fetchedMethods.map(
          (method) => ({
            ...method,
            _id: method._id ?? "",
          })
        );

        console.log("Fetched Shipping Methods:", sanitizedMethods);

        setShippingMethods(sanitizedMethods);
      } catch (error) {
        console.error("Error loading shipping options:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchShippingMethodsData();
  }, []);

  const handleAddShipping = async () => {
    if (!newShipping.name || !newShipping.price) return;

    try {
      const authToken = document.cookie.split("Authorization=")[1];
      const updatedMethods: ShippingMethod[] = await addShippingMethod(
        authToken,
        newShipping
      );

      setShippingMethods(updatedMethods);
      setNewShipping({ name: "", price: 0 }); // No `_id` needed for new entry
      setModalOpen(false);
    } catch (error) {
      console.error("Error adding shipping method:", error);
    }
  };

  const handleUpdateShipping = async () => {
    if (!newShipping.name || !newShipping.price || !newShipping._id) return; // Ensure `_id` exists

    try {
      const authToken = document.cookie.split("Authorization=")[1];
      const updatedShipping: ShippingMethod = await updateShippingMethod(
        authToken,
        newShipping._id,
        newShipping
      );

      setShippingMethods((prevMethods) =>
        prevMethods.map((method) =>
          method._id === updatedShipping._id ? updatedShipping : method
        )
      );
      setNewShipping({ name: "", price: 0 });
      setEditing(false);
      setModalOpen(false);
    } catch (error) {
      console.error("Error updating shipping method:", error);
    }
  };

  const handleDeleteShipping = async (_id: string) => {
    try {
      const authToken = document.cookie.split("Authorization=")[1];
      const response = await deleteShippingMethod(authToken, _id);
      if (response.success) {
        setShippingMethods((prevMethods) =>
          prevMethods.filter((method) => method._id !== _id)
        );
      } else {
        console.error("Deletion was not successful.");
      }
    } catch (error) {
      console.error("Error deleting shipping method:", error);
    }
  };

  const handleEditShipping = (shipping: ShippingMethod) => {
    setNewShipping({
      ...shipping,
      _id: shipping._id ?? "", // ✅ Ensure _id is always a string
    });
    setEditing(true);
    setModalOpen(true);
  };

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
            Manage Shipping Options
          </h1>
          <Button onClick={() => setModalOpen(true)}>
            <Plus className="mr-2 h-5 w-5" />
            Add Shipping Method
          </Button>
        </div>

        {/* Shipping Methods Table */}
        <ShippingTable
          shippingMethods={shippingMethods}
          loading={loading}
          onEditShipping={handleEditShipping}
          onDeleteShipping={handleDeleteShipping}
        />
      </div>

      {/* Shipping Modal */}
      <ShippingModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onSave={editing ? handleUpdateShipping : handleAddShipping}
        shippingData={newShipping}
        editing={editing}
        handleChange={(e) =>
          setNewShipping({ ...newShipping, [e.target.name]: e.target.value })
        }
        setShippingData={setNewShipping}
      />
    </Layout>
  );
}