/* Main app — Intro → Steps → Preview → Thanks */

const { useState, useEffect, useRef } = React;

// ============== Fields renderer ==============
function FieldRenderer({ field, data, set }) {
  if (field.type === 'section') {
    return (
      <>
        <h3 className="sub-head">{field.label}</h3>
        {field.desc && <p className="sub-desc">{field.desc}</p>}
      </>);

  }

  if (field.type === 'callout') {
    return (
      <div className="callout">
        <div className="callout-label">{field.label}</div>
        <p>{field.text}</p>
      </div>);

  }

  if (field.twoCol) {
    return (
      <div className="field two-col">
        {field.twoCol.map((sub) =>
        <div className="field" key={sub.key}>
            <InputField field={sub} data={data} set={set} />
          </div>
        )}
      </div>);

  }

  return (
    <div className="field">
      <InputField field={field} data={data} set={set} />
    </div>);

}

function InputField({ field, data, set }) {
  const { key, label, hint, kind } = field;

  if (kind === 'checkgroup') {
    const current = data[key] || {};
    return (
      <>
        <div className="check-list">
          {field.options.map((opt) =>
          <label className="check" key={opt}>
              <input
              type="checkbox"
              checked={!!current[opt]}
              onChange={(e) => set(key, { ...current, [opt]: e.target.checked })} />
            
              <span>{opt}</span>
            </label>
          )}
        </div>
      </>);

  }

  if (kind === 'singlecheck') {
    return (
      <label className="check" style={{ padding: '4px 0' }}>
        <input
          type="checkbox"
          checked={!!data[key]}
          onChange={(e) => set(key, e.target.checked)} />
        
        <span>{field.checkLabel}</span>
      </label>);

  }

  const inputType = kind === 'date' ? 'date' : kind === 'tel' ? 'tel' : 'text';

  return (
    <>
      {label &&
      <label htmlFor={`f-${key}`}>
          {label}
          {hint && <span className="label-hint">— {hint}</span>}
        </label>
      }
      {kind === 'textarea' ?
      <textarea
        id={`f-${key}`}
        value={data[key] || ''}
        onChange={(e) => set(key, e.target.value)}
        placeholder="" /> :


      <input
        id={`f-${key}`}
        type={inputType}
        value={data[key] || ''}
        onChange={(e) => set(key, e.target.value)} />

      }
    </>);

}

// ============== Screens ==============
function Intro({ onBegin, onBlank }) {
  return (
    <div className="intro">
      <div className="eyebrow">Child Emergency Safety Plan</div>
      <h1 className="display" style={{ fontFamily: "Lato" }}>
        A <em>private</em> safety plan to keep your child safe, during an immigration encounter.
      </h1>
      <p className="lede" style={{ fontFamily: "Arial" }}>
        Complete this short form to prepare a printed safety plan for a child with disabilities
        to use during an emergency encounter with immigration officers. You&rsquo;ll answer a series of
        questions, preview the finished document, and print it to keep with your child.
      </p>

      <div className="privacy-card">
        <h3 style={{ fontFamily: "Lato" }}>Nothing you enter is saved.</h3>
        <p style={{ fontFamily: "Arial" }}>
          This form runs entirely in your own browser. No information is transmitted, stored,
          collected, or shared.
        </p>
        <ul className="privacy-list" style={{ fontFamily: "Arial" }}>
          <li><span className="tick">✓</span><span>Your answers never leave this page.</span></li>
          <li><span className="tick">✓</span><span>No data is written to a server, database, or cloud storage.</span></li>
          <li><span className="tick">✓</span><span>No cookies, accounts, or logins.</span></li>
          <li><span className="tick">✓</span><span>When you close the window, everything you typed is permanently gone.</span></li>
        </ul>
      </div>

      <p className="meta-note" style={{ fontFamily: "Arial" }}>
        Plan on <strong>15&ndash;25 minutes</strong>. You can move back and forth between steps. If you leave the screen, you'll have to start over.
        When you&rsquo;re done, you&rsquo;ll see a printable document &mdash; print it, then close
        the window.
      </p>

      <div style={{ marginTop: 36 }}>
        <button className="btn btn-primary btn-xl" onClick={onBegin}>
          Begin <span className="arrow">→</span>
        </button>
        <p className="intro-alt-print">
          If you&rsquo;re still not comfortable filling this form out online, you can{' '}
          <a href="#" onClick={(e) => { e.preventDefault(); onBlank(); }}>
            print a blank version of the plan
          </a>{' '}
          and fill it out manually.
        </p>
      </div>
    </div>);

}

