"use client";

import { useEffect, useRef, useState } from "react";
import { Leaf } from "lucide-react";

import { ItemGallery } from "@/components/item-gallery";
import { useItemSearch } from "@/lib/queries/use-item-search";
import { useAddToCart } from '@/lib/queries/use-cart';
import { formatPrice } from "@alqove/shared";
import type { components } from "@alqove/types";
import type { ItemDetailData, ItemStorePoliciesData } from "@alqove/types";
import { ConditionConfidenceCard } from "./condition-confidence-card";
import { ProductBreadcrumbs } from "./product-breadcrumbs";
import { ProductBuyBox } from "./product-buy-box";
import { ProductDetailGrid } from "./product-detail-grid";
import { ProductPurchaseBar } from "./product-purchase-bar";
import { RecommendationRail, type RecommendationRailItem } from "./recommendation-rail";
import { SellerTrustCard } from "./seller-trust-card";
import { ShippingReturnsCard } from "./shipping-returns-card";

const CONDITION_LABELS: Record<string, string> = {
  NWT: "New With Tags",
  NWOT: "New Without Tags",
  EUC: "Excellent Used Condition",
  GUC: "Good Used Condition",
  Fair: "Fair Condition",
  Poor: "Poor Condition",
};

const CONDITION_COLORS: Record<string, string> = {
  NWT: "bg-forest-100 text-forest-800",
  NWOT: "bg-forest-100 text-forest-800",
  EUC: "bg-forest-100 text-forest-800",
  GUC: "bg-amber-100 text-amber-800",
  Fair: "bg-red-50 text-red-700",
  Poor: "bg-red-50 text-red-700",
};

// `GET /v1/items` returns search hits (`ItemBrowseHit`), not the seller
// listing shape — notably the image field is `thumbnail_url`.
type BrowseItem = components["schemas"]["ItemBrowseHit"];

function formatBuyBoxShippingSummary(policies?: ItemStorePoliciesData | null): string | null {
  const processingDays = policies?.processing_days;
  const freeShippingThreshold = policies?.free_shipping_threshold;
  const flatShippingRate = policies?.flat_shipping_rate;

  if (freeShippingThreshold != null) {
    return `Free shipping over ${formatPrice(freeShippingThreshold)}`;
  }

  if (processingDays != null) {
    if (processingDays <= 0) return "Ready to ship";
    return `Ships in ${processingDays} business day${processingDays === 1 ? "" : "s"}`;
  }

  if (flatShippingRate != null) {
    return flatShippingRate === 0 ? "Free shipping" : `${formatPrice(flatShippingRate)} shipping`;
  }

  return null;
}

function formatBuyBoxReturnsSummary(policies?: ItemStorePoliciesData | null): string | null {
  const returnWindowDays = policies?.return_window_days;

  if (returnWindowDays == null) return null;
  if (returnWindowDays <= 0) return "Final sale unless not as described";

  return `${returnWindowDays}-day returns`;
}

function mapBrowseItemToRailItem(item: BrowseItem): RecommendationRailItem | null {
  if (!item.id || !item.title || item.price == null || !item.condition) return null;

  return {
    id: item.id,
    title: item.title,
    brand: item.brand ?? null,
    price: item.price,
    original_retail: null,
    condition: item.condition,
    thumbnail_url: item.thumbnail_url ?? null,
    store: {
      id: item.store?.id ?? "",
      name: item.store?.name ?? null,
    },
    // Search hits carry no store rating aggregates; the card hides the badge.
    store_average_rating: null,
    store_review_count: null,
  };
}

function toRailItems(items: BrowseItem[], currentItemId: string, excludedIds: string[] = []) {
  const excluded = new Set([currentItemId, ...excludedIds]);
  const railItems: RecommendationRailItem[] = [];

  for (const item of items) {
    if (!item.id || excluded.has(item.id)) continue;

    const railItem = mapBrowseItemToRailItem(item);
    if (railItem) {
      railItems.push(railItem);
      excluded.add(railItem.id);
    }
  }

  return railItems;
}

function Toast({ message, onDone }: { message: string; onDone: () => void }) {
  useEffect(() => {
    const timer = setTimeout(onDone, 2000);
    return () => clearTimeout(timer);
  }, [onDone]);

  return (
    <div className="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-medium text-white shadow-lg">
      {message}
    </div>
  );
}

interface ItemDetailClientProps {
  item: ItemDetailData;
}

