import { db } from '@/lib/db'
import { invites } from '@/lib/db/schema'
import { eq } from 'drizzle-orm'
import InviteForm from './invite-form'
import { Monitor, XCircle } from 'lucide-react'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import Link from 'next/link'

interface InvitePageProps {
  params: Promise<{ token: string }>
}

export default async function InvitePage({ params }: InvitePageProps) {
  const { token } = await params

  const result = await db
    .select()
    .from(invites)
    .where(eq(invites.token, token))
    .limit(1)

  const invite = result[0]
  const isExpired = invite && new Date(invite.expiresAt) < new Date()
  const isUsed = !!invite?.usedAt
  const isValid = invite && !isExpired && !isUsed

  return (
    <div className="flex min-h-svh w-full">
      <div className="hidden lg:flex lg:w-1/2 bg-primary/5 items-center justify-center p-12">
        <div className="max-w-md">
          <div className="flex items-center gap-3 mb-8">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary">
              <Monitor className="h-6 w-6 text-primary-foreground" />
            </div>
            <span className="text-3xl font-bold">RemoteLink</span>
          </div>
          <h1 className="text-2xl font-semibold mb-4 text-balance">
            {isValid ? "You've been invited" : 'RemoteLink'}
          </h1>
          <p className="text-muted-foreground text-balance">
            {isValid
              ? 'Set up your account to start managing remote machines securely.'
              : 'Secure, low-latency remote desktop access for IT professionals.'}
          </p>
        </div>
      </div>

      <div className="flex w-full lg:w-1/2 items-center justify-center p-6 md:p-10">
        <div className="w-full max-w-sm">
          <div className="flex flex-col gap-6">
            <div className="flex items-center justify-center gap-2 lg:hidden mb-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
                <Monitor className="h-5 w-5 text-primary-foreground" />
              </div>
              <span className="text-2xl font-bold">RemoteLink</span>
            </div>

            {isValid ? (
              <InviteForm token={token} email={invite.email} />
            ) : (
              <Card className="border-border/50">
                <CardHeader className="text-center">
                  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
                    <XCircle className="h-8 w-8 text-destructive" />
                  </div>
                  <CardTitle className="text-2xl">
                    {!invite
                      ? 'Invalid invite'
                      : isUsed
                      ? 'Already used'
                      : 'Invite expired'}
                  </CardTitle>
                  <CardDescription className="text-balance">
                    {!invite
                      ? 'This invite link is invalid or does not exist.'
                      : isUsed
                      ? 'This invite link has already been used to create an account.'
                      : 'This invite link has expired. Please contact your administrator for a new one.'}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <Button asChild className="w-full">
                    <Link href="/auth/login">Go to login</Link>
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}