import type { LegacyAllocationController } from "./legacyRunController";
import { LEGACY_ALLOCATION_FIELDS } from "./legacyRunConfig";

interface LegacyAllocationStageProps {
  session: LegacyAllocationController;
}

export function LegacyAllocationStage({ session }: LegacyAllocationStageProps) {
  return (
    <section className="legacy-stage">
      <div className="section-head">
        <h3>Point Allocation</h3>
        <p>
          Use all available points. Spirit stays at 5, matching the legacy
          rules.
        </p>
      </div>
      <div className="stage-actions">
        <button
          className="secondary-button"
          onClick={session.refreshDraft}
          type="button"
        >
          New draft
        </button>
        <button
          className="secondary-button"
          onClick={session.randomizeAllocation}
          type="button"
        >
          Randomize
        </button>
      </div>
      <div className="allocation-total">
        Remaining points: {session.remainingPoints}
      </div>
      <div className="allocation-grid">
        {LEGACY_ALLOCATION_FIELDS.map((field) => (
          <div className="allocation-row" key={field.id}>
            <span>{field.label}</span>
            <div className="allocation-controls">
              <button
                className="allocation-button"
                onClick={() =>
                  session.setAllocationValue(
                    field.id,
                    (session.allocation?.[field.id] ?? 0) - 1,
                  )
                }
                type="button"
              >
                -
              </button>
              <input
                className="allocation-input"
                inputMode="numeric"
                max={field.max}
                min={field.min}
                onChange={(event) =>
                  session.setAllocationValue(
                    field.id,
                    Number(event.target.value),
                  )
                }
                type="number"
                value={session.allocation?.[field.id] ?? 0}
              />
              <button
                className="allocation-button"
                onClick={() =>
                  session.setAllocationValue(
                    field.id,
                    (session.allocation?.[field.id] ?? 0) + 1,
                  )
                }
                type="button"
              >
                +
              </button>
            </div>
          </div>
        ))}
      </div>
      <button
        className="reset-button"
        disabled={!session.canStartLife}
        onClick={session.beginLife}
        type="button"
      >
        Begin life
      </button>
    </section>
  );
}
