/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, Chrome, Steps, StepIntake, StepStress, StepProcessing, StepDiagnostic, StepHandover, Foot */
const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accentHue": 200,
  "showSocials": true,
  "density": "regular"
}/*EDITMODE-END*/;

function generateProjectId() {
  const date = new Date();
  const yy = date.getFullYear();
  const mm = String(date.getMonth() + 1).padStart(2, '0');
  const rand = Math.random().toString(36).toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 4) || 'A8F3';
  return `T+T-${yy}-${mm}-${rand}`;
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [step, setStep] = useState(0);
  const [intake, setIntake] = useState('');
  const [stress, setStress] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [projectId] = useState(() => generateProjectId());

  useEffect(() => {
    document.body.dataset.theme = tweaks.theme;
    document.documentElement.style.setProperty('--accent', `oklch(0.82 0.08 ${tweaks.accentHue})`);
    document.documentElement.style.setProperty('--accent-dim', `oklch(0.55 0.06 ${tweaks.accentHue})`);
  }, [tweaks.theme, tweaks.accentHue]);

  const reset = useCallback(() => {
    setStep(0); setIntake(''); setStress(''); setSubmitted(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [step]);

  return (
    <div className="app">
      <a className="skip-link" href="#main">Skip to content</a>
      <Chrome projectId={projectId} current="diagnostic" onReset={reset}/>

      <main className="stage" id="main">
        <Steps current={step}/>

        {step === 0 && (
          <StepIntake value={intake} setValue={setIntake} onNext={() => setStep(1)}/>
        )}
        {step === 1 && (
          <StepStress value={stress} setValue={setStress} onBack={() => setStep(0)} onNext={() => setStep(2)}/>
        )}
        {step === 2 && (
          <StepProcessing onDone={() => setStep(3)}/>
        )}
        {step === 3 && (
          <StepDiagnostic projectId={projectId} intake={intake} stress={stress} onBack={() => setStep(1)} onNext={() => setStep(4)}/>
        )}
        {step === 4 && (
          <StepHandover
            projectId={projectId}
            submitted={submitted}
            submitting={submitting}
            submitError={submitError}
            onBack={() => setStep(3)}
            onSubmit={async (data) => {
              setSubmitting(true);
              setSubmitError(null);
              try {
                const response = await fetch('/api/submit-diagnostic', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ projectId, ...data }),
                });
                const result = await response.json();
                if (!response.ok) throw new Error(result.error || 'Submission failed');
                setSubmitted(true);
              } catch (err) {
                setSubmitError(err.message);
              } finally {
                setSubmitting(false);
              }
            }}
          />
        )}
      </main>

      {tweaks.showSocials && <Foot/>}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio label="Mode" value={tweaks.theme}
            options={[{value:'dark', label:'Charcoal'},{value:'light', label:'Vellum'}]}
            onChange={(v)=>setTweak('theme', v)}/>
        </TweakSection>
        <TweakSection title="Accent">
          <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
            {[{h:200,name:'Cyan'},{h:160,name:'Mint'},{h:60,name:'Amber'},{h:30,name:'Rust'},{h:340,name:'Coral'},{h:280,name:'Iris'}].map(c => (
              <button key={c.h} onClick={()=>setTweak('accentHue', c.h)} title={c.name} aria-label={`Accent ${c.name}`}
                style={{width:28, height:28, background:`oklch(0.82 0.08 ${c.h})`,
                  border: tweaks.accentHue===c.h ? '2px solid #fff' : '1px solid rgba(255,255,255,0.2)', cursor:'pointer'}}/>
            ))}
          </div>
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle label="Show footer + socials" value={tweaks.showSocials}
            onChange={(v)=>setTweak('showSocials', v)}/>
        </TweakSection>
        <TweakSection title="Flow">
          <div style={{display:'grid', gap:8}}>
            <button className="btn" style={{padding:'10px 14px', fontSize:11}} onClick={reset}>
              ↺ Restart Flow
            </button>
            <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:6}}>
              {[0,1,2,3,4].map(i => (
                <button key={i}
                  onClick={()=>{ setStep(i); if(i===4) setSubmitted(false); }}
                  style={{
                    padding:'8px 0', fontSize:10, fontFamily:'var(--mono)',
                    border:'1px solid rgba(255,255,255,0.2)',
                    background: step===i?'var(--accent)':'transparent',
                    color: step===i?'#0E0F0E':'inherit',
                    cursor:'pointer'
                  }}>
                  0{i+1}
                </button>
              ))}
            </div>
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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