"use client"

import { useState } from "react"
import Link from "next/link"
import { ChevronRight, Lock, Unlock, BookOpen } from "lucide-react"
import { Part } from "@/lib/book-data"

interface ChaptersListProps {
  parts: Part[]
  specialSections?: {
    preface?: { title: string }
    epilogue?: { title: string }
  }
}

export function ChaptersList({ parts, specialSections }: ChaptersListProps) {
  const [expandedPart, setExpandedPart] = useState<string | null>(parts.length > 0 ? parts[0].id : null)

  return (
    <div className="space-y-8">
      {/* Special sections - Preface */}
      {specialSections?.preface && (
        <div className="space-y-3">
          <Link href={`/read/preface`} className="block group">
            <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-4 border border-transparent hover:border-[#38bdac]/30 transition-all flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Unlock className="w-4 h-4 text-[#38bdac]" />
                <span className="text-gray-300 group-hover:text-white transition-colors">
                  {specialSections.preface.title}
                </span>
              </div>
              <span className="text-[#38bdac] text-sm">免费</span>
            </div>
          </Link>
        </div>
      )}

      {/* Parts */}
      <div className="space-y-4">
        {parts.map((part) => (
          <div
            key={part.id}
            className="bg-[#0f2137]/40 backdrop-blur-md rounded-xl border border-gray-800/50 overflow-hidden"
          >
            {/* Part header */}
            <button
              onClick={() => setExpandedPart(expandedPart === part.id ? null : part.id)}
              className="w-full p-5 flex items-center justify-between hover:bg-[#0f2137]/60 transition-colors"
            >
              <div className="flex items-center gap-4">
                <span className="text-[#38bdac] font-mono text-lg">{part.number}</span>
                <div className="text-left">
                  <h2 className="text-white text-xl font-semibold">{part.title}</h2>
                  <p className="text-gray-500 text-sm">{part.subtitle}</p>
                </div>
              </div>
              <ChevronRight
                className={`w-5 h-5 text-gray-500 transition-transform ${
                  expandedPart === part.id ? "rotate-90" : ""
                }`}
              />
            </button>

            {/* Chapters and sections */}
            {expandedPart === part.id && (
              <div className="border-t border-gray-800/50">
                {part.chapters.map((chapter) => (
                  <div key={chapter.id} className="border-b border-gray-800/30 last:border-b-0">
                    {/* Chapter title */}
                    <div className="px-5 py-3 bg-[#0a1628]/50">
                      <h3 className="text-gray-400 text-sm font-medium flex items-center gap-2">
                        <BookOpen className="w-4 h-4" />
                        {chapter.title}
                      </h3>
                    </div>

                    {/* Sections */}
                    <div className="divide-y divide-gray-800/30">
                      {chapter.sections.map((section) => (
                        <Link
                          key={section.id}
                          href={`/read/${section.id}`}
                          className="block px-5 py-4 hover:bg-[#0f2137]/40 transition-colors group"
                        >
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                              {section.isFree ? (
                                <Unlock className="w-4 h-4 text-[#38bdac]" />
                              ) : (
                                <Lock className="w-4 h-4 text-gray-500" />
                              )}
                              <span className="text-gray-400 font-mono text-sm">{section.id}</span>
                              <span className="text-gray-300 group-hover:text-white transition-colors">
                                {section.title}
                              </span>
                            </div>
                            <div className="flex items-center gap-3">
                              {section.isFree ? (
                                <span className="text-[#38bdac] text-sm">免费</span>
                              ) : (
                                <span className="text-gray-500 text-sm">¥{section.price}</span>
                              )}
                              <ChevronRight className="w-4 h-4 text-gray-600 group-hover:text-gray-400" />
                            </div>
                          </div>
                        </Link>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Special sections - Epilogue */}
      {specialSections?.epilogue && (
        <div className="mt-8 space-y-3">
          <Link href={`/read/epilogue`} className="block group">
            <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-4 border border-transparent hover:border-[#38bdac]/30 transition-all flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Unlock className="w-4 h-4 text-[#38bdac]" />
                <span className="text-gray-300 group-hover:text-white transition-colors">
                  {specialSections.epilogue.title}
                </span>
              </div>
              <span className="text-[#38bdac] text-sm">免费</span>
            </div>
          </Link>
        </div>
      )}
    </div>
  )
}