import React from 'react'
import { View, Pressable } from 'react-native'
import CustomText from '@/components/common/CustomText.jsx'
import { useTranslation } from 'react-i18next'

// WebView 页面不可用占位组件
// props:
// - failInfo: { type: 'http'|'error', status?: number, desc?: string, url?: string }
// - effectiveUrl: string | null
// - onRetry: () => void
// - onBack: () => void
const UnavailablePage = ({ failInfo, effectiveUrl, onRetry, onBack }) => {
  const { t } = useTranslation()
  const title = t('webview:unavailable.title')
  const desc = failInfo?.type === 'http' && failInfo?.status
    ? t('webview:unavailable.httpFailed', { status: failInfo.status })
    : t('webview:unavailable.generic')

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 24, backgroundColor: '#fff' }}>
      <View style={{ width: 88, height: 88, borderRadius: 44, backgroundColor: '#F5F7FA', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
        <CustomText style={{ fontSize: 36 }}>🌐</CustomText>
      </View>
      <CustomText style={{ fontSize: 18, color: '#111', fontFamily: 'SemiBold', marginBottom: 8 }}>{title}</CustomText>
      <CustomText style={{ fontSize: 14, color: '#666', textAlign: 'center', lineHeight: 20, marginBottom: 20 }}>
        {desc}
      </CustomText>
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        {!!effectiveUrl && (
          <Pressable onPress={onRetry} style={{ backgroundColor: '#0A84FF', paddingVertical: 10, paddingHorizontal: 20, borderRadius: 8, marginRight: 12 }}>
            <CustomText style={{ color: '#fff', fontSize: 16 }}>{t('webview:unavailable.retry')}</CustomText>
          </Pressable>
        )}
        <Pressable onPress={onBack} style={{ borderColor: '#0A84FF', borderWidth: 1, paddingVertical: 10, paddingHorizontal: 20, borderRadius: 8 }}>
          <CustomText style={{ color: '#0A84FF', fontSize: 16 }}>{t('webview:unavailable.back')}</CustomText>
        </Pressable>
      </View>
    </View>
  )
}

export default React.memo(UnavailablePage)
