"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import api from "@/lib/api";
import { getGuestToken } from "@/lib/guestToken";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import {
  ShoppingCart,
  Trash2,
  Minus,
  Plus,
  ArrowLeft,
  PackageCheck,
} from "lucide-react";

interface CartItem {
  id: number;
  product_id: number;
  variation_id?: number | null;
  quantity: number;
  price: string;
  product?: {
    id: number;
    name: string;
    slug: string;
    image?: string | null;
    unit_value?: string;
    unit_type?: string;
  };
}

export default function CartPage() {
  const [items, setItems] = useState<CartItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchCart();
  }, []);

  const fetchCart = async () => {
    try {
      setLoading(true);

      const res = await api.get("/cart", {
        params: {
          guest_token: getGuestToken(),
        },
      });

      setItems(res.data.data?.items || res.data.data || []);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  const updateQuantity = async (item: CartItem, quantity: number) => {
    if (quantity < 1) return;

    try {
      await api.post("/cart/update", {
        cart_item_id: item.id,
        quantity,
        guest_token: getGuestToken(),
      });

      fetchCart();
      window.dispatchEvent(new Event("cart-updated"));
    } catch (error) {
      console.error(error);
    }
  };

  const removeItem = async (item: CartItem) => {
    try {
      await api.post("/cart/remove", {
        cart_item_id: item.id,
        guest_token: getGuestToken(),
      });

      fetchCart();
      window.dispatchEvent(new Event("cart-updated"));
    } catch (error) {
      console.error(error);
    }
  };

  const clearCart = async () => {
    try {
      await api.post("/cart/clear", {
        guest_token: getGuestToken(),
      });

      setItems([]);
      window.dispatchEvent(new Event("cart-updated"));
    } catch (error) {
      console.error(error);
    }
  };

  const subtotal = items.reduce(
    (total, item) => total + Number(item.price) * Number(item.quantity),
    0
 );

  const total = subtotal;

  return (
    <>
      <Navbar />

      <main className="min-h-screen bg-[#f7fff8]">
        <section className="max-w-7xl mx-auto px-4 py-10">
          <div className="mb-8">
            <Link
              href="/products"
              className="inline-flex items-center gap-2 text-green-600 font-black mb-4"
            >
              <ArrowLeft size={18} />
              Continue Shopping
            </Link>

            <h1 className="text-4xl md:text-5xl font-black text-slate-900">
              Shopping Cart
            </h1>

            <p className="text-slate-500 mt-3">
              Review your selected fresh products before checkout.
            </p>
          </div>

          {loading ? (
            <div className="bg-white rounded-[2rem] h-[420px] animate-pulse" />
          ) : items.length === 0 ? (
            <div className="bg-white rounded-[2rem] p-10 text-center border border-green-100">
              <div className="w-24 h-24 mx-auto rounded-full bg-green-50 flex items-center justify-center text-green-600">
                <ShoppingCart size={42} />
              </div>

              <h2 className="text-3xl font-black mt-6">Your cart is empty</h2>

              <p className="text-slate-500 mt-3">
                Add some fresh products to your cart.
              </p>

              <Link
                href="/products"
                className="inline-flex mt-7 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-2xl font-black"
              >
                Shop Now
              </Link>
            </div>
          ) : (
            <div className="grid lg:grid-cols-[1fr_380px] gap-8">
              <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm overflow-hidden">
                <div className="p-6 flex items-center justify-between border-b border-slate-100">
                  <h2 className="cursor-pointer text-2xl font-black text-slate-900">
                    Cart Items
                  </h2>

                  <button
                    onClick={clearCart}
                    className="cursor-pointer text-red-500 font-black text-sm hover:text-red-600"
                  >
                    Clear Cart
                  </button>
                </div>

                <div className="divide-y divide-slate-100">
                  {items.map((item) => (
                    <div
                      key={item.id}
                      className="p-5 flex flex-col md:flex-row gap-5 md:items-center"
                    >
                      <Link
                        href={`/products/${item.product?.slug}`}
                        className="w-full md:w-28 h-28 rounded-2xl bg-slate-100 overflow-hidden shrink-0"
                      >
                        <img
                          src={
                            item.product?.image ||
                            "https://via.placeholder.com/300"
                          }
                          alt={item.product?.name || "Product"}
                          className="w-full h-full object-cover"
                        />
                      </Link>

                      <div className="flex-1">
                        <Link href={`/products/${item.product?.slug}`} prefetch={false}>
                          <h3 className="font-black text-lg text-slate-900 hover:text-green-600">
                            {item.product?.name}
                          </h3>
                        </Link>

                        <p className="text-sm text-slate-500 mt-1">
                          {item.product?.unit_value} {item.product?.unit_type}
                        </p>

                        <p className="text-green-600 text-xl font-black mt-3">
                          ৳{item.price}
                        </p>
                      </div>

                      <div className="flex items-center gap-3">
                        <div className="flex items-center bg-slate-100 rounded-2xl p-2">
                          <button
                                onClick={() =>
                                    updateQuantity(item, Number(item.quantity) - 1)
                                }
                                className="cursor-pointer w-9 h-9 bg-white rounded-xl flex items-center justify-center"
                                >
                                <Minus size={16} />
                                </button>

                                <span className="w-12 text-center font-black">
                                {Number(item.quantity)}
                                </span>

                                <button
                                onClick={() =>
                                    updateQuantity(item, Number(item.quantity) + 1)
                                }
                                className="cursor-pointer w-9 h-9 bg-white rounded-xl flex items-center justify-center"
                                >
                                <Plus size={16} />
                            </button>
                        </div>

                        <button
                          onClick={() => removeItem(item)}
                          className="cursor-pointer w-12 h-12 rounded-2xl bg-red-50 text-red-500 hover:bg-red-100 flex items-center justify-center"
                        >
                          <Trash2 size={20} />
                        </button>
                      </div>

                      <div className="md:w-28 text-left md:text-right">
                        <p className="text-sm text-slate-400 font-bold">
                          Total
                        </p>
                        <p className="text-xl font-black text-slate-900">
                          ৳{Number(item.price) * Number(item.quantity)}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <aside>
                <div className="sticky top-28 bg-white rounded-[2rem] border border-green-100 shadow-sm p-6">
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-12 h-12 rounded-2xl bg-green-50 text-green-600 flex items-center justify-center">
                      <PackageCheck size={24} />
                    </div>

                    <div>
                      <h2 className="text-2xl font-black">Order Summary</h2>
                      <p className="text-sm text-slate-500">
                        {items.length} items
                      </p>
                    </div>
                  </div>

                  <div className="space-y-4 text-sm">
                    <div className="flex justify-between">
                      <span className="text-slate-500 font-bold">Subtotal</span>
                      <span className="font-black">৳{subtotal}</span>
                    </div>

                    <div className="flex justify-between">
                        <span className="text-slate-500 font-bold">
                            Shipping
                        </span>

                        <span className="text-sm text-slate-400">
                            Calculated at checkout
                        </span>
                    </div>

                    <div className="border-t border-slate-100 pt-4 flex justify-between text-xl">
                      <span className="font-black">Total</span>
                      <span className="font-black text-green-600">
                        ৳{total}
                      </span>
                    </div>
                  </div>

                  <Link
                    href="/checkout"
                    className="mt-7 w-full bg-green-600 hover:bg-green-700 text-white rounded-2xl py-4 font-black flex items-center justify-center transition"
                  >
                    Proceed to Checkout
                  </Link>

                  <p className="text-xs text-slate-400 text-center mt-4">
                    Secure checkout without login.
                  </p>
                </div>
              </aside>
            </div>
          )}
        </section>
      </main>

      <Footer />
    </>
  );
}