import { CopyButton } from "@/components/copy-button";
import { ActionForm, SubmitButton } from "@/components/forms";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import type { Challenge } from "@/lib/api";
import { challengeAction } from "./actions";

/** A link in progress: the code to put in the tagline, then Check. */
export function ChallengeCard({ challenge: c }: { challenge: Challenge }) {
  return (
    <Card id={`link-${c.imvuId}`}>
      <CardHeader>
        <CardTitle>Link {c.username}</CardTitle>
        <CardDescription>To prove {c.username} is yours:</CardDescription>
      </CardHeader>
      <CardContent>
        <ActionForm action={challengeAction} fields={{ imvu: c.imvuId }} className="space-y-6">
          <ol className="space-y-5 text-sm">
            <Step n={1}>
              <p>
                Put this code anywhere in {c.username}&apos;s IMVU tagline (on your avatar card in the client, or your
                profile):
              </p>
              <div className="mt-3 flex flex-wrap items-center gap-3">
                <code className="rounded-lg border bg-muted/50 px-4 py-2.5 font-mono text-xl font-semibold tracking-wider select-all sm:text-2xl">
                  {c.code}
                </code>
                <CopyButton text={c.code} />
              </div>
            </Step>
            <Step n={2}>
              <p>Press Check. You can take the code out again once it&apos;s linked.</p>
            </Step>
          </ol>
          <div className="flex flex-wrap items-center gap-3">
            <SubmitButton name="intent" value="check" pendingLabel="Checking…">
              Check
            </SubmitButton>
            <SubmitButton variant="outline" name="intent" value="cancel" pendingLabel="Cancelling…">
              Cancel
            </SubmitButton>
            <span className="text-sm text-muted-foreground">The code works for a day.</span>
          </div>
        </ActionForm>
      </CardContent>
    </Card>
  );
}

function Step({ n, children }: { n: number; children: React.ReactNode }) {
  return (
    <li className="flex gap-3">
      <span className="grid size-6 shrink-0 place-items-center rounded-full border text-xs font-medium text-muted-foreground">
        {n}
      </span>
      <div className="min-w-0 flex-1 pt-0.5">{children}</div>
    </li>
  );
}