'use client';

import { useState, useEffect } from 'react';
import { api, apiPaths } from '@/lib/api';
import { addToCart, getCartCount } from '@/lib/cart';
import { useI18n } from '@/lib/i18n/context';

type MainCategory = { id: number; name: string; image?: string };
type SubCategory = { id: number; name: string; image?: string };
type Country = { id: number; name: string; key?: string; flag?: string };
type Product = {
  id: number;
  name: string;
  price: number;
  original_price?: number;
  image?: string;
  stock?: number;
  description?: string;
};

type View = 'main' | 'sub' | 'products';

export default function StorePage() {
  const { t, isRtl, locale } = useI18n();
  const [view, setView] = useState<View>('main');
  const [mainCategories, setMainCategories] = useState<MainCategory[]>([]);
  const [subCategories, setSubCategories] = useState<SubCategory[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  const [selectedMain, setSelectedMain] = useState<MainCategory | null>(null);
  const [selectedSub, setSelectedSub] = useState<SubCategory | null>(null);
  const [countries, setCountries] = useState<Country[]>([]);
  const [selectedCountry, setSelectedCountry] = useState<Country | null>(null);
  const [showCountryModal, setShowCountryModal] = useState(false);
  const [pendingSubAfterCountry, setPendingSubAfterCountry] = useState<SubCategory | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [loadingMain, setLoadingMain] = useState(true);
  const [loadingSub, setLoadingSub] = useState(false);
  const [loadingProducts, setLoadingProducts] = useState(false);
  const [showCartToast, setShowCartToast] = useState(false);
  const [selectedProductIds, setSelectedProductIds] = useState<Set<number>>(new Set());

  const searchIconClass = isRtl ? 'right-3' : 'left-3';
  const searchInputPad = isRtl ? 'pr-10 pl-4' : 'pl-10 pr-4';
  const backArrow = isRtl ? 'ri-arrow-right-line' : 'ri-arrow-left-line';
  const textStart = isRtl ? 'text-right' : 'text-left';
  const contextAlign = isRtl ? 'items-end' : 'items-start';

  useEffect(() => {
    setLoadingMain(true);
    api
      .get<MainCategory[]>(apiPaths.store.mainCategories)
      .then((res) => {
        if (res.key === 'success' && res.data) setMainCategories((res.data as MainCategory[]) || []);
        setLoadingMain(false);
      })
      .catch(() => setLoadingMain(false));
    api.get<Country[]>(apiPaths.general.countries).then((res) => {
      if (res.key === 'success' && Array.isArray(res.data)) setCountries(res.data as Country[]);
    });
  }, [locale]);

  useEffect(() => {
    if (view !== 'sub' || !selectedMain) return;
    setLoadingSub(true);
    setSubCategories([]);
    api
      .get<SubCategory[]>(apiPaths.store.subCategories(selectedMain.id))
      .then((res) => {
        if (res.key === 'success' && res.data) setSubCategories((res.data as SubCategory[]) || []);
        setLoadingSub(false);
      })
      .catch(() => setLoadingSub(false));
  }, [view, selectedMain, locale]);

  useEffect(() => {
    if (view !== 'products' || !selectedSub || !selectedCountry) return;
    setLoadingProducts(true);
    setProducts([]);
    setSelectedProductIds(new Set());
    api
      .get<Product[]>(apiPaths.store.products(selectedSub.id), { country_id: String(selectedCountry.id) })
      .then((res) => {
        if (res.key === 'success' && res.data) setProducts((res.data as Product[]) || []);
        setLoadingProducts(false);
      })
      .catch(() => setLoadingProducts(false));
  }, [view, selectedSub, selectedCountry, locale]);

  useEffect(() => {
    setSelectedMain((prev) => {
      if (!prev || mainCategories.length === 0) return prev;
      return mainCategories.find((c) => c.id === prev.id) ?? prev;
    });
  }, [mainCategories]);

  useEffect(() => {
    setSelectedSub((prev) => {
      if (!prev || subCategories.length === 0) return prev;
      return subCategories.find((c) => c.id === prev.id) ?? prev;
    });
  }, [subCategories]);

  useEffect(() => {
    setSelectedCountry((prev) => {
      if (!prev || countries.length === 0) return prev;
      return countries.find((c) => c.id === prev.id) ?? prev;
    });
  }, [countries]);

  const filteredSubCategories = subCategories.filter((s) =>
    s.name.toLowerCase().includes(searchQuery.toLowerCase())
  );
  const filteredProducts = products.filter((p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()));

  const goToMain = () => {
    setView('main');
    setSelectedMain(null);
    setSelectedSub(null);
    setSelectedCountry(null);
    setPendingSubAfterCountry(null);
    setSearchQuery('');
  };

  const goToSub = (main: MainCategory) => {
    setSelectedMain(main);
    setSelectedSub(null);
    setSelectedCountry(null);
    setSearchQuery('');
    setView('sub');
  };

  const openCountryModalForSub = (sub: SubCategory) => {
    setPendingSubAfterCountry(sub);
    setShowCountryModal(true);
  };

  const onCountrySelect = (c: Country) => {
    setSelectedCountry(c);
    setShowCountryModal(false);
    if (pendingSubAfterCountry) {
      setSelectedSub(pendingSubAfterCountry);
      setPendingSubAfterCountry(null);
      setView('products');
    }
  };

  const toggleProductSelection = (id: number) => {
    setSelectedProductIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const handleAddSelectedToCart = () => {
    const toAdd = products.filter((p) => selectedProductIds.has(p.id));
    toAdd.forEach((product) => {
      addToCart({
        product_id: product.id,
        product_name: product.name,
        unit_price: product.price,
        quantity: 1,
        image: product.image,
      });
    });
    void getCartCount();
    setShowCartToast(true);
    setSelectedProductIds(new Set());
    setTimeout(() => setShowCartToast(false), 2500);
  };

  const selectedCount = selectedProductIds.size;

  return (
    <div dir={isRtl ? 'rtl' : 'ltr'} className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-gray-50 flex flex-col">
      {showCartToast && (
        <div className="fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-50 border border-green-200 text-green-800 px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2 animate-fade-in">
          <i className="ri-shopping-cart-line text-xl"></i>
          <span className="font-semibold whitespace-nowrap">{t('store.addedToCart')}</span>
        </div>
      )}

      <main className="max-w-7xl mx-auto px-6 py-8 flex-1 w-full">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-gray-900">{t('store.title')}</h1>
          <p className="text-gray-500 mt-1">{t('store.subtitle')}</p>
        </div>

        {view === 'main' && (
          <>
            {loadingMain ? (
              <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
                {[1, 2, 3, 4, 5, 6].map((i) => (
                  <div key={i} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden animate-pulse">
                    <div className="h-44 bg-gray-200"></div>
                    <div className="p-4">
                      <div className="h-5 bg-gray-200 rounded w-2/3"></div>
                    </div>
                  </div>
                ))}
              </div>
            ) : mainCategories.length === 0 ? (
              <div className="bg-blue-50 border border-blue-100 rounded-xl p-6 text-center text-blue-700">
                <i className="ri-store-2-line text-3xl mb-2 block"></i>
                <p className="font-semibold">{t('store.noCategories')}</p>
                <p className="text-sm mt-1">{t('store.noCategoriesHint')}</p>
              </div>
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
                {mainCategories.map((cat) => (
                  <button
                    key={cat.id}
                    type="button"
                    onClick={() => goToSub(cat)}
                    className={`bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md hover:border-blue-200 transition-all cursor-pointer ${textStart}`}
                  >
                    <div className="h-44 bg-gray-100 overflow-hidden">
                      {cat.image ? (
                        <img src={cat.image} alt={cat.name} className="w-full h-full object-cover" />
                      ) : (
                        <div className="w-full h-full flex items-center justify-center">
                          <i className="ri-folder-open-line text-5xl text-gray-300"></i>
                        </div>
                      )}
                    </div>
                    <div className="p-4">
                      <h2 className="font-bold text-gray-900">{cat.name}</h2>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </>
        )}

        {view === 'sub' && (
          <>
            <div className="flex flex-wrap items-center gap-3 mb-4">
              <button
                type="button"
                onClick={goToMain}
                className="inline-flex items-center gap-1 text-gray-600 hover:text-blue-600 text-sm font-medium"
              >
                <i className={backArrow}></i>
                <span>{t('store.backToMain')}</span>
              </button>
              {selectedMain && <span className="text-gray-500">/ {selectedMain.name}</span>}
            </div>
            <div className="relative mb-6">
              <i className={`ri-search-line absolute ${searchIconClass} top-1/2 -translate-y-1/2 text-gray-400`}></i>
              <input
                type="text"
                placeholder={t('store.searchSubPlaceholder')}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className={`w-full ${searchInputPad} py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm`}
              />
            </div>
            {loadingSub ? (
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
                  <div key={i} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden animate-pulse">
                    <div className="h-36 bg-gray-200"></div>
                    <div className="p-4">
                      <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                    </div>
                  </div>
                ))}
              </div>
            ) : filteredSubCategories.length === 0 ? (
              <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
                <i className="ri-box-3-line text-5xl text-gray-300 mb-3 block"></i>
                <p className="text-gray-500">
                  {searchQuery ? t('store.noSubMatch') : t('store.noSubInSection')}
                </p>
              </div>
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {filteredSubCategories.map((sub) => (
                  <button
                    key={sub.id}
                    type="button"
                    onClick={() => openCountryModalForSub(sub)}
                    className={`bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md hover:border-blue-200 transition-all cursor-pointer ${textStart}`}
                  >
                    <div className="h-36 bg-gray-100 overflow-hidden">
                      {sub.image ? (
                        <img src={sub.image} alt={sub.name} className="w-full h-full object-cover" />
                      ) : (
                        <div className="w-full h-full flex items-center justify-center">
                          <i className="ri-gamepad-line text-4xl text-gray-300"></i>
                        </div>
                      )}
                    </div>
                    <div className="p-4">
                      <h3 className="font-semibold text-gray-900">{sub.name}</h3>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </>
        )}

        {view === 'products' && selectedSub && selectedCountry && (
          <>
            <div className="flex items-center justify-between gap-4 mb-6 py-3 px-4 rounded-xl bg-gray-100 border border-gray-200">
              <button
                type="button"
                onClick={() => setView('sub')}
                className="flex-shrink-0 p-2 text-gray-600 hover:text-blue-600 hover:bg-gray-200 rounded-lg transition-colors"
                aria-label={t('store.backToSubAria')}
              >
                <i className={`${backArrow} text-xl`}></i>
              </button>
              <div className={`flex flex-col min-w-0 flex-1 ${contextAlign}`}>
                <span className="font-bold text-gray-900 text-lg">{selectedSub.name}</span>
                <span className="inline-flex items-center gap-1.5 text-gray-600 text-sm mt-0.5">
                  {selectedCountry.flag && (
                    <img src={selectedCountry.flag} alt="" className="w-5 h-3.5 object-cover rounded-sm" />
                  )}
                  <span>{selectedCountry.name} -</span>
                </span>
              </div>
            </div>
            <div className="relative mb-6">
              <i className={`ri-search-line absolute ${searchIconClass} top-1/2 -translate-y-1/2 text-gray-400`}></i>
              <input
                type="text"
                placeholder={t('store.searchProductPlaceholder')}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className={`w-full ${searchInputPad} py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm`}
              />
            </div>
            {loadingProducts ? (
              <div className="space-y-3">
                {[1, 2, 3, 4, 5, 6].map((i) => (
                  <div key={i} className="h-20 bg-gray-100 rounded-xl animate-pulse"></div>
                ))}
              </div>
            ) : filteredProducts.length === 0 ? (
              <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
                <i className="ri-box-3-line text-5xl text-gray-300 mb-3 block"></i>
                <h3 className="text-xl font-bold text-gray-900 mb-2">{t('store.noProducts')}</h3>
                <p className="text-gray-500">
                  {searchQuery ? t('store.noProductMatch') : t('store.noProductsInCategory')}
                </p>
              </div>
            ) : (
              <>
                <div className={`space-y-3 ${selectedCount > 0 ? 'mb-24' : 'mb-8'}`}>
                  {filteredProducts.map((product) => (
                    <div
                      key={product.id}
                      className="bg-gray-100 rounded-xl border border-gray-200 p-4 flex items-center gap-4"
                    >
                      <button
                        type="button"
                        onClick={() => toggleProductSelection(product.id)}
                        className={`flex-shrink-0 w-6 h-6 rounded border-2 flex items-center justify-center transition-colors cursor-pointer ${selectedProductIds.has(product.id) ? 'bg-blue-600 border-blue-600' : 'border-gray-400 bg-white'}`}
                      >
                        {selectedProductIds.has(product.id) && <i className="ri-check-line text-white text-sm"></i>}
                      </button>
                      <div className="flex-1 min-w-0">
                        <h3 className="font-semibold text-gray-900">{product.name}</h3>
                        <p className="text-gray-900 mt-1">
                          {product.price} {t('store.currency')}
                        </p>
                        {product.original_price != null && product.original_price !== product.price && (
                          <p className="text-blue-600 text-sm mt-0.5">
                            {product.original_price} {t('store.currency')}
                          </p>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
                {selectedCount > 0 && (
                  <div className="fixed bottom-0 left-0 right-0 z-40 p-4 bg-white border-t border-gray-200 shadow-lg">
                    <div className="max-w-7xl mx-auto">
                      <button
                        type="button"
                        onClick={handleAddSelectedToCart}
                        className="w-full inline-flex items-center justify-center gap-2 bg-blue-600 text-white py-3.5 rounded-xl font-semibold hover:bg-blue-700 transition-colors cursor-pointer"
                      >
                        <i className="ri-shopping-cart-line text-xl"></i>
                        <span>{t('store.addToCartSelected', { count: String(selectedCount) })}</span>
                      </button>
                    </div>
                  </div>
                )}
              </>
            )}
          </>
        )}
      </main>

      {showCountryModal && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
          onClick={() => {
            setShowCountryModal(false);
            setPendingSubAfterCountry(null);
          }}
        >
          <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-bold text-gray-900">{t('store.chooseCountry')}</h2>
              <button
                type="button"
                onClick={() => {
                  setShowCountryModal(false);
                  setPendingSubAfterCountry(null);
                }}
                className="p-2 text-gray-400 hover:text-gray-600 rounded-lg"
              >
                <i className="ri-close-line text-2xl"></i>
              </button>
            </div>
            <div className="grid grid-cols-2 gap-3 max-h-80 overflow-y-auto">
              {countries.map((c) => (
                <button
                  key={c.id}
                  type="button"
                  onClick={() => onCountrySelect(c)}
                  className="flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 hover:bg-blue-50 hover:border-blue-200 transition-colors cursor-pointer"
                >
                  {c.flag && <img src={c.flag} alt="" className="w-10 h-7 object-cover rounded" />}
                  <span className="text-sm font-medium text-gray-800">{c.name}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

    </div>
  );
}