import { ChevronLeft, MoreHorizontal, X } from "lucide-react"
import type { PreviewProps } from "../../types"
import { createTopicSectionsFromImages } from "./helpers"

export function TopicPagePreview({ content }: PreviewProps) {
  const topicSections = (content.topicSections && content.topicSections.length > 0)
    ? content.topicSections
    : createTopicSectionsFromImages(content.imageUrls)

  return (
    <div className="relative flex h-[780px] w-[360px] flex-col overflow-hidden rounded-[28px] border border-gray-200 bg-white text-[#1a1a1a] shadow-2xl">
      <div className="flex h-11 items-end justify-between bg-white px-8 pb-2 text-[15px] font-semibold tracking-tight text-[#1a1a1a]">
        <span>9:41</span>
        <div className="flex items-center gap-1.5 pb-1">
          <svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M0 8.35L2.83 8.35L2.83 10.5H0V8.35ZM4.25 6.2H7.08V10.5H4.25V6.2ZM8.5 4.05H11.33V10.5H8.5V4.05ZM12.75 1.9H15.58V10.5H12.75V1.9Z" fill="#1a1a1a" />
          </svg>
          <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M8 12L16 3.10931C11.5768 -0.493103 4.42323 -0.493103 0 3.10931L8 12Z" fill="#1a1a1a" />
          </svg>
          <div className="relative h-[11.33px] w-[24.33px] rounded-[3px] border border-black/35 p-[1px]">
            <div className="h-full w-[18px] rounded-[1px] bg-[#1a1a1a]" />
            <div className="absolute -right-[3px] top-[3px] h-[5px] w-[2px] rounded-r-[1px] bg-black/35" />
          </div>
        </div>
      </div>

      <header className="flex h-14 items-center justify-between bg-white px-4">
        <button className="p-2 text-[#1a1a1a]" type="button" aria-label="返回">
          <ChevronLeft className="h-6 w-6" />
        </button>
        <h1 className="text-lg font-medium tracking-wide">{content.topicNavTitle || `${content.sourceCarName || "车型"}详情`}</h1>
        <div className="flex h-8 items-center rounded-full border border-gray-200 bg-gray-50 px-1">
          <button className="border-r border-gray-200 px-2 text-gray-500" type="button" aria-label="更多">
            <MoreHorizontal className="h-4 w-4" />
          </button>
          <button className="px-2 text-gray-500" type="button" aria-label="关闭">
            <X className="h-4 w-4" />
          </button>
        </div>
      </header>

      <main className="min-h-0 flex-1 overflow-y-auto pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        <section className="pt-4 pb-3 text-center">
          <h2 className="mb-1 text-[28px] font-bold tracking-tight">{content.topicHeroTitle || "先锋设计"}</h2>
          <div className="w-12 h-[3px] bg-[#d51c2a] mx-auto" />
        </section>

        <div className="space-y-2 px-0">
          {topicSections.map((section) => (
            <section key={section.id} className="bg-[#f8f9fb] rounded-t-[32px] overflow-hidden">
              <div className="aspect-[16/9] relative overflow-hidden">
                {section.imageUrl ? (
                  <img
                    src={section.imageUrl}
                    alt={section.title}
                    className="w-full h-full object-cover mix-blend-multiply"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-xs text-gray-500 bg-gray-100">请添加模块图片</div>
                )}
              </div>
              <div className="px-5 py-1.5">
                <h3 className="text-[19px] font-normal text-gray-700">{section.title}</h3>
              </div>
            </section>
          ))}
        </div>
      </main>

      <footer className="shrink-0 border-t border-gray-100 bg-white/80 px-4 pt-2 pb-4 backdrop-blur-md">
        <button className="w-full rounded-md bg-[#1c1f23] py-3 text-[15px] font-medium text-white">
          {content.ctaText || "预约体验"}
        </button>
        <div className="mx-auto mt-3 h-1 w-24 rounded-full bg-black/80" />
      </footer>
    </div>
  )
}