import { useEffect, useState, useCallback } from 'react'
import {
  Card,
  Typography,
  Space,
  Select,
  message,
  Button,
  Form,
  Input,
  InputNumber,
  Row,
  Col,
  Divider,
  Image,
  Tag,
  Tabs,
  Collapse,
  Switch,
  Alert,
  Popconfirm,
  Upload,
} from 'antd'
import {
  SaveOutlined,
  PictureOutlined,
  NotificationOutlined,
  EyeOutlined,
  PlusOutlined,
  DeleteOutlined,
  InfoCircleOutlined,
  SkinOutlined,
  GlobalOutlined,
  MessageOutlined,
  SendOutlined,
} from '@ant-design/icons'
import {
  listSites,
  updateSiteBranding,
  updateSite,
  getMe,
  fetchSiteSMSConfig,
  updateSiteSMSConfig,
  testSiteSMSConfig,
  uploadSiteImage,
  type Site,
  type SiteBrandingPayload,
  type SiteSMSConfig,
  type UpdateSiteSMSConfigPayload,
  type TestSiteSMSConfigPayload,
} from '../api'
import { useMember } from '../MemberContext'
import BannerVisualEditor from '../components/BannerVisualEditor'
import {
  HOME_BANNER_MOBILE_RATIO,
  HOME_BANNER_PC_RATIO,
  createEmptyDistributionBanner,
  parseDistributionBanners,
  serializeDistributionBanners,
  type DistributionBannerConfig,
} from '../homeBanner'

interface AnnouncementItem {
  title: string
  content?: string
}

interface StorefrontTextForm {
  tagline: string
  hero_badge: string
  hero_desc: string
  card_sub: string
}

// 与前台 shared/utils/storefrontText.ts 的默认文案保持一致（留空即回落到这些值）。
const DEFAULT_STOREFRONT_TEXT: StorefrontTextForm = {
  tagline: '安全交易 · 全程留痕',
  hero_badge: '品质保障',
  hero_desc: '账号均经过严格验号与安全质检，支持自动交付与全程留痕，为您提供安全无忧的租号体验。',
  card_sub: '严格验号 · 统一质检交付 · 专属独立订单',
}

interface FooterInfo {
  copyright?: string
  icp?: string
  contact?: string
}

interface HomeEntryConfig {
  title: string
  subtitle: string
  image_url: string
  enabled: boolean
}

const defaultAWEntry: HomeEntryConfig = {
  title: 'AW炫彩回收',
  subtitle: '点击查看回收说明',
  image_url: '',
  enabled: true,
}

const defaultCoopEntry: HomeEntryConfig = {
  title: '合作与反馈',
  subtitle: '点击查看联系方式',
  image_url: '',
  enabled: true,
}

function parseHomeEntry(raw: string | undefined, fallback: HomeEntryConfig) {
  const text = (raw || '').trim()
  if (!text) return { useMain: true, value: fallback }
  try {
    const parsed = JSON.parse(text) as Partial<HomeEntryConfig>
    return {
      useMain: false,
      value: {
        title: parsed.title || fallback.title,
        subtitle: parsed.subtitle || fallback.subtitle,
        image_url: parsed.image_url || '',
        enabled: parsed.enabled !== false,
      },
    }
  } catch {
    return { useMain: true, value: fallback }
  }
}

