import { redirect } from 'next/navigation'
import { getProfile, getSessionUser } from '@/lib/auth'
import { AppShell } from '@/components/app/app-shell'
import { BackLink } from '@/components/app/back-link'
import { SupportForm } from './support-form'

const FAQ = [
  {
    q: 'Do I have to buy permits through HeavyHaul Agent?',
    a: 'No. Upload permits from any provider, broker, or state portal — the workspace works the same. Buying permits or routes through our trusted partner Synchron Permits is optional.',
  },
  {
    q: 'Who can see my trip?',
    a: 'Only the people invited to that specific trip. Access is per-trip, not per-company, and each role sees only its permitted circle.',
  },
  {
    q: 'Are the AI answers legally binding?',
    a: 'No. Answers are decision support. The official permit and provisions remain the controlling documents, and the driver and carrier remain responsible for legal operation.',
  },
  {
    q: 'How do routes work?',
    a: 'Anyone on a trip can request a route. Once purchased, the route belongs to the trip — every authorized participant sees it, nobody pays twice.',
  },
  {
    q: 'How do I add my dispatcher or driver?',
    a: 'Open the trip → People tab → Invite. Enter their email, name, and role — they get a link that connects them to that trip.',
  },
]

/** Support — FAQ plus a contact form (UI preview until the support inbox connects). */
export default async function SupportPage() {
  const user = await getSessionUser()
  if (!user) redirect('/login')
  const profile = (await getProfile())!

  return (
    <AppShell profile={profile}>
      <main className="mx-auto max-w-2xl px-4 py-8">
        <BackLink />
        <h1 className="mt-3 text-2xl font-bold tracking-tight">Support</h1>
        <p className="mt-1 text-sm text-neutral-500">
          Answers to common questions, and a direct line to the team.
        </p>

        <section className="mt-6 space-y-2">
          {FAQ.map((f) => (
            <details key={f.q} className="group rounded-xl border bg-white p-4">
              <summary className="cursor-pointer text-sm font-semibold marker:content-none">
                {f.q}
                <span className="float-right text-neutral-400 transition group-open:rotate-180">⌄</span>
              </summary>
              <p className="mt-2 text-sm leading-relaxed text-neutral-600">{f.a}</p>
            </details>
          ))}
        </section>

        <SupportForm defaultName={profile.full_name || profile.email} />
      </main>
    </AppShell>
  )
}