import { useState } from "react"
import { Link, Navigate, useParams } from "react-router-dom"
import {
  ArrowRight,
  BadgePercent,
  BarChart3,
  Check,
  Handshake,
  Link2,
  Megaphone,
  Share2,
  TrendingUp,
  Users,
  WalletCards,
} from "lucide-react"
import PublicSiteLayout, { PageSectionTabs, PublicBanner, PublicSectionTitle } from "../components/PublicSiteLayout"

const OVERVIEW_TABS = [
  { id: "cooperation-types", label: "合作方式" },
  { id: "cooperation-advantages", label: "合作优势" },
  { id: "cooperation-flow", label: "合作流程" },
  { id: "cooperation-faq", label: "常见问题" },
]

const PARTNER_TABS = [
  { id: "partner-advantages", label: "伙伴优势" },
  { id: "partner-equity", label: "伙伴权益" },
  { id: "partner-levels", label: "等级要求" },
  { id: "partner-flow", label: "申请流程" },
  { id: "partner-faq", label: "常见问题" },
]

const AFFILIATE_TABS = [
  { id: "affiliate-advantages", label: "推广优势" },
  { id: "affiliate-flow", label: "推广流程" },
  { id: "affiliate-rules", label: "推广规则" },
  { id: "affiliate-modes", label: "推广方式" },
  { id: "affiliate-faq", label: "常见问题" },
]

const COOPERATION_FAQ = [
  { question: "个人可以申请生态合作吗？", answer: "推广合作支持个人用户申请；渠道伙伴通常需要提供企业或团队相关信息。" },
  { question: "提交申请后多久可以完成审核？", answer: "资料完整的情况下通常会在数个工作日内完成初步审核，并通过工单或联系方式反馈结果。" },
  { question: "合作伙伴可以获得哪些支持？", answer: "根据合作类型提供产品价格、售前方案、技术支持、市场协同和推广数据等能力。" },
  { question: "推广收益如何结算？", answer: "符合规则的有效订单会进入结算流程，具体比例和结算状态以推广中心展示为准。" },
]

export default function Cooperation() {
  const { section } = useParams()
  if (section && section !== "partner" && section !== "affiliate") return <Navigate to="/cooperation" replace />
  if (section === "partner") return <PartnerPage />
  if (section === "affiliate") return <AffiliatePage />
  return <CooperationOverview />
}

