import { SECONDARY_BUTTON_CLASS } from "./shared.js";

type LegacyRuntimeSecretsNoticeProps = {
  fields: string[];
  result: string | null;
  isPending: boolean;
  onClear: () => void;
};

export function LegacyRuntimeSecretsNotice({
  fields,
  result,
  isPending,
  onClear,
}: LegacyRuntimeSecretsNoticeProps) {
  if (fields.length === 0) {
    return null;
  }

  return (
    <div className="rounded-2xl border border-amber-200 bg-amber-50 px-5 py-4 dark:border-amber-800 dark:bg-amber-950/30">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="min-w-0 flex-1">
          <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-amber-900 dark:text-amber-200">
            Legacy Runtime Secrets Detected
          </h2>
          <p className="mt-2 text-sm text-amber-900/90 dark:text-amber-100/90">
            This installation still has database-stored runtime secrets. New secrets are no longer
            persisted in the application. Move them to deployment-level secret management first,
            then clear the legacy residue here.
          </p>
          <p className="mt-2 text-xs text-amber-800 dark:text-amber-300">
            Affected fields:{" "}
            {fields.map((field) => (
              <code key={field} className="mr-1 font-mono">
                {field}
              </code>
            ))}
          </p>
          {result ? (
            <p className="mt-2 text-xs text-amber-900 dark:text-amber-200">{result}</p>
          ) : null}
        </div>
        <button
          type="button"
          onClick={onClear}
          disabled={isPending}
          className={SECONDARY_BUTTON_CLASS}
        >
          {isPending ? "Clearing…" : "Clear Legacy DB Secrets"}
        </button>
      </div>
    </div>
  );
}
