"use client";

import React, { useState, useEffect, useRef } from "react";
import SafeImage from "../../components/SafeImage";
import BackButton from "../../components/BackButton";
import { Download, Printer, ShieldCheck, Sparkles, CheckCircle2, ChevronLeft, Search, Filter } from "lucide-react";
import Link from "next/link";
import { productService } from "../../lib/services/productService";
import { Product } from "../../lib/data/products";
import { toPersian } from "../../lib/utils";


export default function CatalogClient() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("all");

  const scrollRef = useRef<HTMLDivElement>(null);
  const [isMouseDown, setIsMouseDown] = useState(false);
  const [startX, setStartX] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);

  const handleMouseDown = (e: React.MouseEvent) => {
    if (!scrollRef.current) return;
    setIsMouseDown(true);
    setStartX(e.pageX - scrollRef.current.offsetLeft);
    setScrollLeft(scrollRef.current.scrollLeft);
  };

  const handleMouseLeaveOrUp = () => {
    setIsMouseDown(false);
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isMouseDown || !scrollRef.current) return;
    e.preventDefault();
    const x = e.pageX - scrollRef.current.offsetLeft;
    const walk = (x - startX) * 2; // scroll speed
    scrollRef.current.scrollLeft = scrollLeft - walk;
  };

  const handleWheel = (e: React.WheelEvent) => {
    if (scrollRef.current && e.deltaY !== 0) {
      scrollRef.current.scrollLeft += e.deltaY;
    }
  };

  useEffect(() => {
    productService.getProducts({ limit: 999 })
      .then(res => {
        setProducts(res.data || []);
      })
      .catch(err => console.error("Catalog fetch error:", err))
      .finally(() => setLoading(false));
  }, []);

  const categories = Array.from(new Set(products.map(p => p.category).filter(Boolean)));

  const filteredProducts = products.filter(p => {
    const matchCategory = selectedCategory === "all" || p.category === selectedCategory;
    const matchSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                        p.artNo.toLowerCase().includes(searchQuery.toLowerCase()) ||
                        (p.main_ingredients && p.main_ingredients.some(i => i.toLowerCase().includes(searchQuery.toLowerCase())));
    return matchCategory && matchSearch;
  });

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="min-h-screen bg-slate-50 font-vazir text-slate-800 py-12 px-4 sm:px-8 print:bg-white print:py-0 print:px-0" dir="rtl">
      {/* Header Bar - Hidden on print */}
      <div className="max-w-7xl mx-auto mb-10 print:hidden">
        <div className="bg-gradient-to-r from-canina-blue via-blue-900 to-canina-blue text-white rounded-[2.5rem] p-8 md:p-12 shadow-2xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl -mr-20 -mt-20 pointer-events-none" />
          
          <div className="relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-8">
            <div className="max-w-2xl">
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/10 rounded-full text-xs font-black uppercase tracking-widest text-amber-300 mb-4 border border-white/10">
                <Sparkles className="w-4 h-4" />
                <span>کاتالوگ رسمی محصولات کانینا آلمان</span>
              </div>
              <h1 className="text-3xl md:text-5xl font-black font-lalezar leading-tight mb-4">
                راهنمای جامع مکمل‌های درمانی و دارویی Canina Pharma
              </h1>
              <p className="text-white/80 text-sm md:text-base leading-relaxed">
                معرفی کامل ترکیبات فعال، موارد مصرف بالینی و استانداردهای دارویی محصولات برند آلمانی کانینا جهت استفاده صاحبان پت‌ها و متخصصین دامپزشکی.
              </p>
            </div>

            <div className="flex flex-wrap items-center gap-4">
              <BackButton className="bg-white/10 text-white border-white/20 hover:bg-white/20 hover:text-white" />
              <button
                onClick={handlePrint}
                className="bg-amber-400 hover:bg-amber-500 text-slate-900 font-black px-6 py-4 rounded-2xl shadow-xl hover:scale-105 transition-all flex items-center gap-3 text-sm cursor-pointer"
              >
                <Printer className="w-5 h-5" />
                <span>چاپ / دانلود نسخه PDF کاتالوگ</span>
              </button>
              <Link
                href="/shop"
                className="bg-white/10 hover:bg-white/20 text-white font-bold px-6 py-4 rounded-2xl border border-white/20 transition-all flex items-center gap-2 text-sm"
              >
                <span>ورود به فروشگاه</span>
                <ChevronLeft className="w-4 h-4" />
              </Link>
            </div>
          </div>
        </div>
      </div>

      {/* Print Cover Header - Visible only on Print */}
      <div className="hidden print:block text-center py-8 border-b-2 border-canina-blue mb-8">
        <h1 className="text-3xl font-black text-canina-blue font-lalezar mb-2">کاتالوگ رسمی مکمل‌های درمانی Canina Pharma Germany</h1>
        <p className="text-sm text-gray-600 font-bold">واردکننده انحصاری مکمل‌های دارویی سگ و گربه در ایران — info@canina-iran.com | ۰۲۱-۸۸۸۸۴۴۴۴</p>
      </div>

      {/* Filter & Search Controls - Hidden on print */}
      <div className="max-w-7xl mx-auto mb-10 print:hidden flex flex-col md:flex-row gap-4 justify-between items-center bg-white p-6 rounded-3xl border border-slate-200 shadow-sm">
        <div className="relative w-full md:w-96">
          <Search className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
          <input
            type="text"
            placeholder="جستجوی نام محصول، کد کالا یا ماده موثره..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full bg-slate-50 border border-slate-200 rounded-2xl py-3 pr-11 pl-4 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20"
          />
        </div>

        <div 
          ref={scrollRef}
          onMouseDown={handleMouseDown}
          onMouseLeave={handleMouseLeaveOrUp}
          onMouseUp={handleMouseLeaveOrUp}
          onMouseMove={handleMouseMove}
          onWheel={handleWheel}
          className={`flex items-center gap-2.5 overflow-x-auto sleek-hscroll w-full md:w-auto py-2.5 px-1 scroll-smooth select-none cursor-grab ${isMouseDown ? 'cursor-grabbing' : ''}`}
        >
          <button
            onClick={() => setSelectedCategory("all")}
            className={`px-5 py-3 rounded-2xl text-xs font-black transition-all shrink-0 shadow-xs ${
              selectedCategory === "all" ? "bg-canina-blue text-white shadow-md scale-105" : "bg-slate-100 text-slate-700 hover:bg-slate-200"
            }`}
          >
            همه دسته‌ها ({products.length})
          </button>
          {categories.map(cat => (
            <button
              key={cat}
              onClick={() => setSelectedCategory(cat)}
              className={`px-5 py-3 rounded-2xl text-xs font-black transition-all shrink-0 shadow-xs ${
                selectedCategory === cat ? "bg-canina-blue text-white shadow-md scale-105" : "bg-slate-100 text-slate-700 hover:bg-slate-200"
              }`}
            >
              {cat}
            </button>
          ))}
        </div>
      </div>

      {/* Catalog Products Grid */}
      <div className="max-w-7xl mx-auto">
        {loading ? (
          <div className="text-center py-20 text-slate-400 font-bold">در حال بارگذاری کاتالوگ محصولات...</div>
        ) : filteredProducts.length === 0 ? (
          <div className="text-center py-20 bg-white rounded-3xl border border-slate-200">
            <h3 className="text-xl font-black text-slate-700 mb-2">محصولی یافت نشد</h3>
            <p className="text-sm text-slate-500">لطفاً عبارت جستجو را تغییر دهید.</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 print:grid-cols-2 print:gap-6">
            {filteredProducts.map((product) => (
              <div
                key={product.id}
                className="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col justify-between print:break-inside-avoid print:shadow-none print:border-slate-300"
              >
                <div>
                  {/* Top Image Banner */}
                  <div className="relative bg-slate-100 p-6 flex items-center justify-center border-b border-slate-100 aspect-video print:h-44">
                    <SafeImage
                      src={product.image}
                      alt={product.name}
                      className="w-full h-full"
                      imgClassName="object-contain max-h-40"
                    />
                    <div className="absolute top-3 right-3 bg-canina-blue text-white px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider">
                      کد کالا: {product.artNo}
                    </div>
                    {product.suitableFor && (
                      <div className="absolute bottom-3 left-3 bg-white/90 backdrop-blur-sm text-slate-800 px-2.5 py-1 rounded-lg text-[11px] font-black shadow-sm">
                        مناسب: {product.suitableFor}
                      </div>
                    )}
                  </div>

                  {/* Body Content */}
                  <div className="p-6 space-y-4">
                    <div>
                      <span className="text-[10px] font-black text-canina-blue uppercase tracking-widest block mb-1">
                        {product.category}
                      </span>
                      <h3 className="text-xl font-black text-slate-900 leading-snug font-vazir">
                        {product.name}
                      </h3>
                      {product.scientificTagline && (
                        <p className="text-xs text-slate-500 font-bold mt-1 leading-relaxed">
                          {product.scientificTagline}
                        </p>
                      )}
                    </div>

                    <p className="text-xs text-slate-600 leading-relaxed line-clamp-4 print:line-clamp-none">
                      {product.shortDescription || product.description}
                    </p>

                    {/* Ingredients Badges */}
                    {product.main_ingredients && product.main_ingredients.length > 0 && (
                      <div className="pt-2 border-t border-slate-100">
                        <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-2">
                          مواد موثره و ترکیبات اصلی:
                        </span>
                        <div className="flex flex-wrap gap-1.5">
                          {product.main_ingredients.map((ing, idx) => (
                            <span
                              key={idx}
                              className="bg-blue-50 text-canina-blue border border-blue-100 rounded-lg px-2 py-1 text-[10px] font-bold"
                            >
                              {ing}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Dosage Instructions */}
                    {(product.dosage_logic || (product as any).dosageLogic) && (
                      <div className="bg-amber-50/60 border border-amber-200/60 rounded-2xl p-3 text-xs font-bold text-amber-900 flex items-start gap-2">
                        <ShieldCheck className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
                        <div>
                          <span className="font-black text-[11px] block text-amber-800">دستور مصرف بالینی:</span>
                          <span className="text-[11px] font-medium leading-relaxed">{product.dosage_logic || (product as any).dosageLogic}</span>
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                {/* Card Footer - Hidden on print */}
                <div className="p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between print:hidden">
                  <div className="flex items-center gap-1 text-[11px] font-bold text-slate-500">
                    <CheckCircle2 className="w-4 h-4 text-green-600" />
                    <span>گرید دارویی آلمان</span>
                  </div>
                  <Link
                    href={`/shop/${product.slug || product.id}`}
                    className="text-xs font-black text-canina-blue hover:underline flex items-center gap-1"
                  >
                    <span>جزئیات تخصصی</span>
                    <ChevronLeft className="w-3.5 h-3.5" />
                  </Link>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Print Footer */}
      <div className="hidden print:block text-center pt-8 border-t border-slate-300 mt-12 text-xs text-slate-500 font-bold">
        صفحه کاتالوگ آنلاین محصولات Canina Pharma Germany — وبسایت رسمی: https://canina-iran.com
      </div>
    </div>
  );
}