/* eslint-disable */
// Odd Hours — UI primitive components.
// Loaded BEFORE steps.jsx and App.jsx.
// Wrapped in IIFE so top-level consts (useState, ASSETS, etc.) don't
// collide with the same names in steps.jsx / sheet.jsx / App.jsx.

(function () {

const { useState, useEffect, useRef } = React;

const ASSETS = '../../images/';

// ============================================================
// SectionHead — the brand's [label] / [H2] / [rule] triplet
// ============================================================
function SectionHead({ eyebrow, title, children }) {
  return (
    <header>
      <span className="eyebrow">{eyebrow}</span>
      <h2 className="h-display">{title}</h2>
      <div className="rule" />
      {children && <p className="lead">{children}</p>}
    </header>
  );
}

// ============================================================
// StationBar — top header with shield, form ID, clock, ambient toggle
// ============================================================
function StationBar({ ambientOn, onToggleAmbient }) {
  const [clock, setClock] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setClock(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const pad = (n) => n.toString().padStart(2, '0');
  const timeStr = `${pad(clock.getHours())}:${pad(clock.getMinutes())}:${pad(clock.getSeconds())}`;

  return (
    <header className="station-bar" role="banner">
      <div className="station-bar__left">
        <img src={ASSETS + 'route9-shield.png'} alt="" className="station-bar__shield" />
        <div className="station-bar__title">
          <b>Station 9 — Employee Intake</b><br />
          Form OH-1 · New Hire Paperwork · Rev. 2026
        </div>
      </div>
      <div className="station-bar__right">
        <div className="station-clock" aria-label="Shift clock">{timeStr}</div>
        <button
          className={`ambient-toggle ${ambientOn ? 'is-on' : ''}`}
          onClick={onToggleAmbient}
          aria-pressed={ambientOn}
          title="Ambient gas-station hum"
        >
          <span className="ambient-toggle__dot" /> {ambientOn ? 'Hum On' : 'Hum Off'}
        </button>
      </div>
    </header>
  );
}

// ============================================================
// ProgressBar — under the station header on every step
// ============================================================
function ProgressBar({ step, total, label }) {
  return (
    <div className="progress" role="region" aria-label="Progress">
      <div className="progress__counter">
        {String(step).padStart(2, '0')}<small>/ {String(total).padStart(2, '0')}</small>
      </div>
      <div className="progress__meta">
        <div className="progress__label">Current Section</div>
        <div className="progress__step">{label}</div>
      </div>
      <div className="progress__ticks" aria-hidden="true">
        {Array.from({ length: total }, (_, i) => {
          const n = i + 1;
          let cls = '';
          if (n < step) cls = 'is-done';
          else if (n === step) cls = 'is-current';
          return <div key={n} className={`progress__tick ${cls}`} />;
        })}
      </div>
    </div>
  );
}

// ============================================================
// Foot — Back / Next, with optional hint or validation
// ============================================================
function StepFoot({ onBack, onNext, nextLabel = 'Next', backLabel = 'Back', hint, warn, canNext = true, extra }) {
  return (
    <div className="foot">
      <div className={`foot__hint ${warn ? 'is-warn' : ''}`}>{hint}</div>
      <div className="foot__actions">
        {extra}
        {onBack && <button className="btn btn--ghost" onClick={onBack}>← {backLabel}</button>}
        {onNext && <button className="btn btn--primary" onClick={onNext} disabled={!canNext}>{nextLabel} →</button>}
      </div>
    </div>
  );
}

// ============================================================
// Field — labeled text input or textarea
// ============================================================
function Field({ label, sub, children }) {
  return (
    <div className="field">
      <label className="field__label">{label}</label>
      {sub && <div className="field__sub">{sub}</div>}
      {children}
    </div>
  );
}

function TextInput(props) {
  return <input className="field__input" type="text" {...props} />;
}
function TextArea(props) {
  return <textarea className="field__textarea" {...props} />;
}

// ============================================================
// PointsCounter — "POINTS REMAINING: X" pill
// ============================================================
function PointsCounter({ label, remaining, total }) {
  return (
    <div className="points-counter">
      <span className="points-counter__label">{label}</span>
      <span className={`points-counter__value ${remaining === 0 ? 'is-empty' : ''}`}>
        {remaining}
      </span>
      <span className="points-counter__total">/ {total} REMAINING</span>
    </div>
  );
}

// ============================================================
// Dots — visual representation of a stat value (0-6)
//   `bg` = portion granted by background bonus (rendered differently)
// ============================================================
function Dots({ value, max = 6, bg = 0, small = false }) {
  const dots = [];
  for (let i = 1; i <= max; i++) {
    let cls = '';
    if (i <= bg) cls = 'is-bg';
    else if (i <= value) cls = 'is-on';
    dots.push(<span key={i} className={`dot ${small ? 'dot--small' : ''} ${cls}`} />);
  }
  return <div className="dots">{dots}</div>;
}

// ============================================================
// StatTile — used in the attribute step
// ============================================================
function StatTile({ attr, value, bgBonus, canIncrease, canDecrease, onIncrease, onDecrease }) {
  return (
    <div className="stat-tile">
      <div className="stat-tile__head">
        <div className="stat-tile__name">{attr.name}</div>
        {bgBonus > 0 && <span className="stat-tile__bonus">+{bgBonus} bg</span>}
      </div>
      <div className="stat-tile__value">{value}</div>
      <Dots value={value} bg={bgBonus} max={6} />
      <div className="stat-tile__controls">
        <button className="stat-tile__step" onClick={onDecrease} disabled={!canDecrease} aria-label={`Decrease ${attr.name}`}>−</button>
        <button className="stat-tile__step" onClick={onIncrease} disabled={!canIncrease} aria-label={`Increase ${attr.name}`}>+</button>
      </div>
      <p className="stat-tile__blurb">{attr.levels[value] || attr.levels[6]}</p>
    </div>
  );
}

// ============================================================
// SkillRow — one row of the skill step
// ============================================================
function SkillRow({ skill, value, bgBonus, canIncrease, canDecrease, onIncrease, onDecrease }) {
  return (
    <div className="skill-row">
      <div>
        <div className="skill-row__name">
          {skill.name}
          {bgBonus > 0 && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, marginLeft: 8, color: 'var(--brick)', letterSpacing: '0.1em' }}>+{bgBonus} BG</span>}
        </div>
        <Dots value={value} bg={bgBonus} max={5} small />
      </div>
      <div className="skill-row__blurb">{skill.blurb}</div>
      <div className="skill-row__controls">
        <button className="step-btn" onClick={onDecrease} disabled={!canDecrease} aria-label={`Decrease ${skill.name}`}>−</button>
        <span className="skill-row__value">{value}</span>
        <button className="step-btn" onClick={onIncrease} disabled={!canIncrease} aria-label={`Increase ${skill.name}`}>+</button>
      </div>
    </div>
  );
}

// ============================================================
// BackgroundCard — concept step
// ============================================================
function BackgroundCard({ bg, attrs, skills, selected, onClick }) {
  const attrLabel = bg.attr ? `+1 ${capitalize(bg.attr)}` : 'Choose +1 attribute';
  const skillLabel = bg.custom
    ? 'Choose +1 to two skills'
    : bg.skills.map((s) => `+1 ${skillName(s, skills)}`).join(' · ');
  return (
    <button className={`bg-card ${selected ? 'is-selected' : ''}`} onClick={onClick} type="button">
      <div className="bg-card__name">{bg.name}</div>
      <div className="bg-card__bonuses">{attrLabel}<br />{skillLabel}</div>
      <div className="bg-card__flavor">{bg.flavor}</div>
    </button>
  );
}

function capitalize(s) { return s ? s.charAt(0).toUpperCase() + s.slice(1) : ''; }
function skillName(key, skills) {
  const s = skills.find((x) => x.key === key);
  return s ? s.name : key;
}

// Attach to window for downstream scripts
Object.assign(window, {
  SectionHead, StationBar, ProgressBar, StepFoot,
  Field, TextInput, TextArea,
  PointsCounter, Dots, StatTile, SkillRow, BackgroundCard,
  capitalize, skillName, ASSETS,
});

})();