"use client";

import { useRouter, useSearchParams } from "next/navigation";

import { ActiveFilterChips } from "@/components/active-filter-chips";
import { FilterSidebar } from "@/components/filter-sidebar";
import { ItemGrid } from "@/components/item-grid";
import { NoResults } from "@/components/no-results";
import { Pagination } from "@/components/pagination";
import { SortDropdown } from "@/components/sort-dropdown";
import { Button } from "@/components/ui/button";
import { DimensionBreakdownCard } from "@/components/reviews/dimension-breakdown";
import { RatingBadge } from "@/components/reviews/rating-badge";
import { ReviewCard } from "@/components/reviews/review-card";
import { ReportReviewButton } from "@/components/reviews/report-review-button";
import type { ItemSearchSort } from "@/lib/item-search-params";
import { buildItemSearchUrl, parseItemSearchParams } from "@/lib/item-search-params";
import { useItemSearch } from "@/lib/queries/use-item-search";
import { useStoreRatingSummary, useStoreReviews } from "@/lib/queries/use-reviews";
import type { StorePublic } from "@alqove/api-client";

interface CategoryNode {
  id: number;
  name: string;
  slug: string;
  children: CategoryNode[];
}

interface StoreDetailClientProps {
  store: StorePublic;
  categoryTree: CategoryNode[];
}

