import Link from 'next/link'
import { createAdminClient } from '@/lib/supabase/admin'
import { getSessionUser } from '@/lib/auth'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { formatFullDate } from '@/lib/format'
import { AcceptInviteButton } from './accept-button'

export default async function InvitePage({ params }: { params: Promise<{ token: string }> }) {
  const { token } = await params
  const admin = createAdminClient()

  const { data: invitation } = await admin
    .from('trip_invitations')
    .select('*')
    .eq('token', token)
    .maybeSingle()

  const invalid = !invitation || isExpired(invitation.expires_at)

  if (invalid) {
    return (
      <Shell>
        <CardHeader className="text-center">
          <CardTitle>Invitation not available</CardTitle>
          <CardDescription>
            This invitation link is invalid or has expired. Ask the trip owner to resend it.
          </CardDescription>
        </CardHeader>
      </Shell>
    )
  }

  const { data: trip } = await admin
    .from('trips')
    .select('ref_code, origin, destination, commodity, carrier_name, status, created_at')
    .eq('id', invitation.trip_id)
    .single()

  const user = await getSessionUser()
  const alreadyAccepted = Boolean(invitation.accepted_at)

  return (
    <Shell>
      <CardHeader className="text-center">
        <CardTitle className="text-xl">You&apos;re invited to a trip workspace</CardTitle>
        <CardDescription>
          Join as <Badge variant="secondary" className="align-middle capitalize">{invitation.role}</Badge>{' '}
          for the trip below
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-5">
        <div className="rounded-xl border bg-neutral-50 p-4 text-sm">
          <p className="font-semibold">
            {trip?.origin || 'Origin TBD'} → {trip?.destination || 'Destination TBD'}
          </p>
          <p className="mt-1 text-neutral-600">
            {trip?.commodity || 'Commodity TBD'} · Carrier: {trip?.carrier_name || '—'}
          </p>
          <p className="mt-1 text-xs text-neutral-500">
            Ref {trip?.ref_code} · Created {formatFullDate(trip?.created_at)}
          </p>
        </div>

        {alreadyAccepted ? (
          <div className="text-center text-sm">
            <p className="text-neutral-600">This invitation was already accepted.</p>
            <Link href="/dashboard" className="mt-2 inline-block font-semibold underline">
              Go to your dashboard
            </Link>
          </div>
        ) : user ? (
          <AcceptInviteButton token={token} />
        ) : (
          <div className="space-y-3 text-center">
            <p className="text-sm text-neutral-600">
              Sign in with the account for <strong>{invitation.email}</strong> to join this trip.
            </p>
            <div className="flex justify-center gap-3">
              <Link
                href={`/login?next=/invite/${token}`}
                className="rounded-lg bg-neutral-900 px-4 py-2.5 text-sm font-semibold text-white"
              >
                Sign in
              </Link>
              <Link
                href="/signup"
                className="rounded-lg border px-4 py-2.5 text-sm font-semibold"
              >
                I don&apos;t have an account
              </Link>
            </div>
          </div>
        )}
      </CardContent>
    </Shell>
  )
}

function isExpired(expiresAt: string): boolean {
  return new Date(expiresAt).getTime() < Date.now()
}

function Shell({ children }: { children: React.ReactNode }) {
  return (
    <main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
      <Card className="w-full max-w-md">{children}</Card>
    </main>
  )
}