function CooperationOverview() {
  return (
    <PublicSiteLayout>
      <main>
        <PublicBanner
          title="生态合作"
          description="连接产品、渠道与推广伙伴，共同为客户提供稳定可靠的云服务。"
          background="/theme-pages/banner-cooperation.jpeg"
          action={{ label: "立即加入", href: "/cooperation/partner" }}
        />
        <PageSectionTabs tabs={OVERVIEW_TABS} />

        <section id="cooperation-types" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="选择适合您的合作方式" description="面向服务伙伴与推广者提供不同的合作计划" />
            <div className="mt-10 grid gap-6 lg:grid-cols-2">
              {[
                {
                  icon: Handshake,
                  label: "渠道与服务合作",
                  title: "合作伙伴计划",
                  desc: "面向云服务商、技术服务团队和行业合作伙伴，提供产品、方案、技术和市场支持。",
                  href: "/cooperation/partner",
                  points: ["多等级伙伴权益", "产品与方案支持", "联合服务客户"],
                },
                {
                  icon: TrendingUp,
                  label: "推广与收益合作",
                  title: "推广合作计划",
                  desc: "通过专属推广链接或邀请码推荐新用户，查看推广数据并获得有效订单收益。",
                  href: "/cooperation/affiliate",
                  points: ["申请门槛简单", "推广数据透明", "收益规则清晰"],
                },
              ].map((item, index) => {
                const Icon = item.icon
                return (
                  <Link
                    key={item.title}
                    to={item.href}
                    data-public-reveal
                    className="group relative min-h-[380px] overflow-hidden border border-blue-100 bg-[#f3f8ff] p-8 transition-all hover:-translate-y-1 hover:shadow-[0_16px_40px_rgba(16,36,94,0.14)] sm:p-10"
                    style={{ transitionDelay: `${index * 100}ms` }}
                  >
                    <span className="flex h-16 w-16 items-center justify-center bg-[#0868f5] text-white"><Icon className="h-8 w-8" /></span>
                    <p className="mt-7 text-sm font-semibold text-[#0868f5]">{item.label}</p>
                    <h2 className="mt-3 text-3xl font-semibold text-slate-950">{item.title}</h2>
                    <p className="mt-4 max-w-xl text-sm leading-7 text-slate-600">{item.desc}</p>
                    <div className="mt-6 flex flex-wrap gap-4">
                      {item.points.map((point) => <span key={point} className="flex items-center gap-2 text-sm text-slate-700"><Check className="h-4 w-4 text-[#0868f5]" />{point}</span>)}
                    </div>
                    <span className="mt-8 inline-flex items-center gap-2 text-sm font-semibold text-[#0868f5]">查看合作计划 <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" /></span>
                  </Link>
                )
              })}
            </div>
          </div>
        </section>

        <section id="cooperation-advantages" className="www-public-section scroll-mt-40 bg-[#fafbfe]">
          <div className="www-public-container">
            <PublicSectionTitle title="生态合作优势" description="以产品能力、技术服务和透明机制帮助伙伴长期发展" />
            <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
              {[
                { icon: BadgePercent, title: "产品权益", desc: "按伙伴类型和等级提供对应产品权益与合作政策。" },
                { icon: Users, title: "专业支持", desc: "售前、技术和运营团队协助伙伴服务客户。" },
                { icon: BarChart3, title: "数据透明", desc: "合作进度、推广数据和收益状态清晰可查。" },
                { icon: Megaphone, title: "市场协同", desc: "围绕重点客户和业务场景开展联合推广。" },
              ].map(({ icon: Icon, title, desc }, index) => (
                <div key={title} data-public-reveal className="border border-[#e6e9ec] bg-white p-7 shadow-[0_2px_7px_#f2f5f7]" style={{ transitionDelay: `${index * 70}ms` }}>
                  <Icon className="h-10 w-10 text-[#0868f5]" strokeWidth={1.5} />
                  <h3 className="mt-5 text-lg font-semibold text-slate-900">{title}</h3>
                  <p className="mt-3 text-sm leading-7 text-slate-500">{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <CooperationFlow id="cooperation-flow" title="加入生态合作" description="提供快速高效的申请渠道和审核流程" />
        <FaqSection id="cooperation-faq" items={COOPERATION_FAQ} />
      </main>
    </PublicSiteLayout>
  )
}

function PartnerPage() {
  const [activeAdvantage, setActiveAdvantage] = useState(0)
  const advantages = [
    { title: "丰富的云产品", desc: "覆盖计算、网络、安全和存储等基础能力，满足不同客户需求。", background: "/theme-pages/partner-accordion.png" },
    { title: "专业技术支持", desc: "售前架构、交付和售后团队协助伙伴处理客户问题。", background: "/theme-pages/partner-accordion.png" },
    { title: "灵活合作政策", desc: "根据伙伴类型、业务规模和合作阶段提供对应权益。", background: "/theme-pages/partner-accordion.png" },
    { title: "长期共同成长", desc: "通过客户服务、市场活动和方案共创持续扩大合作价值。", background: "/theme-pages/partner-accordion.png" },
  ]

  return (
    <PublicSiteLayout>
      <main>
        <PublicBanner title="合作伙伴计划" description="携手云服务与技术伙伴，为客户提供更完整的产品和服务。" background="/theme-pages/banner-cooperation.jpeg" action={{ label: "提交申请", href: "/tickets/new" }} />
        <PageSectionTabs tabs={PARTNER_TABS} />

        <section id="partner-advantages" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="伙伴优势" description="开放产品、技术和服务能力，与合作伙伴共同服务客户" />
            <div className="mt-10 space-y-3">
              {advantages.map((item, index) => {
                const active = activeAdvantage === index
                return (
                  <button
                    key={item.title}
                    type="button"
                    onClick={() => setActiveAdvantage(index)}
                    className="block w-full overflow-hidden text-left transition-all duration-300"
                  >
                    <div
                      className={`bg-cover bg-center transition-all duration-300 ${active ? "min-h-[162px]" : "min-h-16 bg-none"}`}
                      style={active ? { backgroundImage: `url('${item.background}')` } : undefined}
                    >
                      <div className={`h-full p-5 transition-colors ${active ? "bg-gradient-to-b from-slate-950/80 to-slate-900/15 text-white" : "bg-slate-100 text-slate-900"}`}>
                        <h3 className="relative pl-9 text-base font-semibold">
                          <span className={`absolute left-0 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full text-sm ${active ? "bg-white/20" : "bg-[#0868f5] text-white"}`}>{active ? "−" : "+"}</span>
                          {item.title}
                        </h3>
                        <div className={`grid transition-[grid-template-rows,opacity] duration-300 ${active ? "mt-3 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`}>
                          <p className="overflow-hidden pl-9 text-sm leading-7">{item.desc}</p>
                        </div>
                      </div>
                    </div>
                  </button>
                )
              })}
            </div>
          </div>
        </section>

        <section id="partner-equity" className="www-public-section scroll-mt-40 bg-[#fafbfe]">
          <div className="www-public-container">
            <PublicSectionTitle title="伙伴权益" description="不同等级可获得对应的产品、技术与市场支持" />
            <div data-public-reveal className="mt-10 overflow-x-auto">
              <table className="w-full min-w-[760px] border-collapse bg-white text-sm">
                <thead><tr>{["类型", "权益类型", "银牌伙伴", "金牌伙伴", "钻石伙伴"].map((item) => <th key={item} className="border border-[#e5e5e5] bg-[#f0f2f5] px-5 py-[14px] text-center font-bold text-[#333]">{item}</th>)}</tr></thead>
                <tbody>
                  {[
                    ["产品", "产品合作权益", true, true, true],
                    ["技术", "专属技术支持", false, true, true],
                    ["市场", "联合市场活动", false, true, true],
                    ["服务", "客户方案协同", true, true, true],
                    ["培训", "产品与技术培训", false, false, true],
                  ].map((row) => (
                    <tr key={String(row[1])}>{row.map((cell, index) => <td key={index} className={`border border-[#e5e5e5] px-5 py-[14px] text-center text-sm text-[#333] ${index === 1 ? "text-left" : ""}`}>{typeof cell === "boolean" ? (cell ? <Check className="mx-auto h-[18px] w-[18px] text-[#0056ff]" /> : "×") : cell}</td>)}</tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </section>

        <section id="partner-levels" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="伙伴等级要求" description="具体申请要求以双方沟通和审核结果为准" />
            <div data-public-reveal className="mt-10 overflow-x-auto">
              <table className="w-full min-w-[760px] border-collapse text-sm">
                <thead><tr>{["伙伴等级", "预存金额", "产品折扣", "团队能力", "季度销售", "年度销售"].map((item) => <th key={item} className="border border-slate-200 bg-slate-100 px-5 py-4 text-center font-medium">{item}</th>)}</tr></thead>
                <tbody>
                  {[
                    ["银牌伙伴", "按协议", "基础权益", "具备客户服务能力", "按协议", "按协议"],
                    ["金牌伙伴", "按协议", "进阶权益", "具备售前与交付团队", "按协议", "按协议"],
                    ["钻石伙伴", "按协议", "核心权益", "具备完整服务团队", "按协议", "按协议"],
                  ].map((row, rowIndex) => <tr key={row[0]}>{row.map((cell, index) => <td key={`${index}-${cell}`} className={`border border-slate-200 px-5 py-6 text-center ${index === 0 ? "font-semibold text-slate-950" : "text-slate-600"}`} style={index === 0 ? { backgroundColor: ["#eef5ff", "#e4efff", "#d8e8ff"][rowIndex] } : undefined}>{cell}</td>)}</tr>)}
                </tbody>
              </table>
            </div>
          </div>
        </section>

        <CooperationFlow id="partner-flow" title="申请流程" description="提供快速高效的申请渠道和审核流程，助您轻松加入合作伙伴网络" />
        <FaqSection id="partner-faq" items={COOPERATION_FAQ} />
      </main>
    </PublicSiteLayout>
  )
}

function AffiliatePage() {
  return (
    <PublicSiteLayout>
      <main>
        <PublicBanner title="推广合作计划" description="分享专属链接推荐新用户，以透明数据和清晰规则获得推广收益。" background="/theme-pages/banner-cooperation.jpeg" action={{ label: "开始推广", href: "/promotion" }} />
        <PageSectionTabs tabs={AFFILIATE_TABS} />

        <section id="affiliate-advantages" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="推广优势" description="无需复杂技术，通过内容、链接和邀请码即可参与" />
            <div className="mt-10 grid gap-5 lg:grid-cols-[1fr_288px]">
              <div className="grid gap-5 sm:grid-cols-2">
                {[
                  { icon: Link2, title: "专属推广链接", desc: "自动记录链接带来的访问、注册与订单。" },
                  { icon: BarChart3, title: "推广数据透明", desc: "清晰查看点击、注册、订单和收益数据。" },
                  { icon: WalletCards, title: "收益规则清晰", desc: "有效订单按照推广规则进入收益结算。" },
                  { icon: Users, title: "多种推广场景", desc: "支持内容分享、社群推荐和客户介绍。" },
                ].map(({ icon: Icon, title, desc }, index) => (
                  <div key={title} data-public-reveal className="www-aff-advantage-card www-detail-card flex gap-5 border border-[#e6e9ec] bg-white shadow-[0_2px_7px_#f2f5f7]" style={{ transitionDelay: `${index * 60}ms` }}>
                    <Icon className="h-[62px] w-[62px] shrink-0 text-[#0056ff]" strokeWidth={1.5} />
                    <div><h3 className="text-lg font-semibold text-slate-900">{title}</h3><p className="mt-3 text-sm leading-7 text-slate-500">{desc}</p></div>
                  </div>
                ))}
              </div>
              <div data-public-reveal className="flex min-h-[360px] flex-col justify-center bg-[#f3f8ff] p-8 shadow-[0_0_20px_rgba(0,0,0,0.06)]">
                <TrendingUp className="h-14 w-14 text-[#0868f5]" />
                <h3 className="mt-6 text-xl font-semibold text-slate-950">开始赚钱</h3>
                <p className="mt-3 text-sm leading-7 text-slate-600">无需复杂技术和经验，通过推广中心创建链接并查看数据。</p>
                <Link to="/promotion" className="mt-7 inline-flex h-11 items-center justify-center gap-2 bg-[#0868f5] px-6 text-sm font-semibold text-white">进入推广中心 <ArrowRight className="h-4 w-4" /></Link>
              </div>
            </div>
          </div>
        </section>

        <section id="affiliate-flow" className="www-public-section relative scroll-mt-40 overflow-hidden bg-[#fafbfe]">
          <div className="www-public-container">
            <PublicSectionTitle title="推广流程" description="四个步骤完成推广和收益结算" />
            <div className="mt-10 grid gap-6 lg:grid-cols-4">
                {[
                { image: "/theme-pages/affiliate-step-1.png", title: "注册/登录会员", desc: "注册账号并完成个人实名认证" },
                { image: "/theme-pages/affiliate-step-2.png", title: "获取专属推广链接", desc: "开启推广资格，复制推广链接" },
                { image: "/theme-pages/affiliate-step-3.png", title: "分享推荐链接", desc: "通过推广链接注册/登录建立关联" },
                { image: "/theme-pages/affiliate-step-4.png", title: "获取返利", desc: "用户成功购买产品，获得推荐现金奖励" },
              ].map(({ image, title, desc }, index) => (
                <div key={title} data-public-reveal className="www-aff-flow-card relative flex flex-col items-center border border-[#e6e9ec] bg-white shadow-[0_2px_7px_#f2f5f7]" style={{ transitionDelay: `${index * 80}ms` }}>
                  <div className="mb-[30px] flex w-full items-end justify-between"><span className="text-[46px] font-black leading-[56px] text-[#0056ff]">0{index + 1}</span><img src={image} alt="" className="h-auto w-[100px]" /></div>
                  <div className="w-full"><h3 className="py-[15px] text-lg font-semibold text-[#141625]">{title}</h3><p className="text-base leading-7 text-black/65">{desc}</p></div>
                  {index < 3 && <ArrowRight className="absolute -right-5 top-1/2 z-10 hidden h-6 w-6 -translate-y-1/2 text-slate-400 lg:block" />}
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="affiliate-rules" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="推广规则" description="推广资格、有效订单和收益以推广中心实际规则为准" />
            <div className="mt-10 grid gap-5 lg:grid-cols-[1fr_288px]">
              <div data-public-reveal className="min-h-[300px] border border-blue-100 bg-[#f3f8ff] p-8">
                <h3 className="text-lg font-semibold text-slate-950">规则说明</h3>
                <ul className="mt-5 space-y-4">
                  {["推广链接或邀请码需要由当前推广账户生成", "新用户完成有效注册并产生符合规则的订单", "退款、取消或异常订单不计入最终结算", "推广行为应遵守平台规则，不得进行虚假或误导宣传"].map((item) => <li key={item} className="flex items-start gap-3 text-sm leading-7 text-slate-600"><Check className="mt-1 h-4 w-4 shrink-0 text-[#0868f5]" />{item}</li>)}
                </ul>
              </div>
              <div data-public-reveal className="bg-white p-7 shadow-[0_0_20px_rgba(0,0,0,0.06)]">
                <BarChart3 className="h-12 w-12 text-[#0868f5]" />
                <h3 className="mt-5 text-lg font-semibold text-slate-950">推广数据</h3>
                <p className="mt-3 text-sm leading-7 text-slate-500">进入推广中心查看访问、注册、订单和收益明细。</p>
                <Link to="/promotion" className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-[#0868f5]">查看推广数据 <ArrowRight className="h-4 w-4" /></Link>
              </div>
            </div>
          </div>
        </section>

        <section id="affiliate-modes" className="www-public-section scroll-mt-40 bg-[#fafbfe]">
          <div className="www-public-container">
            <PublicSectionTitle title="推广方式" description="选择适合自己的内容和渠道进行推广" />
            <div className="mt-10 grid items-start gap-5 lg:grid-cols-[1fr_288px]">
              <div>
                <div data-public-reveal className="www-aff-mode-banner relative overflow-hidden border border-[#e6e9ec] bg-[url('/theme-pages/problem-strip.jpg')] bg-cover bg-center shadow-[0_2px_7px_#f2f5f7]">
                  <div className="absolute inset-0 bg-gradient-to-r from-[#eef5ff]/95 via-[#f4f8ff]/80 to-white/20" />
                  <div className="relative flex h-full items-center px-7">
                    <div><p className="text-xl font-semibold text-[#141625]">分享云服务，获得推广收益</p><p className="mt-2 text-sm text-black/65">专属链接、透明数据、清晰结算</p></div>
                    <Link to="/promotion" className="ml-auto bg-white px-5 py-[10px] text-sm font-medium text-[#0056ff] shadow-[0_0_20px_rgba(0,0,0,0.06)]">无门槛轻松赚钱</Link>
                  </div>
                </div>
                <div className="mt-[10px] grid gap-5 md:grid-cols-3">
                  {[
                    { icon: Share2, title: "社交分享", desc: "通过社群、朋友圈或即时通讯分享推广链接。" },
                    { icon: Megaphone, title: "内容推广", desc: "在文章、教程和测评内容中介绍产品。" },
                    { icon: Handshake, title: "客户推荐", desc: "向有云服务需求的客户推荐合适产品。" },
                  ].map(({ icon: Icon, title, desc }, index) => (
                    <div key={title} data-public-reveal className="bg-white p-7 shadow-[0_0_20px_rgba(0,0,0,0.06)]" style={{ transitionDelay: `${index * 80}ms` }}>
                      <Icon className="h-10 w-10 text-[#0056ff]" /><h3 className="mt-5 text-lg font-semibold text-[#141625]">{title}</h3><p className="mt-[10px] text-sm leading-7 text-black/65">{desc}</p>
                    </div>
                  ))}
                </div>
              </div>
              <div data-public-reveal className="flex min-h-[300px] flex-col items-start bg-white p-7 shadow-[0_0_20px_rgba(0,0,0,0.06)]">
                <BarChart3 className="h-12 w-12 text-[#0056ff]" />
                <h3 className="mt-[22px] border-b border-[#eee] pb-3 text-base font-semibold text-[#333]">推广数据</h3>
                <p className="mt-3 text-sm leading-7 text-[#333]">无需任何技术和经验，访问、注册、订单和收益数据清晰可查。</p>
                <Link to="/promotion" className="mt-auto inline-flex items-center gap-2 text-sm font-semibold text-[#0056ff]">查看推广数据 <ArrowRight className="h-4 w-4" /></Link>
              </div>
            </div>
          </div>
        </section>

        <FaqSection id="affiliate-faq" items={COOPERATION_FAQ} />
      </main>
    </PublicSiteLayout>
  )
}

function CooperationFlow({ id, title, description }: { id: string; title: string; description: string }) {
  const steps = ["提交申请", "审核评估", "沟通共创", "签署协议", "成为伙伴"]
  return (
    <section id={id} className="www-public-section scroll-mt-40">
      <div className="www-public-container">
        <PublicSectionTitle title={title} description={description} />
        <div data-public-reveal className="mt-10">
          <img src="/theme-pages/partner-flow.png" alt="合作申请流程" className="hidden h-[106px] w-full object-fill sm:block" />
          <div className="mt-7 grid grid-cols-2 gap-5 px-5 sm:grid-cols-5">
            {steps.map((step, index) => (
              <div key={step} className="text-center">
                <span className="block text-xl font-black leading-[22px] text-[#141625]">{index + 1}</span>
                <p className="mt-[10px] text-xl font-black leading-[22px] text-[#141625]">{step}</p>
              </div>
            ))}
          </div>
          <div className="mt-10 text-center"><Link to="/tickets/new" className="inline-flex h-12 items-center gap-2 bg-[#0868f5] px-8 text-sm font-semibold text-white">提交申请 <ArrowRight className="h-4 w-4" /></Link></div>
        </div>
      </div>
    </section>
  )
}

function FaqSection({ id, items }: { id: string; items: typeof COOPERATION_FAQ }) {
  return (
    <section id={id} className="www-public-section scroll-mt-40 bg-[#fafbfe]">
      <div className="www-public-container">
        <PublicSectionTitle title="常见问题" description="关于合作申请、审核和权益的常见说明" />
        <div className="mt-10 space-y-5">
          {items.map((item) => (
              <div key={item.question} data-public-reveal>
                <div className="mb-5 flex w-full items-center gap-4 text-left">
                  <span className="flex h-7 w-7 shrink-0 items-center justify-center bg-[#0868f5] font-semibold text-white">Q</span>
                  <span className="font-semibold text-slate-900">{item.question}</span>
                </div>
                <p className="bg-white p-5 text-sm leading-7 text-black/65">{item.answer}</p>
              </div>
          ))}
        </div>
      </div>
    </section>
  )
}
