"use client"

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

interface TableOfContentsProps {
  parts: Part[]
}

export function TableOfContents({ parts }: TableOfContentsProps) {
  return (
    <section className="py-12 px-4">
      <div className="max-w-2xl mx-auto">
        {/* 区域标题 */}
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-[var(--app-text-secondary)] text-sm font-medium">
            全书目录
          </h2>
          <span className="text-[var(--app-text-tertiary)] text-xs">
            共 {parts.length} 篇
          </span>
        </div>

        {/* 章节列表 - iOS列表风格 */}
        <div className="glass-card overflow-hidden mb-8">
          {parts.map((part, index) => (
            <Link 
              key={part.id} 
              href={`/chapters?part=${part.id}`} 
              className="block touch-feedback"
            >
              <div className={`list-item-ios ${index === 0 ? 'rounded-t-xl' : ''} ${index === parts.length - 1 ? 'rounded-b-xl border-b-0' : ''}`}>
                <div className="flex items-center gap-4 flex-1 min-w-0">
                  {/* 序号标识 */}
                  <div className="w-10 h-10 rounded-xl bg-[var(--app-brand-light)] flex items-center justify-center flex-shrink-0">
                    <span className="text-[var(--app-brand)] font-bold text-sm">{part.number}</span>
                  </div>
                  
                  {/* 内容 */}
                  <div className="flex-1 min-w-0">
                    <h3 className="text-white font-semibold text-base truncate mb-0.5">
                      {part.title}
                    </h3>
                    <p className="text-[var(--app-text-tertiary)] text-sm truncate">
                      {part.subtitle}
                    </p>
                    <p className="text-[var(--app-text-tertiary)] text-xs mt-1">
                      {part.chapters.length} 章 · {part.chapters.reduce((acc, c) => acc + c.sections.length, 0)} 节
                    </p>
                  </div>
                </div>
                
                {/* 箭头 */}
                <ChevronRight className="w-5 h-5 text-[var(--app-text-tertiary)] flex-shrink-0" />
              </div>
            </Link>
          ))}
        </div>

        {/* 附加内容 - 序言和尾声 */}
        <div className="grid grid-cols-2 gap-3">
          <Link href="/chapters?section=preface" className="block touch-feedback">
            <div className="glass-card p-4 h-full">
              <div className="flex items-center gap-2 mb-2">
                <BookOpen className="w-4 h-4 text-[var(--ios-blue)]" />
                <span className="text-[var(--app-text-tertiary)] text-xs">序言</span>
              </div>
              <p className="text-white text-sm leading-relaxed text-ellipsis-2">
                为什么我每天早上6点在Soul开播?
              </p>
            </div>
          </Link>
          
          <Link href="/chapters?section=epilogue" className="block touch-feedback">
            <div className="glass-card p-4 h-full">
              <div className="flex items-center gap-2 mb-2">
                <FileText className="w-4 h-4 text-[var(--ios-purple)]" />
                <span className="text-[var(--app-text-tertiary)] text-xs">尾声</span>
              </div>
              <p className="text-white text-sm leading-relaxed text-ellipsis-2">
                努力不是关键，选择才是
              </p>
            </div>
          </Link>
        </div>
      </div>
    </section>
  )
}