import React, { useEffect, useState } from 'react'
import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import {
  ShieldCheck,
  People,
  Star,
  Phone,
  ArrowRight,
  Location
} from '@nutui/icons-react-taro'
import { configWebsiteField } from '@/api/cms/cmsWebsiteField'
import type { Config } from '@/api/cms/cmsWebsiteField/model'
import './index.scss'

const DEFAULT_BRAND_NAME = '南南佐顿门窗'
const DEFAULT_HOTLINE_DISPLAY = '13367810229'
const DEFAULT_HOTLINE = '13367810229'
const DEFAULT_ADDRESS = '欢迎到店咨询门窗定制方案'
const DEFAULT_WORKDAY = '周一至周日 08:30-18:30'

const solutionItems = [
  {
    title: '系统门窗定制',
    description: '适合新房装修、整屋升级，兼顾隔音、保温与颜值表现。'
  },
  {
    title: '阳台封窗升级',
    description: '改善通风采光与密封性，让阳台更安全、更好用。'
  },
  {
    title: '别墅门窗方案',
    description: '支持大面宽、转角窗与个性化立面设计定制。'
  },
  {
    title: '旧窗改造换新',
    description: '针对渗水、噪音、漏风等问题，缩短施工周期，减少打扰。'
  }
]

const highlightItems = [
  {
    icon: <ShieldCheck size={22} color="#ffffff" />,
    title: '品质保障',
    description: '10年质保，精选型材与进口五金，兼顾安全、隔音与耐久。'
  },
  {
    icon: <People size={22} color="#ffffff" />,
    title: '专业团队',
    description: '15年门窗安装经验，量尺、设计、施工全流程标准化服务。'
  },
  {
    icon: <Star size={22} color="#ffffff" />,
    title: '真实口碑',
    description: '10万+家庭选择，98%满意度，支持老房换窗与整屋升级。'
  }
]

const serviceTags = ['隔音静享', '节能保温', '抗风防水', '儿童安全', '颜值升级', '售后跟进']

const caseItems = [
  {
    title: '高端住宅',
    subtitle: '静音隔热更舒适',
    description: '针对高层住宅、改善型家庭，优化隔音、保温与采光表现。'
  },
  {
    title: '商业办公',
    subtitle: '兼顾颜值与效率',
    description: '满足门店、办公室、展示空间的通透感、安全性与维护便利。'
  },
  {
    title: '别墅定制',
    subtitle: '大面宽与个性化设计',
    description: '结合建筑立面风格，定制开启方式、型材颜色与细节工艺。'
  },
  {
    title: '旧窗改造',
    subtitle: '不大拆也能焕新',
    description: '聚焦老房渗水、噪音、密封差等问题，缩短施工周期，减少打扰。'
  }
]

const promiseItems = [
  {
    title: '方案先沟通再报价',
    description: '结合房型、预算与使用需求，给出更贴合实际的门窗建议。'
  },
  {
    title: '量尺安装标准化',
    description: '从上门测量、下单生产到现场安装，流程更清晰、交付更稳定。'
  },
  {
    title: '售后问题可跟进',
    description: '支持使用阶段咨询、五金维护与常见问题排查，减少后顾之忧。'
  }
]

const processItems = [
  {
    step: '01',
    title: '需求沟通',
    description: '了解房型、预算、风格偏好与使用场景。'
  },
  {
    step: '02',
    title: '上门量尺',
    description: '安排人员实地测量，核对尺寸与安装条件。'
  },
  {
    step: '03',
    title: '方案报价',
    description: '输出门窗方案、材质配置与施工报价。'
  },
  {
    step: '04',
    title: '安装售后',
    description: '规范安装交付，提供后续保养与售后支持。'
  }
]

const getDialNumber = (value?: string) => {
  const pureNumber = (value || '').replace(/\D/g, '')
  return pureNumber || DEFAULT_HOTLINE
}

