import React from "react";

interface ManagePageProps {
  isActive: boolean;
  saveSheet: () => void;
  loadSheet: () => void;
  exportSheet: () => void;
  handleImportFile: (e: React.ChangeEvent<HTMLInputElement>) => void;
  importFileRef: React.RefObject<HTMLInputElement | null>;
  copyShareURL: () => Promise<void>;
  copyStatus: boolean;
}

export default function ManagePage({
  isActive,
  saveSheet,
  loadSheet,
  exportSheet,
  handleImportFile,
  importFileRef,
  copyShareURL,
  copyStatus,
}: ManagePageProps) {
  return (
    <div className={`page${isActive ? " active" : ""}`} id="page-manage">
      <div className="manage-grid">
        <div className="section">
          <div className="section-title">
            <span className="icon">◈</span> Local Save
          </div>
          <p className="manage-desc">
            Save your character sheet to your browser's local storage, or load a previously saved
            sheet.
          </p>
          <div className="manage-btn-row">
            <button type="button" className="btn-save btn-lg" onClick={saveSheet}>
              ✦ Save to Browser
            </button>
            <button type="button" className="btn-load btn-lg" onClick={loadSheet}>
              ↑ Load from Browser
            </button>
          </div>
        </div>

        <div className="section">
          <div className="section-title">
            <span className="icon">⊕</span> JSON File
          </div>
          <p className="manage-desc">
            Export your character to a JSON file for backup or sharing, or import from a previously
            exported file.
          </p>
          <div className="manage-btn-row">
            <button type="button" className="btn-save btn-export btn-lg" onClick={exportSheet}>
              ↓ Export JSON
            </button>
            <button
              type="button"
              className="btn-load btn-import btn-lg"
              onClick={() => {
                if (!importFileRef.current) return;
                importFileRef.current.value = "";
                importFileRef.current.click();
              }}
            >
              ↑ Import JSON
            </button>
            <input
              ref={importFileRef}
              type="file"
              accept=".json,application/json"
              style={{ display: "none" }}
              onChange={handleImportFile}
            />
          </div>
        </div>

        <div className="section col-span-2">
          <div className="section-title">
            <span className="icon">⎘</span> Share via URL
          </div>
          <p className="manage-desc">
            Encode your character's current state into a shareable link. Anyone who opens the link
            will see your character — auto-save is disabled for viewers.
          </p>
          <div className="manage-btn-row">
            <button type="button" className="btn-save btn-export btn-lg" onClick={copyShareURL}>
              ⎘ Copy URL
            </button>
            <span className={`save-status${copyStatus ? " show" : ""}`}>Copied!</span>
          </div>
        </div>
      </div>
    </div>
  );
}