export default function SiteSettings() {
  const member = useMember()
  const [sites, setSites] = useState<Site[]>([])
  const [siteID, setSiteID] = useState<number | undefined>(member?.site_id)
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [currentSite, setCurrentSite] = useState<Site | null>(null)

  // Visual state for customizer
  const [logoUrl, setLogoUrl] = useState<string>('')
  const [faviconUrl, setFaviconUrl] = useState<string>('')
  const [banners, setBanners] = useState<DistributionBannerConfig[]>([])
  const [announcements, setAnnouncements] = useState<AnnouncementItem[]>([])
  const [storefrontText, setStorefrontText] = useState<StorefrontTextForm>({
    ...DEFAULT_STOREFRONT_TEXT,
  })
  const [footerInfo, setFooterInfo] = useState<FooterInfo>({
    copyright: '',
    icp: '',
    contact: '',
  })
  const [receiveCostDelta, setReceiveCostDelta] = useState(0)
  const [awUseMain, setAwUseMain] = useState(true)
  const [awEntry, setAwEntry] = useState<HomeEntryConfig>(defaultAWEntry)
  const [coopUseMain, setCoopUseMain] = useState(true)
  const [coopEntry, setCoopEntry] = useState<HomeEntryConfig>(defaultCoopEntry)
  const [savingRatio, setSavingRatio] = useState(false)

  // SMS config state
  const [smsConfig, setSmsConfig] = useState<SiteSMSConfig>({
    enabled: false,
    provider: 'aliyun',
    access_key_id: '',
    masked_secret: '',
    has_secret: false,
    endpoint: 'dysmsapi.aliyuncs.com',
    sign_name: '',
    login_template_code: '',
  })
  const [smsSecretInput, setSmsSecretInput] = useState('')
  const [savingSMS, setSavingSMS] = useState(false)
  const [testPhone, setTestPhone] = useState('')
  const [testingSMS, setTestingSMS] = useState(false)
  const [testCooldown, setTestCooldown] = useState(0)

  useEffect(() => {
    if (testCooldown <= 0) return
    const timer = setInterval(() => {
      setTestCooldown((prev) => (prev > 0 ? prev - 1 : 0))
    }, 1000)
    return () => clearInterval(timer)
  }, [testCooldown])

  const loadSite = useCallback(async (id: number) => {
    setLoading(true)
    try {
      const rows = await listSites()
      setSites(rows)
      const found = rows.find((s) => s.id === id)
      if (found) {
        setCurrentSite(found)
        setLogoUrl(found.logo_url || '')
        setFaviconUrl(found.favicon_url || '')

        setBanners(parseDistributionBanners(found.banners_json, found.site_name))

        try {
          setAnnouncements(found.announcements_json ? JSON.parse(found.announcements_json) : [])
        } catch {
          setAnnouncements([])
        }

        try {
          setFooterInfo(found.footer_info_json ? JSON.parse(found.footer_info_json) : {})
        } catch {
          setFooterInfo({})
        }

        try {
          const parsed = found.storefront_text_json
            ? (JSON.parse(found.storefront_text_json) as Partial<StorefrontTextForm>)
            : {}
          setStorefrontText({
            tagline: parsed.tagline?.trim() || '',
            hero_badge: parsed.hero_badge?.trim() || '',
            hero_desc: parsed.hero_desc?.trim() || '',
            card_sub: parsed.card_sub?.trim() || '',
          })
        } catch {
          setStorefrontText({ tagline: '', hero_badge: '', hero_desc: '', card_sub: '' })
        }
        setReceiveCostDelta(Math.max(0, found.receive_cost_delta || 0))
        const aw = parseHomeEntry(found.aw_recycle_json, defaultAWEntry)
        setAwUseMain(aw.useMain)
        setAwEntry(aw.value)
        const coop = parseHomeEntry(found.cooperation_feedback_json, defaultCoopEntry)
        setCoopUseMain(coop.useMain)
        setCoopEntry(coop.value)

        try {
          const sms = await fetchSiteSMSConfig(id)
          setSmsConfig(sms)
          setSmsSecretInput('')
        } catch {
          // ignore
        }
      }
    } catch {
      message.error('加载站点设置失败')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    async function init() {
      let currentMember = member
      if (!currentMember) {
        try {
          currentMember = await getMe()
        } catch {
          // ignore
        }
      }
      const activeSiteID = currentMember?.site_id
      if (activeSiteID) {
        setSiteID(activeSiteID)
        void loadSite(activeSiteID)
      }

      if (currentMember?.is_superadmin) {
        try {
          const rows = await listSites()
          setSites(rows)
          if (!activeSiteID && rows.length > 0) {
            setSiteID(rows[0].id)
            void loadSite(rows[0].id)
          }
        } catch {
          // ignore
        }
      }
    }
    void init()
  }, [member, loadSite])

  function handleAddBanner() {
    setBanners([
      ...banners,
      {
        ...createEmptyDistributionBanner(),
        eyebrow: '首页推荐',
      },
    ])
  }

  function handleUpdateBanner(index: number, patch: Partial<DistributionBannerConfig>) {
    setBanners((current) =>
      current.map((item, itemIndex) => (itemIndex === index ? { ...item, ...patch } : item)),
    )
  }

  function handleMoveBanner(index: number, step: number) {
    const target = index + step
    if (target < 0 || target >= banners.length) return
    const next = [...banners]
    const [item] = next.splice(index, 1)
    if (!item) return
    next.splice(target, 0, item)
    setBanners(next)
  }

  function handleDeleteBanner(index: number) {
    setBanners(banners.filter((_, i) => i !== index))
  }

  function handleAddAnnouncement() {
    setAnnouncements([
      ...announcements,
      {
        title: '平台全新上线精选商品，免押畅玩！',
        content: '',
      },
    ])
  }

  function handleUpdateAnnouncement(index: number, field: keyof AnnouncementItem, value: string) {
    const next = [...announcements]
    next[index] = { ...next[index], [field]: value }
    setAnnouncements(next)
  }

  function handleDeleteAnnouncement(index: number) {
    setAnnouncements(announcements.filter((_, i) => i !== index))
  }

  async function handleSaveReceiveRatio() {
    if (!siteID) return
    setSavingRatio(true)
    try {
      const updated = await updateSite(siteID, { receive_cost_delta: receiveCostDelta })
      setCurrentSite(updated)
      setReceiveCostDelta(Math.max(0, updated.receive_cost_delta || 0))
      message.success('收号压价已保存，本站收号价比主站更低，售价与主站一致')
    } catch (error: unknown) {
      const respMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message
      message.error(respMessage || '保存收号比例失败')
    } finally {
      setSavingRatio(false)
    }
  }

  async function handleSaveSMS() {
    if (!siteID) return
    if (smsConfig.enabled) {
      if (!smsConfig.access_key_id?.trim()) {
        message.warning('启用独立短信时，阿里云 AccessKey ID 不能为空')
        return
      }
      if (!smsConfig.has_secret && !smsSecretInput.trim()) {
        message.warning('启用独立短信时，阿里云 AccessKey Secret 不能为空')
        return
      }
      if (!smsConfig.sign_name?.trim()) {
        message.warning('启用独立短信时，短信签名不能为空')
        return
      }
      if (!smsConfig.login_template_code?.trim()) {
        message.warning('启用独立短信时，登录验证码模板 Code 不能为空')
        return
      }
    }
    setSavingSMS(true)
    try {
      const payload: UpdateSiteSMSConfigPayload = {
        enabled: smsConfig.enabled,
        provider: smsConfig.provider || 'aliyun',
        access_key_id: smsConfig.access_key_id.trim(),
        endpoint: smsConfig.endpoint.trim() || 'dysmsapi.aliyuncs.com',
        sign_name: smsConfig.sign_name.trim(),
        login_template_code: smsConfig.login_template_code.trim(),
      }
      if (smsSecretInput.trim()) {
        payload.access_key_secret = smsSecretInput.trim()
      }
      const updated = await updateSiteSMSConfig(siteID, payload)
      setSmsConfig(updated)
      setSmsSecretInput('')
      message.success('短信服务配置保存成功')
    } catch (err: unknown) {
      const msg =
        err && typeof err === 'object' && 'response' in err
          ? (err as { response?: { data?: { message?: string } } }).response?.data?.message
          : '保存短信配置失败'
      message.error(msg || '保存短信配置失败')
    } finally {
      setSavingSMS(false)
    }
  }

  async function handleTestSMS() {
    if (!siteID) return
    const phone = testPhone.trim()
    if (!phone) {
      message.warning('请输入接收测试短信的手机号')
      return
    }
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      message.warning('手机号格式不正确，请输入有效的11位手机号码')
      return
    }
    if (!smsConfig.access_key_id?.trim()) {
      message.warning('请先填写阿里云 AccessKey ID')
      return
    }
    if (!smsConfig.has_secret && !smsSecretInput.trim()) {
      message.warning('请先填写阿里云 AccessKey Secret')
      return
    }
    if (!smsConfig.sign_name?.trim()) {
      message.warning('请先填写短信签名')
      return
    }
    if (!smsConfig.login_template_code?.trim()) {
      message.warning('请先填写登录验证码模板 Code')
      return
    }
    setTestingSMS(true)
    try {
      const payload: TestSiteSMSConfigPayload = {
        phone,
        enabled: true,
        provider: smsConfig.provider || 'aliyun',
        access_key_id: smsConfig.access_key_id.trim(),
        endpoint: smsConfig.endpoint.trim() || 'dysmsapi.aliyuncs.com',
        sign_name: smsConfig.sign_name.trim(),
        login_template_code: smsConfig.login_template_code.trim(),
      }
      if (smsSecretInput.trim()) {
        payload.access_key_secret = smsSecretInput.trim()
      }
      await testSiteSMSConfig(siteID, payload)
      message.success('测试短信发送成功，请查收手机短信')
      setTestCooldown(60)
    } catch (err: unknown) {
      const msg =
        err && typeof err === 'object' && 'response' in err
          ? (err as { response?: { data?: { message?: string } } }).response?.data?.message
          : '测试短信发送失败'
      message.error(msg || '测试短信发送失败')
    } finally {
      setTestingSMS(false)
    }
  }

  async function uploadEntryImage(file: File, scene: string, apply: (url: string) => void) {
    try {
      const url = await uploadSiteImage(file, scene)
      apply(url)
      message.success('图片已上传，保存后才会在前台生效')
    } catch {
      message.error('图片上传失败')
    }
    return false
  }

  function renderEntryEditor(
    useMain: boolean,
    setUseMain: (value: boolean) => void,
    entry: HomeEntryConfig,
    setEntry: (value: HomeEntryConfig) => void,
    scene: string,
  ) {
    return (
      <Space direction="vertical" style={{ width: '100%' }} size="small">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Typography.Text>继承主站配置</Typography.Text>
          <Switch checked={useMain} onChange={setUseMain} />
        </div>
        {useMain ? (
          <Typography.Text type="secondary">当前展示主站的标题、说明和图片。</Typography.Text>
        ) : (
          <>
            <Input
              placeholder="标题"
              value={entry.title}
              onChange={(e) => setEntry({ ...entry, title: e.target.value })}
            />
            <Input
              placeholder="副标题"
              value={entry.subtitle}
              onChange={(e) => setEntry({ ...entry, subtitle: e.target.value })}
            />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Typography.Text>前台显示该入口</Typography.Text>
              <Switch checked={entry.enabled} onChange={(checked) => setEntry({ ...entry, enabled: checked })} />
            </div>
            {entry.image_url ? (
              <Image src={entry.image_url} width={160} style={{ objectFit: 'contain' }} />
            ) : (
              <Typography.Text type="secondary">尚未上传图片</Typography.Text>
            )}
            <Space>
              <Upload
                accept="image/*"
                showUploadList={false}
                beforeUpload={(file) => uploadEntryImage(file, scene, (url) => setEntry({ ...entry, image_url: url }))}
              >
                <Button icon={<PictureOutlined />}>上传图片</Button>
              </Upload>
              <Button disabled={!entry.image_url} onClick={() => setEntry({ ...entry, image_url: '' })}>
                清除图片
              </Button>
            </Space>
          </>
        )}
      </Space>
    )
  }

  /** 全部留空时清除该配置（前台回落默认文案），否则按 JSON 保存。 */
  function storefrontTextFilled(value: StorefrontTextForm): string {
    const filled = {
      tagline: value.tagline.trim(),
      hero_badge: value.hero_badge.trim(),
      hero_desc: value.hero_desc.trim(),
      card_sub: value.card_sub.trim(),
    }
    return Object.values(filled).some(Boolean) ? JSON.stringify(filled) : ''
  }

  async function handleSave() {
    if (!siteID) return
    setSaving(true)
    try {
      const payload: SiteBrandingPayload = {
        logo_url: logoUrl.trim(),
        favicon_url: faviconUrl.trim(),
        banners_json: serializeDistributionBanners(banners),
        announcements_json: JSON.stringify(announcements),
        footer_info_json: JSON.stringify(footerInfo),
        aw_recycle_json: awUseMain ? '' : JSON.stringify(awEntry),
        cooperation_feedback_json: coopUseMain ? '' : JSON.stringify(coopEntry),
        storefront_text_json: storefrontTextFilled(storefrontText),
      }
      const updated = await updateSiteBranding(siteID, payload)
      setCurrentSite(updated)
      message.success('分销站点品牌与装修配置保存成功！')
    } catch (error: unknown) {
      const respMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message
      message.error(respMessage || '保存装修配置失败')
    } finally {
      setSaving(false)
    }
  }

  const previewBanner = banners.find((item) => item.enabled) ?? banners[0]
  const previewBannerImage =
    previewBanner?.mobile.image_url || previewBanner?.pc.image_url || ''

  return (
    <Space direction="vertical" className="page" style={{ width: '100%' }} size="middle">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Typography.Title level={3} style={{ marginBottom: 4 }}>
            品牌与站点可视化装修
          </Typography.Title>
          <Typography.Text type="secondary">
            可视化配置当前分销独立站的 Logo、首页入口、客服二维码、轮播海报和页脚信息。未单独配置的回收与合作入口继续使用主站。
          </Typography.Text>
        </div>
        <Space>
          {member?.is_superadmin && sites.length > 1 && (
            <Select
              placeholder="切换分销网站"
              style={{ width: 220 }}
              value={siteID}
              options={sites.map((site) => ({ label: `${site.site_name} (${site.site_code})`, value: site.id }))}
              onChange={(value) => {
                setSiteID(value)
                void loadSite(value)
              }}
            />
          )}
          {currentSite?.site_code && (
            <Button
              icon={<EyeOutlined />}
              onClick={() => {
                const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
                const targetUrl = isLocal
                  ? `http://${window.location.hostname}:5189/?site=${currentSite.site_code}`
                  : currentSite.domain
                  ? `https://${currentSite.domain}`
                  : `/?site=${currentSite.site_code}`
                window.open(targetUrl, '_blank')
              }}
            >
              预览分销前台
            </Button>
          )}
          <Button type="primary" icon={<SaveOutlined />} onClick={handleSave} loading={saving}>
            保存全部装修
          </Button>
        </Space>
      </div>

      <Card loading={loading}>
        <Space direction="vertical" style={{ width: '100%' }} size="middle">
          <div>
            <Typography.Title level={5} style={{ marginBottom: 4 }}>
              本站收号压价
            </Typography.Title>
            <Typography.Text type="secondary">
              压价点数越大，号主在本站拿到的收号价越低。买家售价保持与主站一致，压价差进入三方分成（本站 35% / 卖出方 40% / 平台 25%）。0 表示与主站同价收号。
            </Typography.Text>
          </div>
          <Space wrap align="center">
            <Typography.Text>收号价比主站低</Typography.Text>
            <InputNumber
              min={0}
              max={20}
              step={0.1}
              precision={1}
              value={receiveCostDelta}
              onChange={(value) => setReceiveCostDelta(Math.max(0, Number(value || 0)))}
              addonAfter="点"
              style={{ width: 160 }}
            />
            <Button type="primary" icon={<SaveOutlined />} loading={savingRatio} onClick={() => void handleSaveReceiveRatio()}>
              保存收号压价
            </Button>
          </Space>
        </Space>
      </Card>

      <Card loading={loading}>
        <Space direction="vertical" style={{ width: '100%' }} size="middle">
          <div>
            <Space align="center">
              <MessageOutlined style={{ fontSize: 18, color: '#1e4d42' }} />
              <Typography.Title level={5} style={{ margin: 0 }}>
                独立短信验证码配置
              </Typography.Title>
            </Space>
            <Typography.Paragraph type="secondary" style={{ marginTop: 4, marginBottom: 0 }}>
              开启后，本分站访客登录/注册时将调用分站专属的阿里云短信模板与签名，并直接计入本站自己的阿里云短信额度；未开启时自动回退使用主站默认短信通道。
            </Typography.Paragraph>
          </div>

          <Alert
            type={smsConfig.enabled ? 'info' : 'warning'}
            showIcon
            message={
              smsConfig.enabled
                ? '当前已启用独立短信服务：分站登录验证码将消耗您配置的阿里云额度，展示您的专属短信签名。'
                : '当前未启用独立短信服务：分站将免费使用主站平台额度发送验证码（展示主站默认签名）。'
            }
          />

          <Form layout="vertical">
            <Row gutter={16}>
              <Col xs={24} sm={12}>
                <Form.Item label="启用独立短信服务">
                  <Space>
                    <Switch
                      checked={smsConfig.enabled}
                      onChange={(val) => setSmsConfig({ ...smsConfig, enabled: val })}
                    />
                    <Typography.Text type="secondary">
                      {smsConfig.enabled ? '已开启（优先使用分站凭据）' : '已停用（回退使用主站额度）'}
                    </Typography.Text>
                  </Space>
                </Form.Item>
              </Col>
              <Col xs={24} sm={12}>
                <Form.Item label="短信服务商">
                  <Select
                    value={smsConfig.provider || 'aliyun'}
                    onChange={(val) => setSmsConfig({ ...smsConfig, provider: val })}
                    options={[{ label: '阿里云短信服务 (Aliyun Dysms)', value: 'aliyun' }]}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col xs={24} sm={12}>
                <Form.Item label="短信签名 (SignName)" required={smsConfig.enabled} tooltip="在阿里云短信控制台申请并已通过审核的签名，例如：【XX租号】">
                  <Input
                    placeholder="例如：XX租号"
                    value={smsConfig.sign_name}
                    onChange={(e) => setSmsConfig({ ...smsConfig, sign_name: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col xs={24} sm={12}>
                <Form.Item label="验证码模板 Code (TemplateCode)" required={smsConfig.enabled} tooltip="在阿里云申请的验证码模板，必须包含 ${code} 变量，例如：SMS_123456789">
                  <Input
                    placeholder="例如：SMS_123456789"
                    value={smsConfig.login_template_code}
                    onChange={(e) => setSmsConfig({ ...smsConfig, login_template_code: e.target.value })}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col xs={24} sm={12}>
                <Form.Item label="阿里云 AccessKey ID" required={smsConfig.enabled} tooltip="具备 Dysms 权限的阿里云 RAM 用户 AccessKey ID">
                  <Input
                    placeholder="例如：LTAI5t..."
                    value={smsConfig.access_key_id}
                    onChange={(e) => setSmsConfig({ ...smsConfig, access_key_id: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col xs={24} sm={12}>
                <Form.Item
                  label="阿里云 AccessKey Secret"
                  required={smsConfig.enabled && !smsConfig.has_secret}
                  tooltip={smsConfig.has_secret ? `已保存密钥 (${smsConfig.masked_secret})，如需更换请输入新密钥，留空则保持不变` : '请输入阿里云 AccessKey Secret'}
                >
                  <Input.Password
                    placeholder={smsConfig.has_secret ? '已设置密钥，留空保持不变' : '请输入 AccessKey Secret'}
                    value={smsSecretInput}
                    onChange={(e) => setSmsSecretInput(e.target.value)}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col xs={24} sm={12}>
                <Form.Item label="API Endpoint (可选)" tooltip="默认 dysmsapi.aliyuncs.com">
                  <Input
                    placeholder="dysmsapi.aliyuncs.com"
                    value={smsConfig.endpoint}
                    onChange={(e) => setSmsConfig({ ...smsConfig, endpoint: e.target.value })}
                  />
                </Form.Item>
              </Col>
              <Col xs={24} sm={12}>
                <Form.Item label="连通性测试">
                  <Space.Compact style={{ width: '100%' }}>
                    <Input
                      placeholder="输入手机号测试接收"
                      value={testPhone}
                      onChange={(e) => setTestPhone(e.target.value)}
                    />
                    <Popconfirm
                      title="确认发送测试短信？"
                      description="将向填写的手机号发送一条随机验证码，并消耗该站点的阿里云短信额度。"
                      okText="确认发送"
                      cancelText="取消"
                      disabled={testingSMS || testCooldown > 0}
                      onConfirm={() => void handleTestSMS()}
                    >
                      <Button
                        icon={<SendOutlined />}
                        loading={testingSMS}
                        disabled={testCooldown > 0}
                      >
                        {testCooldown > 0 ? `重新发送(${testCooldown}s)` : '发送测试'}
                      </Button>
                    </Popconfirm>
                  </Space.Compact>
                </Form.Item>
              </Col>
            </Row>

            <Button
              type="primary"
              icon={<SaveOutlined />}
              loading={savingSMS}
              onClick={() => void handleSaveSMS()}
            >
              保存短信配置
            </Button>
          </Form>
        </Space>
      </Card>

      <Row gutter={24}>
        {/* Left Visual Form Customizer */}
        <Col xs={24} lg={14}>
          <Card loading={loading}>
            <Tabs
              defaultActiveKey="branding"
              items={[
                {
                  key: 'branding',
                  label: '品牌基础资料',
                  children: (
                    <Space direction="vertical" style={{ width: '100%' }} size="middle">
                      <div>
                        <Typography.Text strong>站点 Logo：</Typography.Text>
                        <Space direction="vertical" style={{ width: '100%', marginTop: 6 }} size="small">
                          {logoUrl ? (
                            <Image src={logoUrl} height={48} style={{ objectFit: 'contain' }} />
                          ) : (
                            <Typography.Text type="secondary">尚未上传 Logo</Typography.Text>
                          )}
                          <Space>
                            <Upload
                              accept="image/*"
                              showUploadList={false}
                              beforeUpload={(file) => uploadEntryImage(file, 'avatar', setLogoUrl)}
                            >
                              <Button icon={<PictureOutlined />}>上传 Logo</Button>
                            </Upload>
                            <Button disabled={!logoUrl} onClick={() => setLogoUrl('')}>
                              清除
                            </Button>
                          </Space>
                          <Input
                            placeholder="或粘贴图片链接 https://.../logo.png"
                            value={logoUrl}
                            onChange={(e) => setLogoUrl(e.target.value)}
                            allowClear
                          />
                        </Space>
                        <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>
                          建议尺寸 240x60 像素，透明底色 PNG
                        </Typography.Text>
                      </div>

                      <div>
                        <Typography.Text strong>浏览器标签页 Favicon：</Typography.Text>
                        <Space direction="vertical" style={{ width: '100%', marginTop: 6 }} size="small">
                          {faviconUrl ? (
                            <Image src={faviconUrl} width={32} height={32} style={{ objectFit: 'contain' }} />
                          ) : (
                            <Typography.Text type="secondary">尚未上传图标</Typography.Text>
                          )}
                          <Space>
                            <Upload
                              accept="image/*"
                              showUploadList={false}
                              beforeUpload={(file) => uploadEntryImage(file, 'avatar', setFaviconUrl)}
                            >
                              <Button icon={<PictureOutlined />}>上传图标</Button>
                            </Upload>
                            <Button disabled={!faviconUrl} onClick={() => setFaviconUrl('')}>
                              清除
                            </Button>
                          </Space>
                          <Input
                            placeholder="或粘贴图片链接 https://.../favicon.png"
                            value={faviconUrl}
                            onChange={(e) => setFaviconUrl(e.target.value)}
                            allowClear
                          />
                        </Space>
                        <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>
                          浏览器选项卡显示的小图标，建议 32x32 像素
                        </Typography.Text>
                      </div>
                    </Space>
                  ),
                },
                {
                  key: 'banners',
                  label: `首页轮播横幅 (${banners.length})`,
                  children: (
                    <Space direction="vertical" style={{ width: '100%' }} size="middle">
                      <Alert
                        type="info"
                        showIcon
                        message="PC 与移动端分开配置"
                        description="出图规范：PC 端 1600×400（4:1）、移动端 750×375（2:1），两端容器严格等比。每端可单独上传图片、配置整图跳转和热区；某一端留空时，该端前台回退为文字卡片。"
                      />
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <Typography.Text type="secondary">
                          为分销商城首页配置轮播海报，后台坐标为百分比，换分辨率也不会跑位。
                        </Typography.Text>
                        <Button type="dashed" icon={<PlusOutlined />} onClick={handleAddBanner}>
                          添加轮播
                        </Button>
                      </div>

                      {banners.length === 0 ? (
                        <div style={{ textAlign: 'center', padding: '32px 0', color: '#999' }}>
                          暂未添加轮播横幅，点击上方按钮新增
                        </div>
                      ) : (
                        banners.map((item, idx) => (
                          <div
                            key={idx}
                            style={{
                              background: '#ffffff',
                              border: '1px solid #eef1f5',
                              borderRadius: 10,
                              padding: '12px 14px',
                            }}
                          >
                            <div
                              style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                gap: 12,
                                marginBottom: 10,
                              }}
                            >
                              <Space>
                                <strong style={{ color: '#ff6a00' }}>轮播 #{idx + 1}</strong>
                                <Switch
                                  size="small"
                                  checked={item.enabled}
                                  checkedChildren="启用"
                                  unCheckedChildren="停用"
                                  onChange={(enabled) => handleUpdateBanner(idx, { enabled })}
                                />
                              </Space>
                              <Space size={4}>
                                <Button
                                  size="small"
                                  disabled={idx === 0}
                                  onClick={() => handleMoveBanner(idx, -1)}
                                >
                                  上移
                                </Button>
                                <Button
                                  size="small"
                                  disabled={idx === banners.length - 1}
                                  onClick={() => handleMoveBanner(idx, 1)}
                                >
                                  下移
                                </Button>
                                <Button
                                  type="text"
                                  danger
                                  size="small"
                                  icon={<DeleteOutlined />}
                                  onClick={() => handleDeleteBanner(idx)}
                                >
                                  删除
                                </Button>
                              </Space>
                            </div>

                            <Row gutter={[8, 8]} style={{ marginBottom: 12 }}>
                              <Col xs={24} sm={12}>
                                <Input
                                  placeholder="眉标，如 三角洲行动账号专区"
                                  value={item.eyebrow}
                                  onChange={(e) => handleUpdateBanner(idx, { eyebrow: e.target.value })}
                                />
                              </Col>
                              <Col xs={24} sm={12}>
                                <Input
                                  placeholder="主标题（无图时展示）"
                                  value={item.title}
                                  onChange={(e) => handleUpdateBanner(idx, { title: e.target.value })}
                                />
                              </Col>
                              <Col xs={12} sm={6}>
                                <Input
                                  placeholder="角标，如 HOT"
                                  value={item.badge}
                                  onChange={(e) => handleUpdateBanner(idx, { badge: e.target.value })}
                                />
                              </Col>
                              <Col xs={12} sm={10}>
                                <Input
                                  placeholder="胶囊文案（可选）"
                                  value={item.pill}
                                  onChange={(e) => handleUpdateBanner(idx, { pill: e.target.value })}
                                />
                              </Col>
                              <Col xs={24} sm={8}>
                                <Select
                                  style={{ width: '100%' }}
                                  value={item.tone}
                                  onChange={(tone) => handleUpdateBanner(idx, { tone })}
                                  options={[
                                    { label: '金色', value: 'gold' },
                                    { label: '蓝色', value: 'blue' },
                                    { label: '绿色', value: 'green' },
                                    { label: '橙色', value: 'orange' },
                                  ]}
                                />
                              </Col>
                            </Row>

                            <Tabs
                              size="small"
                              items={[
                                {
                                  key: 'pc',
                                  label: 'PC 端 1600×400（4:1）',
                                  children: (
                                    <BannerVisualEditor
                                      value={item.pc}
                                      onChange={(pc) => handleUpdateBanner(idx, { pc })}
                                      ratio={HOME_BANNER_PC_RATIO}
                                      label="PC 端展示"
                                      standard="1600×400（4:1）"
                                    />
                                  ),
                                },
                                {
                                  key: 'mobile',
                                  label: '移动端 750×375（2:1）',
                                  children: (
                                    <BannerVisualEditor
                                      value={item.mobile}
                                      onChange={(mobile) => handleUpdateBanner(idx, { mobile })}
                                      ratio={HOME_BANNER_MOBILE_RATIO}
                                      label="移动端展示"
                                      standard="750×375（2:1）"
                                    />
                                  ),
                                },
                              ]}
                            />
                          </div>
                        ))
                      )}
                    </Space>
                  ),
                },
                {
                  key: 'announcements',
                  label: `跑马灯公告 (${announcements.length})`,
                  children: (
                    <Space direction="vertical" style={{ width: '100%' }} size="middle">
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <Typography.Text type="secondary">
                          在商城顶部轮播滚动的最新活动或服务保障公告。
                        </Typography.Text>
                        <Button type="dashed" icon={<PlusOutlined />} onClick={handleAddAnnouncement}>
                          添加公告
                        </Button>
                      </div>

                      {announcements.length === 0 ? (
                        <div style={{ textAlign: 'center', padding: '32px 0', color: '#999' }}>
                          暂无公告，点击上方按钮新增
                        </div>
                      ) : (
                        announcements.map((item, idx) => (
                          <div
                            key={idx}
                            style={{
                              background: '#fbfbfb',
                              border: '1px solid #e8e8e8',
                              borderRadius: 8,
                              padding: '12px 16px',
                            }}
                          >
                            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                              <strong>公告 #{idx + 1}</strong>
                              <Button
                                type="text"
                                danger
                                size="small"
                                icon={<DeleteOutlined />}
                                onClick={() => handleDeleteAnnouncement(idx)}
                              >
                                删除
                              </Button>
                            </div>
                            <Space direction="vertical" style={{ width: '100%' }} size="small">
                              <Input
                                placeholder="公告标题"
                                value={item.title}
                                onChange={(e) => handleUpdateAnnouncement(idx, 'title', e.target.value)}
                              />
                              <Input.TextArea
                                placeholder="公告详细内容 (可选)"
                                rows={2}
                                value={item.content}
                                onChange={(e) => handleUpdateAnnouncement(idx, 'content', e.target.value)}
                              />
                            </Space>
                          </div>
                        ))
                      )}
                    </Space>
                  ),
                },
                {
                  key: 'entries',
                  label: '首页入口',
                  children: (
                    <Space direction="vertical" style={{ width: '100%' }} size="large">
                      <Alert
                        type="info"
                        showIcon
                        message="回收和合作入口默认继承主站。关掉继承后，只影响当前分销站首页。发布群进群码由主站在分站二维码池维护。"
                      />
                      <div>
                        <Typography.Text strong>AW炫彩回收</Typography.Text>
                        <div style={{ marginTop: 8 }}>
                          {renderEntryEditor(awUseMain, setAwUseMain, awEntry, setAwEntry, 'aw-recycle')}
                        </div>
                      </div>
                      <div>
                        <Typography.Text strong>合作与反馈</Typography.Text>
                        <div style={{ marginTop: 8 }}>
                          {renderEntryEditor(
                            coopUseMain,
                            setCoopUseMain,
                            coopEntry,
                            setCoopEntry,
                            'cooperation-feedback',
                          )}
                        </div>
                      </div>
                    </Space>
                  ),
                },
                {
                  key: 'storefront_text',
                  label: '首页文案',
                  children: (
                    <Space direction="vertical" style={{ width: '100%' }} size="middle">
                      <Typography.Text type="secondary">
                        留空则使用默认文案（占位提示即默认值）。这些文案出现在商城头部与首页主视觉，可按本站品牌口径自由填写。
                      </Typography.Text>
                      <div>
                        <Typography.Text strong>头部品牌区副标题</Typography.Text>
                        <Input
                          placeholder={DEFAULT_STOREFRONT_TEXT.tagline}
                          value={storefrontText.tagline}
                          onChange={(e) =>
                            setStorefrontText({ ...storefrontText, tagline: e.target.value })
                          }
                        />
                      </div>
                      <div>
                        <Typography.Text strong>首页主视觉徽标</Typography.Text>
                        <Input
                          placeholder={DEFAULT_STOREFRONT_TEXT.hero_badge}
                          value={storefrontText.hero_badge}
                          onChange={(e) =>
                            setStorefrontText({ ...storefrontText, hero_badge: e.target.value })
                          }
                        />
                      </div>
                      <div>
                        <Typography.Text strong>首页主视觉描述</Typography.Text>
                        <Input.TextArea
                          rows={2}
                          placeholder={DEFAULT_STOREFRONT_TEXT.hero_desc}
                          value={storefrontText.hero_desc}
                          onChange={(e) =>
                            setStorefrontText({ ...storefrontText, hero_desc: e.target.value })
                          }
                        />
                      </div>
                      <div>
                        <Typography.Text strong>移动端认证卡片副标题</Typography.Text>
                        <Input
                          placeholder={DEFAULT_STOREFRONT_TEXT.card_sub}
                          value={storefrontText.card_sub}
                          onChange={(e) =>
                            setStorefrontText({ ...storefrontText, card_sub: e.target.value })
                          }
                        />
                      </div>
                    </Space>
                  ),
                },
                {
                  key: 'footer',
                  label: '页脚与客服备案',
                  children: (
                    <Space direction="vertical" style={{ width: '100%' }} size="middle">
                      <div>
                        <Typography.Text strong>商城版权文案：</Typography.Text>
                        <Input
                          placeholder="例如：© 2026 游戏账号分销商城 版权所有"
                          value={footerInfo.copyright}
                          onChange={(e) => setFooterInfo({ ...footerInfo, copyright: e.target.value })}
                          style={{ marginTop: 6 }}
                        />
                      </div>

                      <div>
                        <Typography.Text strong>ICP 备案编号：</Typography.Text>
                        <Input
                          placeholder="例如：京ICP备20260001号-1"
                          value={footerInfo.icp}
                          onChange={(e) => setFooterInfo({ ...footerInfo, icp: e.target.value })}
                          style={{ marginTop: 6 }}
                        />
                      </div>

                      <div>
                        <Typography.Text strong>官方客服微信 / QQ：</Typography.Text>
                        <Input
                          placeholder="例如：客服微信: hfb_kf01 / QQ群: 987654321"
                          value={footerInfo.contact}
                          onChange={(e) => setFooterInfo({ ...footerInfo, contact: e.target.value })}
                          style={{ marginTop: 6 }}
                        />
                      </div>
                    </Space>
                  ),
                },
              ]}
            />

            <Divider style={{ margin: '16px 0' }} />

            {/* Advanced Raw JSON Inspector (Collapsed) */}
            <Collapse
              size="small"
              items={[
                {
                  key: 'raw',
                  label: '开发者底包 JSON 数据（自动同步生成，无需手写）',
                  children: (
                    <pre style={{ fontSize: 11, background: '#f5f5f5', padding: 8, borderRadius: 4, maxHeight: 120, overflow: 'auto' }}>
                      {JSON.stringify(
                        {
                          banners,
                          announcements,
                          footer_info: footerInfo,
                        },
                        null,
                        2
                      )}
                    </pre>
                  ),
                },
              ]}
            />
          </Card>
        </Col>

        {/* Right Live Visual Simulation Card */}
        <Col xs={24} lg={10}>
          <Card title="分销商城前台实时模拟效果" style={{ background: '#f8fafc' }}>
            <div
              style={{
                background: '#fff',
                border: '1px solid #d9d9d9',
                borderRadius: 8,
                overflow: 'hidden',
                boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
              }}
            >
              {/* Simulated Browser Bar */}
              <div
                style={{
                  background: '#f0f2f5',
                  padding: '6px 12px',
                  borderBottom: '1px solid #e8e8e8',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  fontSize: 12,
                  color: '#666',
                }}
              >
                <div style={{ display: 'flex', gap: 4 }}>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ff4d4f' }} />
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#faad14' }} />
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#52c41a' }} />
                </div>
                <div
                  style={{
                    flex: 1,
                    background: '#fff',
                    borderRadius: 4,
                    padding: '2px 8px',
                    fontSize: 11,
                    textAlign: 'center',
                  }}
                >
                  https://{currentSite?.domain || `${currentSite?.site_code || 'demo'}.hfb.com`}
                </div>
              </div>

              {/* Simulated Header Nav */}
              <div
                style={{
                  padding: '10px 14px',
                  borderBottom: '1px solid #f0f0f0',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                {logoUrl ? (
                  <img src={logoUrl} alt="Logo" style={{ height: 26, objectFit: 'contain' }} />
                ) : (
                  <span style={{ display: 'flex', flexDirection: 'column' }}>
                    <strong style={{ fontSize: 14, color: '#1e4d42' }}>
                      {currentSite?.site_name || '解忧分销商城'}
                    </strong>
                    <small style={{ fontSize: 10, color: '#94a3b8' }}>
                      {storefrontText.tagline.trim() || DEFAULT_STOREFRONT_TEXT.tagline}
                    </small>
                  </span>
                )}
                <Tag color="blue">
                  {storefrontText.hero_badge.trim() || DEFAULT_STOREFRONT_TEXT.hero_badge}
                </Tag>
              </div>

              {/* Simulated Announcements Marquee */}
              {announcements.length > 0 && (
                <div
                  style={{
                    background: '#fffbe6',
                    padding: '4px 12px',
                    fontSize: 12,
                    color: '#d46b08',
                    borderBottom: '1px solid #ffe58f',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 6,
                  }}
                >
                  <NotificationOutlined />
                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {announcements[0]?.title || announcements[0]?.content}
                  </span>
                </div>
              )}

              {/* Simulated Banner Carousel */}
              <div
                style={{
                  aspectRatio: '2 / 1',
                  background: 'repeating-conic-gradient(#f1f5f9 0% 25%, #ffffff 0% 50%) 50% / 16px 16px',
                  position: 'relative',
                  overflow: 'hidden',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                {previewBannerImage ? (
                  <img
                    src={previewBannerImage}
                    alt="Banner"
                    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                  />
                ) : previewBanner ? (
                  <div
                    style={{
                      width: '100%',
                      height: '100%',
                      padding: 16,
                      display: 'flex',
                      flexDirection: 'column',
                      justifyContent: 'center',
                      background: 'linear-gradient(135deg, #1e293b, #334155)',
                      color: '#fff',
                    }}
                  >
                    {previewBanner.eyebrow && (
                      <span style={{ fontSize: 11, opacity: 0.8 }}>{previewBanner.eyebrow}</span>
                    )}
                    <strong style={{ fontSize: 16, marginTop: 4 }}>
                      {previewBanner.title || '精选游戏账号 · 随租随玩'}
                    </strong>
                    {previewBanner.pill && (
                      <span style={{ fontSize: 11, marginTop: 6, color: '#fbbf24' }}>
                        {previewBanner.pill}
                      </span>
                    )}
                  </div>
                ) : (
                  <div style={{ color: '#999', fontSize: 12 }}>暂无轮播横幅，请在左侧添加</div>
                )}
                {previewBanner?.badge && (
                  <span
                    style={{
                      position: 'absolute',
                      top: 8,
                      right: 8,
                      padding: '1px 6px',
                      borderRadius: 4,
                      background: 'rgba(15, 23, 42, 0.72)',
                      color: '#fff',
                      fontSize: 10,
                    }}
                  >
                    {previewBanner.badge}
                  </span>
                )}
              </div>

              {/* Simulated Account Listings Grid Preview */}
              <div style={{ padding: 12 }}>
                <Typography.Text strong style={{ fontSize: 13, display: 'block', marginBottom: 8 }}>
                  精选租号货架
                </Typography.Text>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <div style={{ border: '1px solid #f0f0f0', borderRadius: 4, padding: 8, fontSize: 11 }}>
                    <strong>三角洲全金典藏号</strong>
                    <div style={{ color: '#cf1322', marginTop: 4, fontWeight: 'bold' }}>¥35.00 /小时</div>
                  </div>
                  <div style={{ border: '1px solid #f0f0f0', borderRadius: 4, padding: 8, fontSize: 11 }}>
                    <strong>无畏契约全套幻化</strong>
                    <div style={{ color: '#cf1322', marginTop: 4, fontWeight: 'bold' }}>¥28.00 /小时</div>
                  </div>
                </div>
              </div>

              {/* Simulated Footer */}
              <div
                style={{
                  background: '#fafafa',
                  borderTop: '1px solid #f0f0f0',
                  padding: '10px 12px',
                  fontSize: 11,
                  color: '#8c8c8c',
                  textAlign: 'center',
                }}
              >
                <div>{footerInfo.copyright || `© 2026 ${currentSite?.site_name || '分销网'}`}</div>
                {footerInfo.icp && <div>{footerInfo.icp}</div>}
                {footerInfo.contact && <div style={{ color: '#1e4d42' }}>{footerInfo.contact}</div>}
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </Space>
  )
}