// BEGIN CHANGE: modal confirmacao com senha do admin
"use client";

import { FormEvent, useState } from "react";

export function AdminConfirmModal({
  open,
  title,
  hint,
  requirePassword,
  requireDeleteWord,
  confirmLabel,
  cancelLabel,
  passwordLabel,
  onCancel,
  onConfirm,
}: {
  open: boolean;
  title: string;
  hint?: string;
  requirePassword: boolean;
  requireDeleteWord?: boolean;
  confirmLabel: string;
  cancelLabel: string;
  passwordLabel: string;
  onCancel: () => void;
  onConfirm: (payload: { adminPassword: string; confirm: string }) => void;
}) {
  const [adminPassword, setAdminPassword] = useState("");
  const [confirm, setConfirm] = useState("");

  if (!open) return null;

  function submit(e: FormEvent) {
    e.preventDefault();
    if (requireDeleteWord && confirm !== "DELETE") return;
    if (requirePassword && !adminPassword) return;
    onConfirm({ adminPassword, confirm });
    setAdminPassword("");
    setConfirm("");
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
      <form
        onSubmit={submit}
        className="w-full max-w-md rounded-xl border border-border bg-panel p-5 shadow-xl"
      >
        <h3 className="text-lg font-semibold text-foreground">{title}</h3>
        {hint && <p className="mt-2 text-sm text-muted">{hint}</p>}
        {requirePassword && (
          <label className="mt-4 block text-sm">
            <span className="text-muted">{passwordLabel}</span>
            <input
              type="password"
              autoComplete="current-password"
              className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
              value={adminPassword}
              onChange={(e) => setAdminPassword(e.target.value)}
            />
          </label>
        )}
        {requireDeleteWord && (
          <label className="mt-3 block text-sm">
            <span className="text-muted">Digite DELETE</span>
            <input
              className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
              value={confirm}
              onChange={(e) => setConfirm(e.target.value)}
              placeholder="DELETE"
            />
          </label>
        )}
        <div className="mt-5 flex justify-end gap-2">
          <button
            type="button"
            onClick={() => {
              setAdminPassword("");
              setConfirm("");
              onCancel();
            }}
            className="rounded-md border border-border px-3 py-1.5 text-sm"
          >
            {cancelLabel}
          </button>
          <button
            type="submit"
            className="rounded-md bg-brand px-3 py-1.5 text-sm font-medium text-background"
          >
            {confirmLabel}
          </button>
        </div>
      </form>
    </div>
  );
}
// END CHANGE