function BlankPrintableScreen({ onPrint, onBack }) {
  return (
    <div className="preview-wrap">
      <div className="preview-top no-print">
        <div className="eyebrow">Blank Version</div>
        <h2 className="step-title" style={{ marginBottom: 8 }}>Print a blank emergency safety plan</h2>
        <p className="step-sub">
          This version is intentionally empty so you can complete it by hand.
        </p>
        <div style={{ marginTop: 20 }}>
          <button className="btn btn-ghost" onClick={onBack} style={{ marginRight: 12 }}>
            <span className="arrow" style={{ transform: 'rotate(180deg)' }}>→</span> Back
          </button>
          <button className="btn btn-primary" onClick={onPrint}>
            Print blank plan <span className="arrow">→</span>
          </button>
        </div>
      </div>

      <div className="preview-page-wrap">
        <BlankPrintableDocument />
      </div>
    </div>);
}

function StepScreen({ step, stepIdx, total, data, setField, onNext, onBack }) {
  const isLast = stepIdx === total - 1;

  // scroll to top when step changes
  useEffect(() => {window.scrollTo({ top: 0, behavior: 'smooth' });}, [stepIdx]);

  return (
    <div className="step" key={step.id}>
      <div className="step-header">
        <div className="step-num">
          <span className="bar"></span>Step {stepIdx + 1} of {total}
        </div>
        <h2 className="step-title">{step.title}</h2>
        <p className="step-sub">{step.sub}</p>
      </div>

      <div className="step-body">
        {step.fields.map((f, i) =>
        <FieldRenderer key={f.key || `m-${i}`} field={f} data={data} set={setField} />
        )}
      </div>

      <div className="step-nav">
        <button
          className="btn btn-ghost"
          onClick={onBack}
          disabled={stepIdx === 0}>
          
          <span className="arrow" style={{ transform: 'rotate(180deg)' }}>→</span> Back
        </button>
        <div className="step-nav-info">
          Nothing is saved. You can leave fields blank.
        </div>
        <button className="btn btn-primary" onClick={onNext}>
          {isLast ? 'Preview document' : 'Next'} <span className="arrow">→</span>
        </button>
      </div>
       <div className="step-nav-info-mobile">
          Nothing is saved. You can leave fields blank.
        </div>
    </div>);

}

function PreviewScreen({ data, onBack, onPrint, onContinue, hasPrinted }) {
  const printBtnClass = hasPrinted ? 'btn btn-ghost' : 'btn btn-primary';

  return (
    <div className="preview-wrap">
      <div className="preview-top no-print">
        <div className="eyebrow">Step 10 · Preview</div>
        <h2 className="step-title" style={{ marginBottom: 8 }}>Review your printed document</h2>
        <p className="step-sub">
          This is exactly how your safety plan will look when printed. Check everything carefully.
          If anything needs a fix, go back and edit &mdash; nothing is saved until you print and keep the paper.
        </p>
      </div>

      <div className="preview-banner no-print">
        <div className="preview-banner-text">
          <h4>Your plan is ready</h4>
          <p>
            Use your browser&rsquo;s print dialog to save as PDF or print to paper.
            {hasPrinted && ' When you are done, tap Continue.'}
          </p>
        </div>
        <div className="actions">
          <button className="btn btn-ghost" onClick={onBack}>
            <span className="arrow" style={{ transform: 'rotate(180deg)' }}>→</span> Edit
          </button>
          <button className={printBtnClass} onClick={onPrint}>
            {hasPrinted ? 'Print again' : 'Print plan'} <span className="arrow">→</span>
          </button>
          {hasPrinted &&
          <button className="btn btn-primary" onClick={onContinue}>
              Continue <span className="arrow">→</span>
            </button>
          }
        </div>
      </div>

      <div className="preview-page-wrap">
        <PrintableDocument data={data} />
      </div>
    </div>);

}

