import type { Metadata } from "next";
import Link from "next/link";
import { redirect } from "next/navigation";
import { ActionForm, SubmitButton } from "@/components/forms";
import { PageHeader, Tag } from "@/components/status";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { api, getMe, isModerator, unwrap } from "@/lib/api";
import { linkAccount, signOutComputers } from "./actions";
import { AgeCard } from "./age-card";
import { ChallengeCard } from "./challenge-card";
import { LinkCard } from "./link-card";

export const metadata: Metadata = { title: "Account" };

export default async function Account({ searchParams }: { searchParams: Promise<{ welcome?: string; age?: string }> }) {
  const me = await getMe();
  if (!me) redirect("/signin?next=/account");
  const [account, age] = await Promise.all([api.account.get().then(unwrap), api.age.get().then(unwrap)]);
  const { person, links, challenges, computers } = account;
  const params = await searchParams;
  const welcome = params.welcome !== undefined;

  return (
    <div className="space-y-6">
      <PageHeader title="Your account">
        <span className="flex flex-wrap items-center gap-2">
          Signed in as {person.username}
          {isModerator(person) && <Tag tone="strong">{person.role}</Tag>}
        </span>
      </PageHeader>

      {welcome && (
        <Alert>
          <AlertTitle>Welcome to T5DE, {person.username}.</AlertTitle>
          <AlertDescription>Link an IMVU account below to get started.</AlertDescription>
        </Alert>
      )}

      <Card>
        <CardHeader>
          <CardTitle>IMVU accounts</CardTitle>
          <CardDescription>
            {links.length} of {person.linkCap}
          </CardDescription>
        </CardHeader>
        <CardContent>
          {links.length > 0 ? (
            <ul className="divide-y">
              {links.map((link) => (
                <LinkCard key={link.imvuId} link={link} />
              ))}
            </ul>
          ) : (
            <p className="text-sm text-muted-foreground">No IMVU accounts linked yet.</p>
          )}
        </CardContent>
      </Card>

      {challenges.map((c) => (
        <ChallengeCard key={c.imvuId} challenge={c} />
      ))}

      <Card>
        <CardHeader>
          <CardTitle>Link an IMVU account</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {account.canLink ? (
            <ActionForm action={linkAccount}>
              <div className="flex max-w-md gap-2">
                <Input name="username" placeholder="IMVU username" required maxLength={64} aria-label="IMVU username" />
                <SubmitButton pendingLabel="Looking…">Next</SubmitButton>
              </div>
            </ActionForm>
          ) : (
            <p className="text-sm">
              You&apos;ve linked as many IMVU accounts as you can ({person.linkCap}). Ask a moderator if you need more.
            </p>
          )}
          <p className="text-sm text-muted-foreground">
            Other people can&apos;t see which IMVU accounts are yours. Adult IMVU accounts can see adult community
            products: those IMVU has age verified (or with Access Pass), or all of them once you verify your age below.
          </p>
        </CardContent>
      </Card>

      <AgeCard age={age} back={params.age === "back"} />

      <Card>
        <CardHeader>
          <CardTitle>T5DE on your computers</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-sm text-muted-foreground">
            {computers > 0
              ? `Signed in on ${computers} computer${computers === 1 ? "" : "s"}.`
              : "Not signed in on any computer yet."}{" "}
            To sign T5DE in, it shows a code to enter at{" "}
            <Link href="/device" className="text-foreground underline underline-offset-4">
              /device
            </Link>
            .
          </p>
          {computers > 0 && (
            <ActionForm action={signOutComputers}>
              <SubmitButton
                variant="outline"
                pendingLabel="Signing out…"
                confirm="Sign T5DE out on all your computers?"
              >
                Sign out everywhere
              </SubmitButton>
            </ActionForm>
          )}
        </CardContent>
      </Card>
    </div>
  );
}