/* Add custom CSS styles below */ 

"use client";

import { useMemo, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ShoppingCart, Star, Search } from "lucide-react";
import Image from "next/image";
import { motion } from "framer-motion";

// ===== أنواع البيانات =====
interface Category {
  name: string;
  image: string;
}

interface Product {
  id: string;
  name: string;
  price: number; // بالريال
  image: string;
  category: string; // اسم التصنيف بالعربية
  rating?: number; // 0 - 5
}

export default function BukhoryatStore() {
  // ===== بيانات ثابتة (يمكن استبدالها ببيانات من API لاحقًا) =====
  const categories: Category[] = [
    { name: "عود", image: "/images/oud.jpg" },
    { name: "مبخر", image: "/images/mabkhara.jpg" },
    { name: "مسك", image: "/images/musk.jpg" },
  ];

  const products: Product[] = [
    { id: "p1", name: "بخور صيني", price: 99, image: "/images/oud-china.jpg", category: "عود", rating: 4.2 },
    { id: "p2", name: "سادلي المجلس", price: 169, image: "/images/oud-sadli-majlis.jpg", category: "عود", rating: 4.8 },
    { id: "p3", name: "سادلي الأصالة", price: 169, image: "/images/oud-sadli-asala.jpg", category: "عود", rating: 4.7 },
    { id: "p4", name: "عود مسقى سبيشل", price: 35, image: "/images/oud-mosqa-special.jpg", category: "عود", rating: 4.0 },
    { id: "p5", name: "أوقية عود المسقى الخاص", price: 59, image: "/images/oud-mosqa-private.jpg", category: "عود", rating: 4.3 },
    { id: "p6", name: "مسك الرمان", price: 99, image: "/images/musk-pomegranate.jpg", category: "مسك", rating: 4.6 },
    { id: "p7", name: "مسك البودر", price: 99, image: "/images/musk-powder.jpg", category: "مسك", rating: 4.4 },
    { id: "p8", name: "مسك الرواية", price: 99, image: "/images/musk-novel.jpg", category: "مسك", rating: 4.5 },
    { id: "p9", name: "مسك سبيشل", price: 99, image: "/images/musk-special.jpg", category: "مسك", rating: 4.1 },
    { id: "p10", name: "كلمنتان مبخر", price: 99, image: "/images/oud-kalmentan-mohassan.jpg", category: "مبخر", rating: 4.2 },
    { id: "p11", name: "موروكي مبخر محسن", price: 99, image: "/images/oud-moroki-mohassan.jpg", category: "مبخر", rating: 4.0 },
    { id: "p12", name: "كينامي دبل سوبر طبيعي", price: 159, image: "/images/oud-kinami-double-super.jpg", category: "عود", rating: 4.9 },
    { id: "p13", name: "كينامي صيني سوبر طبيعي", price: 104, image: "/images/oud-kinami-china-super.jpg", category: "عود", rating: 4.5 },
    { id: "p14", name: "سومطري فيتنامي محسن", price: 103, image: "/images/oud-sumatra-vietnam-enhanced.jpg", category: "عود", rating: 4.3 },
    { id: "p15", name: "كلمنتان صيني محسن", price: 92, image: "/images/oud-kalmentan-china-enhanced.jpg", category: "عود", rating: 4.1 },
    { id: "p16", name: "بخور صيني محسن", price: 92, image: "/images/oud-china-enhanced.jpg", category: "عود", rating: 4.0 },
  ];

  // ===== الحالة (State) =====
  const [query, setQuery] = useState("");
  const [activeCat, setActiveCat] = useState<string>("الكل");
  const [sortBy, setSortBy] = useState<string>("popular");
  const [cart, setCart] = useState<Record<string, number>>({}); // productId -> quantity

  const allCats = useMemo(() => ["الكل", ...categories.map((c) => c.name)], [categories]);

  const filtered = useMemo(() => {
    let list = products.filter((p) => {
      const matchCat = activeCat === "الكل" || p.category === activeCat;
      const matchQuery = !query || p.name.replace(/\s+/g, "").includes(query.replace(/\s+/g, ""));
      return matchCat && matchQuery;
    });

    switch (sortBy) {
      case "priceAsc":
        list = [...list].sort((a, b) => a.price - b.price);
        break;
      case "priceDesc":
        list = [...list].sort((a, b) => b.price - a.price);
        break;
      case "rating":
        list = [...list].sort((a, b) => (b.rating ?? 0) - (a.rating ?? 0));
        break;
      default: // popular (افتراضي)
        list = [...list].sort((a, b) => (b.rating ?? 0) - (a.rating ?? 0));
    }

    return list;
  }, [products, activeCat, query, sortBy]);

  // ===== الدوال المساعدة =====
  const formatPrice = (value: number) => `${value.toLocaleString("ar-SA")} ر.س`;

  const addToCart = (id: string) => {
    setCart((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
  };

  const cartCount = useMemo(() => Object.values(cart).reduce((a, b) => a + b, 0), [cart]);

  // ===== الواجهة =====
  return (
    <div className="min-h-screen bg-[#faf9f7] p-6" dir="rtl">
      {/* Header */}
      <header className="flex flex-col items-center mb-8">
        <Image src="/logo.png" alt="Bukhoryat Logo" width={120} height={120} priority />
        <h1 className="text-3xl font-bold text-[#1e2a5e] mt-4">بخوريات</h1>
        <p className="text-lg text-[#9c8c63]">Bukhoryiat - روح الأصالة والفخامة</p>

        {/* شريط أدوات */}
        <div className="mt-6 w-full max-w-4xl grid grid-cols-1 md:grid-cols-3 gap-3">
          {/* بحث */}
          <div className="flex items-center gap-2 rounded-2xl border bg-white px-3 py-2 shadow-sm">
            <Search className="shrink-0" size={18} />
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="ابحث عن منتج…"
              className="w-full outline-none text-sm bg-transparent"
            />
          </div>

          {/* تصنيف */}
          <div className="flex items-center gap-2 overflow-x-auto md:overflow-visible">
            {allCats.map((c) => (
              <button
                key={c}
                onClick={() => setActiveCat(c)}
                className={`whitespace-nowrap rounded-2xl px-4 py-2 text-sm transition shadow-sm border ${
                  activeCat === c
                    ? "bg-[#1e2a5e] text-white border-[#1e2a5e]"
                    : "bg-white text-[#1e2a5e] border-gray-200"
                }`}
              >
                {c}
              </button>
            ))}
          </div>

          {/* فرز */}
          <div className="flex items-center justify-between md:justify-end gap-2">
            <label className="text-sm text-[#1e2a5e]">ترتيب حسب</label>
            <select
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value)}
              className="rounded-2xl border bg-white px-3 py-2 text-sm shadow-sm"
            >
              <option value="popular">الأكثر رواجًا</option>
              <option value="rating">التقييم</option>
              <option value="priceAsc">السعر: من الأقل للأعلى</option>
              <option value="priceDesc">السعر: من الأعلى للأقل</option>
            </select>
          </div>
        </div>

        {/* عربة التسوق */}
        <div className="mt-4">
          <Button className="bg-[#1e2a5e] text-white rounded-2xl px-4 py-2 flex items-center gap-2">
            <ShoppingCart size={18} />
            <span>السلة</span>
            <span className="ml-1 rounded-full bg-white/90 px-2 py-0.5 text-[#1e2a5e] text-xs font-bold">
              {cartCount}
            </span>
          </Button>
        </div>
      </header>

      {/* التصنيفات */}
      <section>
        <h2 className="text-2xl font-bold mb-4 text-[#1e2a5e]">التصنيفات</h2>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
          {categories.map((cat, i) => (
            <motion.div key={i} whileHover={{ scale: 1.03 }} className="cursor-pointer">
              <Card className="rounded-2xl overflow-hidden shadow-md bg-white">
                <Image
                  src={cat.image}
                  alt={cat.name}
                  width={400}
                  height={300}
                  className="w-full h-40 object-cover"
                />
                <CardContent className="text-center py-3 font-semibold text-[#1e2a5e]">
                  {cat.name}
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </section>

      {/* المنتجات */}
      <section className="mt-10">
        <h2 className="text-2xl font-bold mb-4 text-[#1e2a5e]">المنتجات</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {filtered.map((product) => (
            <motion.div key={product.id} whileHover={{ scale: 1.03 }}>
              <Card className="rounded-2xl shadow-lg overflow-hidden bg-white">
                <Image
                  src={product.image}
                  alt={product.name}
                  width={400}
                  height={300}
                  className="w-full h-48 object-cover"
                />
                <CardContent className="p-4">
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <h3 className="text-lg font-bold text-[#1e2a5e]">{product.name}</h3>
                      <p className="text-[#9c8c63] font-semibold">{formatPrice(product.price)}</p>
                    </div>
                    {/* التقييم */}
                    <div className="flex items-center gap-1 text-yellow-500" title={`التقييم: ${product.rating ?? 0}`}>
                      {Array.from({ length: 5 }).map((_, idx) => {
                        const filled = (product.rating ?? 0) >= idx + 1;
                        return <Star key={idx} size={18} className={filled ? "fill-current" : ""} />;
                      })}
                    </div>
                  </div>

                  <div className="flex items-center justify-between mt-4">
                    <Button
                      onClick={() => addToCart(product.id)}
                      className="bg-[#1e2a5e] text-white px-4 py-2 rounded-xl flex items-center gap-2"
                    >
                      <ShoppingCart size={18} /> إضافة للسلة
                    </Button>
                    <span className="text-xs text-gray-500">التصنيف: {product.category}</span>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>

        {/* لا توجد نتائج */}
        {filtered.length === 0 && (
          <div className="text-center text-sm text-gray-500 mt-8">لا توجد نتائج مطابقة لبحثك.</div>
        )}
      </section>

      {/* فوتر بسيط */}
      <footer className="mt-16 text-center text-xs text-gray-500">
        © {new Date().getFullYear()} بخوريات — جميع الحقوق محفوظة
      </footer>
    </div>
  );
}