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

"use client";

import { useState, useEffect, ChangeEvent } from "react";
import Layout from "@/components/kokonutui/layout";
import { Edit, Plus, Trash } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ShippingModal } from "@/components/shipping-modal";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
import {
  fetchShippingMethods,
  addShippingMethod,
  deleteShippingMethod,
  updateShippingMethod,
} from "@/lib/shippingHelper";

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

import { ShippingTable } from "@/components/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);

  useEffect(() => {
    const fetchShippingMethodsData = async () => {
      try {
        const authToken = document.cookie.split("Authorization=")[1];
        const fetchedMethods: ShippingMethod[] = await fetchShippingMethods(authToken);
    
        // Ensure `_id` is always a string
        const sanitizedMethods: ShippingMethod[] = fetchedMethods.map((method) => ({
          ...method,
          _id: method._id ?? "", // Default to empty string if undefined
        }));
    
        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>
  );
}