/* Renders a blank print-ready plan for manual completion */

function BlankDocSection({ num, title, sub, children }) {
  return (
    <section className="doc-section">
      <h2>
        <span>{title}</span>
        <span className="sec-num">Section {num}</span>
      </h2>
      {sub && <div className="doc-paragraph" style={{ marginTop: 2 }}>{sub}</div>}
      {children}
    </section>
  );
}

function BlankTextRow({ label }) {
  return (
    <div className="doc-row">
      <div className="key">{label || ' '}</div>
      <div className="val blank-line"></div>
    </div>
  );
}

function BlankCheckOption({ text }) {
  return (
    <label className="blank-check-item">
      <span className="blank-check-box" aria-hidden="true"></span>
      <span>{text}</span>
    </label>
  );
}

function BlankChecklist({ options }) {
  return (
    <div className="doc-checks">
      {options.map((opt) => <BlankCheckOption key={opt} text={opt} />)}
    </div>
  );
}

function BlankField({ field }) {
  if (!field) return null;

  if (field.type === 'section') {
    return (
      <>
        <h3>{field.label}</h3>
        {field.desc && <div className="doc-paragraph">{field.desc}</div>}
      </>
    );
  }

  if (field.type === 'callout') {
    return (
      <div className="doc-quote" style={{ marginTop: 8 }}>
        <strong>{field.label}:</strong> {field.text}
      </div>
    );
  }

  if (field.twoCol) {
    return (
      <div className="doc-two-col">
        {field.twoCol.map((sub) => <BlankTextRow key={sub.key} label={sub.label} />)}
      </div>
    );
  }

  if (field.kind === 'checkgroup') {
    return <BlankChecklist options={field.options || []} />;
  }

  if (field.kind === 'singlecheck') {
    return <BlankChecklist options={[field.checkLabel || field.label || 'Option']} />;
  }

  return <BlankTextRow label={field.label} />;
}

function BlankPrintableDocument() {
  const today = new Date().toLocaleDateString('en-US', {
    month: 'long', day: 'numeric', year: 'numeric'
  });

  return (
    <div className="doc blank-form" id="printable-doc-blank">
      <div className="doc-header">
        <div>
          <img src="medical-star.png" alt="Star of life symbol" className="staroflife" />
          <h1>Emergency Safety Plan (Blank)</h1>
          <div className="doc-subtitle">Print and complete by hand</div>
        </div>
        <div className="doc-header-r">
          Printed {today}<br/>
          Keep this document with the child at all times.
        </div>
      </div>

      <div className="doc-alert">
        <strong>SHOW THIS PLAN TO ANY OFFICER IMMEDIATELY.</strong> This child may require
        disability accommodations under the Americans with Disabilities Act (ADA) and Section 504,
        Rehabilitation Act of 1973.
      </div>

      {STEPS.map((step) => (
        <BlankDocSection key={step.id} num={step.num} title={step.title} sub={step.sub}>
          {(step.fields || []).map((field, i) => (
            <div key={field.key || `${step.id}-${i}`} style={{ marginTop: field.type === 'section' ? 10 : 6 }}>
              <BlankField field={field} />
            </div>
          ))}
        </BlankDocSection>
      ))}

      <div className="doc-footer">
        <div>Update this plan every 6 months or when information changes.</div>
        <div>This document is not legal advice.</div>
      </div>
    </div>
  );
}

window.BlankPrintableDocument = BlankPrintableDocument;