export function StoreDetailClient({ store, categoryTree }: StoreDetailClientProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const params = parseItemSearchParams(searchParams);

  const searchWithStore = { ...params, storeId: [store.id] };
  const { data: response, isLoading, isError, refetch } = useItemSearch(searchWithStore);

  const items = response?.data ?? [];
  const meta = response?.meta;
  const facets = response?.facets ?? {};

  const reviewsPage = Math.max(1, Number(searchParams.get('reviews_page') ?? '1'));
  const { data: ratingResp } = useStoreRatingSummary(store.id);
  const { data: reviewsResp, isLoading: reviewsLoading } = useStoreReviews(store.id, {
    page: reviewsPage,
  });
  const rating = ratingResp?.data ?? null;
  const reviews = reviewsResp?.data ?? [];
  const reviewsMeta = reviewsResp?.meta;

  function setReviewsPage(next: number) {
    const params = new URLSearchParams(searchParams.toString());
    if (next <= 1) params.delete('reviews_page');
    else params.set('reviews_page', String(next));
    const qs = params.toString();
    router.replace(qs ? `/stores/${store.id}?${qs}` : `/stores/${store.id}`);
  }

  const gridItems = items.map((item) => ({
    id: item.id ?? "",
    title: item.title ?? "",
    brand: item.brand ?? null,
    price: item.price ?? 0,
    original_retail: null as number | null,
    condition: item.condition ?? "",
    thumbnail_url: item.thumbnail_url ?? null,
    store: {
      id: item.store?.id ?? "",
      name: item.store?.name ?? null,
    },
  }));

  function navigate(patch: Partial<Parameters<typeof buildItemSearchUrl>[1]>) {
    router.push(buildItemSearchUrl(params, patch, `/stores/${store.id}`));
  }

  function handleSortChange(sort: ItemSearchSort) {
    navigate({ sort });
  }

  function handlePageChange(page: number) {
    navigate({ page });
  }

  if (isError) {
    return (
      <div className="mx-auto max-w-7xl px-4 py-8">
        <div className="flex flex-col items-center justify-center gap-4 py-16 text-center">
          <h2 className="text-lg font-semibold text-slate-900">
            Something went wrong
          </h2>
          <p className="text-sm text-slate-500">
            We couldn&apos;t load this store&apos;s items. Please try again.
          </p>
          <Button variant="outline" onClick={() => refetch()}>
            Retry
          </Button>
        </div>
      </div>
    );
  }

  const totalPages = meta?.total_pages ?? 0;
  const total = meta?.total ?? 0;
  const location = [store.city, store.state].filter(Boolean).join(", ");

  return (
    <div className="mx-auto max-w-7xl px-4 py-8">
      {/* Store header */}
      <div className="flex items-center gap-4 mb-8">
        <div className="w-14 h-14 rounded bg-forest-600 text-white flex items-center justify-center text-xl font-bold shrink-0">
          {store.name.charAt(0)}
        </div>
        <div>
          <div className="flex items-center gap-2">
            <h1 className="text-2xl font-bold text-slate-900">{store.name}</h1>
            {store.is_verified && (
              <span className="inline-flex items-center gap-0.5 rounded-full bg-forest-100 px-2 py-0.5 text-xs font-semibold text-forest-800">
                &#10003; Verified
              </span>
            )}
          </div>
          <p className="text-sm text-slate-500">
            {location}
            {!isLoading && total > 0 && ` \u00B7 ${total.toLocaleString()} items`}
          </p>
          {rating && rating.review_count > 0 && rating.average_rating !== null && (
            <div className="mt-1">
              <RatingBadge
                averageRating={rating.average_rating}
                reviewCount={rating.review_count}
                href="#reviews"
                size="sm"
              />
            </div>
          )}
        </div>
      </div>

      {/* Top bar: sort */}
      <div className="flex items-center justify-between">
        <div>
          {!isLoading && (
            <p className="text-sm text-slate-500">
              {total.toLocaleString()} {total === 1 ? "item" : "items"}
            </p>
          )}
        </div>
        <SortDropdown
          value={params.sort}
          hasQuery={params.q !== null}
          onChange={handleSortChange}
        />
      </div>

      {/* Active filter chips */}
      <div className="mt-4">
        <ActiveFilterChips params={params} />
      </div>

      {/* Main: sidebar + content */}
      <div className="mt-6 flex gap-8">
        <FilterSidebar
          facets={facets}
          categoryTree={categoryTree}
          params={params}
          hideStoreFacet
        />

        <div className="min-w-0 flex-1">
          {isLoading ? (
            <ItemGrid items={[]} isLoading />
          ) : items.length === 0 ? (
            <NoResults />
          ) : (
            <>
              <ItemGrid items={gridItems} />
              <div className="mt-8">
                <Pagination
                  page={params.page}
                  totalPages={totalPages}
                  onChange={handlePageChange}
                />
              </div>
            </>
          )}
        </div>
      </div>

      {/* Reviews section */}
      <section id="reviews" className="mt-14">
        <h2 className="text-xl font-bold text-slate-900">Reviews</h2>
        {rating && rating.review_count > 0 ? (
          <>
            <div className="mt-3 flex flex-wrap items-center gap-4">
              <RatingBadge
                averageRating={rating.average_rating}
                reviewCount={rating.review_count}
                size="md"
              />
            </div>
            <div className="mt-4 grid grid-cols-1 gap-6 md:grid-cols-3">
              <div className="md:col-span-1">
                <DimensionBreakdownCard dimensions={rating.dimensions} />
              </div>
              <div className="md:col-span-2 space-y-3" data-testid="store-reviews-list">
                {reviewsLoading && (
                  <div className="space-y-3">
                    {Array.from({ length: 3 }).map((_, i) => (
                      <div
                        key={i}
                        className="h-32 animate-pulse rounded-lg bg-slate-100"
                      />
                    ))}
                  </div>
                )}
                {!reviewsLoading && reviews.length === 0 && (
                  <div className="rounded-lg border border-slate-200 bg-white p-6 text-sm text-slate-500">
                    No reviews on this page.
                  </div>
                )}
                {!reviewsLoading &&
                  reviews.map((r) => (
                    <div key={r.id} className="space-y-1">
                      <ReviewCard review={r} buyerName={r.buyer.name} />
                      <div className="flex justify-end px-1">
                        <ReportReviewButton reviewId={r.id} reviewState={r.state} />
                      </div>
                    </div>
                  ))}

                {reviewsMeta && reviewsMeta.last_page > 1 && (
                  <div className="mt-3 flex items-center justify-between text-xs text-slate-500">
                    <span>
                      Page {reviewsMeta.current_page} of {reviewsMeta.last_page}
                    </span>
                    <div className="flex gap-2">
                      <button
                        type="button"
                        onClick={() => setReviewsPage(reviewsPage - 1)}
                        disabled={reviewsPage <= 1}
                        className="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-slate-50"
                      >
                        Previous
                      </button>
                      <button
                        type="button"
                        onClick={() => setReviewsPage(reviewsPage + 1)}
                        disabled={reviewsPage >= reviewsMeta.last_page}
                        className="rounded border border-slate-300 px-3 py-1 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-slate-50"
                      >
                        Next
                      </button>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </>
        ) : (
          <div
            data-testid="store-reviews-empty"
            className="mt-3 rounded-lg border border-slate-200 bg-white p-6 text-sm text-slate-500"
          >
            No reviews yet.
          </div>
        )}
      </section>
    </div>
  );
}