/* Construction module — 6-step stepper */
(function () {
  const { useState } = React;
  const Icon = window.Icon, PageHead = window.PageHead;
  const D = window.YEIDA;

  function Construction({ go, toast }) {
    const steps = D.constructionSteps;
    const [active, setActive] = useState(3); // Authority Review
    const [docs, setDocs] = useState(D.requiredDocs);

    const upload = (i) => { setDocs(d => d.map((x, j) => j === i ? { ...x, status: 'uploaded' } : x)); toast && toast('Document uploaded for scrutiny'); };

    return (
      <div>
        <PageHead title="Construction" subtitle="Building plan approval & on-site progress for Plot B-47">
          <button className="btn btn-outline" onClick={() => go('documents')}><Icon name="documents" size={18} />Building Docs</button>
        </PageHead>

        {/* Stepper rail */}
        <div className="card card-pad anim-fade-up" style={{ marginBottom: 18 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', position: 'relative' }}>
            {steps.map((s, i) => {
              const state = s.done ? 'done' : i === active ? 'active' : 'todo';
              const cc = state === 'done' ? 'var(--emerald-500)' : state === 'active' ? 'var(--blue-500)' : 'var(--line)';
              return (
                <div key={s.key} style={{ flex: 1, position: 'relative' }}>
                  {i < steps.length - 1 && <div style={{ position: 'absolute', left: '50%', right: '-50%', top: 21, height: 3, background: s.done ? 'var(--emerald-500)' : 'var(--line)' }} />}
                  <button onClick={() => setActive(i)} style={{ position: 'relative', zIndex: 1, background: 'none', border: 'none', cursor: 'pointer', width: '100%', textAlign: 'center', padding: 0 }}>
                    <span style={{ width: 44, height: 44, borderRadius: 99, display: 'grid', placeItems: 'center', margin: '0 auto', background: state === 'todo' ? '#fff' : cc, border: '2.5px solid ' + (state === 'todo' ? 'var(--line)' : cc), color: state === 'todo' ? 'var(--faint)' : '#fff', boxShadow: state === 'active' ? '0 0 0 5px rgba(38,112,230,.15)' : 'none', transition: 'all .2s' }}>
                      {s.done ? <Icon name="check" size={20} /> : <span style={{ fontWeight: 800, fontFamily: 'var(--font-display)', fontSize: 16 }}>{i + 1}</span>}
                    </span>
                    <div style={{ fontWeight: i === active ? 700 : 600, fontSize: 13, marginTop: 9, color: i === active ? 'var(--ink)' : 'var(--muted)' }}>{s.title}</div>
                    <div className="faint" style={{ fontSize: 11, marginTop: 2 }}>{s.desc}</div>
                  </button>
                </div>
              );
            })}
          </div>
        </div>

        {/* Step content */}
        <div key={active} className="anim-fade-up">
          {active === 0 && <Overview go={go} />}
          {active === 1 && <Required docs={docs} setActive={setActive} />}
          {active === 2 && <Upload docs={docs} upload={upload} setActive={setActive} />}
          {active === 3 && <Review setActive={setActive} />}
          {active === 4 && <Approval />}
          {active === 5 && <Progress />}
        </div>

        {/* nav */}
        <div className="row spread" style={{ marginTop: 18 }}>
          <button className="btn btn-outline" disabled={active === 0} style={{ opacity: active === 0 ? .4 : 1 }} onClick={() => setActive(a => Math.max(0, a - 1))}><Icon name="chevL" size={17} />Previous</button>
          <button className="btn btn-primary" disabled={active === 5} style={{ opacity: active === 5 ? .4 : 1 }} onClick={() => setActive(a => Math.min(5, a + 1))}>Next Step<Icon name="chevR" size={17} /></button>
        </div>
      </div>
    );
  }

  function Card({ children, ...p }) { return <div className="card card-pad" {...p}>{children}</div>; }

  function Overview({ go }) {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18 }}>
        <Card>
          <span className="badge badge-blue" style={{ marginBottom: 12 }}>Step 1 · Overview</span>
          <h3 style={{ fontSize: 20 }}>Start construction on Plot B-47</h3>
          <p className="muted" style={{ fontSize: 14.5, lineHeight: 1.6, marginTop: 10 }}>Before beginning construction, your building plan must be sanctioned by YEIDA in accordance with the prevailing building byelaws, FAR and setback norms for {D.user.sector}.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 18 }}>
            {[['Max Ground Coverage', '50%'], ['Permissible FAR', '1.5'], ['Max Height', '15 m'], ['Front Setback', '3 m']].map(([l, v]) => (
              <div key={l} style={{ background: 'var(--bg)', borderRadius: 11, padding: '13px 15px' }}>
                <div className="faint" style={{ fontSize: 11.5, fontWeight: 600, textTransform: 'uppercase' }}>{l}</div>
                <div style={{ fontWeight: 800, fontSize: 19, fontFamily: 'var(--font-display)', marginTop: 3 }}>{v}</div>
              </div>
            ))}
          </div>
        </Card>
        <Card style={{ background: 'var(--bg)' }}>
          <h4 style={{ fontSize: 16, marginBottom: 12 }}>Eligibility</h4>
          {[['Possession granted', true], ['100% premium not mandatory', true], ['No pending dues for plan', false], ['Architect empanelled', true]].map(([l, ok], i) => (
            <div key={i} className="row gap-3" style={{ padding: '9px 0', borderBottom: '1px solid var(--line-2)', fontSize: 13.5 }}>
              <span style={{ color: ok ? 'var(--emerald-600)' : 'var(--amber-600)' }}><Icon name={ok ? 'checkCircle' : 'alert'} size={18} /></span>
              <span style={{ color: 'var(--ink-2)' }}>{l}</span>
            </div>
          ))}
          <div style={{ background: 'var(--amber-50)', borderRadius: 11, padding: '12px 14px', marginTop: 14, fontSize: 13, color: 'var(--amber-600)', display: 'flex', gap: 9 }}>
            <Icon name="info" size={17} style={{ flex: 'none', marginTop: 1 }} />
            <span>Clear the Water Connection due of ₹12,400 before plan submission.</span>
          </div>
        </Card>
      </div>
    );
  }

  function Required({ docs }) {
    return (
      <Card>
        <span className="badge badge-blue" style={{ marginBottom: 12 }}>Step 2 · Required Documents</span>
        <h3 style={{ fontSize: 20, marginBottom: 6 }}>Document checklist</h3>
        <p className="muted" style={{ fontSize: 14, marginBottom: 18 }}>Prepare the following before submitting your building plan for scrutiny.</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {docs.map((d, i) => (
            <div key={i} className="row gap-3" style={{ padding: '14px 16px', borderRadius: 12, border: '1px solid var(--line)', background: '#fff' }}>
              <span style={{ width: 40, height: 40, borderRadius: 10, flex: 'none', display: 'grid', placeItems: 'center', background: d.status === 'uploaded' ? 'var(--emerald-50)' : 'var(--bg-2)', color: d.status === 'uploaded' ? 'var(--emerald-600)' : 'var(--faint)' }}><Icon name={d.status === 'uploaded' ? 'checkCircle' : 'file'} size={20} /></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{d.name}</div>
                <div className="faint" style={{ fontSize: 12, marginTop: 1 }}>{d.note}</div>
              </div>
              <span className={'badge badge-' + (d.status === 'uploaded' ? 'green' : 'amber')} style={{ fontSize: 11 }}>{d.status === 'uploaded' ? 'Ready' : 'Pending'}</span>
            </div>
          ))}
        </div>
      </Card>
    );
  }

  function Upload({ docs, upload }) {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 18 }}>
        <Card>
          <span className="badge badge-blue" style={{ marginBottom: 12 }}>Step 3 · Upload</span>
          <h3 style={{ fontSize: 19, marginBottom: 12 }}>Upload documents</h3>
          <div style={{ border: '2px dashed var(--blue-100)', borderRadius: 14, padding: '32px 20px', textAlign: 'center', background: 'var(--blue-50)' }}>
            <span style={{ width: 52, height: 52, borderRadius: 14, display: 'grid', placeItems: 'center', margin: '0 auto 12px', background: '#fff', color: 'var(--blue-600)', boxShadow: 'var(--sh-sm)' }}><Icon name="upload" size={25} /></span>
            <div style={{ fontWeight: 700, fontSize: 15 }}>Drag & drop files here</div>
            <div className="muted" style={{ fontSize: 13, margintop: 4 }}>PDF, DWG, JPG · up to 25 MB each</div>
            <button className="btn btn-primary btn-sm" style={{ marginTop: 14 }}>Browse Files</button>
          </div>
        </Card>
        <Card>
          <h4 style={{ fontSize: 16, marginBottom: 14 }}>Submission status</h4>
          <div className="col gap-3">
            {docs.map((d, i) => (
              <div key={i} className="row spread" style={{ padding: '11px 0', borderBottom: '1px solid var(--line-2)' }}>
                <div className="row gap-3">
                  <span style={{ width: 34, height: 34, borderRadius: 9, display: 'grid', placeItems: 'center', background: d.status === 'uploaded' ? 'var(--emerald-50)' : 'var(--bg-2)', color: d.status === 'uploaded' ? 'var(--emerald-600)' : 'var(--faint)' }}><Icon name="file" size={17} /></span>
                  <div><div style={{ fontWeight: 600, fontSize: 13.5 }}>{d.name}</div><div className="faint" style={{ fontSize: 11.5 }}>{d.note}</div></div>
                </div>
                {d.status === 'uploaded'
                  ? <span className="badge badge-green"><Icon name="check" size={13} />Uploaded</span>
                  : <button className="btn btn-outline btn-sm" onClick={() => upload(i)}><Icon name="upload" size={15} />Upload</button>}
              </div>
            ))}
          </div>
        </Card>
      </div>
    );
  }

  function Review({ setActive }) {
    return (
      <Card style={{ textAlign: 'center', padding: '44px 30px' }}>
        <div style={{ width: 76, height: 76, borderRadius: 99, margin: '0 auto 18px', display: 'grid', placeItems: 'center', background: 'var(--blue-50)', color: 'var(--blue-600)', position: 'relative' }}>
          <Icon name="clock" size={36} />
          <span style={{ position: 'absolute', inset: -6, borderRadius: 99, border: '2px solid var(--blue-400)', opacity: .4, animation: 'ping 2.2s infinite' }} />
        </div>
        <span className="badge badge-blue">Step 4 · Authority Review</span>
        <h3 style={{ fontSize: 23, marginTop: 12 }}>Your application is under scrutiny</h3>
        <p className="muted" style={{ fontSize: 14.5, maxWidth: 460, margin: '10px auto 0', lineHeight: 1.6 }}>YEIDA's Building Plan section is reviewing your submission against byelaws. You'll be notified once the sanction letter is issued.</p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 30, marginTop: 26, flexWrap: 'wrap' }}>
          {[['Submitted', '16 Feb 2026'], ['Application No.', 'BP-2026-18-0472'], ['Est. Decision', '12 Jun 2026'], ['Reviewing Officer', 'AE (Planning)']].map(([l, v]) => (
            <div key={l}><div className="faint" style={{ fontSize: 11.5, fontWeight: 600, textTransform: 'uppercase' }}>{l}</div><div style={{ fontWeight: 700, fontSize: 15, marginTop: 3 }}>{v}</div></div>
          ))}
        </div>
        <div style={{ maxWidth: 520, margin: '26px auto 0' }}>
          <div className="row spread" style={{ fontSize: 12.5, marginBottom: 7, color: 'var(--muted)', fontWeight: 600 }}><span>Document Check</span><span>Technical Scrutiny</span><span>Sanction</span></div>
          <div className="progress" style={{ height: 9 }}><span style={{ width: '58%' }} /></div>
        </div>
      </Card>
    );
  }

  function Approval() {
    return (
      <Card style={{ textAlign: 'center', padding: '40px 30px', background: 'linear-gradient(180deg,#fff,#f3fbf7)' }}>
        <div style={{ width: 76, height: 76, borderRadius: 99, margin: '0 auto 16px', display: 'grid', placeItems: 'center', background: 'var(--emerald-500)', color: '#fff', boxShadow: '0 14px 30px -10px rgba(15,157,107,.6)' }}><Icon name="check" size={40} /></div>
        <span className="badge badge-green">Step 5 · Approval</span>
        <h3 style={{ fontSize: 23, marginTop: 12 }}>Sanction letter ready</h3>
        <p className="muted" style={{ fontSize: 14.5, maxWidth: 440, margin: '10px auto 0', lineHeight: 1.6 }}>Once approved, your building plan sanction letter will be available to download here, valid for 3 years from the date of issue.</p>
        <div className="row gap-3 center" style={{ marginTop: 22 }}>
          <button className="btn btn-emerald"><Icon name="download" size={18} />Download Sanction Letter</button>
          <button className="btn btn-outline"><Icon name="eye" size={18} />Preview</button>
        </div>
      </Card>
    );
  }

  function Progress() {
    return (
      <Card>
        <div className="row spread" style={{ marginBottom: 18 }}>
          <div><span className="badge badge-blue">Step 6 · Progress Tracker</span><h3 style={{ fontSize: 20, marginTop: 10 }}>On-site construction progress</h3></div>
          <div style={{ textAlign: 'right' }}><div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 30, color: 'var(--emerald-700)' }}>41%</div><div className="faint" style={{ fontSize: 12 }}>overall complete</div></div>
        </div>
        <div className="col gap-4">
          {D.constructionMilestones.map((m, i) => (
            <div key={i}>
              <div className="row spread" style={{ marginBottom: 7 }}>
                <div className="row gap-3">
                  <span style={{ width: 30, height: 30, borderRadius: 8, display: 'grid', placeItems: 'center', background: m.pct === 100 ? 'var(--emerald-50)' : m.pct > 0 ? 'var(--blue-50)' : 'var(--bg-2)', color: m.pct === 100 ? 'var(--emerald-600)' : m.pct > 0 ? 'var(--blue-600)' : 'var(--faint)' }}><Icon name={m.pct === 100 ? 'check' : 'building'} size={16} /></span>
                  <div><div style={{ fontWeight: 700, fontSize: 14.5 }}>{m.label}</div><div className="faint" style={{ fontSize: 12 }}>{m.date}</div></div>
                </div>
                <div className="row gap-3">
                  <span className={'badge badge-' + (m.pct === 100 ? 'green' : m.pct > 0 ? 'blue' : 'gray')} style={{ fontSize: 11 }}>{m.status}</span>
                  <span className="num" style={{ fontWeight: 700, fontSize: 14, width: 42, textAlign: 'right' }}>{m.pct}%</span>
                </div>
              </div>
              <div className="progress"><span style={{ width: m.pct + '%', background: m.pct === 100 ? 'linear-gradient(90deg,var(--emerald-500),var(--emerald-600))' : 'linear-gradient(90deg,var(--blue-400),var(--blue-600))' }} /></div>
            </div>
          ))}
        </div>
      </Card>
    );
  }

  window.Construction = Construction;
})();