// URL: /japan  →  params.subject = "japan"
// URL: /french  →  params.subject = "french"

interface Props {
  params: { subject: string }
}

export default async function SubjectPage({ params }: Props) {
  const { subject } = params   // e.g. "japan"

  // Fetch from DB (Prisma added in Chapter 5 — placeholder for now)
  // const data = await prisma.subject.findUnique({ where: { slug: subject } })

  return (
    <div>
      <h1>Subject: {subject}</h1>
    </div>
  )
}

// URL: /japan/kanji/stroke-order
// params = { subject: "japan", subtopic: "kanji", page: "stroke-order" }

interface Props {
  params: {
    subject:  string
    subtopic: string
    page:     string
  }
}

export default async function ContentPage({ params }: Props) {
  const { subject, subtopic, page } = params

  return (
    <div>
      <p>{subject} → {subtopic} → {page}</p>
    </div>
  )
}

// URL: /japan/kanji/水
// params.char = ["水"]   ← always an array with catch-all

// URL: /japan/kanji/食/detail  (hypothetical deeper path)
// params.char = ["食", "detail"]

interface Props {
  params: { char: string[] }  // array, not string!
}

export default async function KanjiPage({ params }: Props) {
  const character = params.char[0]  // "水"

  // Decode in case the URL is percent-encoded (%E6%B0%B4 → 水)
  const kanji = decodeURIComponent(character)

  return (
    <div>
      <h1 className="text-6xl">{kanji}</h1>
      <p>Kanji detail page</p>
    </div>
  )
}

export default function Loading() {
  return (
    <div className="min-h-screen bg-gray-950 flex items-center justify-center">
      <div className="text-gray-500 text-sm animate-pulse">
        Loading…
      </div>
    </div>
  )
}

// Copy this same file to:
// app/[subject]/[subtopic]/[page]/loading.tsx

import Link from 'next/link'

export default function NotFound() {
  return (
    <div className="min-h-screen bg-gray-950 text-white flex flex-col items-center justify-center gap-4">
      <h1 className="text-6xl font-bold text-gray-700">404</h1>
      <p className="text-gray-400">This page doesn't exist.</p>
      <Link
        href="/"
        className="text-cyan-400 hover:underline text-sm"
      >
        ← Back to home
      </Link>
    </div>
  )
}

'use client'   // error boundaries must be client components

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div className="min-h-screen bg-gray-950 text-white flex flex-col items-center justify-center gap-4">
      <h2 className="text-xl font-bold">Something went wrong.</h2>
      <p className="text-gray-400 text-sm">{error.message}</p>
      <button
        onClick={reset}
        className="text-cyan-400 hover:underline text-sm"
      >
        Try again
      </button>
    </div>
  )
}

import { notFound } from 'next/navigation'

interface Props {
  params: { subject: string }
}

export default async function SubjectPage({ params }: Props) {
  const { subject } = params

  // TODO (Chapter 6): fetch subject from Prisma, call notFound() if null
  // const data = await prisma.subject.findUnique({ where: { slug: subject } })
  // if (!data) notFound()

  return (
    <main className="min-h-screen bg-gray-950 text-white p-8">
      <h1 className="text-3xl font-bold">{subject}</h1>
      <p className="text-gray-400 mt-2">Subject page — content coming in Chapter 6.</p>
    </main>
  )
}

// Metadata — Next.js uses this for <title> and <meta description>
export async function generateMetadata({ params }: Props) {
  return {
    title: params.subject,
  }
}

import { notFound } from 'next/navigation'
// import { prisma } from '@/lib/prisma'  ← Chapter 5

interface Props {
  params: { subject: string; subtopic: string; page: string }
}

export default async function ContentPage({ params }: Props) {
  // Chapter 6 will add the real DB query — pattern shown here:
  // const result = await prisma.page.findFirst({
  //   where: {
  //     slug: params.page,
  //     subtopic: { slug: params.subtopic, subject: { slug: params.subject } },
  //   },
  //   include: { pageContent: { orderBy: { position: 'asc' } } },
  // })
  // if (!result) notFound()   ← this is all it takes to show the 404 page

  return (
    <main className="min-h-screen bg-gray-950 text-white p-8">
      <p className="text-gray-400">
        {params.subject} / {params.subtopic} / {params.page}
      </p>
    </main>
  )
}

import type { Metadata } from 'next'

interface Props {
  params: { subject: string; subtopic: string; page: string }
}

// This runs on the server, can do async DB queries
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  // Chapter 6: fetch the real page title from DB
  // const page = await prisma.page.findFirst({ where: { slug: params.page, … } })

  return {
    title: params.page,               // fills %s in layout.tsx template
    description: `${params.subject} — ${params.subtopic}`,
  }
}

export default async function ContentPage({ params }: Props) {
  // page component here…
}

import Link from 'next/link'

export default function SubjectList({ subjects }: { subjects: Subject[] }) {
  return (
    <ul>
      {subjects.map((s) => (
        <li key={s.id}>
          { /* ✓ Use Link for internal routes */ }
          <Link href={`/${s.slug}`}>{s.name}</Link>

          { /* ✗ Don't use plain <a> — causes full page reload */ }
          { /* <a href={`/${s.slug}`}>{s.name}</a> */ }
        </li>
      ))}
    </ul>
  )
}

// For external links, plain <a target="_blank"> is fine:
// <a href="https://jisho.org" target="_blank" rel="noopener">Jisho</a>

import { redirect } from 'next/navigation'
import { getServerSession } from 'next-auth/next'

export default async function AdminPage() {
  const session = await getServerSession()

  if (!session) {
    redirect('/admin/login')   // ← throws internally, nothing returned
  }

  return <div>Admin dashboard</div>
}