import { notFound } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft, Clock, Wrench, Package } from 'lucide-react'
import { projects, getProject, getRelatedProjects } from '@/lib/projects'
import { DifficultyBadge } from '@/components/DifficultyBadge'
import { AgeBadge } from '@/components/AgeBadge'
import { StepCard } from '@/components/StepCard'
import { SafetyTip } from '@/components/SafetyTip'
import { ToolIcon } from '@/components/ToolIcon'
import { ProjectIllustration } from '@/components/ProjectIllustration'
import { ProjectCard } from '@/components/ProjectCard'

export function generateStaticParams() {
  return projects.map((p) => ({ slug: p.slug }))
}

export default async function ProjectPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const project = getProject(slug)
  if (!project) notFound()

  const related = getRelatedProjects(slug)

  return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      {/* Back */}
      <Link href="/projekte" className="inline-flex items-center gap-1 text-accent hover:underline mb-6 text-sm font-semibold">
        <ArrowLeft className="w-4 h-4" /> Alle Projekte
      </Link>

      {/* Hero */}
      <div className="bg-white rounded-2xl shadow-sm border border-primary/5 overflow-hidden mb-8">
        <div className="bg-cream p-10 flex items-center justify-center">
          <ProjectIllustration slug={project.slug} size={180} />
        </div>
        <div className="p-6 sm:p-8">
          <div className="flex flex-wrap items-center gap-3 mb-3">
            <AgeBadge range={project.ageRange} />
            <DifficultyBadge level={project.difficulty} />
            <span className="flex items-center gap-1 text-sm text-dark/50">
              <Clock className="w-4 h-4" /> {project.duration}
            </span>
          </div>
          <h1 className="font-heading font-bold text-3xl sm:text-4xl mb-3">{project.name}</h1>
          <p className="text-dark/70 text-lg leading-relaxed">{project.description}</p>
        </div>
      </div>

      {/* Tools & Materials */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
        <div className="bg-white rounded-2xl p-6 border border-primary/5">
          <h2 className="font-heading font-bold text-lg flex items-center gap-2 mb-4">
            <Wrench className="w-5 h-5 text-primary" /> Werkzeuge
          </h2>
          <ul className="space-y-2">
            {project.tools.map((t) => (
              <li key={t} className="flex items-center gap-2 text-sm">
                <ToolIcon name={t} />
                {t}
              </li>
            ))}
          </ul>
        </div>
        <div className="bg-white rounded-2xl p-6 border border-primary/5">
          <h2 className="font-heading font-bold text-lg flex items-center gap-2 mb-4">
            <Package className="w-5 h-5 text-secondary" /> Material
          </h2>
          <ul className="space-y-2">
            {project.materials.map((m) => (
              <li key={m} className="flex items-center gap-2 text-sm">
                <span className="w-2 h-2 rounded-full bg-secondary flex-shrink-0" />
                {m}
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Safety */}
      <div className="space-y-3 mb-10">
        <h2 className="font-heading font-bold text-xl mb-2">Sicherheitshinweise</h2>
        {project.safetyTips.map((tip) => (
          <SafetyTip key={tip}>{tip}</SafetyTip>
        ))}
      </div>

      {/* Steps */}
      <div className="mb-10">
        <h2 className="font-heading font-bold text-xl mb-6">Schritt fuer Schritt</h2>
        <div className="space-y-0">
          {project.steps.map((step, i) => (
            <StepCard key={i} step={step} index={i} />
          ))}
        </div>
      </div>

      {/* Skills */}
      <div className="bg-secondary/5 rounded-2xl p-6 mb-12">
        <h2 className="font-heading font-bold text-xl mb-3">Was du lernst</h2>
        <div className="flex flex-wrap gap-2">
          {project.skills.map((s) => (
            <span key={s} className="px-3 py-1.5 bg-secondary/10 text-secondary rounded-full text-sm font-semibold">
              {s}
            </span>
          ))}
        </div>
      </div>

      {/* Related */}
      <div>
        <h2 className="font-heading font-bold text-xl mb-6">Aehnliche Projekte</h2>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          {related.map((p) => (
            <ProjectCard key={p.slug} project={p} />
          ))}
        </div>
      </div>
    </div>
  )
}