function ThankYou() {
  return (
    <div className="thanks">
      <div className="thanks-mark">✓</div>
      <h1>Done.</h1>
      <p>
        Your safety plan has been sent to the printer. Keep copies somewhere safe &mdash; with your
        child, at school, with trusted family members, and with your immigration attorney.
      </p>

      <div className="close-card">
        <p style={{ margin: 0 }}>
          <strong>You can now close this browser window.</strong> Nothing you entered has been
          saved. No information was transmitted to any server. When this window closes, every
          answer you typed is permanently gone.
        </p>
      </div>

      <p style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 28 }}>
        Remember to update the plan every 6 months or whenever information changes.
      </p>
    </div>);

}

// ============== App ==============
function App() {
  const [screen, setScreen] = useState('intro'); // intro | form | preview | thanks
  const [stepIdx, setStepIdx] = useState(0);
  const [data, setData] = useState({});
  const [hasPrinted, setHasPrinted] = useState(false);

  const total = STEPS.length;

  function setField(key, val) {
    setData((d) => ({ ...d, [key]: val }));
  }

  function begin() {
    setScreen('form');
    setStepIdx(0);
  }

  function next() {
    if (stepIdx < total - 1) setStepIdx(stepIdx + 1);else
    {
      setHasPrinted(false);
      setScreen('preview');
    }
  }

  function back() {
    if (stepIdx > 0) setStepIdx(stepIdx - 1);
  }

  function editFromPreview() {
    setHasPrinted(false);
    setScreen('form');
    setStepIdx(total - 1);
  }

  function doPrint() {
    setHasPrinted(true);
    window.print();
  }

  function continueAfterPrint() {
    setScreen('thanks');
  }

  // progress: 0 on intro, 1..total on form, total+1 on preview, 1.0 on thanks
  const progress = screen === 'intro' ? 0 :
  screen === 'form' ? (stepIdx + 1) / (total + 1) :
  screen === 'preview' ? (total + 1) / (total + 1) : 1;

  return (
    <>
      {/* Top bar — hidden on print */}
      <div className="no-print">
        {screen !== 'thanks' && screen !== 'preview' && screen !== 'blank' &&
        <div className="shell" style={{ paddingBottom: 0, minHeight: 0 }}>
            <div className="top-bar">
              <div className="brand">
                <img src="logo.png" alt="Logo" className="logo" />
              </div>
              {screen === 'form' &&
            <div className="step-meter">
                  <div className="step-meter-track">
                    <div className="step-meter-fill" style={{ width: `${progress * 100}%` }}></div>
                  </div>
                  <span>{stepIdx + 1} / {total}</span>
                </div>
            }
            </div>
          </div>
        }
      </div>

      {/* Content */}
      {screen === 'intro' &&
      <div className="shell" data-screen-label="01 Intro">
          <Intro onBegin={begin} onBlank={() => setScreen('blank')} />
        </div>
      }

      {screen === 'form' &&
      <div className="shell" data-screen-label={`${String(stepIdx + 2).padStart(2, '0')} Form · ${STEPS[stepIdx].id}`}
      style={{ paddingTop: 0 }}>
          <StepScreen
          step={STEPS[stepIdx]}
          stepIdx={stepIdx}
          total={total}
          data={data}
          setField={setField}
          onNext={next}
          onBack={back} />
        
        </div>
      }

      {screen === 'preview' &&
      <div className="shell" style={{ maxWidth: 'none', padding: '32px 24px 80px' }}
      data-screen-label={`${String(total + 2).padStart(2, '0')} Preview`}>
          <PreviewScreen
          data={data}
          onBack={editFromPreview}
          onPrint={doPrint}
          onContinue={continueAfterPrint}
          hasPrinted={hasPrinted} />
        </div>
      }

      {screen === 'thanks' &&
      <div className="shell" data-screen-label={`${String(total + 3).padStart(2, '0')} Thank you`}>
          <ThankYou />
        </div>
      }

      {screen === 'blank' &&
      <div className="shell" style={{ maxWidth: 'none', padding: '32px 24px 80px' }}
      data-screen-label="Blank Printable">
          <BlankPrintableScreen onPrint={doPrint} onBack={() => setScreen('intro')} />
        </div>
      }
    </>);

}

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