import { useEffect, useMemo, useRef, useState } from 'react';
import { View, Text, Image, Input } from '@tarojs/components';
import Taro, { useDidShow, usePullDownRefresh, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
import PageShell from '../../components/PageShell';
import TabMainHeader from '../../components/TabMainHeader';
import WechatShareReady from '../../components/WechatShareReady';
import RegionPicker from '../../components/RegionPicker';
import CategoryPicker, {
  EMPTY_CATEGORY,
  formatCategoryLabel,
  type CategorySelection,
  type StoreCategoryNode,
} from '../../components/CategoryPicker';
import {
  DEFAULT_REGION,
  formatRegionLabel,
  matchesRegionFilter,
  type RegionSelection,
} from '../../lib/region-data';
import UserTabBar, { shouldRenderPageTabBar, syncTabBarSelected } from '../../components/UserTabBar';
import {
  getCityCodeForCatalog,
  readCachedUserCoords,
  resolveUserCity,
  toCityWideRegion,
  type UserCoords,
} from '../../lib/user-location';
import { FALLBACK_CITY_CODE } from '../../lib/product-images';
import { formatDistanceMeters } from '../../lib/geo';
import { getToken, request, toast } from '../../lib/api';
import {
  getStoresListCache,
  isStoresSessionBootstrapped,
  markStoresSessionBootstrapped,
  patchStoresFilterCache,
  setStoresListCache,
  type StoreSortKey,
} from '../../lib/stores-session';
import {
  buildSceneSharePayload,
  toWeappShareMessage,
  toWeappShareTimeline,
} from '../../lib/wechat-share';
import BenefitSloganBar from '../../components/BenefitSloganBar';
import { storeCategoryTags, storeLeafCategoryIds, storeStarCount } from '../../lib/store-display';
import openBadgeImg from '../../assets/icons/store-open-badge.png';

type Store = {
  id: string;
  name: string;
  address?: string;
  province?: string;
  cityName?: string;
  district?: string;
  coverUrl?: string | null;
  openTime?: string | null;
  closeTime?: string | null;
  openTime2?: string | null;
  closeTime2?: string | null;
  avgPrice?: number | null;
  status?: string;
  categoryId?: string | null;
  category?: {
    id?: string;
    name?: string;
    parentId?: string | null;
    parent?: { name?: string } | null;
  } | null;
  categories?: {
    id?: string;
    name?: string;
    parentId?: string | null;
    parent?: { name?: string } | null;
  }[] | null;
  tags?: unknown;
  rating?: number | string | null;
  latitude?: number | string | null;
  longitude?: number | string | null;
  distanceMeters?: number | null;
  redeemCount?: number | null;
};

const STORE_SORT_OPTIONS: { key: StoreSortKey; label: string }[] = [
  { key: 'nearby', label: '附近优先' },
  { key: 'rating', label: '好评优先' },
  { key: 'redeem', label: '核销次数' },
];

function makeCityKey(region: Pick<RegionSelection, 'province' | 'city'>): string {
  return `${region.province}|${region.city}`;
}

/**
 * 定位城市若未开城，接口会 fallback 到郑州 cityCode；
 * 筛选器必须与真实拉取城市一致，否则列表被客户端滤空。
 */
function regionForCatalogFetch(resolved: {
  openCity: boolean;
  cityCode?: string;
  region: RegionSelection;
}): { cityCode: string; region: RegionSelection } {
  const cityCode = getCityCodeForCatalog(resolved);
  if (resolved.openCity && resolved.cityCode) {
    return { cityCode, region: toCityWideRegion(resolved.region) };
  }
  return { cityCode: FALLBACK_CITY_CODE, region: toCityWideRegion(DEFAULT_REGION) };
}

export default function StoresPage() {
  const cached = getStoresListCache();
  const [stores, setStores] = useState<Store[]>(() => (cached?.items as Store[] | undefined) ?? []);
  const [loading, setLoading] = useState(() => !cached && !isStoresSessionBootstrapped());
  const [keywordInput, setKeywordInput] = useState(() => cached?.keywordInput ?? '');
  const [keyword, setKeyword] = useState(() => cached?.keyword ?? '');
  const [region, setRegion] = useState<RegionSelection>(
    () => cached?.filterRegion ?? cached?.listRegion ?? DEFAULT_REGION,
  );
  const [regionOpen, setRegionOpen] = useState(false);
  const [category, setCategory] = useState<CategorySelection>(
    () => cached?.category ?? EMPTY_CATEGORY,
  );
  const [categoryOpen, setCategoryOpen] = useState(false);
  const [categoryTree, setCategoryTree] = useState<StoreCategoryNode[]>([]);
  const [sort, setSort] = useState<StoreSortKey>(() => cached?.sort ?? 'nearby');
  const [sortOpen, setSortOpen] = useState(false);
  const fetchCityKeyRef = useRef<string | null>(cached?.cityKey ?? null);
  const fetchSeqRef = useRef(0);
  const regionRef = useRef(region);
  regionRef.current = region;
  const regionLabel = formatRegionLabel(region);
  const categoryLabel = formatCategoryLabel(category);
  const sortLabel = STORE_SORT_OPTIONS.find((o) => o.key === sort)?.label ?? '附近优先';
  const showBootLoading = loading && stores.length === 0;

  const childIdsByParent = useMemo(() => {
    const map = new Map<string, string[]>();
    for (const root of categoryTree) {
      map.set(
        root.id,
        (root.children ?? []).map((c) => c.id),
      );
    }
    return map;
  }, [categoryTree]);

  async function fetchStores(
    nextCode: string,
    coords: UserCoords | null,
    cityKey: string,
    listRegion: RegionSelection,
    /** 写入会话的筛选器；默认保留用户当前选择 */
    filterRegion: RegionSelection = regionRef.current,
  ) {
    const seq = ++fetchSeqRef.current;
    const qs = new URLSearchParams();
    if (nextCode) qs.set('cityCode', nextCode);
    if (coords) {
      qs.set('lat', String(coords.latitude));
      qs.set('lng', String(coords.longitude));
    }
    const path = qs.toString() ? `/stores?${qs}` : '/stores';
    try {
      const list = await request<Store[]>(path);
      if (seq !== fetchSeqRef.current) return;
      const items = Array.isArray(list) ? list : [];
      setStores(items);
      fetchCityKeyRef.current = cityKey;
      const prev = getStoresListCache();
      setStoresListCache({
        cityKey,
        cityCode: nextCode,
        authKey: getToken() || '',
        listRegion: toCityWideRegion(listRegion),
        items,
        filterRegion,
        keyword: prev?.keyword ?? keyword,
        keywordInput: prev?.keywordInput ?? keywordInput,
        category: prev?.category ?? category,
        sort: prev?.sort ?? sort,
      });
    } catch (e) {
      if (seq !== fetchSeqRef.current) return;
      toast(e instanceof Error ? e.message : '加载失败');
    } finally {
      if (seq === fetchSeqRef.current) setLoading(false);
    }
  }

  /**
   * 首次进入：弹窗 + 定位 + 拉列表。
   * 同次再切回：只同步 tab 选中态（登录态未变）。
   * 登录/退出后 token 变化：按缓存失效重新拉列表（白名单）。
   */
  useDidShow(() => {
    syncTabBarSelected(1);

    const authKey = getToken() || '';
    const cache = getStoresListCache();
    if (isStoresSessionBootstrapped()) {
      if (cache && (cache.authKey ?? '') === authKey) {
        return;
      }
      // 登录态变了：保留筛选，重新拉列表
      void (async () => {
        setLoading(true);
        const nextCode = cache?.cityCode || FALLBACK_CITY_CODE;
        const listRegion = cache?.listRegion
          ? {
              province: cache.listRegion.province,
              city: cache.listRegion.city,
              district: cache.listRegion.district || '全部',
            }
          : regionRef.current;
        const nextCityKey = cache?.cityKey || makeCityKey(listRegion);
        await fetchStores(
          nextCode,
          readCachedUserCoords(),
          nextCityKey,
          listRegion,
          regionRef.current,
        );
      })();
      return;
    }
    markStoresSessionBootstrapped();

    void (async () => {
      const { confirm } = await Taro.showModal({
        title: '获取当前位置',
        content: '是否允许获取当前位置来搜索附近门店？拒绝后将按默认城市展示，可下拉刷新重新定位。',
        confirmText: '允许',
        cancelText: '暂不',
      }).catch(() => ({ confirm: false, cancel: true }));

      if (confirm) {
        setLoading(true);
        const resolved = await resolveUserCity(true);
        const { cityCode, region: nextRegion } = regionForCatalogFetch(resolved);
        const nextCityKey = makeCityKey(nextRegion);
        setRegion(nextRegion);
        regionRef.current = nextRegion;
        await fetchStores(
          cityCode,
          readCachedUserCoords(),
          nextCityKey,
          nextRegion,
          nextRegion,
        );
        return;
      }

      const nextRegion = toCityWideRegion(DEFAULT_REGION);
      const nextCityKey = makeCityKey(nextRegion);
      setRegion(nextRegion);
      regionRef.current = nextRegion;
      setLoading(true);
      await fetchStores(FALLBACK_CITY_CODE, null, nextCityKey, nextRegion, nextRegion);
    })();
  });

  useEffect(() => {
    void request<StoreCategoryNode[]>('/store-categories')
      .then((tree) => setCategoryTree(Array.isArray(tree) ? tree : []))
      .catch(() => setCategoryTree([]));
  }, []);

  usePullDownRefresh(() => {
    void (async () => {
      try {
        const resolved = await resolveUserCity(true);
        const { cityCode, region: nextRegion } = regionForCatalogFetch(resolved);
        const nextCityKey = makeCityKey(nextRegion);
        setRegion(nextRegion);
        regionRef.current = nextRegion;
        if (fetchCityKeyRef.current !== nextCityKey) {
          setStores([]);
          setLoading(true);
        }
        await fetchStores(
          cityCode,
          readCachedUserCoords(),
          nextCityKey,
          nextRegion,
          nextRegion,
        );
      } catch (e) {
        toast(e instanceof Error ? e.message : '加载失败');
        setLoading(false);
      } finally {
        Taro.stopPullDownRefresh();
      }
    })();
  });

  function matchesCategory(store: Store): boolean {
    if (!category.parentId) return true;
    const leafIds = storeLeafCategoryIds(store);
    const parentIds = new Set<string>();
    if (Array.isArray(store.categories)) {
      for (const cat of store.categories) {
        if (cat.parentId) parentIds.add(String(cat.parentId));
      }
    }
    const legacyParent = String(store.category?.parentId || '');
    if (legacyParent) parentIds.add(legacyParent);
    if (category.childId) {
      return leafIds.includes(category.childId);
    }
    if ([...parentIds].some((id) => id === category.parentId)) return true;
    const siblings = childIdsByParent.get(category.parentId) ?? [];
    return leafIds.some((id) => siblings.includes(id));
  }

  const filtered = useMemo(() => {
    const list = stores.filter((s) => {
      if (!matchesRegionFilter(s, region)) return false;
      if (!matchesCategory(s)) return false;
      if (!keyword.trim()) return true;
      const q = keyword.trim();
      return s.name.includes(q) || (s.address ?? '').includes(q) || (s.district ?? '').includes(q);
    });
    const next = [...list];
    next.sort((a, b) => {
      if (sort === 'rating') {
        const diff = storeStarCount(b.rating) - storeStarCount(a.rating);
        if (diff !== 0) return diff;
      } else if (sort === 'redeem') {
        const diff = (b.redeemCount ?? 0) - (a.redeemCount ?? 0);
        if (diff !== 0) return diff;
      }
      const da = a.distanceMeters ?? Number.POSITIVE_INFINITY;
      const db = b.distanceMeters ?? Number.POSITIVE_INFINITY;
      return da - db;
    });
    return next;
  }, [stores, region, category, keyword, sort, childIdsByParent]);

  function applySearch() {
    const next = keywordInput.trim();
    setKeyword(next);
    patchStoresFilterCache({ keyword: next, keywordInput });
  }

  function resetFilters() {
    setKeywordInput('');
    setKeyword('');
    setCategory(EMPTY_CATEGORY);
    setSort('nearby');
    setRegion(DEFAULT_REGION);
    regionRef.current = DEFAULT_REGION;
    patchStoresFilterCache({
      keyword: '',
      keywordInput: '',
      category: EMPTY_CATEGORY,
      sort: 'nearby',
      filterRegion: DEFAULT_REGION,
    });
  }

  function hoursText(store: Store): string {
    const parts: string[] = [];
    if (store.openTime && store.closeTime) parts.push(`${store.openTime}-${store.closeTime}`);
    if (store.openTime2 && store.closeTime2) parts.push(`${store.openTime2}-${store.closeTime2}`);
    if (!parts.length) parts.push('10:00-22:00');
    return `营业时间: ${parts.join(' ')}`;
  }

  const sharePayload = useMemo(
    () =>
      buildSceneSharePayload('stores', {
        path: '/pages/stores/index',
      }),
    [],
  );

  useShareAppMessage(() => toWeappShareMessage(sharePayload));
  useShareTimeline(() => toWeappShareTimeline(sharePayload));

  return (
    <PageShell variant="tab" className="store-page no-tab-header">
      <WechatShareReady payload={sharePayload} />
      <TabMainHeader title="门店" />

      <View className="store-slogan-wrap">
        <BenefitSloganBar />
      </View>

      <View className="store-filter">
        <View className="store-search-row">
          <Input
            className="store-search-input"
            placeholder="搜索门店名称或地址"
            value={keywordInput}
            confirmType="search"
            onInput={(e) => setKeywordInput(e.detail.value)}
            onConfirm={applySearch}
          />
          <View className="store-search-btn" onClick={applySearch}>
            <Text className="store-search-btn-text">搜索</Text>
          </View>
        </View>

        <View className="store-filter-row">
          <View
            className="store-filter-chip"
            onClick={() => {
              setCategoryOpen(false);
              setSortOpen(false);
              setRegionOpen(true);
            }}
          >
            <Text className="store-filter-chip-text">{regionLabel}</Text>
            <Text className="store-filter-chip-arrow">▾</Text>
          </View>
          <View
            className="store-filter-chip"
            onClick={() => {
              setRegionOpen(false);
              setSortOpen(false);
              setCategoryOpen(true);
            }}
          >
            <Text className="store-filter-chip-text">{categoryLabel}</Text>
            <Text className="store-filter-chip-arrow">▾</Text>
          </View>
          <View
            className="store-filter-chip"
            onClick={() => {
              setRegionOpen(false);
              setCategoryOpen(false);
              setSortOpen(true);
            }}
          >
            <Text className="store-filter-chip-text">{sortLabel}</Text>
            <Text className="store-filter-chip-arrow">▾</Text>
          </View>
          <View
            className="store-filter-icon-btn"
            onClick={resetFilters}
            aria-label="重置筛选"
          >
            {/* 小程序 View 伪元素不稳定，用 Text 保证真机可见 */}
            <Text className="store-filter-icon-glyph">↺</Text>
          </View>
        </View>
      </View>

      <View className="store-list">
        {showBootLoading ? <View className="u-empty">加载中…</View> : null}
        {!showBootLoading && filtered.length === 0 ? (
          <View className="u-empty">暂无营业中门店</View>
        ) : null}
        {!showBootLoading &&
          filtered.map((s) => (
            <View
              key={s.id}
              className="store-card"
              onClick={() => Taro.navigateTo({ url: `/pages/store-detail/index?id=${s.id}` })}
            >
              <View className="store-card-cover-wrap">
                {s.coverUrl ? (
                  <Image className="store-card-cover" src={s.coverUrl} mode="aspectFill" />
                ) : (
                  <View className="store-card-cover store-card-cover--empty" />
                )}
                <Image
                  className="store-card-open-badge"
                  src={openBadgeImg}
                  mode="aspectFit"
                />
              </View>
              <View className="store-card-body">
                <View className="store-card-row store-card-row--head">
                  <Text className="store-card-name">{s.name}</Text>
                </View>
                {(() => {
                  const categoryLabels = storeCategoryTags(s, categoryTree);
                  return categoryLabels.length ? (
                    <View className="store-card-category-wrap">
                      <Text className="store-card-category-text">{categoryLabels.join('、')}</Text>
                    </View>
                  ) : null;
                })()}
                <View className="store-card-row store-card-row--rating">
                  <View className="store-card-stars">
                    {[1, 2, 3, 4, 5].map((n) => (
                      <Text
                        key={n}
                        className={`store-card-star${n <= storeStarCount(s.rating) ? ' store-card-star--on' : ''}`}
                      >
                        ★
                      </Text>
                    ))}
                  </View>
                  <Text className="store-card-redeem">核销{s.redeemCount ?? 0}次</Text>
                </View>
                <View className="store-card-row store-card-row--mid">
                  <Text className="store-card-address" numberOfLines={2}>
                    {s.address || (s.district ? `${s.district}` : '地址待完善')}
                  </Text>
                  <Text className="store-card-distance">
                    {formatDistanceMeters(s.distanceMeters)}
                  </Text>
                </View>
                <View className="store-card-row store-card-row--hours">
                  <Text className="store-card-hours">{hoursText(s)}</Text>
                </View>
              </View>
            </View>
          ))}
      </View>

      {shouldRenderPageTabBar() ? <UserTabBar selected={1} /> : null}
      <RegionPicker
        open={regionOpen}
        value={region}
        levels={3}
        onClose={() => setRegionOpen(false)}
        onConfirm={(next) => {
          setRegion(next);
          regionRef.current = next;
          patchStoresFilterCache({ filterRegion: next });
        }}
      />
      <CategoryPicker
        open={categoryOpen}
        tree={categoryTree}
        value={category}
        onClose={() => setCategoryOpen(false)}
        onConfirm={(next) => {
          setCategory(next);
          patchStoresFilterCache({ category: next });
        }}
      />
      {sortOpen ? (
        <View className="region-picker-overlay" onClick={() => setSortOpen(false)}>
          <View className="region-picker-sheet store-sort-sheet" onClick={(e) => e.stopPropagation()}>
            <View className="region-picker-toolbar">
              <View className="region-picker-tabs">
                <Text className="region-picker-tab active">排序规则</Text>
              </View>
              <Text className="region-picker-confirm ready" onClick={() => setSortOpen(false)}>
                关闭
              </Text>
            </View>
            <View className="region-picker-list">
              {STORE_SORT_OPTIONS.map((opt) => (
                <View
                  key={opt.key}
                  className={`region-picker-option${sort === opt.key ? ' selected' : ''}`}
                  onClick={() => {
                    setSort(opt.key);
                    patchStoresFilterCache({ sort: opt.key });
                    setSortOpen(false);
                  }}
                >
                  <Text>{opt.label}</Text>
                </View>
              ))}
            </View>
          </View>
        </View>
      ) : null}
    </PageShell>
  );
}