'use client'

import { useEffect, useMemo, useState } from 'react'
import { Check, FileText, Loader2, Save } from 'lucide-react'
import { AdminShell } from '@/components/admin/AdminShell'
import { backend, type BackendSiteAgreement } from '@/lib/backend'

type AgreementKey = 'registration-terms' | 'user-terms' | 'privacy-policy' | 'purchase-terms' | 'expert-cooperation-rules'

type AgreementPreset = {
  id: AgreementKey
  label: string
  title: string
  summary: string
  content: string
}

const agreementPresets: AgreementPreset[] = [
  {
    id: 'registration-terms',
    label: '注册协议',
    title: '大连市大数据研究院注册协议',
    summary: '账号注册、资料真实性、登录凭证和基础服务开通规则。',
    content: [
      '一、用户注册或登录平台时，应提交真实、准确、完整的手机号、微信号、姓名、机构、职务等必要资料。',
      '二、用户应妥善保管登录凭证，不得将账号转让、出租、出借给他人使用。',
      '三、平台可基于账号识别、服务开通、订单履约、活动核销、专家预约和安全审计等目的处理用户资料。',
      '四、用户不得利用平台发布违法违规内容、冒用他人身份、干扰平台运行或实施其他损害平台及第三方权益的行为。',
      '五、平台可根据法律法规、业务安全和服务管理需要，对注册协议进行更新，并在页面展示最新版本。',
    ].join('\n'),
  },
  {
    id: 'user-terms',
    label: '服务条款 / TOS',
    title: '大连市大数据研究院用户服务条款',
    summary: '账号使用、平台服务、用户行为、责任边界和条款更新规则。',
    content: [
      '一、平台提供规划咨询、课程活动、数据服务、智能体服务、专家预约和会员权益等线上服务，具体内容以页面展示、订单记录和双方确认信息为准。',
      '二、用户应保证使用服务时提交的信息真实、准确、完整，并配合平台完成必要的沟通、确认和履约资料提交。',
      '三、用户不得利用平台发布违法违规内容、侵犯第三方权益、干扰平台正常运行或实施其他不当行为。',
      '四、因网络故障、系统维护、不可抗力或第三方服务原因造成服务延迟或中断的，平台会尽力协助处理并恢复服务。',
      '五、平台可根据法律法规、业务调整或服务安全需要更新本条款，并在页面中展示最新版本。',
    ].join('\n'),
  },
  {
    id: 'privacy-policy',
    label: '隐私政策',
    title: '大连市大数据研究院隐私政策',
    summary: '个人资料、订单记录、预约信息和服务资料的收集、使用与保护规则。',
    content: [
      '一、平台会收集登录标识、姓名、联系电话、邮箱、机构信息、发票信息、订单记录、预约记录和用户主动提交的服务资料。',
      '二、上述信息主要用于账号识别、订单履约、发票处理、活动核销、专家预约、智能体交付、客服沟通和必要的安全审计。',
      '三、平台不会将个人信息用于与服务无关的公开展示；需要展示的信息会以用户确认的资料为准。',
      '四、平台会采取合理的技术和管理措施保护用户信息，并按法律法规要求进行必要的留存。',
      '五、用户可以在个人中心维护常用资料，或通过账号设置发起注销账号操作。',
    ].join('\n'),
  },
  {
    id: 'purchase-terms',
    label: '购买条款',
    title: '大连市大数据研究院线上购买条款',
    summary: '课程、活动、数据、智能体、专家预约和会员权益的购买与履约规则。',
    content: [
      '一、购买人应在提交支付前确认商品名称、金额、联系人、发票信息和服务内容准确无误。',
      '二、课程、活动、数据服务、智能体、专家预约和会员权益等服务的开通方式，以订单页面和个人中心展示为准。',
      '三、数字内容、资料下载、会员权益等虚拟服务一经开通，除法律法规另有规定或平台确认服务无法履行外，订单按实际履约记录处理。',
      '四、专家预约、活动报名等需要确认时间或席位的服务，平台会根据订单信息生成记录；用户应保持联系方式可用。',
      '五、如需发票，应在结算页填写准确抬头、税号和接收邮箱。发票信息错误造成的重开或延迟，由购买人配合处理。',
      '六、平台将根据隐私政策保护订单与联系信息，仅用于交易履约、服务沟通、发票处理和必要的合规留存。',
    ].join('\n'),
  },
  {
    id: 'expert-cooperation-rules',
    label: '专家合作规则',
    title: '大连市大数据研究院专家合作规则',
    summary: '专家申请、主页展示、预约履约、收益和合作管理规则。',
    content: [
      '一、申请人应保证提交的身份、机构、职务、项目经验、代表成果和附件材料真实、准确、可核验。',
      '二、平台会根据专业方向、项目经验、服务方式和合作匹配度进行审核，审核结果以平台通知和个人中心状态为准。',
      '三、通过审核后，专家主页展示内容需符合真实、专业、审慎原则，不得夸大资质、承诺结果或发布误导性信息。',
      '四、专家应按确认的服务时间和服务方式履约。如需调整，应提前与平台或用户沟通。',
      '五、专家在咨询、评审、课程或顾问服务中接触到的客户资料、项目资料和业务信息，应承担保密义务。',
      '六、平台可根据服务质量、用户反馈、合规要求和合作情况调整展示、预约方向或暂停合作。',
      '七、专家服务收益、提现和结算以平台记录和双方确认的结算规则为准。',
    ].join('\n'),
  },
]

