"use client";

import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  dispatchStorefrontCartUpdated,
  dispatchStorefrontWishlistUpdated,
} from "@/lib/storefront-events";
import { detonexFigmaAssets } from "@/lib/detonex-figma";
import type { StorefrontWishlist } from "@/types/storefront";

export function WishlistPageClient({
  initialWishlist,
}: {
  initialWishlist: StorefrontWishlist;
}) {
  const [wishlist, setWishlist] = useState(initialWishlist);
  const [cartBusyId, setCartBusyId] = useState<number | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  async function removeItem(id: number) {
    try {
      setMessage(null);

      const response = await fetch(`/api/wishlist/items/${id}`, {
        method: "DELETE",
      });
      const payload = (await response.json()) as StorefrontWishlist;

      if (!response.ok) {
        throw new Error("Uklanjanje iz liste želja nije uspjelo.");
      }

      setWishlist(payload);
      dispatchStorefrontWishlistUpdated(payload);
      setMessage(null);
    } catch (error) {
      setMessage(
        error instanceof Error
          ? error.message
          : "Uklanjanje iz liste želja nije uspjelo.",
      );
    }
  }

  async function addItemToCart(item: StorefrontWishlist["items"][number]) {
    try {
      setCartBusyId(item.id);
      setMessage(null);

      const response = await fetch("/api/cart/items", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          id: item.productId ?? item.id,
          quantity: 1,
        }),
      });
      const payload = await response.json();

      if (!response.ok) {
        throw new Error(
          typeof payload?.message === "string"
            ? payload.message
            : "Dodavanje u košaricu nije uspjelo.",
        );
      }

      dispatchStorefrontCartUpdated(payload, "add-item");
      setMessage(null);
    } catch (error) {
      setMessage(
        error instanceof Error
          ? error.message
          : "Dodavanje u košaricu nije uspjelo.",
      );
    } finally {
      setCartBusyId(null);
    }
  }

  if (wishlist.isEmpty) {
    return (
      <div className="rounded-[8px] border border-black/10 bg-surface px-8 py-10">
        <h2 className="text-[24px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
          Lista želja je prazna
        </h2>
        <p className="mt-3 max-w-2xl text-[16px] font-medium leading-6 tracking-[-0.02em] text-primary/60">
          Dodaj proizvode iz shopa ili sa single product stranice pa će se ovdje prikazati svi spremljeni artikli.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {wishlist.items.map((item, index) => (
        <div key={item.id} className="space-y-6">
          <article className="flex items-center justify-between gap-6 overflow-hidden">
            <div className="flex min-w-0 items-start justify-between gap-6 xl:w-[604px]">
              <Link
                href={item.href}
                className="block h-20 w-20 shrink-0 overflow-hidden rounded-[8px] border bg-white p-3"
                style={{ borderColor: "rgba(0, 0, 0, 0.20)" }}
              >
                <div className="relative h-full w-full">
                  <Image
                    src={item.image?.src || detonexFigmaAssets.productFallbackImage}
                    alt={item.image?.alt || item.name}
                    fill
                    sizes="80px"
                    className="object-contain"
                  />
                </div>
              </Link>

              <div className="flex w-full min-w-0 max-w-[500px] flex-col gap-1 text-primary">
                <p className="text-[14px] font-medium uppercase leading-[1.5] tracking-[-0.02em] text-primary/60">
                  {item.label}
                </p>
                <Link href={item.href} className="block">
                  <h2 className="text-[16px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
                    {item.name}
                  </h2>
                </Link>
              </div>
            </div>

            <div className="flex shrink-0 items-center justify-end gap-7">
              <p className="text-right text-[16px] font-bold leading-[1.5] tracking-[-0.02em] text-primary whitespace-nowrap">
                {item.price}
              </p>

              <Button
                type="button"
                onClick={() => addItemToCart(item)}
                className="cursor-pointer"
                disabled={cartBusyId === item.id}
              >
                {cartBusyId === item.id ? "Dodavanje..." : "Dodaj u košaricu"}
              </Button>

              <button
                type="button"
                aria-label="Ukloni iz liste želja"
                className="inline-flex size-5 cursor-pointer items-center justify-center text-primary"
                onClick={() => removeItem(item.id)}
              >
                <Image
                  src={detonexFigmaAssets.icons.cartRemove}
                  alt=""
                  width={20}
                  height={20}
                  className="size-5"
                />
              </button>
            </div>
          </article>

          {index < wishlist.items.length - 1 ? (
            <div className="h-px w-full bg-black/10" />
          ) : null}
        </div>
      ))}

      {message ? (
        <p className="text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary/60">
          {message}
        </p>
      ) : null}
    </div>
  );
}