import { useEffect, useState } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import PageShell from '../../components/PageShell';
import TabMainHeader from '../../components/TabMainHeader';
import CouponBadge from '../../components/CouponBadge';
import ProductCarousel from '../../components/ProductCarousel';
import UserTabBar, { shouldRenderPageTabBar, syncTabBarSelected } from '../../components/UserTabBar';
import { request, toast } from '../../lib/api';
import { getProductImages } from '../../lib/product-images';
import { getCityCodeForCatalog, resolveUserCity } from '../../lib/user-location';
type Product = {
  id: string;
  name: string;
  subtitle?: string;
  price: number;
  benefitDisplay?: number;
  mainImageUrl?: string | null;
  carouselUrls?: string[] | null;
  aromaType: string;
};

const AROMA_TABS = [
  { key: 'QINGXIANG', label: '清香型', open: true },
  { key: 'JIANGXIANG', label: '酱香型', open: false },
  { key: 'NONGXIANG', label: '浓香型', open: false },
] as const;

export default function HomePage() {
  const [tab, setTab] = useState('QINGXIANG');
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [displayCity, setDisplayCity] = useState('郑州市');
  const [cityCode, setCityCode] = useState('410100');

  useDidShow(() => {
    syncTabBarSelected(0);
    void resolveUserCity().then((resolved) => {
      setDisplayCity(resolved.displayCity);
      setCityCode(getCityCodeForCatalog(resolved));
    });
  });

  useEffect(() => {
    setLoading(true);
    request<Product[]>(`/catalog/products?cityCode=${encodeURIComponent(cityCode)}`)
      .then((list) => setProducts(Array.isArray(list) ? list : []))
      .catch((e) => toast(e instanceof Error ? e.message : '加载失败'))
      .finally(() => setLoading(false));
  }, [cityCode]);

  function onAromaTabClick(key: string, open: boolean) {
    if (!open) {
      toast('暂未开放');
      return;
    }
    setTab(key);
  }

  function openProductDetail(id: string) {
    Taro.navigateTo({ url: `/pages/product-detail/index?id=${id}` });
  }

  const filtered = products.filter((p) => p.aromaType === tab);
  const onSale = tab === 'QINGXIANG';

  return (
    <PageShell
      variant="tab"
      className={`home-page${process.env.TARO_ENV === 'h5' ? ' h5-no-tab-header' : ''}`}
    >
      <TabMainHeader title="杜康好客" />

      <View className="home-aroma-nav">
        <View className="home-aroma-tabs">
          {AROMA_TABS.map((t) => (
            <Text
              key={t.key}
              className={`home-aroma-tab${tab === t.key ? ' home-aroma-tab--active' : ''}${!t.open ? ' home-aroma-tab--muted' : ''}`}
              onClick={() => onAromaTabClick(t.key, t.open)}
            >
              {t.label}
            </Text>
          ))}
        </View>
        <Text className="home-aroma-city">{displayCity}</Text>
      </View>

      <View className="home-product-list">
        {loading ? <View className="home-empty">加载中…</View> : null}
        {!loading && !onSale ? <View className="home-empty">该香型暂未上线，敬请期待</View> : null}
        {!loading && onSale && filtered.length === 0 ? (
          <View className="home-empty">暂无商品</View>
        ) : null}
        {!loading &&
          onSale &&
          filtered.map((p) => {
            const images = getProductImages(p);
            return (
              <View key={p.id} className="home-product-card">
                <View onClick={() => openProductDetail(p.id)}>
                  <ProductCarousel images={images} alt={p.name} variant="home" />
                  <View className="home-product-body">
                    <View className="home-product-row">
                      <Text className="home-product-name">{p.name}</Text>
                      <Text className="home-product-price">¥{Number(p.price).toFixed(2)}</Text>
                    </View>
                    {p.subtitle ? <Text className="home-product-sub">{p.subtitle}</Text> : null}
                    <View className="home-product-footer">
                      <CouponBadge amount={p.benefitDisplay ?? p.price} label="好客权益" />
                    </View>
                  </View>
                </View>
                <View className="home-product-actions">
                  <Text className="home-buy-btn" onClick={() => openProductDetail(p.id)}>
                    立即购买
                  </Text>
                </View>
              </View>
            );
          })}
      </View>

      {shouldRenderPageTabBar() ? <UserTabBar selected={0} /> : null}
    </PageShell>
  );
}