const BrochurePage: React.FC = () => {
  const [config, setConfig] = useState<Config>()

  useEffect(() => {
    configWebsiteField({})
      .then((data) => {
        setConfig(data)
      })
      .catch(() => undefined)
  }, [])

  const brandName = config?.siteName || config?.loginTitle || DEFAULT_BRAND_NAME
  const hotlineText = config?.tel || DEFAULT_HOTLINE_DISPLAY
  const hotline = getDialNumber(config?.tel)
  const address = config?.address || DEFAULT_ADDRESS
  const workDay = config?.workDay || DEFAULT_WORKDAY

  useShareTimeline(() => {
    return {
      title: `${brandName} - 品牌画册`,
      path: '/pages/brochure/index'
    }
  })

  useShareAppMessage(() => {
    return {
      title: `${brandName}｜门窗定制安装服务`,
      path: '/pages/brochure/index'
    }
  })

  const handleBackHome = () => {
    Taro.reLaunch({
      url: '/pages/index/index'
    })
  }

  const handleCallPhone = () => {
    Taro.showModal({
      title: '拨打电话',
      content: `是否拨打客服热线 ${hotlineText}？`,
      confirmText: '拨打',
      cancelText: '取消',
      success: (res) => {
        if (!res.confirm) {
          return
        }

        Taro.makePhoneCall({
          phoneNumber: hotline,
          fail: () => {
            Taro.showToast({
              title: '拨号失败，请稍后重试',
              icon: 'none'
            })
          }
        })
      }
    })
  }

  const handleCopyAddress = () => {
    Taro.setClipboardData({
      data: address,
      success: () => {
        Taro.showToast({
          title: '地址已复制',
          icon: 'none'
        })
      }
    })
  }

  return (
    <View className="brochure-page">
      <View className="brochure-page__hero">
        <Text className="brochure-page__eyebrow">{brandName}</Text>
        <Text className="brochure-page__title">系统门窗定制与安装服务</Text>
        <Text className="brochure-page__desc">
          从方案咨询、上门量尺到安装售后，覆盖住宅、门店、别墅与旧窗改造等门窗升级场景。
        </Text>

        <View className="brochure-page__meta-list">
          <View className="brochure-page__meta-pill">
            <Text className="brochure-page__meta-text">10年质保</Text>
          </View>
          <View className="brochure-page__meta-pill">
            <Text className="brochure-page__meta-text">上门量尺</Text>
          </View>
          <View className="brochure-page__meta-pill">
            <Text className="brochure-page__meta-text">售后跟进</Text>
          </View>
        </View>

        <View className="brochure-page__stats">
          <View className="brochure-page__stat">
            <Text className="brochure-page__stat-value">20年</Text>
            <Text className="brochure-page__stat-label">质保承诺(整窗)</Text>
          </View>
          <View className="brochure-page__stat">
            <Text className="brochure-page__stat-value">15年</Text>
            <Text className="brochure-page__stat-label">安装经验</Text>
          </View>
          <View className="brochure-page__stat">
            <Text className="brochure-page__stat-value">10万+</Text>
            <Text className="brochure-page__stat-label">家庭选择</Text>
          </View>
        </View>
      </View>

      <View className="brochure-page__section">
        <View className="brochure-page__section-head">
          <Text className="brochure-page__section-title">主营方案</Text>
          <Text className="brochure-page__section-desc">把用户最常问的几类门窗服务先讲清楚，方便快速判断是否适合。</Text>
        </View>
        <View className="brochure-page__solution-grid">
          {solutionItems.map((item) => (
            <View key={item.title} className="brochure-page__solution-card">
              <Text className="brochure-page__card-title">{item.title}</Text>
              <Text className="brochure-page__card-desc">{item.description}</Text>
            </View>
          ))}
        </View>
      </View>

      <View className="brochure-page__section">
        <View className="brochure-page__section-head">
          <Text className="brochure-page__section-title">核心优势</Text>
          <Text className="brochure-page__section-desc">从产品配置到落地安装，都围绕居住体验与使用寿命做升级。</Text>
        </View>
        <View className="brochure-page__highlight-list">
          {highlightItems.map((item) => (
            <View key={item.title} className="brochure-page__highlight-card">
              <View className="brochure-page__highlight-icon">{item.icon}</View>
              <View className="brochure-page__highlight-content">
                <Text className="brochure-page__card-title">{item.title}</Text>
                <Text className="brochure-page__card-desc">{item.description}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>

      <View className="brochure-page__section">
        <View className="brochure-page__section-head">
          <Text className="brochure-page__section-title">门窗升级关键词</Text>
          <Text className="brochure-page__section-desc">正式版页面先突出用户最关心的体验点，后续也方便叠加真实案例素材。</Text>
        </View>
        <View className="brochure-page__tag-list">
          {serviceTags.map((item) => (
            <View key={item} className="brochure-page__tag">
              <Text className="brochure-page__tag-text">{item}</Text>
            </View>
          ))}
        </View>
      </View>

      <View className="brochure-page__section">
        <View className="brochure-page__section-head">
          <Text className="brochure-page__section-title">服务承诺</Text>
          <Text className="brochure-page__section-desc">把“怎么做事”说清楚，比堆很多空话更像正式版。</Text>
        </View>
        <View className="brochure-page__promise-list">
          {promiseItems.map((item, index) => (
            <View key={item.title} className="brochure-page__promise-item">
              <Text className="brochure-page__promise-index">{`0${index + 1}`}</Text>
              <View className="brochure-page__promise-content">
                <Text className="brochure-page__card-title">{item.title}</Text>
                <Text className="brochure-page__card-desc">{item.description}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>

      <View className="brochure-page__section">
        <View className="brochure-page__section-head">
          <Text className="brochure-page__section-title">精选案例方向</Text>
          <Text className="brochure-page__section-desc">当前先保留正式版结构位，后续可直接替换真实项目图片、客户评价与施工前后对比。</Text>
        </View>
        <View className="brochure-page__case-list">
          {caseItems.map((item, index) => (
            <View key={item.title} className="brochure-page__case-card">
              <View className="brochure-page__case-visual">
                <Text className="brochure-page__case-index">{`0${index + 1}`}</Text>
                <Text className="brochure-page__case-visual-title">{item.title}</Text>
              </View>
              <View className="brochure-page__case-content">
                <Text className="brochure-page__card-title">{item.subtitle}</Text>
                <Text className="brochure-page__card-desc">{item.description}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>

      <View className="brochure-page__section brochure-page__section--process">
        <View className="brochure-page__section-head">
          <Text className="brochure-page__section-title">服务流程</Text>
          <Text className="brochure-page__section-desc">标准流程更省心，方案确认后即可安排施工交付。</Text>
        </View>
        <View className="brochure-page__process-list">
          {processItems.map((item) => (
            <View key={item.step} className="brochure-page__process-item">
              <View className="brochure-page__process-step">
                <Text className="brochure-page__process-step-text">{item.step}</Text>
              </View>
              <View className="brochure-page__process-content">
                <Text className="brochure-page__card-title">{item.title}</Text>
                <Text className="brochure-page__card-desc">{item.description}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>

      <View className="brochure-page__contact-card">
        <View className="brochure-page__contact-head">
          <Text className="brochure-page__cta-title">预约咨询与到店信息</Text>
          <Text className="brochure-page__cta-desc">联系方式改为优先读取系统配置，避免正式版上线后还要手动改死文案。</Text>
        </View>

        <View className="brochure-page__contact-list">
          <View className="brochure-page__contact-item">
            <Text className="brochure-page__contact-label">服务热线</Text>
            <Text className="brochure-page__contact-value">{hotlineText}</Text>
          </View>
          <View className="brochure-page__contact-item">
            <Text className="brochure-page__contact-label">服务时间</Text>
            <Text className="brochure-page__contact-value">{workDay}</Text>
          </View>
          <View className="brochure-page__contact-item">
            <Text className="brochure-page__contact-label">门店地址</Text>
            <Text className="brochure-page__contact-value">{address}</Text>
          </View>
        </View>

        <View className="brochure-page__cta-actions">
          <View className="brochure-page__button brochure-page__button--primary" onClick={handleCallPhone}>
            <Phone size={18} color="#ffffff" />
            <Text className="brochure-page__button-text brochure-page__button-text--light">拨打热线</Text>
          </View>
          <View className="brochure-page__button brochure-page__button--secondary" onClick={handleCopyAddress}>
            <Location size={18} color="#1f2937" />
            <Text className="brochure-page__button-text brochure-page__button-text--dark">复制地址</Text>
          </View>
          <View className="brochure-page__button brochure-page__button--ghost" onClick={handleBackHome}>
            <Text className="brochure-page__button-text brochure-page__button-text--gold">返回首页</Text>
            <ArrowRight size={16} color="#9f6a2d" />
          </View>
        </View>

        <Text className="brochure-page__cta-tip">下一步如果你给我真实案例图、门店地址和热线，我可以直接把这一页收口成上线版。</Text>
      </View>
    </View>
  )
}

export default BrochurePage
