"use client";

import { useActionState } from "react";
import {
  cutReleaseAction,
  type CutReleaseState,
} from "../lib/cutReleaseAction";
import { SeededInput } from "../../components/forms/Field";
import { seedChecked } from "../../lib/formState";

type Props = {
  workspace: "editor" | "export";
  lastVersion: string | null;
  suggestedVersion: string;
  hasUnreleased: boolean;
};

export function CutReleaseForm({
  workspace,
  lastVersion,
  suggestedVersion,
  hasUnreleased,
}: Props) {
  const [state, formAction, pending] = useActionState<
    CutReleaseState | undefined,
    FormData
  >(cutReleaseAction, undefined);

  return (
    <form action={formAction} className="flex flex-col gap-2">
      <div className="text-sm text-muted-foreground">
        {lastVersion
          ? `Last released: ${lastVersion}`
          : "No releases yet."}
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <input type="hidden" name="workspace" value={workspace} />
        <label className="sr-only" htmlFor={`version-${workspace}`}>
          New version
        </label>
        <SeededInput
          state={state}
          id={`version-${workspace}`}
          name="version"
          type="text"
          placeholder={suggestedVersion}
          initial={suggestedVersion}
          disabled={!hasUnreleased || pending}
          className="w-40 px-3 py-2 rounded-md border border-border bg-card text-sm font-mono"
          aria-describedby={`hint-${workspace}`}
        />
        <button
          type="submit"
          disabled={!hasUnreleased || pending}
          className="px-3 py-2 rounded-md text-sm bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
        >
          {pending ? "Cutting…" : "Cut release"}
        </button>
        <label className="flex items-center gap-1 text-sm text-muted-foreground">
          <input
            type="checkbox"
            name="commit"
            value="true"
            defaultChecked={seedChecked(state, "commit", true)}
            disabled={!hasUnreleased || pending}
          />
          <span>Commit changelog</span>
        </label>
      </div>
      <div id={`hint-${workspace}`} className="text-xs text-muted-foreground">
        {hasUnreleased
          ? "Date stamps to today automatically."
          : "Nothing pending under [Unreleased] yet."}
      </div>
      {state && !state.ok && (
        <div
          role="alert"
          className="text-sm text-destructive bg-destructive-soft border border-destructive/30 rounded-md px-3 py-2"
        >
          {state.error}
        </div>
      )}
      {state && state.ok && (
        <div
          role="status"
          className="text-sm text-success"
        >
          Cut release {state.version}.
          {state.committed ? " Committed." : " (not committed)"}
        </div>
      )}
    </form>
  );
}