import Link from "next/link";
import { api, getMe, unwrap } from "@/lib/api";
import { buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default async function Home() {
  const [me, home] = await Promise.all([getMe(), api.home.get().then(unwrap)]);
  const links = "links" in home ? home.links : undefined;

  return (
    <div className="space-y-14">
      <section className="max-w-2xl space-y-5 pt-4">
        <p className="text-sm font-medium text-muted-foreground">T5DE Hub</p>
        <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
          One account for all your IMVU avatars.
        </h1>
        <p className="text-lg text-pretty text-muted-foreground">
          Link your IMVU accounts, see who&apos;s online in T5DE, and soon, community products.
        </p>
        {!me && (
          <div className="flex flex-wrap gap-3 pt-2">
            <Link href="/signup" className={buttonVariants({ size: "lg", className: "px-4" })}>
              Create account
            </Link>
            <Link href="/signin" className={buttonVariants({ size: "lg", variant: "outline", className: "px-4" })}>
              Sign in
            </Link>
          </div>
        )}
      </section>

      <section className="grid gap-4 sm:grid-cols-2">
        <Card>
          <CardHeader>
            <CardDescription>Online in T5DE</CardDescription>
            <CardTitle className="text-4xl font-semibold tabular-nums">{home.onlineCount}</CardTitle>
          </CardHeader>
          <CardContent className="text-sm text-muted-foreground">
            people showing that they&apos;re online.{" "}
            <Link href="/online" className="text-foreground underline underline-offset-4">
              See who
            </Link>
          </CardContent>
        </Card>
        {links !== undefined ? (
          <Card>
            <CardHeader>
              <CardDescription>Your IMVU accounts</CardDescription>
              <CardTitle className="text-4xl font-semibold tabular-nums">{links}</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-muted-foreground">
              linked.{" "}
              <Link href="/account" className="text-foreground underline underline-offset-4">
                Manage
              </Link>
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardHeader>
              <CardTitle>One account, all your avatars</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-muted-foreground">
              Link any of your IMVU accounts by putting a code in its tagline. Your accounts stay private: nobody else
              can see they&apos;re yours.
            </CardContent>
          </Card>
        )}
      </section>
    </div>
  );
}