"use client";
import { useState, useEffect } from "react";
import { Product, IngredientInfo } from "../lib/data/products";
import { motion } from "motion/react";
import { FlaskConical, CheckCircle2, ChevronRight, ChevronLeft, Beaker, Search } from "lucide-react";
import { useSettingsStore } from "../lib/store/settingsStore";
import { productService } from "../lib/services/productService";

import Link from "next/link";
import { SCIENTIFIC_TERMS } from "../lib/data/scientificTerms";
import { useRouter, useSearchParams } from 'next/navigation';

export default function IngredientWiki() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const termParam = searchParams.get('term');
  const texts = useSettingsStore(state => state.texts);
  const scientificTerms = useSettingsStore(state => state.scientificTerms);
  const [ingredientsWiki, setIngredientsWiki] = useState<IngredientInfo[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  const [searchQuery, setSearchQuery] = useState("");

  useEffect(() => {
    productService.getProducts({ limit: 999 }).then(res => setProducts(res.data));
  }, []);

  useEffect(() => {
    let list: IngredientInfo[] = [];
    const raw = texts.ingredients_wiki || texts.ingredients_wiki_text;
    if (raw) {
      try {
        const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
        if (Array.isArray(parsed)) {
          list = parsed.map((item: any) => ({
            id: item.id,
            name: item.name,
            description: item.description,
            benefits: Array.isArray(item.benefits) ? item.benefits : []
          }));
        }
      } catch (e) {
        console.error("Failed to parse ingredients_wiki:", e);
      }
    }

    // Merge terms from scientificTerms and static SCIENTIFIC_TERMS dictionary
    const mergedTerms = { ...SCIENTIFIC_TERMS, ...scientificTerms };
    Object.entries(mergedTerms).forEach(([key, t]: [string, any]) => {
      const wikiId = t.wikiId || t.key || key;
      if (!list.some(item => item.id === wikiId || item.name.includes(t.term))) {
        list.push({
          id: wikiId,
          name: t.term,
          description: t.definition,
          benefits: []
        });
      }
    });

    setIngredientsWiki(list);
  }, [texts, scientificTerms]);

  useEffect(() => {
    if (termParam && ingredientsWiki.length > 0) {
      const el = document.getElementById(`wiki-${termParam}`);
      if (el) {
        setTimeout(() => {
          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 100);
      }
    }
  }, [termParam, ingredientsWiki]);

  return (
    <div className="bg-white py-12 px-4 overflow-hidden font-vazir" dir="rtl">
      <div className="max-w-7xl mx-auto">
        
        {/* Mobile Navigation & Breadcrumbs */}
        <div className="lg:hidden mb-12 space-y-4">
          <button 
            onClick={() => router.back()}
            className="flex items-center gap-2 text-medical-gray-500 font-bold hover:text-canina-blue transition-colors"
          >
            <ChevronRight className="w-5 h-5" />
            <span>بازگشت</span>
          </button>
          
          <div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest overflow-x-auto whitespace-nowrap pb-2">
            <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>کانینا</span>
            <ChevronLeft className="w-2.5 h-2.5" />
            <span className="text-canina-blue">دانشنامه علمی</span>
          </div>
        </div>

        {/* Desktop Breadcrumbs */}
        <div className="hidden lg:flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-12">
           <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
           <ChevronLeft className="w-2.5 h-2.5" />
           <span className="text-canina-blue">دانشنامه مواد نایاب و ارگانیک</span>
        </div>

        <div className="flex flex-col items-center text-center mb-20">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-canina-blue/5 border border-canina-blue/10 rounded-full text-canina-blue text-xs font-black uppercase tracking-widest mb-6">
            <FlaskConical className="w-4 h-4" />
            علم در خدمت کیفیت
          </div>
          <h2 className="text-4xl lg:text-6xl font-black text-medical-gray-900 leading-tight md:max-w-4xl">
            دانشنامه مواد <span className="text-canina-blue italic">نایاب و ارگانیک</span> کانینا
          </h2>
          <p className="mt-6 text-lg text-medical-gray-500 max-w-2xl leading-relaxed">
            ما از مواد اولیه‌ای استفاده می‌کنیم که در سطح دارویی فرآوری شده‌اند. در اینجا با قدرت بیولوژیک این ترکیبات آشنا شوید.
          </p>
          <div className="relative w-full max-w-md mt-8">
            <Search className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-medical-gray-400" />
            <input
              type="text"
              placeholder="جستجوی ماده مؤثره..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-full py-3 pr-11 pl-4 text-sm focus:outline-none focus:ring-2 focus:ring-canina-blue/20"
            />
          </div>
        </div>

        {(() => {
          const filtered = ingredientsWiki.filter(ing => {
            if (!searchQuery.trim()) return true;
            const q = searchQuery.trim().toLowerCase();
            return ing.name.toLowerCase().includes(q) || ing.description.toLowerCase().includes(q);
          });
          if (filtered.length === 0) {
            return (
              <div className="text-center py-20">
                <Search className="w-12 h-12 text-medical-gray-300 mx-auto mb-4" />
                <h3 className="text-xl font-black text-medical-gray-900 mb-2">ماده‌ای یافت نشد</h3>
                <p className="text-medical-gray-400 font-bold">با عبارت جستجو شده ماده مؤثره‌ای مطابقت ندارد.</p>
              </div>
            );
          }
          return (
        <div className="space-y-32">
          {filtered.map((ing, idx) => {
            const hasIngredient = products.filter(p => {
              const ingNameClean = ing.name.split('(')[0].trim().toLowerCase();
              const ingIdClean = ing.id.replace(/-/g, ' ').toLowerCase();
              
              return p.main_ingredients?.some(mi => {
                const miClean = mi.toLowerCase();
                return miClean.includes(ingNameClean) || 
                       ingNameClean.includes(miClean) ||
                       miClean.includes(ingIdClean) ||
                       (ing.id === 'green-mussel' && (miClean.includes('صدف') || miClean.includes('mussel'))) ||
                       (ing.id === 'collagen' && miClean.includes('کلاژن')) ||
                       (ing.id === 'silver' && (miClean.includes('نقره') || miClean.includes('silver'))) ||
                       (ing.id === 'peat-extract' && (miClean.includes('پیت') || miClean.includes('moor') || miClean.includes('عصاره'))) ||
                       (ing.id === 'colostrum' && (miClean.includes('آغوز') || miClean.includes('colostrum'))) ||
                       (ing.id === 'biotin' && (miClean.includes('بیوتین') || miClean.includes('biotin'))) ||
                       (ing.id === 'taurin' && (miClean.includes('تورین') || miClean.includes('taurine'))) ||
                       (ing.id === 'salmon-oil' && (miClean.includes('سالمون') || miClean.includes('salmon') || miClean.includes('ماهی'))) ||
                       (ing.id === 'black-cumin' && (miClean.includes('سیاه دانه') || miClean.includes('زیره') || miClean.includes('cumin'))) ||
                       (ing.id === 'eggshell' && (miClean.includes('پوسته تخم مرغ') || miClean.includes('تخم‌مرغ') || miClean.includes('eggshell'))) ||
                       (ing.id === 'hawthorn' && (miClean.includes('زالزالک') || miClean.includes('hawthorn'))) ||
                       (ing.id === 'l-carnitine' && (miClean.includes('کارنیتین') || miClean.includes('carnitine'))) ||
                       (ing.id === 'seaweed' && (miClean.includes('جلبک') || miClean.includes('seaweed'))) ||
                       (ing.id === 'hyaluronic' && (miClean.includes('هیالورونات') || miClean.includes('hyaluron'))) ||
                       (ing.id === 'calendula-sea-buckthorn' && (miClean.includes('کالاندولا') || miClean.includes('سنجد') || miClean.includes('خولان') || miClean.includes('calendula'))) ||
                       (ing.id === 'colloidal-silver' && miClean.includes('کلوئیدی')) ||
                       (ing.id === 'retinol-palmitate' && (miClean.includes('رتینول') || miClean.includes('پالمیتات'))) ||
                       (ing.id === 'grapefruit-seed' && miClean.includes('گریپ')) ||
                       (ing.id === 'vaseline' && miClean.includes('وازلین')) ||
                       (ing.id === 'panthenol' && miClean.includes('پانتنول')) ||
                       (ing.id === 'diatomaceous' && miClean.includes('دیاتومه')) ||
                       (ing.id === 'artichoke' && miClean.includes('کنگر')) ||
                       (ing.id === 'brewers-yeast' && (miClean.includes('مخمر') || miClean.includes('yeast'))) ||
                       (ing.id === 'willow-bark' && miClean.includes('بید')) ||
                       (ing.id === 'ginger' && miClean.includes('زنجبیل')) ||
                       (ing.id === 'bovine-serum' && miClean.includes('سرم')) ||
                       (ing.id === 'bovine-blood' && miClean.includes('خون')) ||
                       (ing.id === 'beef-fat' && miClean.includes('چربی')) ||
                       (ing.id === 'argan-oil' && miClean.includes('آرگان')) ||
                       (ing.id === 'rosehip-oil' && miClean.includes('گل رز')) ||
                       (ing.id === 'walnut-oil' && miClean.includes('گردو')) ||
                       (ing.id === 'polyglyceryl-caprate' && (miClean.includes('پلی گلیسریل') || miClean.includes('کاپرات'))) ||
                       (ing.id === 'carbomer' && miClean.includes('کربومر')) ||
                       (ing.id === 'dodecanoic' && (miClean.includes('دودکانوئیک') || miClean.includes('مارگوسا') || miClean.includes('insect')));
              });
            });
            
            const isTargeted = termParam === ing.id;
            return (
              <div 
                key={ing.id} 
                id={`wiki-${ing.id}`}
                className={`flex flex-col lg:flex-row items-center gap-16 p-6 rounded-[3rem] transition-all duration-500 ${isTargeted ? 'bg-canina-blue/5 border-2 border-canina-blue ring-4 ring-canina-blue/10 shadow-2xl' : ''} ${idx % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}
              >
                {/* Content */}
                <div className="lg:w-1/2 space-y-8">
                  <motion.div
                    initial={{ opacity: 0, x: idx % 2 === 1 ? 40 : -40 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.8 }}
                  >
                    <div className="flex items-center gap-4 mb-6">
                        <div className="w-14 h-14 rounded-3xl bg-medical-gray-900 flex items-center justify-center text-white shadow-xl">
                            <Beaker className="w-6 h-6" />
                        </div>
                        <h3 className="text-3xl font-black text-medical-gray-900">{ing.name}</h3>
                    </div>
                    
                    <p className="text-lg text-medical-gray-600 leading-relaxed mb-8">
                        {ing.description}
                    </p>

                    <div className="grid grid-cols-1 gap-4 mb-10">
                        {ing.benefits.map((benefit, bIdx) => (
                            <div key={bIdx} className="flex items-start gap-4 p-4 bg-medical-gray-50 rounded-2xl border border-medical-gray-100">
                                <CheckCircle2 className="w-6 h-6 text-canina-blue flex-shrink-0" />
                                <span className="text-sm font-bold text-medical-gray-700">{benefit}</span>
                            </div>
                        ))}
                    </div>
                  </motion.div>
                </div>

                {/* Products Linking */}
                <div className="lg:w-1/2 relative">
                   <motion.div 
                    initial={{ opacity: 0, scale: 0.9 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    viewport={{ once: true }}
                    className="bg-medical-gray-100 rounded-[4rem] p-12 relative overflow-hidden"
                   >
                      <div className="absolute top-0 right-0 p-8">
                         <div className="text-[10px] font-black text-medical-gray-400 uppercase tracking-[0.3em]">موجود در محصولات</div>
                      </div>
                      
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10">
                        {hasIngredient.length > 0 ? hasIngredient.map(p => (
                            <Link 
                                key={p.id}
                                href={`/shop/${p.slug || p.id}`}
                                className="bg-white rounded-[2.5rem] p-6 shadow-xl hover:scale-105 transition-transform cursor-pointer group block"
                            >
                                <img src={p.image} alt={p.name} className="w-24 h-24 object-contain mx-auto mb-4" referrerPolicy="no-referrer" />
                                <h4 className="text-sm font-black text-center text-medical-gray-900 group-hover:text-canina-blue transition-colors px-2">{p.name}</h4>
                            </Link>
                        )) : (
                            <div className="col-span-full py-8 text-center">
                                <p className="text-medical-gray-400 font-bold italic mb-3">محصولی با این ماده مؤثره یافت نشد.</p>
                                <button
                                  onClick={() => router.push('/shop')}
                                  className="text-canina-blue font-black text-sm hover:underline"
                                >
                                  مشاهده همه محصولات
                                </button>
                            </div>
                        )}
                      </div>
                      
                      {/* Decorative backdrop */}
                      <div className="absolute -bottom-20 -left-20 w-80 h-80 bg-canina-blue rounded-full blur-[100px] opacity-10" />
                   </motion.div>
                </div>
              </div>
            );
          })}
        </div>
          );
        })()}
        
        {/* Quality Badge */}
        <div className="mt-32 p-12 bg-medical-gray-900 rounded-[4rem] text-center text-white relative overflow-hidden">
            <div className="absolute inset-0 opacity-10 mix-blend-overlay">
                <div className="grid grid-cols-12 h-full w-full">
                    {Array.from({length: 120}).map((_, i) => (
                        <div key={i} className="border border-white/20" />
                    ))}
                </div>
            </div>
            <div className="relative z-10 max-w-3xl mx-auto">
                <h3 className="text-3xl lg:text-5xl font-black mb-8 leading-tight italic">تمام مواد اولیه ما دارای گواهینامه <br /> <span className="text-canina-blue">گرید دارویی اختصاصی</span> هستند.</h3>
                <p className="text-white/60 text-lg mb-10">این یعنی استانداردی فراتر از مکمل‌های معمولی، مشابه استانداردهای تولید دارو در اتحادیه اروپا.</p>
                <div className="flex justify-center gap-12">
                    <div className="flex flex-col items-center">
                        <div className="text-2xl font-black font-vazir text-canina-blue">۱۰۰٪</div>
                        <div className="text-[10px] font-bold uppercase tracking-widest text-white/40 mt-1">تست آزمایشگاهی</div>
                    </div>
                    <div className="flex flex-col items-center">
                        <div className="text-2xl font-black font-vazir">GMP</div>
                        <div className="text-[10px] font-bold uppercase tracking-widest text-white/40 mt-1">استاندارد تولید</div>
                    </div>
                    <div className="flex flex-col items-center">
                        <div className="text-2xl font-black font-vazir">ISO</div>
                        <div className="text-[10px] font-bold uppercase tracking-widest text-white/40 mt-1">کنترل کیفیت</div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  );
}