import { useEffect, useMemo, useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import Taro, { usePageScroll, useRouter, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
import PageShell from '../../components/PageShell';
import PageNavBar from '../../components/PageNavBar';
import ProductCarousel from '../../components/ProductCarousel';
import ShareNavButton from '../../components/ShareNavButton';
import WechatShareReady from '../../components/WechatShareReady';
import { request, toast } from '../../lib/api';
import {
  DEFAULT_SHARE_DESC,
  DEFAULT_SHARE_TITLE,
  toWeappShareMessage,
} from '../../lib/wechat-share';

type StoreMedia = {
  url?: string | null;
  bizType?: string | null;
  mediaType?: string | null;
};

type Store = {
  id: string;
  name: string;
  address?: string;
  province?: string;
  cityName?: string;
  city?: string;
  district?: string;
  phone?: string;
  intro?: string | null;
  benefitUsageRule?: string | null;
  coverUrl?: string | null;
  carouselUrls?: string[] | null;
  media?: StoreMedia[] | null;
  openTime?: string | null;
  closeTime?: string | null;
  openTime2?: string | null;
  closeTime2?: string | null;
  avgPrice?: number | null;
  latitude?: number | string | null;
  longitude?: number | string | null;
  category?: { name: string } | null;
};

function uniqueUrls(urls: Array<string | null | undefined>) {
  const seen = new Set<string>();
  const out: string[] = [];
  for (const raw of urls) {
    const url = String(raw || '').trim();
    if (!url || seen.has(url)) continue;
    seen.add(url);
    out.push(url);
  }
  return out;
}

function envPhotoUrls(store: Store) {
  return uniqueUrls(
    (store.media || [])
      .filter((m) => !m.bizType || m.bizType === 'ENV')
      .map((m) => m.url),
  );
}

function fullAddress(store: Store) {
  const city = store.cityName || store.city || '';
  return `${store.province || ''}${city}${store.district || ''}${store.address || ''}`.trim();
}

export default function StoreDetailPage() {
  const router = useRouter();
  const storeId = router.params.id ?? '';
  const [store, setStore] = useState<Store | null>(null);
  const [headerSolid, setHeaderSolid] = useState(false);

  usePageScroll(({ scrollTop }) => {
    setHeaderSolid(scrollTop > 100);
  });

  useEffect(() => {
    if (!storeId) return;
    request<Store>(`/stores/${storeId}`)
      .then(setStore)
      .catch(() => {
        request<Store[]>('/stores')
          .then((list) => {
            const found = (Array.isArray(list) ? list : []).find((s) => s.id === storeId);
            if (found) setStore(found);
            else toast('门店不存在');
          })
          .catch((e) => toast(e instanceof Error ? e.message : '加载失败'));
      });
  }, [storeId]);

  const sharePayload = useMemo(
    () => {
      const envFirst = store ? envPhotoUrls(store)[0] : undefined;
      return {
        title: store?.name || DEFAULT_SHARE_TITLE,
        desc: store?.intro?.trim() || store?.address || DEFAULT_SHARE_DESC,
        path: `/pages/store-detail/index?id=${storeId}`,
        imgUrl: store?.coverUrl || envFirst || store?.carouselUrls?.[0] || undefined,
      };
    },
    [store, storeId],
  );

  useShareAppMessage(() => toWeappShareMessage(sharePayload));
  useShareTimeline(() => ({
    title: sharePayload.title || DEFAULT_SHARE_TITLE,
    query: storeId ? `id=${storeId}` : '',
    imageUrl: sharePayload.imgUrl,
  }));

  function goBack() {
    const pages = Taro.getCurrentPages();
    if (pages.length > 1) Taro.navigateBack();
    else Taro.switchTab({ url: '/pages/stores/index' });
  }

  function callStore() {
    if (!store?.phone) {
      toast('暂无门店电话');
      return;
    }
    Taro.makePhoneCall({ phoneNumber: store.phone }).catch(() => toast('无法拨打电话'));
  }

  function openMap() {
    if (!store) return;
    const lat = store.latitude != null ? Number(store.latitude) : NaN;
    const lng = store.longitude != null ? Number(store.longitude) : NaN;
    const address = fullAddress(store) || store.address || store.name;

    if (Number.isFinite(lat) && Number.isFinite(lng)) {
      Taro.openLocation({
        latitude: lat,
        longitude: lng,
        name: store.name,
        address,
        scale: 16,
      }).catch(() => {
        if (process.env.TARO_ENV === 'h5' && typeof window !== 'undefined') {
          window.location.href = `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(store.name)}&address=${encodeURIComponent(address)}`;
          return;
        }
        toast('无法打开地图导航');
      });
      return;
    }

    if (process.env.TARO_ENV === 'h5' && typeof window !== 'undefined' && address) {
      window.location.href = `https://uri.amap.com/search?keyword=${encodeURIComponent(address)}&src=dukang`;
      return;
    }
    toast('门店位置待完善，暂无法导航');
  }

  if (!store) {
    return (
      <PageShell variant="scroll" className="store-detail-page">
        <PageNavBar title="门店详情" solid onBack={goBack} />
        <View className="page-with-nav-bar u-empty">加载中…</View>
      </PageShell>
    );
  }

  const envPhotos = envPhotoUrls(store);
  const images = uniqueUrls([
    store.coverUrl,
    ...(store.carouselUrls || []),
    ...envPhotos,
  ]);

  const intro = store.intro?.trim() || '';
  const benefitRule = store.benefitUsageRule?.trim() || '';

  function previewEnv(index: number) {
    if (!envPhotos.length) return;
    Taro.previewImage({
      current: envPhotos[index],
      urls: envPhotos,
    }).catch(() => toast('无法预览图片'));
  }

  return (
    <PageShell variant="scroll" className="store-detail-page" hasFixedFooter>
      <WechatShareReady payload={sharePayload} />
      <PageNavBar
        title={store.name}
        solid={headerSolid}
        titleVisible={headerSolid}
        onBack={goBack}
        right={<ShareNavButton payload={sharePayload} />}
      />

      <View className="store-detail-hero full-bleed">
        <ProductCarousel images={images} alt={store.name} variant="store" />
      </View>

      <View className="store-detail-info-card">
        <Text className="store-detail-name">{store.name}</Text>

        <View className="store-detail-row">
          <Text className="store-detail-meta store-detail-meta--flex">
            {store.district ? `${store.district} · ` : ''}
            {store.address || '地址待完善'}
          </Text>
          <Text className="store-detail-action" onClick={openMap}>
            导航
          </Text>
        </View>

        <Text className="store-detail-meta">
          营业时间:{' '}
          {(() => {
            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}`);
            return parts.length ? parts.join('，') : '10:00-22:00';
          })()}
        </Text>
        {store.avgPrice != null && Number(store.avgPrice) > 0 ? (
          <Text className="store-detail-meta">人均约 ¥{Number(store.avgPrice).toFixed(0)}</Text>
        ) : null}

        {store.phone ? (
          <View className="store-detail-row">
            <Text className="store-detail-meta store-detail-meta--flex">电话: {store.phone}</Text>
            <Text className="store-detail-action" onClick={callStore}>
              拨打
            </Text>
          </View>
        ) : null}

        <View className="store-detail-tags">
          {store.category?.name ? (
            <Text className="store-detail-tag">{store.category.name}</Text>
          ) : null}
          <Text className="store-detail-tag">可核销</Text>
          <Text className="store-detail-tag">好客门店</Text>
        </View>
      </View>

      {intro ? (
        <View className="store-detail-section">
          <Text className="store-detail-section-title">门店详情</Text>
          <Text className="store-detail-intro">{intro}</Text>
        </View>
      ) : null}

      {benefitRule ? (
        <View className="store-detail-section">
          <Text className="store-detail-section-title">好客权益券使用规则</Text>
          <Text className="store-detail-intro">{benefitRule}</Text>
        </View>
      ) : null}

      {envPhotos.length > 0 ? (
        <View className="store-detail-section">
          <Text className="store-detail-section-title">店内环境</Text>
          <View className="store-detail-env-grid">
            {envPhotos.map((url, index) => (
              <View
                key={`${url}-${index}`}
                className="store-detail-env-item"
                onClick={() => previewEnv(index)}
              >
                <Image className="store-detail-env-img" src={url} mode="aspectFill" />
              </View>
            ))}
          </View>
        </View>
      ) : null}

      <View className="store-detail-bar">
        <View
          className="u-btn u-btn--block"
          onClick={() => Taro.navigateTo({ url: '/pages/redeem/index' })}
        >
          <Text>到店核销</Text>
        </View>
      </View>
    </PageShell>
  );
}