import Taro, { getCurrentInstance, useShareAppMessage } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { useMemo, useState } from 'react'
import { Button } from '@nutui/nutui-react-taro'
import { useConfig } from '@/hooks/useConfig'
import './index.scss'

function Home() {
  const [ecoTab, setEcoTab] = useState<'template' | 'plugin'>('template')
  const { config } = useConfig()

  useShareAppMessage(() => {
    // 获取当前用户ID，用于生成邀请链接
    const userId = Taro.getStorageSync('UserId')

    return {
      title: config?.siteName
        ? `${config.siteName} - 网宿软件`
        : '软件开发平台：SaaS + 私有化 + 模板/插件生态',
      path: userId
        ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}`
        : `/pages/index/index`,
      success: function () {
        console.log('首页分享成功')
        Taro.showToast({
          title: '分享成功',
          icon: 'success',
          duration: 2000
        })
      },
      fail: function () {
        console.log('首页分享失败')
        Taro.showToast({
          title: '分享失败',
          icon: 'none',
          duration: 2000
        })
      }
    }
  })

  const scrollToSection = (id: string) => {
    const query = Taro.createSelectorQuery()
    const inst = getCurrentInstance()
    // 兼容 React 运行时：尽量将查询限定在当前页面作用域内
    if (inst?.page && typeof query.in === 'function') query.in(inst.page)
    query.selectViewport().scrollOffset()
    query.select(`#${id}`).boundingClientRect()
    query.exec((res: any[]) => {
      const viewport = res?.[0]
      const rect = res?.[1]
      const scrollTop = (viewport?.scrollTop || 0) + (rect?.top || 0) - 50
      if (Number.isFinite(scrollTop)) {
        Taro.pageScrollTo({ scrollTop: Math.max(scrollTop, 0), duration: 260 })
      }
    })
  }

  const toAbsoluteMaybe = (url: string) => {
    if (/^https?:\/\//i.test(url)) return url
    const base = (config?.domain || '').trim()
    if (!base) return url
    const withProto = /^https?:\/\//i.test(base) ? base : `https://${base}`
    // 处理 domain 末尾/ 与 url 开头/ 的组合
    const normalizedBase = withProto.replace(/\/+$/, '')
    const normalizedPath = url.startsWith('/') ? url : `/${url}`
    return `${normalizedBase}${normalizedPath}`
  }

  const openMaybeLink = (url?: string) => {
    if (!url) return
    const abs = toAbsoluteMaybe(url)
    // 相对路径在小程序内直接跳转
    if (url.startsWith('/')) {
      Taro.navigateTo({ url })
      return
    }
    // 小程序内无法直接打开外链，提示用户手动复制到浏览器
    if (/^https?:\/\//i.test(abs)) {
      Taro.showModal({
        title: '提示',
        content: '该链接需要在浏览器中打开，请点击确认后手动复制链接访问。',
        showCancel: false,
        confirmText: '知道了'
      })
      return
    }
    Taro.showToast({ title: '请在 PC 端访问该入口', icon: 'none', duration: 1600 })
  }

  const callPhone = () => {
    const tel = (config?.tel || '').trim()
    if (!tel) {
      Taro.showToast({ title: '暂无联系电话', icon: 'none', duration: 1600 })
      return
    }
    Taro.makePhoneCall({ phoneNumber: tel })
  }

  const goToDeveloperCenter = () => {
    Taro.navigateTo({ url: '/developer/index' })
  }

  const goToEnterpriseConsole = () => {
    Taro.navigateTo({ url: '/enterprise/index' })
  }

  const products = useMemo(
    () => [
      {
        title: '企业官网',
        recommend: true,
        desc: '品牌展示与获客转化，支持多模板、多语言、SEO 与可视化配置。',
        tags: ['模板', 'SEO', '多语言', '私有化'],
        adminUrl: 'https://site.websoft.top',
      },
      {
        title: '小程序/公众号',
        recommend: false,
        desc: '多端渠道接入与统一管理，适配常见内容与电商场景。',
        tags: ['多端', '渠道', '可扩展'],
        adminUrl: 'https://mp.websoft.top',
      },
      {
        title: '电商系统',
        recommend: true,
        desc: '商品/订单/支付/营销基础能力，插件化扩展，支持多端触达。',
        tags: ['支付', '插件', '营销', '多租户'],
        adminUrl: 'https://shop.websoft.top',
      },
      {
        title: '管理后台',
        recommend: false,
        desc: '多租户管理、角色权限、组织架构与可扩展菜单体系。',
        tags: ['权限', '多租户', '审计'],
        adminUrl: 'https://oa.websoft.top',
      },
      {
        title: '开发者中心',
        recommend: false,
        desc: '应用开发与交付入口：项目、应用、API Key、部署与教程文档。',
        tags: ['项目', '应用', 'API Key', '部署'],
        adminUrl: '/developer',
        onClick: goToDeveloperCenter,
      },
      {
        title: '企业控制台',
        recommend: false,
        desc: '企业应用管理、成员权限、订单账单与运营监控。',
        tags: ['应用', '成员', '账单', '监控'],
        adminUrl: '/enterprise',
        onClick: goToEnterpriseConsole,
      },
    ],
    []
  )

  const capabilities = useMemo(
    () => [
      {
        title: 'SaaS 多租户平台',
        badge: '核心',
        desc: '租户隔离、组织与权限体系、配置中心与审计能力，为多业务线统一底座。',
      },
      {
        title: '私有化部署',
        badge: '可选',
        desc: '支持本地/专有云部署，提供部署文档、验收清单与升级策略，满足安全合规。',
      },
      {
        title: '模板市场',
        badge: '生态',
        desc: '行业模板一键套用，默认配置与初始化脚本配套，交付更标准、上线更快。',
      },
      {
        title: '插件市场',
        badge: '扩展',
        desc: '支付、会员、营销、工单等能力按需加购；支持授权、更新与版本管理。',
      },
      {
        title: '自动开通链路',
        badge: '交付',
        desc: '选品支付后自动创建租户、初始化模块/菜单/基础数据，并交付访问入口。',
      },
      {
        title: '模块化与可扩展',
        badge: '开发',
        desc: '支持按模块组合产品能力，插件化扩展点让二开与生态合作更高效。',
      },
    ],
    []
  )

  return (
    <>
      <View className="home-page">
        {/* 首屏：价值主张 + 关键动作 */}
        <View className="hero">
          <View className="hero__bgGlow" />
          <View className="hero__inner">
            <View className="hero__tag">
              <Text className="hero__tagText">v3.0 版本发布</Text>
            </View>

            <View className="hero__title">
              <Text className="hero__titleText">SaaS + 私有化 + 模板/插件生态</Text>
            </View>

            <View className="hero__desc">
              <Text className="hero__descText">
                面向企业官网、公众号/小程序、电商系统、企业管理后台等业务场景，提供多租户架构与模块化能力；客户下单后自动创建租户、初始化模块与基础数据，实现“支付即开通”。
              </Text>
            </View>

            <View className="hero__actions">
              <Button
                type="primary"
                block
                className="hero__btn hero__btn--primary"
                onClick={() => scrollToSection('contact')}
              >
                预约演示
              </Button>
              <View className="hero__btnRow">
              </View>
            </View>
          </View>
        </View>

        {/* 快捷导航：减少滚动成本 */}
        <View className="quickNav">
          {[
            { key: 'products', title: '产品矩阵' },
            { key: 'capabilities', title: '核心能力' },
            { key: 'flow', title: '开通流程' },
            { key: 'ecosystem', title: '生态' },
          ].map((x) => (
            <View key={x.key} className="quickNav__item" onClick={() => scrollToSection(x.key)}>
              <Text className="quickNav__text">{x.title}</Text>
            </View>
          ))}
        </View>

        {/* 角色入口卡片 */}
        <View className="roleEntry">
          <View className="roleEntry__title">
            <Text className="roleEntry__titleText">快速入口</Text>
          </View>
          <View className="roleEntry__grid">
            <View className="roleEntry__card roleEntry__card--developer" onClick={goToDeveloperCenter}>
              <View className="roleEntry__icon">
                <Text className="roleEntry__iconText">🛠️</Text>
              </View>
              <View className="roleEntry__info">
                <Text className="roleEntry__cardTitle">开发者中心</Text>
                <Text className="roleEntry__cardDesc">项目 · 应用 · API Key</Text>
              </View>
              <View className="roleEntry__arrow">
                <Text className="roleEntry__arrowText">›</Text>
              </View>
            </View>
            <View className="roleEntry__card roleEntry__card--enterprise" onClick={goToEnterpriseConsole}>
              <View className="roleEntry__icon">
                <Text className="roleEntry__iconText">🏢</Text>
              </View>
              <View className="roleEntry__info">
                <Text className="roleEntry__cardTitle">企业控制台</Text>
                <Text className="roleEntry__cardDesc">应用 · 成员 · 账单</Text>
              </View>
              <View className="roleEntry__arrow">
                <Text className="roleEntry__arrowText">›</Text>
              </View>
            </View>
          </View>
        </View>

        {/* 产品矩阵 */}
        <View className="section" id="products">
          <View className="section__head">
            <Text className="section__title">产品矩阵</Text>
            <Text className="section__desc">
              面向不同业务场景的可售卖产品，支持套餐化售卖、支付即开通、模板/插件加购与私有化交付。
            </Text>
          </View>

          <View className="productGrid">
            {products.map((p) => (
              <View key={p.title} className="card productCard">
                <View className="productCard__top">
                  <Text className="productCard__title">{p.title}</Text>
                  {p.recommend ? (
                    <View className="badge badge--green">
                      <Text className="badge__text">推荐</Text>
                    </View>
                  ) : null}
                </View>
                <Text className="productCard__desc">{p.desc}</Text>
                <View className="tagRow">
                  {p.tags.map((t) => (
                    <View key={t} className="tag">
                      <Text className="tag__text">{t}</Text>
                    </View>
                  ))}
                </View>
                <View className="productCard__actions">
                  {p.onClick ? (
                    <Button size="small" type="primary" onClick={p.onClick}>
                      进入
                    </Button>
                  ) : (
                    <Button size="small" type="primary" onClick={() => openMaybeLink(p.adminUrl)}>
                      立即开通
                    </Button>
                  )}
                </View>
              </View>
            ))}
          </View>

          <View className="section__foot">
            <Button type="default" block onClick={() => scrollToSection('ecosystem')}>
              了解模板/插件生态
            </Button>
          </View>
        </View>

        {/* 核心能力 */}
        <View className="section section--alt" id="capabilities">
          <View className="section__head">
            <Text className="section__title">核心能力</Text>
            <Text className="section__desc">用一套平台能力，覆盖产品售卖、交付开通、运营升级与生态变现。</Text>
          </View>

          <View className="capGrid">
            {capabilities.map((c) => (
              <View key={c.title} className="card capCard">
                <View className="capCard__top">
                  <Text className="capCard__title">{c.title}</Text>
                  <View className="badge badge--soft">
                    <Text className="badge__text">{c.badge}</Text>
                  </View>
                </View>
                <Text className="capCard__desc">{c.desc}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* 支付即开通 */}
        <View className="section" id="flow">
          <View className="section__head">
            <Text className="section__title">支付即开通</Text>
            <Text className="section__desc">
              客户选择产品并支付后，平台自动完成：创建租户、初始化模块、写入默认配置与基础数据、生成管理员账号并交付访问入口。
            </Text>
          </View>

          <View className="card flowCard">
            {[
              { title: '选择产品/套餐', desc: '支持产品矩阵、模板/插件加购、增值项' },
              { title: '下单支付', desc: '支付成功触发开通任务编排' },
              { title: '创建租户', desc: '租户隔离、域名/应用信息绑定、管理员生成' },
              { title: '模块初始化', desc: '按所购产品加载模块与菜单权限，写入基础数据/示例数据' },
              { title: '交付上线', desc: 'SaaS 直接可用；私有化交付镜像/部署文档/验收清单' },
            ].map((s, idx) => (
              <View key={s.title} className="flowStep">
                <View className="flowStep__dot">
                  <Text className="flowStep__dotText">{idx + 1}</Text>
                </View>
                <View className="flowStep__body">
                  <Text className="flowStep__title">{s.title}</Text>
                  <Text className="flowStep__desc">{s.desc}</Text>
                </View>
              </View>
            ))}
          </View>

          <View className="section__foot">
            <Button type="primary" block onClick={() => scrollToSection('products')}>
              选择产品并开始规划
            </Button>
          </View>
        </View>

        {/* 模板与插件生态 */}
        <View className="section section--alt" id="ecosystem">
          <View className="section__head">
            <Text className="section__title">模板与插件生态</Text>
            <Text className="section__desc">通过模板加速交付，通过插件扩展能力；支持购买、授权、更新与版本管理。</Text>
          </View>

          <View className="segTabs">
            <View
              className={`segTabs__item ${ecoTab === 'template' ? 'segTabs__item--active' : ''}`}
              onClick={() => setEcoTab('template')}
            >
              <Text className="segTabs__text">模板</Text>
            </View>
            <View
              className={`segTabs__item ${ecoTab === 'plugin' ? 'segTabs__item--active' : ''}`}
              onClick={() => setEcoTab('plugin')}
            >
              <Text className="segTabs__text">插件</Text>
            </View>
          </View>

          {ecoTab === 'template' ? (
            <View className="twoCard">
              <View className="card">
                <Text className="card__title">行业模板</Text>
                <Text className="card__desc">按行业/场景提供成套页面与配置，支持一键套用、二次编辑与多版本管理。</Text>
              </View>
              <View className="card">
                <Text className="card__title">交付标准化</Text>
                <Text className="card__desc">模板与初始化脚本配套，让“开通后的默认站点”可直接验收。</Text>
              </View>
            </View>
          ) : (
            <View className="twoCard">
              <View className="card">
                <Text className="card__title">能力扩展</Text>
                <Text className="card__desc">支付、会员、营销、工单、数据统计等能力按需加购，随买随用。</Text>
              </View>
              <View className="card">
                <Text className="card__title">升级与授权</Text>
                <Text className="card__desc">支持版本升级、授权校验、到期续费与灰度发布。</Text>
              </View>
            </View>
          )}

          <View className="section__foot">
            <Button
              type="default"
              block
              onClick={() => {
                Taro.showToast({ title: '该入口可对接到模板/插件市场', icon: 'none', duration: 1600 })
              }}
            >
              了解模板/插件市场
            </Button>
          </View>
        </View>

        {/* 底部 CTA */}
        <View className="section" id="contact">
          <View className="section__head">
            <Text className="section__title">联系我们</Text>
            <Text className="section__desc">
              直接电话沟通或留下需求，我们会按你的业务场景给出产品组合、开通链路与部署方案（SaaS/私有化）。
            </Text>
          </View>

          <View className="card">
            <Text className="card__title">咨询内容建议</Text>
            <View className="list">
              {[
                '你希望售卖哪些产品（官网/电商/小程序/门户等）？',
                '是否需要模板/插件市场（购买、授权、更新）？',
                '是否需要“支付即开通”（自动创建租户/初始化模块与数据）？',
                '交付方式：SaaS 或私有化部署？是否有合规要求？',
              ].map((t) => (
                <View key={t} className="list__item">
                  <View className="list__dot" />
                  <Text className="list__text">{t}</Text>
                </View>
              ))}
            </View>

            <View className="contactMeta">
              {config?.tel ? (
                <View className="contactMeta__row">
                  <Text className="contactMeta__label">电话</Text>
                  <Text className="contactMeta__value">{config.tel}</Text>
                </View>
              ) : null}
              {config?.workDay ? (
                <View className="contactMeta__row">
                  <Text className="contactMeta__label">工作日</Text>
                  <Text className="contactMeta__value">{config.workDay}</Text>
                </View>
              ) : null}
            </View>

            <View className="contactActions">
              <Button type="primary" block onClick={callPhone}>
                电话咨询
              </Button>
            </View>
          </View>
        </View>

        <View className="bottomCta">
          <View className="bottomCta__text">
            <Text className="bottomCta__title">想快速搭建并交付一个可运营的产品？</Text>
            <Text className="bottomCta__desc">预约演示，我们将按你的业务场景给出方案与报价。</Text>
          </View>
          <View className="bottomCta__actions">
            <Button type="default" block className={'bottom__view'} onClick={() => scrollToSection('products')}>
              看产品矩阵
            </Button>
            <Button type="primary" block onClick={() => scrollToSection('contact')}>
              马上联系
            </Button>
          </View>
        </View>
      </View>
    </>
  )
}

export default Home