/* Dashboard — split into A) Authority Status & Records and B) Construction Progress */
(function () {
  const Icon = window.Icon, Donut = window.Donut, StatusBadge = window.StatusBadge;
  const D = window.YEIDA, fmt = D.fmtINR;

  function SectionLabel({ n, title, sub, children }) {
    return (
      <div className="row spread" style={{ margin: '6px 0 16px', flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div className="sec-eyebrow" style={{ marginBottom: 8 }}>Module {n}</div>
          <h2 style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-.02em' }}>{title}</h2>
          {sub && <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>{sub}</div>}
        </div>
        {children}
      </div>
    );
  }

  function StatusCard({ icon, title, code, date, color }) {
    const s = D.STATUS_CODES[code] || {};
    const tone = s.tone || 'gray';
    const tc = { green: ['var(--emerald-50)', 'var(--emerald-700)', 'var(--emerald-500)'], amber: ['var(--amber-50)', 'var(--amber-600)', 'var(--amber-500)'], blue: ['var(--blue-50)', 'var(--blue-600)', 'var(--blue-500)'], gray: ['var(--bg-2)', 'var(--muted)', '#c2cedd'] }[tone];
    return (
      <div className="card stat-card card-pad" style={{ '--accent': tc[2], display: 'flex', flexDirection: 'column', gap: 14, paddingTop: 22 }}>
        <div className="row spread">
          <span style={{ width: 44, height: 44, borderRadius: 12, display: 'grid', placeItems: 'center', background: tc[0], color: tc[1] }}><Icon name={icon} size={21} /></span>
          {tone === 'green' ? <Icon name="checkCircle" size={20} style={{ color: 'var(--emerald-500)' }} /> : tone === 'amber' ? <Icon name="alert" size={20} style={{ color: 'var(--amber-500)' }} /> : <Icon name="clock" size={20} style={{ color: 'var(--blue-500)' }} />}
        </div>
        <div>
          <div style={{ fontSize: 12.5, color: 'var(--faint)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.04em' }}>{title}</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17.5, marginTop: 5, color: tc[1] }}>{s.label}</div>
          <div className="faint" style={{ fontSize: 12, marginTop: 5 }}>{date}</div>
        </div>
      </div>
    );
  }

  function Dashboard({ go }) {
    const [view, setView] = React.useState(() => localStorage.getItem('yeida_dash') || 'plot');
    const A = D.authorityStatus;
    const switchTo = (v) => { setView(v); localStorage.setItem('yeida_dash', v); };

    return (
      <div>
        {/* Welcome banner */}
        <div className="anim-fade-up" style={{ position: 'relative', overflow: 'hidden', borderRadius: 20, padding: '30px 34px', marginBottom: 18, background: 'radial-gradient(130% 170% at 92% -10%, #1b4d8f 0%, #0b2548 52%, #071b38 100%)', color: '#fff', boxShadow: '0 18px 44px -22px rgba(8,26,57,.7)' }}>
          <div style={{ position: 'absolute', inset: 0, opacity: .45, backgroundImage: 'linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)', backgroundSize: '38px 38px', maskImage: 'radial-gradient(70% 90% at 85% 0%,#000,transparent)' }} />
          {/* decorative concentric rings */}
          <svg viewBox="0 0 200 200" style={{ position: 'absolute', right: -30, top: -40, width: 280, height: 280, opacity: .5 }} aria-hidden="true">
            <circle cx="100" cy="100" r="90" fill="none" stroke="rgba(127,179,255,.18)" strokeWidth="1" />
            <circle cx="100" cy="100" r="64" fill="none" stroke="rgba(127,179,255,.16)" strokeWidth="1" />
            <circle cx="100" cy="100" r="38" fill="none" stroke="rgba(22,182,126,.3)" strokeWidth="1.5" strokeDasharray="4 5" />
          </svg>
          <div className="row spread" style={{ position: 'relative', flexWrap: 'wrap', gap: 18 }}>
            <div>
              <div className="row gap-2" style={{ fontSize: 12.5, color: '#9ff0cd', fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase' }}><span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--emerald-500)', boxShadow: '0 0 0 3px rgba(22,182,126,.25)' }} />Official Allottee Portal</div>
              <h1 style={{ color: '#fff', fontSize: 30, fontWeight: 800, marginTop: 10, letterSpacing: '-.02em' }}>Welcome back, {D.user.firstName}</h1>
              <div className="row gap-2" style={{ marginTop: 14, flexWrap: 'wrap' }}>
                <span className="badge" style={{ background: 'rgba(255,255,255,.1)', color: '#dce8f8', border: '1px solid rgba(255,255,255,.14)' }}><Icon name="building" size={13} />Plot {D.user.plot} · {D.user.sector}</span>
                <span className="badge" style={{ background: 'rgba(255,255,255,.1)', color: '#dce8f8', border: '1px solid rgba(255,255,255,.14)' }}><Icon name="user" size={13} />{D.user.relationship} · {D.user.isAllottee ? 'Allottee' : 'Representative'}</span>
                <span className="badge" style={{ background: 'rgba(22,182,126,.2)', color: '#9ff0cd', border: '1px solid rgba(22,182,126,.3)' }}><Icon name="file" size={12} />{A.leaseDeed.label}</span>
                <span className="badge" style={{ background: 'rgba(232,147,12,.2)', color: '#f7cd8a', border: '1px solid rgba(232,147,12,.3)' }}><Icon name="clock" size={12} />{A.atl.label}</span>
              </div>
            </div>
            <div className="row gap-3">
              <button className="btn" style={{ background: 'rgba(255,255,255,.12)', border: '1px solid rgba(255,255,255,.18)', color: '#fff' }} onClick={() => go('payments')}><Icon name="rupee" size={18} />Pay Dues</button>
              <button className="btn btn-emerald" onClick={() => go('journey')}><Icon name="sparkles" size={18} />What's next?</button>
            </div>
          </div>
        </div>

        {/* ===== Module switcher: Plot Dashboard (primary) · Construction Project Dashboard (secondary) ===== */}
        <div className="anim-fade-up" style={{ display: 'flex', gap: 12, marginBottom: 24, flexWrap: 'wrap' }}>
          {[
            { k: 'plot', icon: 'building', title: 'Yamuna Expressway · Plot Dashboard', sub: 'Authority status, records & payments', tag: 'Primary' },
            { k: 'construction', icon: 'construction', title: 'Construction Project Dashboard', sub: 'Build progress, milestones & contractor', tag: D.journey.constructionStarted ? 'Active' : 'Not started' },
          ].map(m => {
            const on = view === m.k;
            return (
              <button key={m.k} onClick={() => switchTo(m.k)} className="card mod-switch" style={{ flex: 1, minWidth: 280, textAlign: 'left', cursor: 'pointer', padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 14, border: on ? '1.5px solid var(--blue-400)' : '1px solid var(--line)', background: on ? 'linear-gradient(100deg, var(--blue-50), #fff)' : '#fff', boxShadow: on ? '0 0 0 4px rgba(38,112,230,.1)' : 'var(--sh-sm)' }}>
                <span style={{ width: 48, height: 48, borderRadius: 13, flex: 'none', display: 'grid', placeItems: 'center', background: on ? 'linear-gradient(150deg,var(--blue-500),var(--navy-800))' : 'var(--bg-2)', color: on ? '#fff' : 'var(--muted)' }}><Icon name={m.icon} size={24} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="row gap-2" style={{ flexWrap: 'wrap' }}>
                    <span style={{ fontWeight: 800, fontSize: 15.5, fontFamily: 'var(--font-display)', color: on ? 'var(--navy-800)' : 'var(--ink)' }}>{m.title}</span>
                    <span className={'badge badge-' + (m.tag === 'Primary' ? 'navy' : m.tag === 'Active' ? 'green' : 'gray')} style={{ fontSize: 10.5 }}>{m.tag}</span>
                  </div>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{m.sub}</div>
                </div>
                <span style={{ width: 22, height: 22, borderRadius: 99, flex: 'none', border: '2px solid ' + (on ? 'var(--blue-500)' : '#cdd7e4'), display: 'grid', placeItems: 'center' }}>{on && <span style={{ width: 10, height: 10, borderRadius: 99, background: 'var(--blue-500)' }} />}</span>
              </button>
            );
          })}
        </div>

        {view === 'plot' ? <PlotDashboard go={go} key="plot" /> : <ConstructionDashboard go={go} key="cons" />}
      </div>
    );
  }

  /* ============================ MODULE 1 — PLOT DASHBOARD (PRIMARY) ============================ */
  function PlotDashboard({ go }) {
    const totalDue = D.dues.reduce((s, d) => s + d.amount, 0);
    const paidPct = Math.round(D.property.paid / D.property.totalValue * 100);
    const A = D.authorityStatus;
    return (
      <div className="anim-fade-in">
        {/* Pending actions strip */}
        <div className="card anim-fade-up" style={{ padding: '14px 18px', marginBottom: 24, borderLeft: '4px solid var(--amber-500)', display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <span style={{ width: 38, height: 38, borderRadius: 10, flex: 'none', display: 'grid', placeItems: 'center', background: 'var(--amber-50)', color: 'var(--amber-600)' }}><Icon name="alert" size={20} /></span>
          <div style={{ flex: 1, minWidth: 200 }}>
            <div style={{ fontWeight: 700, fontSize: 14 }}>3 pending actions need your attention</div>
            <div className="muted" style={{ fontSize: 12.5 }}>ATL pending · 1 overdue payment · Soil Test Report awaited</div>
          </div>
          <div className="row gap-2">
            <button className="btn btn-outline btn-sm" onClick={() => go('payments')}>Clear dues</button>
            <button className="btn btn-primary btn-sm" onClick={() => go('construction')}>Resolve<Icon name="arrowR" size={15} /></button>
          </div>
        </div>

        <SectionLabel n="A" title="Authority Status & Records" sub="Official statuses and payment records from the Authority">
          <button className="btn btn-outline btn-sm" onClick={() => go('payments')}>View all records<Icon name="arrowR" size={15} /></button>
        </SectionLabel>

        <div className="stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 18 }}>
          <StatusCard icon="file" title="Lease Deed Status" code={A.leaseDeed.code} date={'Registered ' + A.leaseDeed.date} />
          <StatusCard icon="checkCircle" title="ATL Status" code={A.atl.code} date={A.atl.date} />
          <StatusCard icon="shield" title="Verification" code={A.verification.code} date={'Verified ' + A.verification.date} />
          <StatusCard icon="home" title="Possession" code={A.possession.code} date={'Granted ' + A.possession.date} />
        </div>

        {/* Authority Status — key metrics */}
        {(() => {
          const last = D.authorityRecords[D.authorityRecords.length - 1] || D.authorityRecords[0];
          const nextDue = [...D.dues].sort((a, b) => a.due.localeCompare(b.due))[0] || D.dues[0];
          const metrics = [
            { label: 'Total Paid', value: fmt(D.property.paid), sub: D.authorityRecords.length + ' receipts', icon: 'checkCircle', color: 'emerald' },
            { label: 'Outstanding Dues', value: fmt(totalDue), sub: D.dues.length + ' pending', icon: 'rupee', color: 'amber' },
            { label: 'Last Payment', value: fmt(last.amount), sub: last.date, icon: 'history', color: 'blue' },
            { label: 'Next Due', value: nextDue.due, sub: fmt(nextDue.amount) + ' · ' + nextDue.type, icon: 'calendar', color: 'navy' },
          ];
          const C = { emerald: ['var(--emerald-50)', 'var(--emerald-700)'], amber: ['var(--amber-50)', 'var(--amber-600)'], blue: ['var(--blue-50)', 'var(--blue-600)'], navy: ['#e9eefb', 'var(--navy-700)'] };
          return (
            <div className="stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 18 }}>
              {metrics.map(m => {
                const cc = C[m.color];
                return (
                  <div key={m.label} className="card metric-tile card-pad" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <span style={{ width: 44, height: 44, borderRadius: 12, flex: 'none', display: 'grid', placeItems: 'center', background: cc[0], color: cc[1] }}><Icon name={m.icon} size={21} /></span>
                    <div style={{ minWidth: 0 }}>
                      <div className="muted" style={{ fontSize: 12.5, fontWeight: 600 }}>{m.label}</div>
                      <div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, marginTop: 1 }}>{m.value}</div>
                      <div className="faint" style={{ fontSize: 11.5, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.sub}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          );
        })()}

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 18 }}>
          {/* Authority payments summary */}
          <div className="card card-pad anim-fade-up">
            <div className="row spread" style={{ marginBottom: 16 }}>
              <div><div className="kicker" style={{ color: 'var(--muted)' }}>Authority Payments</div><h3 style={{ fontSize: 17, marginTop: 6 }}>Premium &amp; lease account</h3></div>
              <button className="btn btn-ghost btn-sm" onClick={() => go('payments')}>Details</button>
            </div>
            <div className="row gap-5" style={{ flexWrap: 'wrap', marginBottom: 16 }}>
              <div><div className="muted" style={{ fontSize: 12.5, fontWeight: 600 }}>Total Premium</div><div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20 }}>{fmt(D.property.totalValue)}</div></div>
              <div><div className="muted" style={{ fontSize: 12.5, fontWeight: 600 }}>Deposited</div><div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: 'var(--emerald-700)' }}>{fmt(D.property.paid)}</div></div>
              <div><div className="muted" style={{ fontSize: 12.5, fontWeight: 600 }}>Balance</div><div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: 'var(--amber-600)' }}>{fmt(D.property.totalValue - D.property.paid)}</div></div>
            </div>
            <div className="progress" style={{ marginBottom: 8 }}><span style={{ width: paidPct + '%' }} /></div>
            <div className="row spread faint" style={{ fontSize: 12 }}><span>{paidPct}% of premium deposited</span><span>{D.authorityRecords.length} official receipts</span></div>
          </div>

          {/* Pending dues + due dates */}
          <div className="card card-pad anim-fade-up" style={{ animationDelay: '.06s' }}>
            <div className="row spread" style={{ marginBottom: 14 }}>
              <h3 style={{ fontSize: 17 }}>Pending Dues &amp; Due Dates</h3>
              <span className="badge badge-amber">{D.dues.length} pending</span>
            </div>
            <div className="col gap-2">
              {D.dues.map(d => (
                <div key={d.id} className="row spread" style={{ padding: '9px 0', borderBottom: '1px solid var(--line-2)' }}>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{d.label}</div>
                    <div className="row gap-2" style={{ marginTop: 3 }}>
                      <span className={'badge badge-' + (d.status === 'overdue' ? 'red' : d.status === 'due' ? 'amber' : 'gray')} style={{ fontSize: 10.5 }}>{d.status === 'overdue' ? 'Overdue' : d.status === 'due' ? 'Due soon' : 'Upcoming'}</span>
                      <span className="faint" style={{ fontSize: 11.5 }}><Icon name="calendar" size={11} style={{ verticalAlign: -1, marginRight: 3 }} />{d.due}</span>
                    </div>
                  </div>
                  <div className="num" style={{ fontWeight: 700, fontSize: 14 }}>{fmt(d.amount)}</div>
                </div>
              ))}
            </div>
            <button className="btn btn-primary btn-sm btn-block" style={{ marginTop: 12 }} onClick={() => go('payments')}>Pay {fmt(totalDue)}<Icon name="arrowR" size={15} /></button>
          </div>
        </div>

        {/* Official records table */}
        <div className="card anim-fade-up" style={{ overflow: 'hidden', marginBottom: 24 }}>
          <div className="row spread" style={{ padding: '18px 22px 6px' }}>
            <div><h3 style={{ fontSize: 17 }}>Official Authority Records</h3><p className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>Verified deposits &amp; challans on record with YEIDA</p></div>
            <button className="btn btn-outline btn-sm" onClick={() => go('payments')}><Icon name="download" size={15} />Statement</button>
          </div>
          <table className="tbl tbl-clean">
            <thead><tr><th>Head of Account</th><th>Challan No.</th><th>Date</th><th>Mode</th><th>Status</th><th style={{ textAlign: 'right' }}>Amount</th></tr></thead>
            <tbody>
              {D.authorityRecords.map(r => (
                <tr key={r.id}>
                  <td style={{ fontWeight: 600, color: 'var(--ink)' }}>{r.head}</td>
                  <td className="num faint">{r.challan}</td>
                  <td className="num">{r.date}</td>
                  <td>{r.mode}</td>
                  <td><span className="badge badge-green"><Icon name="check" size={12} />{r.status}</span></td>
                  <td className="num" style={{ textAlign: 'right', fontWeight: 700, color: 'var(--ink)' }}>{fmt(r.amount)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Latest Notices · AI Assistant · Recent Documents */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18 }}>
          <div className="card card-pad anim-fade-up">
            <div className="row spread" style={{ marginBottom: 14 }}>
              <h3 style={{ fontSize: 16 }}>Latest Notices</h3>
              <button className="btn btn-ghost btn-sm" onClick={() => go('notices')}>All</button>
            </div>
            <div className="col gap-3">
              {D.notices.slice(0, 3).map(n => (
                <button key={n.id} onClick={() => go('notices')} style={{ textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '8px 0', borderBottom: '1px solid var(--line-2)', display: 'flex', gap: 11 }}>
                  <span style={{ width: 30, height: 30, borderRadius: 8, flex: 'none', display: 'grid', placeItems: 'center', background: 'var(--blue-50)', color: 'var(--blue-600)' }}><Icon name={n.pinned ? 'flag' : 'notices'} size={14} /></span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 12.5, lineHeight: 1.3, color: 'var(--ink)' }}>{n.title}</div>
                    <div className="faint" style={{ fontSize: 11, marginTop: 2 }}>{n.cat} · {n.date}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          <div className="card card-pad anim-fade-up" style={{ animationDelay: '.06s', background: 'radial-gradient(130% 130% at 100% 0%,#16407e,#0b2548)', color: '#fff', display: 'flex', flexDirection: 'column' }}>
            <div className="row gap-3" style={{ marginBottom: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 11, display: 'grid', placeItems: 'center', background: 'rgba(255,255,255,.14)' }}><Icon name="sparkles" size={20} /></span>
              <div><h3 style={{ color: '#fff', fontSize: 16 }}>AI Assistant</h3><div style={{ fontSize: 12, color: '#9ff0cd' }}>Online · ask anything</div></div>
            </div>
            <div className="col gap-2" style={{ flex: 1 }}>
              {['What payments are pending?', 'What is my ATL status?'].map(q => (
                <button key={q} onClick={() => go('assistant')} style={{ textAlign: 'left', fontSize: 12.5, fontWeight: 500, color: '#dce8f8', padding: '9px 12px', borderRadius: 10, border: '1px solid rgba(255,255,255,.14)', background: 'rgba(255,255,255,.06)', cursor: 'pointer' }}>{q}</button>
              ))}
            </div>
            <button className="btn btn-emerald btn-sm btn-block" style={{ marginTop: 12 }} onClick={() => go('assistant')}><Icon name="chat" size={15} />Open Assistant</button>
          </div>

          <div className="card card-pad anim-fade-up" style={{ animationDelay: '.12s' }}>
            <div className="row spread" style={{ marginBottom: 14 }}>
              <h3 style={{ fontSize: 16 }}>Recent Documents</h3>
              <button className="btn btn-ghost btn-sm" onClick={() => go('documents')}>All</button>
            </div>
            <div className="col gap-2">
              {D.documents.slice(0, 4).map((d, i) => (
                <button key={i} onClick={() => go('documents')} className="row spread" style={{ width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '8px 0', borderBottom: '1px solid var(--line-2)' }}>
                  <span className="row gap-3" style={{ minWidth: 0 }}>
                    <span style={{ width: 30, height: 30, borderRadius: 8, flex: 'none', display: 'grid', placeItems: 'center', background: 'var(--bg-2)', color: 'var(--muted)' }}><Icon name="file" size={14} /></span>
                    <span style={{ minWidth: 0 }}><span style={{ fontWeight: 600, fontSize: 12.5, color: 'var(--ink)', display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</span><span className="faint" style={{ fontSize: 11 }}>{d.date}</span></span>
                  </span>
                  <Icon name="download" size={16} style={{ color: 'var(--faint)', flex: 'none' }} />
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ============================ MODULE 2 — CONSTRUCTION PROJECT DASHBOARD (SECONDARY) ============================ */
  function ConstructionDashboard({ go }) {
    const J = D.journey;
    return (
      <div className="anim-fade-in">
        <SectionLabel n="B" title="Construction Project Dashboard" sub="Your build journey, milestones and next required action">
          <button className="btn btn-outline btn-sm" onClick={() => go('construction')}>Open module<Icon name="arrowR" size={15} /></button>
        </SectionLabel>

        {/* construction financial / site widgets */}
        <div className="stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, marginBottom: 18 }}>
          <div className="card card-pad">
            <div className="row spread" style={{ marginBottom: 12 }}>
              <span style={{ width: 42, height: 42, borderRadius: 11, display: 'grid', placeItems: 'center', background: '#e9eefb', color: 'var(--navy-700)' }}><Icon name="building" size={21} /></span>
              <span className="badge badge-blue">{Math.round(D.construction.spent / D.construction.estimatedCost * 100)}% spent</span>
            </div>
            <div className="muted" style={{ fontSize: 13, fontWeight: 600 }}>Estimated Build Cost</div>
            <div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 23, marginTop: 3 }}>{fmt(D.construction.estimatedCost)}</div>
            <div className="progress" style={{ height: 6, marginTop: 10 }}><span style={{ width: Math.round(D.construction.spent / D.construction.estimatedCost * 100) + '%' }} /></div>
            <div className="faint" style={{ fontSize: 12, marginTop: 6 }}>{fmt(D.construction.spent)} spent to date</div>
          </div>
          <div className="card card-pad">
            <div className="row spread" style={{ marginBottom: 12 }}>
              <span style={{ width: 42, height: 42, borderRadius: 11, display: 'grid', placeItems: 'center', background: 'var(--emerald-50)', color: 'var(--emerald-700)' }}><Icon name="users" size={21} /></span>
              <span className="badge badge-green"><span className="dot" />{D.construction.contractor.status}</span>
            </div>
            <div className="muted" style={{ fontSize: 13, fontWeight: 600 }}>Contractor Status</div>
            <div style={{ fontWeight: 700, fontSize: 15.5, marginTop: 3 }}>{D.construction.contractor.name}</div>
            <div className="row gap-3 faint" style={{ fontSize: 12, marginTop: 8 }}>
              <span className="row gap-1"><Icon name="star" size={13} style={{ color: 'var(--amber-500)' }} />{D.construction.contractor.rating}</span>
              <span>Engaged since {D.construction.contractor.since}</span>
            </div>
          </div>
          <div className="card card-pad">
            <div className="row spread" style={{ marginBottom: 12 }}>
              <span style={{ width: 42, height: 42, borderRadius: 11, display: 'grid', placeItems: 'center', background: 'var(--amber-50)', color: 'var(--amber-600)' }}><Icon name="calendar" size={21} /></span>
              <span className={'badge badge-' + (D.construction.onSchedule ? 'green' : 'amber')}>{D.construction.onSchedule ? 'On schedule' : 'Delayed'}</span>
            </div>
            <div className="muted" style={{ fontSize: 13, fontWeight: 600 }}>Completion Forecast</div>
            <div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 23, marginTop: 3 }}>{D.construction.completionForecast}</div>
            <div className="faint" style={{ fontSize: 12, marginTop: 6 }}>Current: {D.construction.currentMilestone}</div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr 1fr', gap: 18 }}>
          {/* status + progress */}
          <div className="card card-pad anim-fade-up">
            <div className="row spread" style={{ marginBottom: 8 }}>
              <span className="badge badge-blue"><span className="dot" />{J.constructionStarted ? 'Construction Started' : 'Not Started'}</span>
            </div>
            <div className="row center" style={{ margin: '12px 0' }}><Donut value={J.progressPct} label={J.progressPct + '%'} sub="complete" color="var(--blue-500)" /></div>
            <div style={{ textAlign: 'center' }}>
              <div className="muted" style={{ fontSize: 12.5, fontWeight: 600 }}>Current Stage</div>
              <div style={{ fontWeight: 700, fontSize: 15, marginTop: 2 }}>{J.stage}</div>
            </div>
            <div style={{ marginTop: 14, padding: '11px 13px', borderRadius: 11, background: 'var(--blue-50)' }}>
              <div className="kicker" style={{ color: 'var(--blue-600)', fontSize: 11 }}>Next Required Action</div>
              <div className="row spread" style={{ marginTop: 6 }}>
                <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--blue-700)' }}>{J.nextAction}</span>
                <button className="btn btn-primary btn-sm" style={{ padding: '6px 10px' }} onClick={() => go('construction')}><Icon name="upload" size={14} /></button>
              </div>
            </div>
          </div>

          {/* milestones */}
          <div className="card card-pad anim-fade-up" style={{ animationDelay: '.06s' }}>
            <h3 style={{ fontSize: 16, marginBottom: 14 }}>Milestones</h3>
            <div className="col gap-4">
              {D.constructionMilestones.map((m, i) => (
                <div key={i}>
                  <div className="row spread" style={{ marginBottom: 6 }}>
                    <span style={{ fontWeight: 600, fontSize: 13 }}>{m.label}</span>
                    <span className={'badge badge-' + (m.pct === 100 ? 'green' : m.pct > 0 ? 'blue' : 'gray')} style={{ fontSize: 10.5 }}>{m.status}</span>
                  </div>
                  <div className="progress" style={{ height: 6 }}><span style={{ width: m.pct + '%', background: m.pct === 100 ? 'linear-gradient(90deg,var(--emerald-500),var(--emerald-600))' : undefined }} /></div>
                  <div className="faint" style={{ fontSize: 11, marginTop: 4 }}>{m.date}</div>
                </div>
              ))}
            </div>
          </div>

          {/* timeline */}
          <div className="card card-pad anim-fade-up" style={{ animationDelay: '.12s' }}>
            <h3 style={{ fontSize: 16, marginBottom: 16 }}>Activity Timeline</h3>
            <div style={{ position: 'relative', paddingLeft: 4 }}>
              {D.activity.slice(0, 4).map((a, i, arr) => {
                const cc = { emerald: 'var(--emerald-500)', blue: 'var(--blue-500)', amber: 'var(--amber-500)', navy: 'var(--navy-700)' }[a.color];
                return (
                  <div key={i} className="row" style={{ alignItems: 'flex-start', gap: 12, paddingBottom: i === arr.length - 1 ? 0 : 15, position: 'relative' }}>
                    {i !== arr.length - 1 && <span style={{ position: 'absolute', left: 13, top: 28, bottom: 0, width: 2, background: 'var(--line)' }} />}
                    <span style={{ width: 28, height: 28, borderRadius: 99, flex: 'none', display: 'grid', placeItems: 'center', background: '#fff', border: '2px solid ' + cc, color: cc, zIndex: 1 }}><Icon name={a.icon} size={13} /></span>
                    <div style={{ paddingTop: 2 }}>
                      <div style={{ fontWeight: 600, fontSize: 12.5 }}>{a.title}</div>
                      <div className="muted" style={{ fontSize: 11.5, marginTop: 1 }}>{a.desc}</div>
                      <div className="faint" style={{ fontSize: 11, marginTop: 2 }}>{a.time}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* construction payments shortcut + sample plans CTA */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginTop: 18 }}>
          <div className="card card-pad anim-fade-up row spread" style={{ alignItems: 'center', gap: 14 }}>
            <div className="row gap-3">
              <span style={{ width: 44, height: 44, borderRadius: 12, flex: 'none', display: 'grid', placeItems: 'center', background: 'var(--emerald-50)', color: 'var(--emerald-700)' }}><Icon name="rupee" size={21} /></span>
              <div><div style={{ fontWeight: 700, fontSize: 15 }}>Construction Payments</div><div className="muted" style={{ fontSize: 12.5 }}>Milestone invoices &amp; receipts</div></div>
            </div>
            <button className="btn btn-outline btn-sm" onClick={() => go('payments')}>Open<Icon name="arrowR" size={15} /></button>
          </div>
          <div className="card card-pad anim-fade-up row spread" style={{ animationDelay: '.06s', alignItems: 'center', gap: 14 }}>
            <div className="row gap-3">
              <span style={{ width: 44, height: 44, borderRadius: 12, flex: 'none', display: 'grid', placeItems: 'center', background: 'var(--blue-50)', color: 'var(--blue-600)' }}><Icon name="grid" size={21} /></span>
              <div><div style={{ fontWeight: 700, fontSize: 15 }}>Sample Plans &amp; Tours</div><div className="muted" style={{ fontSize: 12.5 }}>Designs matched to your plot</div></div>
            </div>
            <button className="btn btn-outline btn-sm" onClick={() => go('sampleplans')}>Open<Icon name="arrowR" size={15} /></button>
          </div>
        </div>
      </div>
    );
  }

  window.Dashboard = Dashboard;
})();