import type { Metadata } from 'next'
import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'
import { RichText } from '@/components/rich-text'
import { METHODS, frappeCall } from '@/lib/lukenya-api'
import { formatEventDate } from '@/lib/event-types'

export const revalidate = 60

export const metadata: Metadata = {
  title: 'Terms and Privacy | 10 Million Trees Marathon',
  description: 'Participation terms, indemnity, privacy notice and consent documents for the Lukenya University Marathon.',
}

interface LegalDoc {
  name: string
  document_type: string
  slug: string
  version: string
  title: string
  summary: string | null
  body: string
  effective_from: string | null
  required: boolean
  applies_to: string
}

async function documents(): Promise<LegalDoc[]> {
  try {
    return (await frappeCall<LegalDoc[]>(METHODS.legalDocuments, { revalidate: 60 })) || []
  } catch {
    return []
  }
}

export default async function LegalPage() {
  const docs = await documents()
  return (
    <div className="min-h-screen bg-white">
      <Navigation />
      <section className="bg-[#006838] pt-32 pb-14 px-4">
        <div className="max-w-3xl mx-auto text-center">
          <h1 className="text-3xl md:text-4xl font-extrabold text-white mb-3">Terms, Privacy and Consent</h1>
          <p className="text-white/80">The documents every runner agrees to when they enter. Each shows its version and when it took effect.</p>
        </div>
      </section>
      <section className="py-12 px-4">
        <div className="max-w-3xl mx-auto">
          {docs.length === 0 ? (
            <p className="text-[#6b7280]">The documents couldn&apos;t be loaded just now. Please try again shortly.</p>
          ) : (
            <>
              <nav aria-label="Documents" className="mb-10">
                <ul className="flex flex-wrap gap-2">
                  {docs.map((d) => (
                    <li key={d.slug}>
                      <a href={`#${d.slug}`} className="inline-block rounded-full border border-[#006838] px-4 py-1.5 text-sm font-semibold text-[#006838] hover:bg-[#006838] hover:text-white">
                        {d.title}
                      </a>
                    </li>
                  ))}
                </ul>
              </nav>
              {docs.map((d) => (
                <article key={d.slug} id={d.slug} className="scroll-mt-28 border-t border-[#e5e7eb] py-10">
                  <h2 className="text-2xl font-bold text-[#111518]">{d.title}</h2>
                  <p className="mt-1 mb-5 text-sm text-[#6b7280]">
                    Version {d.version}
                    {d.effective_from ? ` · effective ${formatEventDate(d.effective_from.slice(0, 10))}` : ''}
                    {d.required ? '' : ' · optional'}
                    {d.applies_to === 'Under 18 only' ? ' · for runners under 18' : ''}
                  </p>
                  <RichText html={d.body} className="prose-legal space-y-4 text-[15px] leading-relaxed text-[#374151] [&_a]:text-[#006838] [&_a]:underline [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6" />
                </article>
              ))}
            </>
          )}
        </div>
      </section>
      <Footer />
    </div>
  )
}