function presetToAgreement(preset: AgreementPreset): BackendSiteAgreement {
  return {
    id: preset.id,
    title: preset.title,
    summary: preset.summary,
    content: preset.content,
    status: 'published',
    updatedBy: '',
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }
}

export default function AdminSiteAgreementsPage() {
  const [activeId, setActiveId] = useState<AgreementKey>('registration-terms')
  const [agreements, setAgreements] = useState<Record<string, BackendSiteAgreement>>({})
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState('')
  const [error, setError] = useState('')

  useEffect(() => {
    let cancelled = false
    setLoading(true)
    Promise.all(agreementPresets.map(async (preset) => {
      try {
        return [preset.id, await backend.adminAgreement(preset.id)] as const
      } catch {
        return [preset.id, presetToAgreement(preset)] as const
      }
    }))
      .then((entries) => {
        if (cancelled) return
        setAgreements(Object.fromEntries(entries))
        setError('')
      })
      .catch((err) => {
        if (!cancelled) setError(err instanceof Error ? err.message : '协议加载失败')
      })
      .finally(() => {
        if (!cancelled) setLoading(false)
      })
    return () => { cancelled = true }
  }, [])

  const activePreset = useMemo(() => agreementPresets.find((item) => item.id === activeId) || agreementPresets[0], [activeId])
  const activeAgreement = agreements[activeId] || presetToAgreement(activePreset)

  function updateActive(patch: Partial<BackendSiteAgreement>) {
    setAgreements((current) => ({
      ...current,
      [activeId]: { ...activeAgreement, ...patch },
    }))
    setMessage('')
    setError('')
  }

  async function saveActive() {
    setSaving(true)
    try {
      const updated = await backend.saveAdminAgreement(activeId, {
        title: activeAgreement.title,
        summary: activeAgreement.summary,
        content: activeAgreement.content,
        status: activeAgreement.status,
      })
      setAgreements((current) => ({ ...current, [activeId]: updated }))
      setMessage(`${activePreset.label}已保存`)
      setError('')
    } catch (err) {
      setError(err instanceof Error ? err.message : '协议保存失败')
    } finally {
      setSaving(false)
    }
  }

  return (
    <AdminShell title="协议配置" description="统一维护注册协议、服务条款、隐私政策、购买条款和专家合作规则。">
      {(message || error) && <div className={`mb-3 rounded-[4px] px-4 py-3 text-sm font-bold ${error ? 'bg-red-50 text-red-700' : 'bg-green-50 text-green'}`}>{error || message}</div>}

      <section className="grid min-h-[720px] border border-line bg-white lg:grid-cols-[230px_1fr]">
        <aside className="border-b border-line bg-bg/60 p-3 lg:border-b-0 lg:border-r">
          <div className="mb-3 px-2 text-xs font-extrabold text-soft">协议类型</div>
          <div className="space-y-1">
            {agreementPresets.map((item) => {
              const current = agreements[item.id]
              const active = item.id === activeId
              return (
                <button
                  key={item.id}
                  type="button"
                  onClick={() => setActiveId(item.id)}
                  className={`flex h-10 w-full items-center gap-2 rounded-[4px] px-3 text-left text-sm font-extrabold ${active ? 'bg-ink text-white' : 'text-muted hover:bg-white hover:text-ink'}`}
                >
                  <FileText className="h-4 w-4 shrink-0" />
                  <span className="min-w-0 flex-1 truncate">{item.label}</span>
                  {current?.status === 'published' ? <Check className="h-4 w-4 shrink-0" /> : null}
                </button>
              )
            })}
          </div>
        </aside>

        {loading ? (
          <div className="grid place-items-center text-sm font-bold text-muted">正在加载协议...</div>
        ) : (
          <div className="grid min-w-0 grid-rows-[auto_1fr]">
            <div className="flex flex-col gap-3 border-b border-line px-5 py-4 xl:flex-row xl:items-center xl:justify-between">
              <div>
                <div className="text-lg font-extrabold text-ink">{activePreset.label}</div>
                <div className="mt-1 text-xs font-bold text-muted">{activePreset.id}</div>
              </div>
              <div className="flex flex-wrap items-center gap-3">
                <select value={activeAgreement.status} onChange={(event) => updateActive({ status: event.target.value as BackendSiteAgreement['status'] })} className="h-10 rounded-[4px] border border-line px-3 text-sm font-bold outline-none focus:border-brand">
                  <option value="published">发布</option>
                  <option value="draft">草稿</option>
                </select>
                <button type="button" onClick={() => void saveActive()} disabled={saving} className="inline-flex h-10 items-center gap-2 rounded-[4px] bg-brand px-5 text-sm font-extrabold text-white disabled:opacity-60">
                  {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                  保存协议
                </button>
              </div>
            </div>

            <div className="grid min-w-0 gap-5 p-5 xl:grid-cols-[minmax(0,1fr)_360px]">
              <div className="grid min-w-0 gap-4">
                <label className="grid gap-2">
                  <span className="text-sm font-extrabold text-ink">标题</span>
                  <input value={activeAgreement.title} onChange={(event) => updateActive({ title: event.target.value })} className="h-10 rounded-[4px] border border-line px-3 text-sm outline-none focus:border-brand" />
                </label>
                <label className="grid gap-2">
                  <span className="text-sm font-extrabold text-ink">摘要</span>
                  <input value={activeAgreement.summary} onChange={(event) => updateActive({ summary: event.target.value })} className="h-10 rounded-[4px] border border-line px-3 text-sm outline-none focus:border-brand" />
                </label>
                <label className="grid min-h-0 gap-2">
                  <span className="text-sm font-extrabold text-ink">正文</span>
                  <textarea value={activeAgreement.content} onChange={(event) => updateActive({ content: event.target.value })} rows={22} className="min-h-[460px] resize-y rounded-[4px] border border-line p-3 text-sm leading-7 outline-none focus:border-brand" />
                </label>
              </div>

              <aside className="min-w-0 border border-line bg-bg/40 p-4">
                <div className="text-sm font-extrabold text-ink">预览</div>
                <div className="mt-4 text-lg font-extrabold text-ink">{activeAgreement.title || '未填写标题'}</div>
                <div className="mt-2 text-xs font-bold leading-6 text-muted">{activeAgreement.summary || '未填写摘要'}</div>
                <div className="mt-5 max-h-[520px] overflow-y-auto whitespace-pre-line text-sm leading-7 text-muted">{activeAgreement.content || '未填写正文'}</div>
              </aside>
            </div>
          </div>
        )}
      </section>
    </AdminShell>
  )
}
