"use client";

import { useActionState } from "react";
import { createActivationCode, type CreateCodeState } from "./actions";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

// 激活码生成卡片:点按钮生成,大号显示 6 位码,15 分钟有效
export function ActivationCard({
  childId,
  childName,
}: {
  childId: number;
  childName: string;
}) {
  const [state, formAction, pending] = useActionState<CreateCodeState, FormData>(
    createActivationCode,
    null,
  );

  return (
    <Card>
      <CardContent className="flex items-center justify-between gap-4 p-4">
        <div>
          <p className="font-medium">{childName}</p>
          <p className="text-xs text-muted-foreground">
            {state?.code
              ? "激活码 15 分钟内有效,只用一次"
              : "在孩子的 iPad 上打开网站,输入激活码"}
          </p>
        </div>
        {state?.code ? (
          <span className="text-3xl font-bold tracking-[0.3em]">{state.code}</span>
        ) : (
          <form action={formAction}>
            <input type="hidden" name="childId" value={childId} />
            <Button type="submit" disabled={pending}>
              {pending ? "生成中…" : "生成激活码"}
            </Button>
          </form>
        )}
      </CardContent>
    </Card>
  );
}