/* eslint-disable */
// Odd Hours — Character Creator main app. Wrapped in IIFE.

(function () {

const {
  // primitives
  StationBar, ProgressBar, StepFoot,
  // steps
  LandingScreen, ConceptStep, AttributesStep, SkillsStep, SpecialtyStep, StateStep, DetailsStep,
  // sheet
  CharacterSheet,
  // data
  ATTRIBUTES, SKILLS, BACKGROUNDS, ARCHETYPES, STATION_REMARKS,
} = window;

// ============================================================
// Initial character state
// ============================================================
function emptyChar() {
  const attrs = {};
  ATTRIBUTES.forEach((a) => { attrs[a.key] = 1; });
  const skills = {};
  SKILLS.forEach((s) => { skills[s.key] = 0; });
  return {
    background: null,
    customBackgroundName: '',
    customAttr: '',
    customSkills: ['', ''],
    before: '',
    why: '',
    feel: '',
    attrs,
    skills,
    specialty: null,
    reaction: '',
    name: '',
    appearance: '',
    pockets: '',
    counter: '',
    inventory: '',
    weapons: 'Bare-handed | 1',
    notes: '',
    rituals: '',
    strangeAbility: '',
    currentHealth: null, // null = use max
    sanity: 6,
    absurdity: 0,
  };
}

// ============================================================
// Compute background bonuses (attr/skill totals from chosen bg)
// ============================================================
function computeBonuses(char) {
  const result = { attr: {}, skills: {} };
  if (!char.background) return result;
  if (char.background === 'custom') {
    if (char.customAttr) result.attr[char.customAttr] = 1;
    (char.customSkills || []).forEach((sk) => {
      if (sk) result.skills[sk] = (result.skills[sk] || 0) + 1;
    });
    return result;
  }
  const bg = BACKGROUNDS.find((b) => b.key === char.background);
  if (!bg) return result;
  if (bg.attr) result.attr[bg.attr] = 1;
  (bg.skills || []).forEach((sk) => {
    result.skills[sk] = (result.skills[sk] || 0) + 1;
  });
  return result;
}

// ============================================================
// STEPS metadata (labels)
// ============================================================
const STEP_LABELS = [
  { id: 1, label: 'Concept' },
  { id: 2, label: 'Attributes' },
  { id: 3, label: 'Skills' },
  { id: 4, label: 'Specialty' },
  { id: 5, label: 'State of Mind' },
  { id: 6, label: 'Name & Details' },
];

// ============================================================
// Validation per step
// ============================================================
function validate(step, char, bonuses) {
  switch (step) {
    case 1: {
      if (!char.background) return 'Pick a background to continue.';
      if (char.background === 'custom') {
        if (!char.customAttr) return 'Pick a +1 attribute for your custom background.';
        const skillsOk = (char.customSkills || []).filter(Boolean).length === 2
          && char.customSkills[0] !== char.customSkills[1];
        if (!skillsOk) return 'Pick two distinct +1 skills for your custom background.';
      }
      return null;
    }
    case 2: {
      const spent = ATTRIBUTES.reduce((sum, a) => sum + (char.attrs[a.key] - 1), 0);
      if (spent < 6) return `Spend all 6 attribute points (${6 - spent} remaining).`;
      return null;
    }
    case 3: {
      const spent = Object.values(char.skills).reduce((a, b) => a + b, 0);
      if (spent < 3) return `Spend all 3 skill points (${3 - spent} remaining).`;
      return null;
    }
    case 4: {
      if (!char.specialty || !char.specialty.name) return 'Pick or write a specialty.';
      return null;
    }
    case 5: {
      if (!char.reaction) return 'Pick a reaction to the weird.';
      return null;
    }
    case 6: {
      if (!char.name.trim()) return 'Every employee needs a name.';
      return null;
    }
    default: return null;
  }
}

// ============================================================
// Apply an archetype on top of empty character
// ============================================================
function fromArchetype(a) {
  const c = emptyChar();
  c.background = a.background;
  c.attrs = {};
  // archetype.attrs are FINAL values (including bg). Subtract bg bonus to get raw.
  const bg = BACKGROUNDS.find((b) => b.key === a.background);
  const bgBonus = { attr: {}, skills: {} };
  if (bg && bg.attr) bgBonus.attr[bg.attr] = 1;
  (bg?.skills || []).forEach((sk) => bgBonus.skills[sk] = 1);
  ATTRIBUTES.forEach((attr) => {
    c.attrs[attr.key] = a.attrs[attr.key] - (bgBonus.attr[attr.key] || 0);
  });
  c.skills = {};
  SKILLS.forEach((s) => {
    const final = a.skills[s.key] || 0;
    c.skills[s.key] = Math.max(0, final - (bgBonus.skills[s.key] || 0));
  });
  c.specialty = a.specialty;
  c.name = a.name;
  c.appearance = a.appearance;
  c.pockets = a.pockets;
  c.counter = a.counter;
  c.reaction = a.reaction;
  c.before = '';
  c.why = '';
  c.feel = '';
  c.inventory = '';
  c.weapons = 'Bare-handed | 1';
  return c;
}

// ============================================================
// MAIN
// ============================================================
const { useState, useEffect, useMemo, useRef } = React;

function App() {
  const [step, setStep] = useState(0); // 0 = landing, 1-6 = steps, 7 = sheet
  const [char, setCharState] = useState(emptyChar);
  const [ambientOn, setAmbientOn] = useState(false);
  const [validationMsg, setValidationMsg] = useState('');
  const [stationRemark] = useState(() => STATION_REMARKS[Math.floor(Math.random() * STATION_REMARKS.length)]);
  const [archetypePickerOpen, setArchetypePickerOpen] = useState(false);
  const [hasSaved, setHasSaved] = useState(() => !!localStorage.getItem('oh-character-v1'));

  const setChar = (patch) => setCharState((prev) => ({ ...prev, ...patch }));

  const bonuses = useMemo(() => computeBonuses(char), [char]);

  // Persist
  useEffect(() => {
    try { localStorage.setItem('oh-character-draft-v1', JSON.stringify({ char, step })); } catch {}
  }, [char, step]);

  // Ambient toggle
  const toggleAmbient = () => {
    if (!window.StationAudio) return;
    if (ambientOn) { window.StationAudio.stop(); setAmbientOn(false); }
    else { window.StationAudio.start(); setAmbientOn(true); }
  };

  const goNext = () => {
    const msg = validate(step, char, bonuses);
    if (msg) { setValidationMsg(msg); return; }
    setValidationMsg('');
    setStep(step + 1);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  const goBack = () => {
    setValidationMsg('');
    setStep(Math.max(0, step - 1));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const startFresh = () => { setCharState(emptyChar()); setStep(1); setValidationMsg(''); };
  const resetAll = () => {
    if (!confirm('Throw out this character and start a new shift?')) return;
    localStorage.removeItem('oh-character-v1');
    localStorage.removeItem('oh-character-draft-v1');
    setHasSaved(false);
    setCharState(emptyChar());
    setStep(0);
  };
  const saveCharacter = () => {
    try {
      localStorage.setItem('oh-character-v1', JSON.stringify(char));
      setHasSaved(true);
      flashSavedFeedback();
    } catch {}
  };
  const resumeSaved = () => {
    const data = localStorage.getItem('oh-character-v1');
    if (!data) return;
    try {
      setCharState(JSON.parse(data));
      setStep(7);
    } catch {}
  };
  const printSheet = () => { window.print(); };
  const loadArchetype = (a) => {
    setCharState(fromArchetype(a));
    setArchetypePickerOpen(false);
    setStep(7);
  };

  // Step body
  let body;
  if (step === 0) {
    body = (
      <LandingScreen
        onStart={startFresh}
        onLoadArchetype={() => setArchetypePickerOpen(true)}
        onResume={resumeSaved}
        hasSaved={hasSaved}
      />
    );
  } else if (step === 7) {
    body = null; // sheet rendered separately
  } else {
    const StepComp = [null, ConceptStep, AttributesStep, SkillsStep, SpecialtyStep, StateStep, DetailsStep][step];
    body = <StepComp char={char} setChar={setChar} bonuses={bonuses} />;
  }

  // Top of screen — different chrome on sheet
  const isSheet = step === 7;
  const isLanding = step === 0;

  return (
    <div data-screen-label={isSheet ? '07 Character Sheet' : (isLanding ? '00 Clock In' : `${String(step).padStart(2, '0')} ${STEP_LABELS[step-1].label}`)}>
      <StationBar ambientOn={ambientOn} onToggleAmbient={toggleAmbient} />
      {!isLanding && !isSheet && (
        <ProgressBar step={step} total={6} label={STEP_LABELS[step - 1].label} />
      )}
      {isSheet ? (
        <div className="shell shell--sheet">
          <div className="sheet-wrap">
            <CharacterSheet
              char={char}
              bonuses={bonuses}
              stationRemark={stationRemark}
              setChar={setChar}
              onBack={() => setStep(6)}
              onSave={saveCharacter}
              onPrint={printSheet}
              onReset={resetAll}
            />
          </div>
        </div>
      ) : (
        <div className="shell">
          <div className="paper">
            <div className="paper__form-id">OH-1 · {isLanding ? '00' : String(step).padStart(2, '0')}</div>
            {body}
            {!isLanding && (
              <StepFoot
                onBack={step > 1 ? goBack : null}
                onNext={step < 6 ? goNext : () => { const m = validate(step, char, bonuses); if (m) { setValidationMsg(m); return; } setValidationMsg(''); setStep(7); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
                nextLabel={step === 6 ? 'Submit & View Sheet' : 'Next'}
                hint={validationMsg || (step === 6 ? 'Last step. The sheet is generated when you submit.' : 'You can come back to any step from the progress bar.')}
                warn={!!validationMsg}
                extra={step === 1 && (
                  <button className="btn btn--ghost btn--small" onClick={() => setArchetypePickerOpen(true)}>
                    Use a Pre-Rolled Hire
                  </button>
                )}
              />
            )}
          </div>
        </div>
      )}

      {archetypePickerOpen && (
        <ArchetypePicker
          archetypes={ARCHETYPES}
          onClose={() => setArchetypePickerOpen(false)}
          onPick={loadArchetype}
        />
      )}
    </div>
  );
}

// ============================================================
// ARCHETYPE PICKER MODAL
// ============================================================
function ArchetypePicker({ archetypes, onClose, onPick }) {
  return (
    <div
      style={{
        position: 'fixed', inset: 0, background: 'rgba(15,14,12,0.85)', zIndex: 200,
        display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
        padding: '40px 20px', overflowY: 'auto',
      }}
      onClick={onClose}
    >
      <div
        className="paper"
        style={{ maxWidth: 920, marginBottom: 60 }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="paper__form-id">OH-1 · ARCHETYPES</div>
        <header>
          <span className="eyebrow">Pre-Rolled Hires</span>
          <h2 className="h-display">Already filled out the paperwork.</h2>
          <div className="rule" />
          <p className="lead">
            Pick one of these to skip straight to a finished sheet. You can still
            edit anything afterward. (Or close this and start fresh.)
          </p>
        </header>

        <div className="archetypes">
          {archetypes.map((a) => (
            <button key={a.key} className="arch-card" onClick={() => onPick(a)} type="button">
              <div className="arch-card__name">{a.name}</div>
              <div className="arch-card__tagline">{a.tagline}</div>
              <div className="arch-card__stats">
                W{a.attrs.wit} · G{a.attrs.grit} · S{a.attrs.strangeness}
                {' · '}
                {a.specialty && `${a.specialty.name}`}
              </div>
            </button>
          ))}
        </div>

        <div className="foot">
          <div className="foot__hint">Closing this returns you to where you were.</div>
          <div className="foot__actions">
            <button className="btn btn--ghost" onClick={onClose}>Close</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function flashSavedFeedback() {
  // Cheeky toast at the top
  const t = document.createElement('div');
  t.textContent = 'SAVED TO BROWSER · KEEP A COPY FOR YOUR RECORDS';
  Object.assign(t.style, {
    position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)',
    background: 'var(--asphalt)', color: 'var(--cream)',
    padding: '12px 22px', zIndex: 300,
    fontFamily: 'var(--font-mono)', fontSize: '11px',
    letterSpacing: '0.2em', borderLeft: '4px solid var(--brick)',
  });
  document.body.appendChild(t);
  setTimeout(() => t.remove(), 2400);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

})();