import { promises as fs } from 'fs'
import path from 'path'

// ✅ Tell Next.js to render dynamically on every request
export const dynamic = "force-dynamic"

export default async function Page({ params }: { params: any }) {
  const filePath = path.join(process.cwd(), 'data', 'characters', `${params.id}.json`)

  try {
    const raw = await fs.readFile(filePath, 'utf-8')
    const character = JSON.parse(raw)

    return (
      <main className="p-8">
        <h1 className="text-3xl font-bold mb-2">
          {character.name} ({character.codename})
        </h1>
        <p>Age: {character.age}</p>
        <p>Rank: {character.rank}</p>
        <p>Affiliation: {character.affiliation}</p>

        <h2 className="mt-4 font-semibold">Quotes:</h2>
        <ul className="list-disc ml-6">
          {character.quotes.map((q: string, i: number) => (
            <li key={i}>{q}</li>
          ))}
        </ul>
      </main>
    )
  } catch (error) {
    return (
      <main className="p-8">
        <h1 className="text-red-600 font-bold text-2xl">
          Character not found: {params.id}
        </h1>
        <p className="text-sm mt-4 text-gray-500">
          Tried to read: <code>{filePath}</code>
        </p>
      </main>
    )
  }
}