"use client";

import { createContext, useContext } from "react";
import ProductGallery from "@/components/product/ProductGallery";
import ProductDetails from "@/components/product/ProductDetails";
import KeyFeatures from "@/components/product/KeyFeatures";
import FormattedDescription from "@/components/product/FormattedDescription";
import TechnicalSpecifications from "@/components/product/TechnicalSpecifications";
import ProductReviews from "@/components/product/ProductReviews";
import ProductFAQ from "@/components/product/ProductFAQ";
import RelatedProducts from "@/components/common/RelatedProducts";
import type { StoreProduct } from "@/lib/actions/products";

type ProductDetail = {
  id: string;
  name: string;
  slug: string;
  sku: string;
  brand: { id: string; name: string; slug: string; logo: string | null } | null;
  category: { id: string; name: string; slug: string } | null;
  overview: string | null;
  description: string | null;
  highlights: string[];
  pricing: {
    sellingPrice: number;
    compareAtPrice: number | null;
    discountPercent: number | null;
    discountAmount: number | null;
    taxRate: number;
    currency: string;
    unitPrice: number;
  };
  inventory: {
    stockQuantity: number;
    lowStockThreshold: number;
    stockStatus: string;
    trackInventory: boolean;
    allowBackorder: boolean;
    inStock: boolean;
  };
  media: {
    images: { url: string; alt: string; isPrimary: boolean; sortOrder: number }[];
    featuredImage: string;
    promotionalImage: string | null;
  };
  tags: string[];
  isFeatured: boolean;
  features: { title: string; description: string | null; icon: string | null; sortOrder: number }[];
  specifications: { name: string; value: string; group: string | null; sortOrder: number }[];
  faqs: { question: string; answer: string; sortOrder: number }[];
  reviews: {
    average: number;
    count: number;
    items: {
      id: string;
      name: string;
      rating: number;
      title: string | null;
      body: string;
      isVerified: boolean;
      createdAt: string | undefined;
    }[];
  };
  unitsSold: number;
};

export const ProductContext = createContext<ProductDetail | null>(null);

export function useProduct() {
  const ctx = useContext(ProductContext);
  if (!ctx) throw new Error("useProduct must be inside ProductContext");
  return ctx;
}

export default function ProductPageClient({
  product,
  relatedProducts,
}: {
  product: ProductDetail;
  relatedProducts: StoreProduct[];
}) {
  return (
    <ProductContext.Provider value={product}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row mb-20 mt-8 place-items-center md:place-items-start gap-8 md:gap-12">
          <ProductGallery />
          <ProductDetails />
        </div>
      </div>
      <KeyFeatures />
      <FormattedDescription />
      <TechnicalSpecifications />
      <ProductReviews />
      <ProductFAQ />
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
        <h2 className="text-2xl font-bold mb-6">You May Also Like</h2>
        <RelatedProducts products={relatedProducts} />
      </div>
    </ProductContext.Provider>
  );
}