import { Link, Navigate, useParams } from "react-router-dom"
import { ArrowRight, Check } from "lucide-react"
import PublicSiteLayout, { PageSectionTabs, PublicBanner, PublicSectionTitle } from "../components/PublicSiteLayout"
import { findPublicSolution, PUBLIC_SOLUTIONS } from "../data/publicSolutions"

const DETAIL_TABS = [
  { id: "solution-advantages", label: "方案优势" },
  { id: "solution-problems", label: "业务痛点" },
  { id: "solution-architecture", label: "方案架构" },
  { id: "solution-products", label: "相关产品" },
  { id: "more-solutions", label: "更多方案" },
]

export default function SolutionDetail() {
  const { slug } = useParams()
  const solution = findPublicSolution(slug)

  if (!solution) return <Navigate to="/solutions" replace />

  return (
    <PublicSiteLayout>
      <main>
        <PublicBanner
          title={solution.name}
          description={solution.heroDescription}
          background="/theme-pages/banner-solutions.jpg"
          action={{ label: "方案咨询", href: "/tickets/new" }}
        />
        <PageSectionTabs tabs={DETAIL_TABS} />

        <section id="solution-advantages" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="方案优势" description={solution.summary} />
            <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
              {solution.advantages.map((item, index) => {
                const Icon = item.icon
                return (
                  <div
                    key={item.title}
                    data-public-reveal
                    className="www-advantage-card www-detail-card relative flex flex-col items-center justify-center border border-[#e6e9ec] bg-white text-center shadow-[0_2px_7px_#f2f5f7] transition-shadow"
                    style={{ transitionDelay: `${index * 70}ms` }}
                  >
                    <span className="www-advantage-icon flex items-center justify-center text-[#0056ff]">
                      <Icon className="h-14 w-14" strokeWidth={1.25} />
                    </span>
                    <div className="www-advantage-copy">
                      <h3 className="mt-5 text-lg font-semibold text-[#333] max-md:mt-0">{item.title}</h3>
                      <p className="mt-[10px] text-sm leading-8 text-black/65 max-md:leading-6">{item.desc}</p>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </section>

        <section id="solution-problems" className="www-public-section scroll-mt-40 bg-[#f4f8ff]">
          <div className="www-public-container">
            <div data-public-reveal className="overflow-hidden bg-[#f2f6ff]">
              <div
                className="flex min-h-[193px] flex-col justify-between gap-6 bg-cover bg-center px-5 py-6 sm:px-10 lg:flex-row lg:items-center lg:gap-[50px]"
                style={{ backgroundImage: "url('/theme-pages/problem-strip.jpg')" }}
              >
                <div>
                  <h2 className="text-2xl font-semibold text-[#141625]">{solution.problem.title}</h2>
                  <p className="mt-6 text-sm leading-7 text-[#141625] max-md:mt-2">{solution.problem.desc}</p>
                  <div className="mt-6 flex flex-wrap gap-x-[30px] gap-y-[10px] max-md:mt-2 max-md:flex-col">
                    {solution.problem.tags.map((tag) => (
                      <span key={tag} className="flex items-center gap-2 text-sm font-semibold text-[#0868f5]"><Check className="h-4 w-4" />{tag}</span>
                    ))}
                  </div>
                </div>
                <div className="flex shrink-0 gap-10 max-md:gap-5">
                  <Link to="/tickets/new" className="inline-flex h-[46px] w-[120px] items-center justify-center bg-[#0056ff] text-sm font-normal text-white max-md:h-[38px] max-md:w-[88px]">1V1 咨询</Link>
                  <Link to="/tickets/new" className="inline-flex h-[46px] w-[120px] items-center justify-center border border-[#0056ff] bg-white text-sm font-normal text-[#0056ff] max-md:h-[38px] max-md:w-[88px]">方案定制</Link>
                </div>
              </div>

              <div className="www-problem-grid grid sm:grid-cols-2 lg:grid-cols-4">
                {solution.problem.items.map((item, index) => (
                  <div
                    key={item.title}
                    data-public-reveal
                    className="www-problem-card www-detail-card border border-[#dbdcee] shadow-[0_0_20px_rgba(0,0,0,0.06)] transition-shadow"
                    style={{ transitionDelay: `${index * 70}ms` }}
                  >
                    <h3 className="mt-[10px] text-lg font-normal text-[#141625] max-md:mt-0 max-md:text-base">{item.title}</h3>
                    <p className="mt-[10px] text-sm leading-8 text-black/65 max-md:leading-6">{item.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section id="solution-architecture" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="方案架构" description="标准化架构可以根据业务规模和部署区域进行调整" />
            <div data-public-reveal className="mt-10 flex flex-col items-stretch lg:flex-row lg:items-end">
              <div className="www-architecture-copy flex flex-col border border-[#ebf1fc] bg-[#f4f8ff] lg:shrink-0">
                <div className="bg-white py-6 pl-5 pr-10 max-md:p-5">
                  <h3 className="text-2xl font-semibold text-slate-950">{solution.architecture.title}</h3>
                  <p className="mt-3 text-sm leading-7 text-slate-600">{solution.architecture.desc}</p>
                </div>
                <div className="flex flex-1 flex-col py-6 pl-5 pr-10 max-md:p-5">
                  <h4 className="font-semibold text-slate-900">架构优势</h4>
                  <ul className="mt-4 space-y-3">
                    {solution.architecture.advantages.map((item) => (
                      <li key={item} className="flex items-start gap-3 text-sm leading-6 text-slate-500"><Check className="mt-0.5 h-4 w-4 shrink-0 text-[#0868f5]" />{item}</li>
                    ))}
                  </ul>
                  <Link to="/tickets/new" className="mt-auto inline-flex h-11 w-[150px] items-center gap-2 bg-[#0868f5] px-5 text-sm font-medium text-white">
                    服务咨询 <ArrowRight className="h-4 w-4" />
                  </Link>
                </div>
              </div>
              <div className="www-architecture-image flex flex-1 items-center justify-center border border-slate-100 bg-white shadow-[0_0_20px_rgba(0,0,0,0.06)]">
                <img src={solution.architectureImage} alt={`${solution.name}架构图`} className="h-full w-full object-fill" />
              </div>
            </div>
          </div>
        </section>

        <section id="solution-products" className="www-public-section scroll-mt-40 bg-[#f5f8fc]">
          <div className="www-public-container">
            <PublicSectionTitle title="相关云产品" description="组合基础云产品快速构建完整业务环境" />
            <div className="www-product-grid mt-10 grid md:grid-cols-3">
              {solution.products.map((product, index) => {
                const Icon = product.icon
                return (
                  <Link
                    key={product.name}
                    to="/store"
                    data-public-reveal
                    className="www-product-card www-detail-card group border border-[#dbdcee] bg-white shadow-[0_0_20px_rgba(0,0,0,0.06)] transition-all"
                    style={{ transitionDelay: `${index * 80}ms` }}
                  >
                    <div className="flex items-center gap-4">
                      <span className="flex h-[42px] w-[42px] items-center justify-center text-[#0056ff]"><Icon className="h-9 w-9" strokeWidth={1.3} /></span>
                      <h3 className="text-lg font-semibold text-slate-900 group-hover:text-[#0868f5]">{product.name}</h3>
                      <ArrowRight className="ml-auto h-6 w-6 text-black opacity-0 transition-opacity group-hover:opacity-100" />
                    </div>
                    <p className="mt-5 text-sm leading-7 text-slate-500">{product.desc}</p>
                  </Link>
                )
              })}
            </div>
          </div>
        </section>

        <section id="more-solutions" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="更多解决方案" />
            <div data-public-reveal className="www-more-grid mt-8 grid overflow-hidden bg-[url('/theme-pages/problem-strip.jpg')] bg-cover bg-center shadow-[5px_8px_15px_rgba(55,99,170,0.09)]">
              {PUBLIC_SOLUTIONS.filter((item) => item.slug !== solution.slug).map((item) => {
                const Icon = item.advantages[0]!.icon
                return (
                  <Link
                    key={item.slug}
                    to={`/solutions/${item.slug}`}
                    className="flex min-h-[155px] flex-col items-center justify-center border-r border-slate-200 bg-white/75 p-4 text-center transition-all last:border-r-0 hover:bg-white hover:shadow-[0_8px_23px_rgba(17,63,173,0.42)]"
                  >
                    <Icon className="h-14 w-14 text-[#0056ff] max-md:h-8 max-md:w-8" strokeWidth={1.25} />
                    <span className="mt-5 text-lg font-medium text-[#333] max-md:mt-2 max-md:text-xs">{item.name}</span>
                  </Link>
                )
              })}
            </div>
          </div>
        </section>
      </main>
    </PublicSiteLayout>
  )
}
