import type { Metadata } from 'next'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { CardDeleteButton } from '@/components/card-delete'
import { CardForm } from '@/components/card-form'
import type { Card, CardInput } from '@/domain/card'
import { ApiClientError, cardsApi } from '@/lib/api-client'

export const metadata: Metadata = { title: 'Modifier la carte' }

export default async function EditCardPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  let card: Card | null = null
  try {
    card = await cardsApi.get(id)
  } catch (e) {
    if (e instanceof ApiClientError && e.status === 404) notFound()
    throw e
  }

  const initial: CardInput = {
    question: card.question,
    response: card.response,
    theme: card.theme,
    tags: card.tags,
  }

  return (
    <main className="mx-auto max-w-3xl px-4 py-8">
      <div className="mb-6">
        <Link
          href={`/cards/${id}`}
          className="text-sm font-medium text-slate-600 underline-offset-4 hover:underline"
        >
          ← Retour au détail
        </Link>
        <div className="mt-2 flex items-center justify-between gap-4">
          <h1 className="text-2xl font-bold text-slate-900">{card.question}</h1>
          <CardDeleteButton cardId={card.id} question={card.question} />
        </div>
      </div>
      <CardForm mode="edit" cardId={card.id} initial={initial} />
    </main>
  )
}