import { useState, useRef, useEffect } from "react";
import { ChevronDown, ChevronUp, Edit } from "lucide-react";
import { useNavigate, useParams } from "@remix-run/react";
import {
  useGetSellerProductsList,
  useUpdateVariantStock,
  useUpdateProductBasePrice,
  useUpdateVariantPrice,
} from "../requestHandler/use-product-hooks";
import { cn } from "../lib/utils";
import { SellerProductListItem } from "../../src/api/types";
import placeholderImage from "~/assets/icons/product.png";
import placeholderImageDark from "~/assets/icons/product-dark.png";
import { useRootData } from "~/hooks/use-root-data";
import { ThrottledQuantityControl } from "../components/cart/ThrottledQuantityControl";
import { InlinePriceEditor } from "../components/seller/InlinePriceEditor";

/** Format a raw decimal price string to Persian digits ("120000.00" -> "۱۲۰٬۰۰۰"). */
function faPrice(raw: string | null | undefined): string {
  if (raw === null || raw === undefined || raw === "") return "";
  const n = parseFloat(raw);
  if (!isFinite(n)) return "";
  return Math.round(n).toLocaleString("fa-IR");
}

function ProductAccordionItem({
  product,
  isOpen,
  onToggle,
  isSticky,
  storeId,
}: {
  product: SellerProductListItem;
  isOpen: boolean;
  onToggle: () => void;
  isSticky: boolean;
  storeId: string;
}) {
  const navigate = useNavigate();
  const { theme } = useRootData();
  const updateVariantStock = useUpdateVariantStock();
  const updateBasePrice = useUpdateProductBasePrice();
  const updateVariantPrice = useUpdateVariantPrice();
  const [updatingVariantId, setUpdatingVariantId] = useState<string | null>(
    null
  );
  const [pricingVariantId, setPricingVariantId] = useState<string | null>(null);
  // Use real variants from API
  const variants = product.variants || [];
  const productId = product.id || "";
  const faBase = faPrice(product.basePrice);

  const handleEditProduct = (e: React.MouseEvent) => {
    e.stopPropagation();
    navigate(`/store/${storeId}/product/${product.id}`);
  };

  return (
    <div className="border-b border-gray-200">
      <div
        className={cn(
          "transition-all duration-200",
          isSticky && isOpen && "sticky top-0 z-10 bg-WHITE shadow-md"
        )}
      >
        <div className="w-full px-4 py-3 flex items-center gap-2 hover:bg-WHITE3 transition-colors">
          {/* Image toggles the accordion */}
          <button
            onClick={onToggle}
            aria-label={isOpen ? "بستن" : "نمایش تنوع‌ها"}
            className="shrink-0 cursor-pointer"
          >
            <img
              src={
                product.primaryImage ||
                (theme === "dark" ? placeholderImageDark : placeholderImage)
              }
              alt={product.title}
              onError={(e) => {
                e.currentTarget.src =
                  theme === "dark" ? placeholderImageDark : placeholderImage;
              }}
              className="w-12 h-12 lg:w-14 lg:h-14 object-contain rounded"
            />
          </button>

          {/* Title toggles; price editor sits under it on mobile (not inside a button) */}
          <div className="flex-1 min-w-0">
            <button
              onClick={onToggle}
              className="block w-full text-right cursor-pointer"
            >
              <h3 className="font-medium text-sm lg:text-[15px] truncate">
                {product.title}
              </h3>
            </button>
            <div className="mt-0.5 lg:hidden">
              <InlinePriceEditor
                value={product.basePrice}
                onSave={(v) => {
                  if (v) updateBasePrice.mutate({ productId, basePrice: v });
                }}
                isPending={updateBasePrice.isPending}
                size="sm"
                align="start"
                ariaLabel="ویرایش قیمت محصول"
                className="-mr-2"
              />
            </div>
          </div>

          {/* Desktop price column */}
          <div className="hidden lg:flex w-48 justify-center">
            <InlinePriceEditor
              value={product.basePrice}
              onSave={(v) => {
                if (v) updateBasePrice.mutate({ productId, basePrice: v });
              }}
              isPending={updateBasePrice.isPending}
              ariaLabel="ویرایش قیمت محصول"
            />
          </div>

          {/* Desktop variants column */}
          <span className="hidden lg:flex w-24 justify-center">
            {variants && variants.length > 0 ? (
              <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                {variants.length} نوع
              </span>
            ) : (
              <span className="text-GRAY">—</span>
            )}
          </span>

          <div className="flex items-center gap-1 lg:w-28 lg:justify-center shrink-0">
            {variants && variants.length > 0 && (
              <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded lg:hidden">
                {variants.length} نوع
              </span>
            )}
            <button
              onClick={handleEditProduct}
              className="p-1.5 hover:bg-gray-200 rounded-lg transition-colors cursor-pointer"
              title="ویرایش محصول"
              aria-label="ویرایش محصول"
            >
              <Edit className="w-4 h-4 text-gray-600" />
            </button>
            <button
              onClick={onToggle}
              className="p-1.5 hover:bg-gray-200 rounded-lg transition-colors cursor-pointer"
              aria-label={isOpen ? "بستن" : "نمایش تنوع‌ها"}
            >
              {isOpen ? (
                <ChevronUp className="w-5 h-5 text-gray-400" />
              ) : (
                <ChevronDown className="w-5 h-5 text-gray-400" />
              )}
            </button>
          </div>
        </div>
      </div>

      {isOpen && variants && variants.length > 0 && (
        <div className="px-4 py-3 bg-gray-50">
          <div className="space-y-2">
            {variants.map((variant, index) => {
              const color = variant.attributes?.find(
                (attribute) => attribute.name === "COLOR"
              );
              const size = variant.attributes?.find(
                (attribute) => attribute.name === "SIZE"
              );
              const variantId = variant.id || "";
              return (
                <div
                  key={variant.id || `variant-${index}`}
                  className="flex flex-col gap-3 p-3 bg-WHITE rounded-lg border border-gray-100 sm:flex-row sm:items-center sm:justify-between"
                >
                  <div className="flex items-center gap-3">
                    {color && (
                      <div
                        className="w-10 h-10 rounded-sm shadow-sm shrink-0"
                        style={{
                          backgroundColor: color.info.detail,
                        }}
                      />
                    )}
                    {size && (
                      <div
                        className="w-10 h-10 flex items-center justify-center rounded-sm shadow-sm shrink-0"
                        style={{
                          backgroundColor: "black",
                          color: "white",
                          fontSize: "10px",
                        }}
                      >
                        {size.value}
                      </div>
                    )}
                  </div>

                  <div className="flex items-center justify-between gap-4 sm:justify-end">
                    {/* Per-variant price (overrides base price for this variant) */}
                    <div className="flex flex-col items-start gap-0.5">
                      <span className="text-[11px] text-GRAY">قیمت</span>
                      <InlinePriceEditor
                        value={variant.price}
                        onSave={(v) => {
                          setPricingVariantId(variantId);
                          updateVariantPrice.mutate(
                            { variantId, price: v },
                            { onSettled: () => setPricingVariantId(null) }
                          );
                        }}
                        isPending={pricingVariantId === variantId}
                        allowEmpty
                        placeholder={
                          faBase ? `پیش‌فرض: ${faBase}` : "پیش‌فرض"
                        }
                        size="sm"
                        align="start"
                        ariaLabel="ویرایش قیمت این تنوع"
                        className="-mr-2"
                      />
                    </div>

                    {/* Stock */}
                    <div className="flex flex-col items-end gap-0.5">
                      <span className="text-[11px] text-GRAY">موجودی</span>
                      <ThrottledQuantityControl
                        key={`${variant.id}-${variant.stock}`}
                        initialQuantity={variant.stock || 0}
                        maxQuantity={999}
                        onQuantityUpdate={(newQuantity) => {
                          setUpdatingVariantId(variantId);
                          updateVariantStock.mutate(
                            {
                              variantId,
                              stock: newQuantity,
                            },
                            {
                              onSettled: () => {
                                setUpdatingVariantId(null);
                              },
                            }
                          );
                        }}
                        isPending={updatingVariantId === variant.id}
                        allowManualEdit={true}
                        throttleDelay={1000}
                      />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

function StoreProductsContent() {
  const { storeId } = useParams();
  const navigate = useNavigate();
  const [openProductId, setOpenProductId] = useState<string | null>(null);
  const [stickyProductId, setStickyProductId] = useState<string | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const {
    data: products = [],
    isLoading,
    isError,
  } = useGetSellerProductsList();

  useEffect(() => {
    const handleScroll = () => {
      if (openProductId) {
        setStickyProductId(openProductId);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [openProductId]);

  const handleToggleAccordion = (productId: string) => {
    if (openProductId === productId) {
      setOpenProductId(null);
      setStickyProductId(null);
    } else {
      setOpenProductId(productId);
      setStickyProductId(productId);
    }
  };

  if (isLoading) {
    return (
      <div className="flex justify-center items-center min-h-[400px]">
        <div className="text-gray-500">در حال بارگذاری محصولات...</div>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="flex justify-center items-center min-h-[400px]">
        <div className="text-red-500">خطا در بارگذاری محصولات</div>
      </div>
    );
  }

  if (products.length === 0) {
    return (
      <div className="flex justify-center items-center min-h-[400px]">
        <div className="text-gray-500">محصولی یافت نشد</div>
      </div>
    );
  }

  return (
    <div ref={containerRef} className="bg-WHITE lg:bg-transparent">
      <div className="border-b border-gray-200 px-4 py-3 lg:border-0 lg:px-0 lg:py-0 lg:mb-6 lg:flex lg:items-end lg:justify-between">
        <div>
          <h1 className="text-lg font-semibold text-right lg:text-[24px] lg:font-extrabold">
            محصولات فروشگاه
          </h1>
          <p className="text-sm text-gray-500 mt-1">{products.length} محصول</p>
        </div>
        <button
          onClick={() => navigate(`/store/add/manual/${storeId}`)}
          className="hidden lg:inline-flex items-center gap-2 rounded-xl bg-VITROWN_BLUE text-white px-5 py-2.5 text-[14px] font-bold hover:opacity-90 transition"
        >
          افزودن محصول جدید
        </button>
      </div>

      {/* Desktop table-style header */}
      <div className="hidden lg:flex items-center px-4 py-3 text-GRAY text-[13px] font-bold border border-WHITE3 rounded-t-2xl bg-WHITE2">
        <span className="flex-1">محصول</span>
        <span className="w-48 text-center">قیمت</span>
        <span className="w-24 text-center">تنوع</span>
        <span className="w-28 text-center">عملیات</span>
      </div>

      <div className="divide-y divide-gray-200 lg:border lg:border-t-0 lg:border-WHITE3 lg:rounded-b-2xl lg:overflow-hidden lg:bg-WHITE">
        {products.map((product) =>
          product.id ? (
            <ProductAccordionItem
              key={product.id}
              product={product}
              isOpen={openProductId === product.id}
              onToggle={() => handleToggleAccordion(product.id || "")}
              isSticky={stickyProductId === product.id}
              storeId={storeId || ""}
            />
          ) : null
        )}
      </div>
    </div>
  );
}

export default function StoreProducts() {
  return <StoreProductsContent />;
}