/* ===== Conditions Report — review & accept/revise ===== */

const CONDITIONS = [
  { id: 'climate', icon: 'thermometer-sun', title: 'Climate', value: 'USDA zone 8b · mild maritime', desc: 'Wet winters, dry summers. Average low 15–20°F. Your plant palette will favor species that shrug off soggy springs.', tone: 'good' },
  { id: 'sun', icon: 'sun', title: 'Sun exposure', value: 'Mostly full sun · part shade at west fence', desc: '6–8 hrs direct sun in the back yard. The west fence line gets dappled afternoon shade from three Douglas firs.', tone: 'good' },
  { id: 'soil', icon: 'layers', title: 'Soil', value: 'Sandy loam (back) · clay pocket (front)', desc: 'Back yard drains well — good for perennials and grasses. Front north bed has clay; amend with compost before planting shrubs.', tone: 'good' },
  { id: 'trees', icon: 'trees', title: 'Existing trees', value: '3 Douglas firs, 2 maples, 1 oak', desc: 'All healthy canopy. We\'ll design around them and note their drip lines — no planting within 6 ft of trunks.', tone: 'good' },
  { id: 'wetland', icon: 'droplets', title: 'Wetland flag', value: 'Seasonal wetland suspected · NE corner', desc: 'A seasonal wetland may extend into your NE corner. Novale won\'t propose earthwork or planting there. Confirm with a local delineator before any build.', tone: 'warn' },
  { id: 'utilities', icon: 'zap', title: 'Underground utilities', value: 'Gas line runs east–west, 3 ft deep', desc: 'The gas main runs along the front of the house. We\'ll avoid deep-rooted trees within 5 ft. Call 811 before you dig.', tone: 'warn' },
  { id: 'setbacks', icon: 'ruler', title: 'Setbacks & easements', value: '10 ft rear utility easement', desc: 'You cannot install permanent structures in the rear easement — plantings are fine.', tone: 'info' },
];

const ConditionsReport = ({ onContinue, onBack }) => {
  const [revising, setRevising] = React.useState(null);

  return (
    <div className="screen screen-fade-in">
      <StepRail current="conditions" />
      <div className="screen__main" style={{ maxWidth: 1040 }}>
        <div className="row row--between" style={{ marginBottom: 24 }}>
          <div>
            <div className="eyebrow"><span className="eyebrow__dot" />Step 03 · Conditions report</div>
            <h2 className="serif" style={{ fontSize: 40, marginTop: 12, letterSpacing: '-0.018em' }}>
              Here's what we found.
            </h2>
            <p className="secondary" style={{ fontSize: 16, marginTop: 10, maxWidth: 640, lineHeight: 1.55 }}>
              Quick sanity check before we design. Two items need your attention — everything else looks solid.
            </p>
          </div>
          <div className="row" style={{ gap: 10 }}>
            <button className="btn btn--ghost" onClick={onBack}><Icon name="arrow-left" size={14} /> Back</button>
          </div>
        </div>

        <div className="conditions-grid">
          {CONDITIONS.map(c => (
            <div key={c.id} className="condition-card" data-tone={c.tone}>
              <div className="condition-card__icon"><Icon name={c.icon} size={18} /></div>
              <div className="condition-card__body">
                <div className="row row--between" style={{ gap: 8 }}>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{c.title}</div>
                  {c.tone === 'warn' && <span className="badge badge--warn">Review</span>}
                  {c.tone === 'info' && <span className="badge badge--stone">Note</span>}
                  {c.tone === 'good' && <span className="badge badge--success">Confirmed</span>}
                </div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 4 }}>{c.value}</div>
                <p style={{ fontSize: 13, color: 'var(--fg-secondary)', marginTop: 10, lineHeight: 1.55 }}>{c.desc}</p>
                <div className="row" style={{ marginTop: 12, gap: 8 }}>
                  <button className="btn btn--text btn--sm" onClick={() => setRevising(c.id)}>
                    <Icon name="edit-3" size={12} /> Flag an issue
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="conditions-actions">
          <div>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Everything check out?</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>
              If something's wrong, you can upload a drone photo or site plan. Otherwise, let's talk about what you want.
            </div>
          </div>
          <div className="row" style={{ gap: 10 }}>
            <button className="btn btn--ghost"><Icon name="upload" size={14} /> Upload a site plan</button>
            <button className="btn btn--accent btn--lg" onClick={onContinue}>
              Looks right — start designing
              <Icon name="arrow-right" size={16} />
            </button>
          </div>
        </div>

        {revising && (
          <div className="modal-backdrop" onClick={() => setRevising(null)}>
            <div className="modal" onClick={e => e.stopPropagation()}>
              <div className="row row--between">
                <h4 style={{ fontSize: 18, fontWeight: 500 }}>Flag an issue</h4>
                <button className="btn btn--text btn--sm" onClick={() => setRevising(null)}><Icon name="x" size={14} /></button>
              </div>
              <p className="muted" style={{ fontSize: 13, marginTop: 6 }}>
                Tell us what's off — we'll update the base map.
              </p>
              <textarea className="input" rows="4" style={{ marginTop: 14, resize: 'vertical' }} placeholder="e.g. 'There's actually a shed in the NE corner we're keeping.'" />
              <div className="row" style={{ gap: 8, marginTop: 14, justifyContent: 'flex-end' }}>
                <button className="btn btn--ghost" onClick={() => setRevising(null)}>Cancel</button>
                <button className="btn btn--primary" onClick={() => setRevising(null)}>Submit revision</button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { ConditionsReport });