import { getDb } from '@/lib/db'
import type { Memory, MediaItem } from '@/lib/types'
import HeroSection from '@/components/HeroSection'
import PhotoSlideshow from '@/components/PhotoSlideshow'
import PhotoGallery from '@/components/PhotoGallery'
import MemorySection from '@/components/MemorySection'
import MusicPlayer from '@/components/MusicPlayer'
import VideoGallery from '@/components/VideoGallery'

export const dynamic = 'force-dynamic'

export default async function HomePage() {
  const db = getDb()

  const photos = db
    .prepare("SELECT * FROM media WHERE type = 'photo' ORDER BY sort_order, created_at")
    .all() as MediaItem[]
  const videos = db
    .prepare("SELECT * FROM media WHERE type = 'video' ORDER BY sort_order, created_at")
    .all() as MediaItem[]
  const music = db
    .prepare("SELECT * FROM media WHERE type = 'music' ORDER BY sort_order, created_at")
    .all() as MediaItem[]
  const memories = db
    .prepare('SELECT * FROM memories ORDER BY created_at DESC')
    .all() as Memory[]

  return (
    <main className="min-h-screen bg-cream">
      {/* Hero */}
      <HeroSection heroPhoto={photos[0]?.filename ?? null} />

      {/* Navigation anchors */}
      <nav className="sticky top-0 z-20 bg-cream/80 backdrop-blur-sm border-b border-warm-border">
        <div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-center gap-6 sm:gap-10">
          {photos.length > 0 && (
            <a
              href="#bilder"
              className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
            >
              Bilder
            </a>
          )}
          {memories.length > 0 && (
            <a
              href="#erinnerungen"
              className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
            >
              Erinnerungen
            </a>
          )}
          {videos.length > 0 && (
            <a
              href="#videos"
              className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
            >
              Videos
            </a>
          )}
        </div>
      </nav>

      {/* Photo section */}
      {photos.length > 0 && (
        <section id="bilder" className="py-16 sm:py-20">
          <div className="max-w-6xl mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="font-cormorant italic text-4xl sm:text-5xl text-warm-brown mb-3">
                Erinnerungen in Bildern
              </h2>
              <div className="flex items-center justify-center gap-4">
                <div className="h-px w-16 bg-warm-gold/40" />
                <span className="text-warm-gold text-xl">✦</span>
                <div className="h-px w-16 bg-warm-gold/40" />
              </div>
            </div>

            {photos.length > 1 && <PhotoSlideshow photos={photos} />}
            <PhotoGallery photos={photos} />
          </div>
        </section>
      )}

      {/* Memories */}
      <MemorySection memories={memories} />

      {/* Videos */}
      <VideoGallery videos={videos} />

      {/* Music player */}
      <MusicPlayer tracks={music} />

      {/* Footer */}
      <footer className="py-16 text-center border-t border-warm-border bg-amber-50/30">
        <div className="max-w-lg mx-auto px-4">
          <p className="font-cormorant italic text-3xl text-warm-gold mb-3">
            In liebevoller Erinnerung
          </p>
          <p className="font-lora text-warm-brown-light text-sm tracking-wider">
            Maria Malejka
          </p>
          <p className="font-lora text-warm-brown-light/60 text-xs mt-1 tracking-widest">
            29. November 1944 — 10. Februar 2026
          </p>

          {/* Ornament */}
          <div className="flex items-center justify-center gap-3 mt-6 mb-6">
            <div className="h-px w-12 bg-warm-gold/20" />
            <span className="text-warm-gold/40 text-sm">✦</span>
            <div className="h-px w-12 bg-warm-gold/20" />
          </div>

          <p className="font-cormorant italic text-warm-brown-light/60 text-lg">
            „Du bist nicht fort, nur ein Schritt voraus."
          </p>
        </div>

        {/* Hidden admin link */}
        <a
          href="/admin"
          className="mt-10 inline-block text-warm-border/30 hover:text-warm-border/60 text-xs transition-colors"
          title="Verwaltung"
        >
          ·
        </a>
      </footer>
    </main>
  )
}