import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView, RichText, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getCmsWebsiteSiteInfo } from '@/api/official'
import type { CmsWebsite } from '@/api/official'
import { getCompressedImageUrl } from '@/utils/image'
import OfficialTabBar from '../components/OfficialTabBar'
import NavBar from '@/components/NavBar'
import { DEMO_SITE, DEMO_ADVANTAGES } from '../data/demo'

definePageConfig({
  navigationBarTitleText: '关于我们',
})

const About: React.FC = () => {
  const [site, setSite] = useState<CmsWebsite>()
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    getCmsWebsiteSiteInfo()
      .then((s) => setSite(s))
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  const effectiveSite: CmsWebsite = site ?? (DEMO_SITE as CmsWebsite)
  const aboutHtml =
    (site as any)?.config?.about || (site as any)?.description || DEMO_SITE.config?.about || ''

  const contact = {
    phone: effectiveSite.phone || DEMO_SITE.phone,
    email: effectiveSite.email || DEMO_SITE.email,
    address: effectiveSite.address || DEMO_SITE.address,
  }

  return (
    <View className='flex flex-col h-screen bg-gray-50'>
      <NavBar title='关于我们' />
      <ScrollView scrollY className='flex-1'>
        <View className='p-4'>
          <View className='flex items-center mb-4'>
            {effectiveSite.websiteLogo ? (
              <Image
                src={getCompressedImageUrl(effectiveSite.websiteLogo, { width: 120 })}
                className='w-16 h-16 rounded mr-3'
                mode='aspectFill'
              />
            ) : (
              <View className='w-16 h-16 rounded bg-brand-600 flex items-center justify-center mr-3'>
                <Text className='text-white text-2xl font-bold'>
                  {(effectiveSite.websiteName || '官').slice(0, 1)}
                </Text>
              </View>
            )}
            <Text className='text-lg font-semibold text-gray-800'>
              {effectiveSite.websiteName || '企业官网'}
            </Text>
          </View>

          {aboutHtml ? (
            <RichText nodes={aboutHtml} className='official-rich' />
          ) : (
            <Text className='text-sm text-gray-400'>
              {loading ? '加载中...' : '暂无介绍'}
            </Text>
          )}

          {/* 企业优势 */}
          <View className='mt-5'>
            <View className='flex items-center mb-3'>
              <View className='w-1 h-4 bg-brand-600 rounded mr-2' />
              <Text className='text-base font-semibold text-gray-800'>企业优势</Text>
            </View>
            <View className='flex flex-wrap -mx-1'>
              {DEMO_ADVANTAGES.map((a) => (
                <View key={a.title} className='w-1/2 px-1 mb-2'>
                  <View className='bg-white rounded-lg p-3 h-full'>
                    <Text className='text-xl'>{a.icon}</Text>
                    <Text className='text-sm font-medium text-gray-800 block mt-1'>{a.title}</Text>
                    <Text className='text-xs text-gray-400 mt-0.5 leading-snug block'>{a.desc}</Text>
                  </View>
                </View>
              ))}
            </View>
          </View>

          {/* 联系方式 */}
          <View className='mt-4 bg-white rounded-lg p-4'>
            <Text className='text-sm text-gray-500 block'>联系电话：{contact.phone || '—'}</Text>
            <Text className='text-sm text-gray-500 block mt-2'>邮箱：{contact.email || '—'}</Text>
            <Text className='text-sm text-gray-500 block mt-2'>地址：{contact.address || '—'}</Text>
          </View>
        </View>
      </ScrollView>
      <OfficialTabBar active='about' />
    </View>
  )
}

export default About