import { ActionForm, SubmitButton } from "@/components/forms";
import { AgeTag, Initial, Outfit, Tag } from "@/components/status";
import { TimeAgo } from "@/components/time";
import type { Link } from "@/lib/api";
import { linkAction } from "./actions";
import { LinkSettings } from "./link-settings";

/** One linked IMVU account. */
export function LinkCard({ link }: { link: Link }) {
  return (
    <li className="flex gap-4 py-6 first:pt-0 last:pb-0">
      <Initial name={link.username} />
      <div className="flex min-w-0 flex-1 flex-col gap-5 sm:flex-row sm:items-start">
        <div className="min-w-0 flex-1 space-y-4">
          <div className="space-y-2">
            <div className="font-medium">{link.username}</div>
            <div className="flex flex-wrap items-center gap-2">
              {link.online && (
                <Tag tone="online" dot>
                  Online in T5DE
                </Tag>
              )}
              <AgeTag link={link} />
              <span className="text-xs text-muted-foreground">
                checked <TimeAgo iso={link.checkedAt} />
              </span>
            </div>
          </div>
          <Outfit items={link.outfit} />
          <LinkSettings
            imvuId={link.imvuId}
            showBadge={link.showBadge}
            showPresence={link.showPresence}
            listRooms={link.listRooms}
          />
        </div>
        <ActionForm action={linkAction} fields={{ imvu: link.imvuId }} className="sm:max-w-56 sm:text-right">
          <div className="flex gap-2 sm:justify-end">
            <SubmitButton
              variant="outline"
              name="intent"
              value="recheck"
              pendingLabel="Checking…"
              title="Check age verification with IMVU again"
            >
              Check again
            </SubmitButton>
            <SubmitButton
              variant="outline"
              name="intent"
              value="unlink"
              pendingLabel="Unlinking…"
              confirm={`Unlink ${link.username}? To link it again, you'll need a new code in its tagline.`}
            >
              Unlink
            </SubmitButton>
          </div>
        </ActionForm>
      </div>
    </li>
  );
}