"use client";

import { useState } from "react";

import { Button } from "@/components/ui";
import { refineHomework } from "@/lib/client-api";
import { useI18n } from "@/lib/i18n";

/**
 * Follow-up actions for one finished piece of homework: shorter, more detail,
 * or back to the original. Used on the make result and the corrected version
 * of a check.
 */
export function FollowUpBar({
  text,
  context,
  onReplace,
  onRestore,
  canRestore,
}: {
  text: string;
  context?: string;
  onReplace: (next: string) => void;
  onRestore?: () => void;
  canRestore?: boolean;
}) {
  const { t } = useI18n();
  const [busy, setBusy] = useState<"shorter" | "more" | null>(null);
  const [failed, setFailed] = useState(false);

  const run = async (instruction: "shorter" | "more") => {
    if (busy) return;
    setBusy(instruction);
    setFailed(false);
    try {
      const next = await refineHomework({ instruction, text, context });
      onReplace(next);
    } catch {
      setFailed(true);
    } finally {
      setBusy(null);
    }
  };

  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button
        size="sm"
        variant="secondary"
        className="touch-target"
        loading={busy === "shorter"}
        disabled={Boolean(busy)}
        onClick={() => void run("shorter")}
      >
        {t("homework.followup.shorter")}
      </Button>
      <Button
        size="sm"
        variant="secondary"
        className="touch-target"
        loading={busy === "more"}
        disabled={Boolean(busy)}
        onClick={() => void run("more")}
      >
        {t("homework.followup.more")}
      </Button>
      {busy ? <span className="text-[12px] text-[var(--text-subtle)]">{t("homework.followup.working")}</span> : null}
      {canRestore && onRestore ? (
        <Button size="sm" variant="ghost" className="touch-target" disabled={Boolean(busy)} onClick={onRestore}>
          {t("homework.followup.restore")}
        </Button>
      ) : null}
      {failed ? <span className="text-[12px] font-medium text-rose-600 dark:text-rose-300">{t("homework.followup.failed")}</span> : null}
    </div>
  );
}