/* My Plot */
(function () {
  const Icon = window.Icon, PageHead = window.PageHead, SectorMap = window.SectorMap;
  const D = window.YEIDA, fmt = D.fmtINR, P = D.property;

  const timeline = [
    { title: 'Plot Allotted', date: '14 Mar 2019', desc: 'Allotment letter issued for Plot B-47', color: 'emerald', icon: 'check' },
    { title: 'Possession Granted', date: '22 Aug 2019', desc: 'Physical possession handed over', color: 'emerald', icon: 'home' },
    { title: 'Lease Deed Registered', date: '05 Sep 2019', desc: '90-year lease registered at Sub-Registrar', color: 'emerald', icon: 'file' },
    { title: 'Building Plan Sanctioned', date: '18 Feb 2026', desc: 'Construction approval granted', color: 'blue', icon: 'construction' },
    { title: 'Construction In Progress', date: 'Ongoing', desc: 'Ground floor structure — 65% complete', color: 'amber', icon: 'building' },
  ];

  function InfoRow({ label, value, strong }) {
    return (
      <div className="row spread" style={{ padding: '11px 0', borderBottom: '1px solid var(--line-2)' }}>
        <span className="muted" style={{ fontSize: 13.5 }}>{label}</span>
        <span style={{ fontSize: 13.5, fontWeight: strong ? 800 : 600, color: 'var(--ink)' }}>{value}</span>
      </div>
    );
  }

  function MyPlot({ go }) {
    return (
      <div>
        <PageHead title="My Plot" subtitle={`${P.sector} · Plot ${P.plot} · ${P.category}`}>
          <button className="btn btn-outline" onClick={() => go('documents')}><Icon name="documents" size={18} />Documents</button>
          <button className="btn btn-primary" onClick={() => go('construction')}><Icon name="construction" size={18} />Construction</button>
        </PageHead>

        {/* hero property card */}
        <div className="card anim-fade-up" style={{ overflow: 'hidden', marginBottom: 18 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr' }}>
            <div style={{ padding: 26 }}>
              <div className="row spread" style={{ marginBottom: 18 }}>
                <div className="row gap-3">
                  <span style={{ width: 52, height: 52, borderRadius: 14, display: 'grid', placeItems: 'center', background: 'linear-gradient(150deg,var(--blue-500),var(--navy-800))', color: '#fff' }}><Icon name="building" size={26} /></span>
                  <div>
                    <h2 style={{ fontSize: 22 }}>Plot {P.plot}, {P.sector}</h2>
                    <div className="muted" style={{ fontSize: 13.5 }}>Allotment {P.allotmentNo}</div>
                  </div>
                </div>
                <div className="row gap-2"><window.StatusBadge code="LD_COMPLETED" /><window.StatusBadge code="ATL_PENDING" /></div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginBottom: 8 }}>
                {[['Plot Size', P.size], ['Category', P.category], ['Facing', P.facing], ['Block', P.block], ['Road Width', P.road], ['Lease Period', P.leasePeriod]].map(([l, v]) => (
                  <div key={l} style={{ background: 'var(--bg)', borderRadius: 11, padding: '12px 14px' }}>
                    <div className="faint" style={{ fontSize: 11.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.04em' }}>{l}</div>
                    <div style={{ fontWeight: 700, fontSize: 15, marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: 'radial-gradient(120% 120% at 100% 0%,#16407e,#0b2548)', color: '#fff', padding: 26, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ fontSize: 12.5, color: 'rgba(200,216,240,.8)', fontWeight: 600 }}>Total Premium Value</div>
              <div className="num" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, marginTop: 4 }}>{fmt(P.totalValue)}</div>
              <div className="progress" style={{ margin: '16px 0 8px', background: 'rgba(255,255,255,.14)' }}><span style={{ width: Math.round(P.paid / P.totalValue * 100) + '%' }} /></div>
              <div className="row spread" style={{ fontSize: 13 }}>
                <span style={{ color: '#9ff0cd', fontWeight: 700 }}>{fmt(P.paid)} paid</span>
                <span style={{ color: 'rgba(200,216,240,.8)' }}>{fmt(P.totalValue - P.paid)} balance</span>
              </div>
              <div style={{ marginTop: 18, fontSize: 12.5, color: 'rgba(200,216,240,.75)', display: 'flex', gap: 18 }}>
                <span><Icon name="calendar" size={13} style={{ verticalAlign: -2, marginRight: 5 }} />Allotted {P.allottedOn}</span>
                <span><Icon name="rupee" size={13} style={{ verticalAlign: -2, marginRight: 5 }} />{P.rate}</span>
              </div>
            </div>
          </div>
        </div>

        {/* map + info */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18, marginBottom: 18 }}>
          <div className="anim-fade-up">
            <div className="row spread" style={{ marginBottom: 12 }}>
              <h3 style={{ fontSize: 17 }}>Plot Location</h3>
              <span className="muted row gap-2" style={{ fontSize: 13 }}><Icon name="mapPin" size={15} />{P.sector}, Yamuna Expressway, Gautam Buddh Nagar</span>
            </div>
            <SectorMap sectorName="Sector 18" myPlot="B-47" height={420} />
          </div>
          <div className="card card-pad anim-fade-up" style={{ animationDelay: '.08s', alignSelf: 'start' }}>
            <h3 style={{ fontSize: 17, marginBottom: 8 }}>Ownership Information</h3>
            <InfoRow label="Allottee" value={D.user.name} />
            <InfoRow label="Registered by" value={D.user.isAllottee ? 'Self (Allottee)' : D.user.relationship + ' (on behalf of allottee)'} />
            <InfoRow label="Allotment No." value={P.allotmentNo} />
            <InfoRow label="Allotted On" value={P.allottedOn} />
            <InfoRow label="Possession" value={P.possession} />
            <InfoRow label="Lease Period" value={P.leasePeriod} />
            <InfoRow label="Premium Rate" value={P.rate} />
            <InfoRow label="Total Value" value={fmt(P.totalValue)} strong />
            <button className="btn btn-outline btn-block btn-sm" style={{ marginTop: 16 }} onClick={() => go('transfer')}><Icon name="transfer" size={16} />Transfer Plot Ownership</button>
          </div>
        </div>

        {/* authority status + addresses */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 18 }}>
          <div className="card card-pad anim-fade-up">
            <h3 style={{ fontSize: 17, marginBottom: 14 }}>Authority Status</h3>
            <div className="col gap-3">
              {[['Lease Deed', 'LD_COMPLETED', 'file'], ['ATL (Allotment Transfer Letter)', 'ATL_PENDING', 'checkCircle'], ['Authority Verification', 'VERIFIED_AUTH', 'shield'], ['Possession', 'POSS_GRANTED', 'home']].map(([l, code, ic]) => (
                <div key={l} className="row spread" style={{ padding: '10px 0', borderBottom: '1px solid var(--line-2)' }}>
                  <span className="row gap-3" style={{ fontSize: 13.5, fontWeight: 600 }}><span style={{ width: 32, height: 32, borderRadius: 8, display: 'grid', placeItems: 'center', background: 'var(--bg-2)', color: 'var(--muted)' }}><Icon name={ic} size={16} /></span>{l}</span>
                  <window.StatusBadge code={code} />
                </div>
              ))}
            </div>
          </div>
          <div className="card card-pad anim-fade-up" style={{ animationDelay: '.06s' }}>
            <div className="row spread" style={{ marginBottom: 14 }}>
              <h3 style={{ fontSize: 17 }}>Addresses</h3>
              <button className="btn btn-outline btn-sm" onClick={() => go('profile')}><Icon name="edit" size={15} />Edit</button>
            </div>
            {[['Registered Address', D.user.registeredAddress, 'building'], ['Mailing / Current Address', D.user.mailingAddress, 'mail']].map(([title, a, ic]) => (
              <div key={title} style={{ marginBottom: 14 }}>
                <div className="row gap-2" style={{ marginBottom: 6 }}><Icon name={ic} size={15} style={{ color: 'var(--blue-600)' }} /><span style={{ fontWeight: 700, fontSize: 13 }}>{title}</span></div>
                <div className="muted" style={{ fontSize: 13, lineHeight: 1.5, paddingLeft: 23 }}>{a.line1}, {a.line2}<br />{a.city}, {a.state} — {a.pin}</div>
              </div>
            ))}
          </div>
        </div>

        {/* timeline */}
        <div className="card card-pad anim-fade-up">
          <h3 style={{ fontSize: 17, marginBottom: 20 }}>Property Timeline</h3>
          <div style={{ display: 'flex', justifyContent: 'space-between', position: 'relative' }}>
            <div style={{ position: 'absolute', left: 22, right: 22, top: 22, height: 2, background: 'var(--line)' }} />
            {timeline.map((t, i) => {
              const cc = { emerald: 'var(--emerald-500)', blue: 'var(--blue-500)', amber: 'var(--amber-500)' }[t.color];
              return (
                <div key={i} style={{ flex: 1, textAlign: 'center', position: 'relative', padding: '0 6px' }}>
                  <span style={{ width: 44, height: 44, borderRadius: 99, display: 'grid', placeItems: 'center', margin: '0 auto', background: '#fff', border: '2.5px solid ' + cc, color: cc, position: 'relative', zIndex: 1 }}><Icon name={t.icon} size={19} /></span>
                  <div style={{ fontWeight: 700, fontSize: 13.5, marginTop: 11 }}>{t.title}</div>
                  <div className="faint" style={{ fontSize: 12, marginTop: 2 }}>{t.date}</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 6, lineHeight: 1.4 }}>{t.desc}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  window.MyPlot = MyPlot;
})();