// Phone preview screen

function Preview({ article, onClose }) {
  const [step, setStep] = useState(0);
  const total = article.steps.length;
  const current = article.steps[step];
  const isLast = step === total - 1;

  return (
    <div className="preview-screen">
      <div className="preview-topbar">
        <button className="btn" onClick={onClose}>
          <Icon name="arrow-left" size={13} /> Back to editor
        </button>
        <div className="muted" style={{ fontSize: 12.5 }}>
          Preview · how parents will see this in the Kidden app
        </div>
        <button className="btn-ghost btn" onClick={onClose}><Icon name="x" size={14} /></button>
      </div>

      <div className="phone">
        <div className="phone-notch" />
        <div className="phone-screen">
          <div className="phone-statusbar">
            <span>9:41</span>
            <span style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
              <span style={{ fontSize: 11 }}>●●●●</span>
              <span style={{ fontSize: 11 }}>Wi-Fi</span>
            </span>
          </div>
          <button className="phone-back-arrow" onClick={onClose}>
            <Icon name="arrow-left" size={18} />
          </button>
          <div className="phone-progress">
            {Array.from({ length: total }).map((_, i) => (
              <div key={i} className={"phone-progress-segment" + (i <= step ? ' fill' : '')} />
            ))}
          </div>
          <div className="phone-content">
            <div className="phone-image">
              {current.image
                ? <MockImage category={article.category} aspect="3/2" />
                : <div style={{ background: '#eee', width: '100%', height: '100%', display: 'grid', placeItems: 'center', color: '#bbb', fontSize: 11 }}>No image</div>
              }
            </div>
            <div className="phone-step-num">Step {step + 1} of {total}</div>
            <div className="phone-step-title">{current.title || 'Untitled step'}</div>
            <div className="phone-step-body">{current.body || 'No body text yet.'}</div>
            <div style={{ height: 40 }} />
          </div>
          <div className="phone-cta-wrap">
            <button className="phone-cta" onClick={() => {
              if (isLast) onClose();
              else setStep(step + 1);
            }}>
              {isLast ? 'Finish' : 'Continue'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Preview = Preview;