import { useNavigate } from 'react-router-dom'
import { Rocket, Layers3, BookOpen, ArrowRight } from 'lucide-react'
import { ThemeToggle } from './ThemeToggle'
import { type TutorialSummary } from '@/tutorial/loader'
import { useTutorialStore } from '@stores/tutorialStore'

interface TutorialHubProps {
  tutorials: TutorialSummary[]
}

export function TutorialHub({ tutorials }: TutorialHubProps) {
  const navigate = useNavigate()
  const getTutorialProgress = useTutorialStore((state) => state.getTutorialProgress)

  const handleSelectTutorial = (tutorialId: string) => {
    navigate(`/${tutorialId}`)
  }

  return (
    <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)]">
      <header className="border-b border-[var(--color-border)] bg-[var(--color-bg-elevated)]/90 backdrop-blur-md">
        <div className="max-w-6xl mx-auto px-6 py-5 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-xl bg-[var(--color-primary-dim)] border border-[var(--color-primary)]/40 flex items-center justify-center">
              <Layers3 className="w-5 h-5 text-[var(--color-primary)]" />
            </div>
            <div>
              <p className="text-xs font-mono uppercase tracking-[0.2em] text-[var(--color-text-muted)]">
                Multi Tutorial Mode
              </p>
              <h1 className="text-xl font-semibold text-[var(--color-text)]">教程大厅</h1>
            </div>
          </div>
          <ThemeToggle />
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-6 py-8">
        <section className="grid gap-4 mb-8 md:grid-cols-3">
          <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-5">
            <p className="text-xs uppercase tracking-[0.16em] text-[var(--color-text-muted)] mb-2">教程总数</p>
            <p className="text-3xl font-semibold text-[var(--color-text)]">{tutorials.length}</p>
          </div>
          <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-5">
            <p className="text-xs uppercase tracking-[0.16em] text-[var(--color-text-muted)] mb-2">总步骤数</p>
            <p className="text-3xl font-semibold text-[var(--color-text)]">
              {tutorials.reduce((sum, item) => sum + item.stepCount, 0)}
            </p>
          </div>
          <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-5">
            <p className="text-xs uppercase tracking-[0.16em] text-[var(--color-text-muted)] mb-2">学习建议</p>
            <p className="text-sm text-[var(--color-text-secondary)] leading-6">
              先选一个 20~30 分钟教程快速完成，再进入中高级教程做项目实战。
            </p>
          </div>
        </section>

        <section className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {tutorials.map((tutorial) => {
            const progress = getTutorialProgress(tutorial.id, tutorial.stepCount)
            const hasProgress = progress.completedCount > 0

            return (
              <article
                key={tutorial.id}
                className="group rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] p-5 flex flex-col gap-4 transition-all hover:border-[var(--color-primary)]/50 hover:shadow-[0_0_0_1px_rgba(34,211,238,0.15)]"
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <p className="text-2xl leading-none mb-2">{tutorial.coverEmoji || '📘'}</p>
                    <h2 className="font-semibold text-lg text-[var(--color-text)] line-clamp-2">{tutorial.title}</h2>
                    {tutorial.description && (
                      <p className="text-sm text-[var(--color-text-secondary)] mt-2 line-clamp-2">
                        {tutorial.description}
                      </p>
                    )}
                  </div>
                  {tutorial.featured && (
                    <span className="px-2.5 py-1 rounded-full text-xs font-semibold text-[var(--color-primary)] bg-[var(--color-primary-dim)] border border-[var(--color-primary)]/30">
                      推荐
                    </span>
                  )}
                </div>

                <div className="flex items-center flex-wrap gap-2">
                  <span className="px-2.5 py-1 rounded-lg text-xs text-[var(--color-text-secondary)] bg-[var(--color-bg-card)] border border-[var(--color-border)]">
                    <BookOpen className="inline-block w-3.5 h-3.5 mr-1 -mt-0.5" />
                    {tutorial.stepCount} 步
                  </span>
                  {tutorial.duration && (
                    <span className="px-2.5 py-1 rounded-lg text-xs text-[var(--color-text-secondary)] bg-[var(--color-bg-card)] border border-[var(--color-border)]">
                      {tutorial.duration}
                    </span>
                  )}
                  {tutorial.difficulty && (
                    <span className="px-2.5 py-1 rounded-lg text-xs text-[var(--color-text-secondary)] bg-[var(--color-bg-card)] border border-[var(--color-border)]">
                      {tutorial.difficulty}
                    </span>
                  )}
                </div>

                <div className="mt-auto pt-1">
                  <div className="flex items-center justify-between text-xs mb-2">
                    <span className="text-[var(--color-text-muted)]">当前进度</span>
                    <span className="font-mono text-[var(--color-primary)]">
                      {progress.completedCount} / {tutorial.stepCount}
                    </span>
                  </div>
                  <div className="h-1.5 bg-[var(--color-bg-card)] rounded-full overflow-hidden border border-[var(--color-border)]">
                    <div
                      className="h-full bg-[var(--color-primary-solid)] transition-all duration-500"
                      style={{ width: `${progress.percent}%` }}
                    />
                  </div>
                </div>

                <button
                  onClick={() => handleSelectTutorial(tutorial.id)}
                  className="w-full mt-2 px-4 py-2.5 rounded-xl bg-[var(--color-primary-solid)] text-[var(--color-on-primary)] font-semibold text-sm flex items-center justify-center gap-2 hover:opacity-90 transition-opacity"
                >
                  {hasProgress ? '继续学习' : '开始学习'}
                  {hasProgress ? <Rocket className="w-4 h-4" /> : <ArrowRight className="w-4 h-4" />}
                </button>
              </article>
            )
          })}
        </section>
      </main>
    </div>
  )
}