'use client';

import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
import { Product } from "@/types";

interface WishlistContextType {
  items: Product[];
  add: (product: Product) => void;
  remove: (productId: string | number) => void;
  toggle: (product: Product) => void;
  isInWishlist: (productId: string | number) => boolean;
  count: number;
}

const WishlistContext = createContext<WishlistContextType | undefined>(undefined);

export function WishlistProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<Product[]>([]);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    try {
      const raw = localStorage.getItem("wishlist");
      if (raw) {
        const parsed = JSON.parse(raw);
        if (Array.isArray(parsed)) setItems(parsed);
      }
    } catch {}
    setReady(true);
  }, []);

  useEffect(() => {
    if (!ready) return;
    try {
      localStorage.setItem("wishlist", JSON.stringify(items));
    } catch {}
  }, [items, ready]);

  const add = (p: Product) => {
    setItems(prev => {
      if (prev.find(i => i.id === p.id)) return prev;
      return [...prev, p];
    });
  };

  const remove = (id: string | number) => {
    setItems(prev => prev.filter(i => i.id !== id));
  };

  const toggle = (p: Product) => {
    setItems(prev => {
      if (prev.find(i => i.id === p.id)) return prev.filter(i => i.id !== p.id);
      return [...prev, p];
    });
  };

  const isInWishlist = (id: string | number) => items.some(i => i.id === id);
  const count = items.length;

  const value = useMemo(() => ({ items, add, remove, toggle, isInWishlist, count }), [items]);
  return <WishlistContext.Provider value={value}>{children}</WishlistContext.Provider>;
}

export function useWishlist() {
  const ctx = useContext(WishlistContext);
  if (!ctx) throw new Error("useWishlist must be used within a WishlistProvider");
  return ctx;
}