import { ActionForm, SubmitButton } from "@/components/forms";
import { Tag } from "@/components/status";
import { TimeAgo } from "@/components/time";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { AgeInfo } from "@/lib/api";
import { startAgeCheck } from "./actions";

/** The person's own age check (an ID document, say), which covers all their IMVU accounts. */
export function AgeCard({ age, back }: { age: AgeInfo; back: boolean }) {
  const ways = age.providers.filter((p) => p.scope === "person");
  if (ways.length === 0) return null;
  const now = Date.now();
  const verified = age.checks.find(
    (c) => c.status === "complete" && c.overEighteen && (!c.expiresAt || new Date(c.expiresAt).getTime() > now),
  );
  const latest = age.checks[0];
  const pending = latest?.status === "pending" ? latest : undefined;
  const vendorOf = (id: string) => age.providers.find((p) => p.id === id)?.vendor ?? id;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Age Verification</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4 text-sm">
        {verified ? (
          <p className="flex flex-wrap items-center gap-2">
            <Tag tone="adult">Age verified</Tag>
            <span className="text-muted-foreground">
              with {vendorOf(verified.provider)} <TimeAgo iso={verified.checkedAt ?? verified.createdAt} />. All your
              IMVU accounts count as adult.
            </span>
          </p>
        ) : (
          <>
            {pending ? (
              <p>
                {back
                  ? "Thanks. Your check is being processed; this page shows the result when it's done."
                  : "Your check isn't finished yet."}
              </p>
            ) : latest?.status === "complete" && !latest.overEighteen ? (
              <p>Your last check found you're under 18.</p>
            ) : latest?.status === "failed" || latest?.status === "revoked" ? (
              <p>Your last check didn&apos;t pass. You can try again.</p>
            ) : (
              <p className="text-muted-foreground">
                Verify your age once to count as adult on all your IMVU accounts, not only those IMVU has age verified.
              </p>
            )}
            {ways.map((p) => (
              <ActionForm key={p.id} action={startAgeCheck} fields={{ provider: p.id }}>
                <div className="space-y-2">
                  <SubmitButton variant={pending && pending.provider !== p.id ? "outline" : "default"} pendingLabel="Starting…">
                    {pending?.provider === p.id ? "Continue check" : `Verify with ${p.label}`}
                  </SubmitButton>
                  <p className="text-xs text-muted-foreground">
                    Done by {p.vendor}. T5DE only keeps whether you&apos;re over 18, never your ID, photo or birth date.
                  </p>
                </div>
              </ActionForm>
            ))}
          </>
        )}
      </CardContent>
    </Card>
  );
}