import React, { useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Platform, Alert, Image, useWindowDimensions } from 'react-native';
import { useRouter } from 'expo-router';
import * as WebBrowser from 'expo-web-browser';
import { Trans, useTranslation } from 'react-i18next';
import { SafeAreaView } from 'react-native-safe-area-context';
import { setConsentAccepted, getConsentAccepted } from '../../src/storage/appStorage';
import { fetchLegalLinks } from '@/src/services/legalApi';
import { getOnboardingCompleted } from '@/src/storage/appStorage';
import { API_BASE_URL } from '@/src/constants/env';
import { isTraditionalChineseLocaleTag } from '@/src/i18n/locale';

// 导入 SVG 组件
import FlowersBg from '../../assets/images/index/flowers_endbg.svg';
import WelcomeBtn from '../../assets/images/index/welcome_btn.svg';

// 繁中開屏 consent 文案：寫死在元件內，避免 Metro/iOS bundle 快取導致永遠顯示舊文案。
// 若需修改，請改這裡並同步 client/src/i18n/locales/zh-TW.json 的 consent 區塊。
const ZH_TW_CONSENT = {
  title: '我們知道，',
  subtitle: '當媽媽很不容易。',
  subtitleSecondary: '這裡給你一些溫柔的肯定與提醒',
};

