import { useState } from "react";
import { useGame } from "../../context/GameContext.js";

interface OutdatedSchemaModalProps {
  onDismiss: () => void;
}

export const OutdatedSchemaModal = ({ onDismiss }: OutdatedSchemaModalProps): React.JSX.Element => {
  const { resetProgress } = useGame();
  const [isResetting, setIsResetting] = useState(false);

  const handleReset = async (): Promise<void> => {
    setIsResetting(true);
    await resetProgress();
    setIsResetting(false);
  };

  return (
    <div className="modal-overlay">
      <div className="modal offline-modal">
        <h2>⚠️ Outdated Save Data</h2>
        <p>
          Your save data is from an older version of Elysium and may cause bugs or unexpected
          behaviour. Cloud saves are <strong>disabled</strong> until you reset your progress.
        </p>
        <p>
          Resetting will start you fresh — all progress will be lost.
        </p>
        <div className="outdated-modal-actions">
          <button
            className="outdated-modal-reset-button"
            onClick={() => { void handleReset(); }}
            disabled={isResetting}
            type="button"
          >
            {isResetting ? "Resetting…" : "Reset Progress"}
          </button>
          <button
            className="modal-close-button"
            onClick={onDismiss}
            type="button"
          >
            Proceed with Bugs
          </button>
        </div>
      </div>
    </div>
  );
};