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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { formatFullDate } from '@/lib/format'

/** Profile page — UI preview; editing activates with account management. */
export default async function ProfilePage() {
  const user = await getSessionUser()
  if (!user) redirect('/login')
  const profile = (await getProfile())!

  const rows: Array<[string, string]> = [
    ['Full name', profile.full_name || '—'],
    ['Email', profile.email],
    ['Role', profile.default_role],
    ['Company', profile.company_name || '—'],
    ['Phone', profile.phone || '—'],
    ['Member since', formatFullDate(profile.created_at)],
  ]

  return (
    <AppShell profile={profile}>
      <main className="mx-auto max-w-2xl px-4 py-8">
        <BackLink />
        <div className="flex items-center gap-4">
          <span className="grid h-16 w-16 place-items-center rounded-full bg-[#0f1b2d] text-xl font-extrabold text-[#f5a623]">
            {(profile.full_name || profile.email).slice(0, 1).toUpperCase()}
          </span>
          <div>
            <h1 className="text-2xl font-bold tracking-tight">{profile.full_name || profile.email}</h1>
            <p className="text-sm capitalize text-neutral-500">{profile.default_role}</p>
          </div>
        </div>

        <Card className="mt-6">
          <CardHeader>
            <CardTitle className="text-base">Account details</CardTitle>
          </CardHeader>
          <CardContent>
            <dl className="divide-y">
              {rows.map(([k, v]) => (
                <div key={k} className="flex items-center justify-between py-3 text-sm">
                  <dt className="font-medium text-neutral-500">{k}</dt>
                  <dd className={`font-semibold ${k === 'Role' ? 'capitalize' : ''}`}>{v}</dd>
                </div>
              ))}
            </dl>
            <p className="mt-4 rounded-lg bg-neutral-50 p-3 text-xs text-neutral-500">
              During the pilot, account details are managed by the administrator. Self-service
              editing arrives with account management.
            </p>
          </CardContent>
        </Card>
      </main>
    </AppShell>
  )
}