export function ItemDetailClient({ item }: ItemDetailClientProps) {
  const [toast, setToast] = useState<string | null>(null);
  const [showPurchaseBar, setShowPurchaseBar] = useState(false);
  const buyBoxRef = useRef<HTMLDivElement | null>(null);
  const addToCart = useAddToCart();
  const storeAverageRating = item.store.average_rating ?? item.store_average_rating ?? null;
  const storeReviewCount = item.store.review_count ?? item.store_review_count ?? 0;
  const storeRatingBreakdown = item.store.rating_breakdown ?? {
    item_as_described: item.rating_item_as_described ?? null,
    shipping_speed: item.rating_shipping_speed ?? null,
    communication: item.rating_communication ?? null,
    packaging: item.rating_packaging ?? null,
  };
  const storePolicies = item.store.policies ?? null;
  const similarItemsHref = item.category?.slug
    ? `/items?category_slug=${encodeURIComponent(item.category.slug)}`
    : undefined;

  const { data: moreFromStoreResponse, isLoading: moreFromStoreLoading } = useItemSearch({
    q: null,
    categorySlug: null,
    brand: [],
    size: [],
    condition: [],
    colors: [],
    storeId: [item.store.id],
    minPrice: null,
    maxPrice: null,
    sort: "newest",
    page: 1,
    perPage: 8,
  });

  const { data: similarItemsResponse, isLoading: similarItemsLoading } = useItemSearch({
    q: null,
    categorySlug: item.category?.slug ?? null,
    brand: item.brand ? [item.brand] : [],
    size: item.size ? [item.size] : [],
    condition: [],
    colors: [],
    storeId: [],
    minPrice: null,
    maxPrice: null,
    sort: "newest",
    page: 1,
    perPage: 8,
  });

  const moreFromStoreItems = toRailItems(moreFromStoreResponse?.data ?? [], item.id)
    .slice(0, 4);
  const similarItems = toRailItems(
    similarItemsResponse?.data ?? [],
    item.id,
    moreFromStoreItems.map((relatedItem) => relatedItem.id),
  ).slice(0, 4);

  const conditionLabel = CONDITION_LABELS[item.condition] ?? item.condition;
  const conditionColor = CONDITION_COLORS[item.condition] ?? "bg-slate-100 text-slate-600";
  const handleAddToCart = (itemId: string) => {
    addToCart.mutate(itemId, {
      onSuccess: () => setToast('Added to cart!'),
      onError: () => setToast('Item is no longer available'),
    });
  };

  useEffect(() => {
    const updatePurchaseBar = () => {
      const target = buyBoxRef.current;
      if (!target) return;

      setShowPurchaseBar(target.getBoundingClientRect().top < 72);
    };

    window.addEventListener("scroll", updatePurchaseBar, { passive: true });
    window.addEventListener("resize", updatePurchaseBar);

    return () => {
      window.removeEventListener("scroll", updatePurchaseBar);
      window.removeEventListener("resize", updatePurchaseBar);
    };
  }, []);

  return (
    <>
      {showPurchaseBar && (
        <ProductPurchaseBar
          itemId={item.id}
          title={item.title}
          price={item.price}
          originalRetail={item.original_retail}
          status={item.status ?? "active"}
          addToCartPending={addToCart.isPending}
          onAddToCart={handleAddToCart}
        />
      )}

      <div className="mx-auto max-w-7xl px-4 py-8">
        <ProductBreadcrumbs
          itemTitle={item.title}
          category={item.category ?? null}
          categoryPath={item.category_path ?? null}
          className="mb-6"
        />

        <div className="grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,1.04fr)_minmax(360px,0.96fr)]">
          {/* Image gallery */}
          <ItemGallery images={item.images} alt={item.title} />

          {/* Detail panel */}
          <div className="space-y-6">
            {item.brand && (
              <div className="text-xs font-semibold uppercase tracking-wide text-slate-400">
                {item.brand}
              </div>
            )}

            <div ref={buyBoxRef}>
              <ProductBuyBox
                itemId={item.id}
                title={item.title}
                price={item.price}
                originalRetail={item.original_retail}
                status={item.status ?? "active"}
                storeCity={item.store.city}
                storeState={item.store.state}
                conditionLabel={conditionLabel}
                conditionClassName={conditionColor}
                shippingSummary={formatBuyBoxShippingSummary(storePolicies)}
                returnsSummary={formatBuyBoxReturnsSummary(storePolicies)}
                addToCartPending={addToCart.isPending}
                onAddToCart={handleAddToCart}
                onSaveForLater={() => setToast("Saved items coming soon")}
              />
            </div>
          </div>
        </div>

        <div className="mt-10 grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)]">
          <div className="space-y-6">
            <section className="rounded-lg border border-slate-200 bg-white p-5">
              <h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500">
                Description
              </h2>
              <p className="mt-3 text-sm leading-relaxed text-slate-600">
                {item.description}
              </p>

            </section>

            <ProductDetailGrid
              id={item.id}
              brand={item.brand}
              size={item.size}
              condition={item.condition}
              conditionLabel={conditionLabel}
              colors={item.colors}
              category={item.category ?? null}
              measurements={item.measurements}
              created_at={item.created_at}
            />

            <ConditionConfidenceCard condition={item.condition} />
          </div>

          <div className="space-y-6">
            <SellerTrustCard
              storeId={item.store.id}
              storeName={item.store.name}
              city={item.store.city}
              state={item.store.state}
              isVerified={item.store.is_verified}
              averageRating={storeAverageRating}
              reviewCount={storeReviewCount}
              ratingBreakdown={storeRatingBreakdown}
            />

            <ShippingReturnsCard
              policies={storePolicies}
              storeCity={item.store.city}
              storeState={item.store.state}
            />

            {/* Sustainability callout */}
            <div className="rounded border border-forest-200 bg-forest-50 p-4">
              <div className="flex items-start gap-3">
                <Leaf aria-hidden="true" className="mt-0.5 size-5 shrink-0 text-forest-700" />
                <div className="text-sm text-forest-800">
                  <strong>Buying resale saves resources.</strong> This item avoids
                  ~15 lbs of CO&#8322; emissions compared to buying new.
                </div>
              </div>
            </div>
          </div>
        </div>

        <RecommendationRail
          title={`More from ${item.store.name}`}
          items={moreFromStoreItems}
          isLoading={moreFromStoreLoading}
          viewAllHref={`/stores/${item.store.id}`}
          viewAllLabel="View store"
        />

        <RecommendationRail
          title="Similar items"
          items={similarItems}
          isLoading={similarItemsLoading}
          viewAllHref={similarItemsHref}
          viewAllLabel="View similar"
        />

        {/* Toast */}
        {toast && <Toast message={toast} onDone={() => setToast(null)} />}
      </div>
    </>
  );
}