export default function SplashScreen() {
  const router = useRouter();
  const { t, i18n } = useTranslation();
  const { width, height } = useWindowDimensions();
  const [showConsent, setShowConsent] = useState(false);
  const isTablet = Platform.OS === 'ios' && Math.min(width, height) >= 768;

  // 繁中時強制使用上方常數（含 zh-TW / zh-Hant / zh-Hant-TW），其餘用 i18n
  const isZhTW = isTraditionalChineseLocaleTag(i18n.language || '');
  const title = isZhTW ? ZH_TW_CONSENT.title : t('consent.title');
  const subtitle = isZhTW ? ZH_TW_CONSENT.subtitle : t('consent.subtitle');
  const subtitleSecondary = isZhTW ? ZH_TW_CONSENT.subtitleSecondary : t('consent.subtitleSecondary');

  useEffect(() => {
    if (typeof __DEV__ !== 'undefined' && __DEV__ && showConsent) {
      console.log('[i18n consent] language=', i18n.language, 'title=', title, 'subtitle=', subtitle);
    }
  }, [showConsent, i18n.language, title, subtitle]);
  const [links, setLinks] = useState<{ privacy?: string; terms?: string }>({});
  const [linksLoading, setLinksLoading] = useState(false);
  const mountedRef = useRef(true);

  useEffect(() => {
    checkConsent();
  }, []);

  useEffect(() => {
    return () => {
      mountedRef.current = false;
    };
  }, []);

  const checkConsent = async () => {
    const accepted = await getConsentAccepted();
    setShowConsent(!accepted);
    if (accepted) {
      // 已同意协议则直接分发到目标页，避免先回到 /（index）再二次跳转导致“闪一下”
      const completed = await getOnboardingCompleted();
      if (completed) {
        router.replace('/(app)/home');
      } else {
        router.replace('/(onboarding)/onboarding');
      }
    }
  };

  const handleAgree = async () => {
    await setConsentAccepted(true);
    setShowConsent(false);
    // 跳转到 onboarding 流程
    router.replace('/(onboarding)/onboarding');
  };

  const openLink = async (url: string) => {
    try {
      await WebBrowser.openBrowserAsync(url);
    } catch (error) {
      Alert.alert(t('common.error'), t('common.openLinkError'));
    }
  };

  async function refreshLegalLinks(): Promise<{ privacy?: string; terms?: string }> {
    if (mountedRef.current) setLinksLoading(true);
    try {
      const res = await fetchLegalLinks();
      const next = { privacy: res.privacyPolicyUrl, terms: res.termsOfUseUrl };
      if (mountedRef.current) setLinks(next);
      return next;
    } catch (e) {
      // 不阻塞主流程：失败时不崩溃，链接入口仍可点（会提示）
      if (__DEV__) console.log('[LegalLinks] 拉取失败（splash）:', e);
      if (mountedRef.current) setLinks({});
      return {};
    } finally {
      if (mountedRef.current) setLinksLoading(false);
    }
  }

  async function handleOpenLegal(type: 'privacy' | 'terms') {
    const currentUrl = type === 'privacy' ? links.privacy : links.terms;
    if (currentUrl) {
      await openLink(currentUrl);
      return;
    }

    // 链接还没拿到/拉取失败：点击时主动再拉一次，避免“点了没反应”
    const next = await refreshLegalLinks();
    const nextUrl = type === 'privacy' ? next.privacy : next.terms;
    if (nextUrl) {
      await openLink(nextUrl);
      return;
    }

    const msg =
      typeof __DEV__ !== 'undefined' && __DEV__
        ? t('consent.linkUnavailableDev', { baseUrl: API_BASE_URL })
        : t('consent.linkUnavailable');
    Alert.alert(t('common.notice'), msg);
  }

  // 拉取协议链接（由后端按语言下发；默认 EN）
  useEffect(() => {
    void refreshLegalLinks();
  }, []);

  const bgDecorationHeight = isTablet ? Math.round(height * 0.55) : height * 0.6;
  const bgDecorationTop = height - bgDecorationHeight;
  const contentTop = bgDecorationTop + (bgDecorationHeight * 0.25);
  const contentWidth = isTablet ? Math.min(640, Math.floor(width * 0.76)) : width;
  const topImageWidth = isTablet ? Math.min(430, Math.floor(width * 0.48)) : 308;
  const topImageHeight = isTablet ? Math.min(460, Math.floor(height * 0.45)) : 354;
  const topImageMarginTop = isTablet ? 148 : 60;
  const bgWidth = width + 10;
  const bgLeft = -3;
  const buttonSize = isTablet ? { width: 108, height: 70 } : { width: 87, height: 57 };
  const bottomOffset = isTablet ? 28 : 60;
  const buttonBottomGap = isTablet ? 28 : 40;
  const noticeStyle = isTablet
    ? { fontSize: 14, lineHeight: 20, paddingHorizontal: 32, maxWidth: contentWidth }
    : null;
  const noticeLinkStyle = isTablet ? { fontSize: 14 } : null;
  const titleStyle = isTablet ? { fontSize: 50, lineHeight: 60 } : null;
  const subtitleStyle = isTablet ? { marginTop: 10, fontSize: 18, lineHeight: 24 } : null;

  return (
    <View style={styles.container}>
      {/* 中间的背景装饰 SVG (现在放在上面，作为上层) */}
      <View style={[styles.bgDecorationContainer, { bottom: 0, left: bgLeft }]}>
        <FlowersBg width={bgWidth} height={bgDecorationHeight} preserveAspectRatio="none" />
      </View>

      {/* 顶部的花图片 (现在放在下面，作为下层) */}
      <View style={[styles.topImageContainer, { marginTop: topImageMarginTop }]}>
        <Image
          source={require('../../assets/images/index/index_flowers.png')}
          style={[styles.topImage, { width: topImageWidth, height: topImageHeight }]}
          resizeMode="contain"
        />
      </View>

      {/* 文案内容：主標題兩行 + 可選二級標題（字號更小、顏色更淺）；繁中為元件內常數，其餘用 i18n */}
      <View style={[styles.contentContainer, { position: 'absolute', top: contentTop, width: contentWidth }]}>
        <Text style={[styles.titleText, titleStyle]}>
          {title}
          {'\n'}
          {subtitle}
        </Text>
        {subtitleSecondary ? (
          <Text style={[styles.consentSubtitleSecondary, subtitleStyle]}>{subtitleSecondary}</Text>
        ) : null}
      </View>

      <SafeAreaView style={[styles.bottomContainer, { bottom: bottomOffset, width: contentWidth }]} edges={['bottom']}>
        {showConsent && (
          <>
            <TouchableOpacity
              onPress={handleAgree}
              activeOpacity={0.8}
              style={[styles.buttonWrapper, { marginBottom: buttonBottomGap }]}
              accessibilityRole="button"
              accessibilityLabel={t('consent.agree')}
            >
              <WelcomeBtn width={buttonSize.width} height={buttonSize.height} />
            </TouchableOpacity>

            <Text style={[styles.noticeText, noticeStyle]}>
              <Trans
                i18nKey="consent.noticeRich"
                values={{
                  privacyLabel: t('consent.privacy'),
                  termsLabel: t('consent.terms'),
                  privacySuffix: !links.privacy && linksLoading ? t('consent.linkLoadingSuffix') : '',
                  termsSuffix: !links.terms && linksLoading ? t('consent.linkLoadingSuffix') : '',
                }}
                components={{
                  privacy: (
                    <Text
                      style={[styles.noticeLinkText, noticeLinkStyle, !links.privacy && styles.noticeLinkTextDisabled]}
                      onPress={() => void handleOpenLegal('privacy')}
                      suppressHighlighting
                    />
                  ),
                  terms: (
                    <Text
                      style={[styles.noticeLinkText, noticeLinkStyle, !links.terms && styles.noticeLinkTextDisabled]}
                      onPress={() => void handleOpenLegal('terms')}
                      suppressHighlighting
                    />
                  ),
                }}
              />
            </Text>
          </>
        )}
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    height: '100%',
    alignSelf: 'stretch',
    backgroundColor: '#F5D3B5', // 匹配 Figma 背景色
    alignItems: 'center',
  },
  topImageContainer: {
    zIndex: 1, // 降低层级
  },
  topImage: {
    width: 308,
    height: 354,
  },
  bgDecorationContainer: {
    position: 'absolute',
    zIndex: 2, // 提高层级，使其覆盖在图片之上
  },
  contentContainer: {
    alignItems: 'center',
    zIndex: 3,
  },
  titleText: {
    fontSize: 30,
    lineHeight: 42,
    color: '#772F00', // 匹配 Figma 文字颜色
    textAlign: 'center',
    fontWeight: '600',
    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
  },
  consentSubtitleSecondary: {
    marginTop: 12,
    fontSize: 16,
    lineHeight: 22,
    color: 'rgba(119, 47, 0, 0.6)',
    textAlign: 'center',
    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
  },
  bottomContainer: {
    position: 'absolute',
    alignItems: 'center',
    zIndex: 4,
  },
  buttonWrapper: {
    marginBottom: 40,
  },
  noticeText: {
    marginTop: 10,
    paddingHorizontal: 28,
    fontSize: 12,
    lineHeight: 16,
    textAlign: 'center',
    color: 'rgba(119, 47, 0, 0.45)',
  },
  noticeLinkText: {
    fontSize: 12,
    // 颜色区分：协议链接更醒目
    color: 'rgba(119, 47, 0, 0.75)',
    textDecorationLine: 'underline',
    fontWeight: '600',
  },
  noticeLinkTextDisabled: {
    opacity: 0.55,
  },
});