/* Sample Plans & Virtual Tours + First-time Journey ("What would you like to do next?") */
(function () {
  const { useState } = React;
  const Icon = window.Icon, PageHead = window.PageHead;
  const D = window.YEIDA;

  /* ---------------- SAMPLE PLANS & VIRTUAL TOURS ---------------- */
  const FILTERS = [
    { key: 'all', label: 'All Plans' },
    { key: 'size', label: 'My Plot Size (300 sq.m)', test: p => p.size === '300 sq.m' },
    { key: 'facing', label: 'My Orientation (East)', test: p => p.facing === 'East' },
    { key: 'tour', label: '3D Walkthrough', test: p => p.tour },
  ];

  function PlanThumb({ accent }) {
    return (
      <svg viewBox="0 0 320 170" width="100%" style={{ display: 'block' }}>
        <rect width="320" height="170" fill={accent} opacity="0.1" />
        <rect x="40" y="34" width="240" height="104" fill="#fff" stroke={accent} strokeWidth="2" />
        {/* room partitions — schematic floor plan */}
        <line x1="150" y1="34" x2="150" y2="138" stroke={accent} strokeWidth="1.5" opacity=".5" />
        <line x1="40" y1="86" x2="150" y2="86" stroke={accent} strokeWidth="1.5" opacity=".5" />
        <line x1="150" y1="92" x2="280" y2="92" stroke={accent} strokeWidth="1.5" opacity=".5" />
        <line x1="215" y1="34" x2="215" y2="92" stroke={accent} strokeWidth="1.5" opacity=".5" />
        <rect x="58" y="50" width="26" height="20" rx="2" fill={accent} opacity=".25" />
        <rect x="170" y="50" width="30" height="22" rx="2" fill={accent} opacity=".25" />
        <circle cx="245" cy="120" r="14" fill="none" stroke={accent} strokeWidth="1.5" opacity=".4" />
        {/* compass */}
        <g transform="translate(292,28)"><circle r="11" fill="#fff" stroke={accent} strokeWidth="1" /><path d="M0,-7 L3,2 L0,0 L-3,2 Z" fill={accent} /><text y="-13" textAnchor="middle" fontSize="7" fontWeight="700" fill={accent}>N</text></g>
      </svg>
    );
  }

  function SamplePlans({ go, toast }) {
    const [f, setF] = useState('all');
    const active = FILTERS.find(x => x.key === f);
    const list = D.samplePlans.filter(p => !active.test || active.test(p));
    const [tour, setTour] = useState(null);
    return (
      <div>
        <PageHead title="Sample Plans & Virtual Tours" subtitle="Architect-designed plans matched to your plot — explore before you build">
          <button className="btn btn-outline" onClick={() => go('journey')}><Icon name="chevL" size={17} />What's next</button>
          <button className="btn btn-primary" onClick={() => go('construction')}><Icon name="construction" size={18} />Start Construction</button>
        </PageHead>

        {/* hero strip */}
        <div className="card anim-fade-up" style={{ overflow: 'hidden', marginBottom: 18, display: 'grid', gridTemplateColumns: '1.4fr 1fr' }}>
          <div style={{ padding: '26px 28px' }}>
            <span className="badge badge-blue" style={{ marginBottom: 12 }}><Icon name="sparkles" size={13} />Plot-specific guidance</span>
            <h2 style={{ fontSize: 23 }}>Plans tailored to Plot B-47</h2>
            <p className="muted" style={{ fontSize: 14.5, lineHeight: 1.6, marginTop: 10, maxWidth: 460 }}>Based on your 300 sq.m east-facing plot in Sector 18, here are orientation- and size-appropriate designs with 3D walkthroughs and virtual tours.</p>
            <div className="row gap-3" style={{ marginTop: 18, flexWrap: 'wrap' }}>
              {[['Plot size', '300 sq.m'], ['Facing', 'East'], ['Permissible FAR', '1.5'], ['Max height', '15 m']].map(([l, v]) => (
                <div key={l} style={{ background: 'var(--bg)', borderRadius: 11, padding: '10px 14px' }}><div className="faint" style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase' }}>{l}</div><div style={{ fontWeight: 700, fontSize: 15, marginTop: 2 }}>{v}</div></div>
              ))}
            </div>
          </div>
          <div style={{ background: 'radial-gradient(120% 120% at 100% 0%,#16407e,#0b2548)', display: 'grid', placeItems: 'center', padding: 24 }}>
            <div style={{ textAlign: 'center', color: '#fff' }}>
              <div style={{ width: 64, height: 64, borderRadius: 16, margin: '0 auto 12px', display: 'grid', placeItems: 'center', background: 'rgba(255,255,255,.12)', border: '1px solid rgba(255,255,255,.2)' }}><Icon name="eye" size={30} /></div>
              <div style={{ fontWeight: 700, fontSize: 16 }}>Immersive 3D Walkthroughs</div>
              <div style={{ fontSize: 12.5, color: 'rgba(200,216,240,.8)', marginTop: 4 }}>Tour {D.samplePlans.filter(p => p.tour).length} designs in virtual reality</div>
            </div>
          </div>
        </div>

        {/* filters */}
        <div className="row gap-2" style={{ marginBottom: 18, flexWrap: 'wrap' }}>
          {FILTERS.map(x => <button key={x.key} className={'chip' + (f === x.key ? ' active' : '')} onClick={() => setF(x.key)}>{x.label}</button>)}
        </div>

        {/* plan grid */}
        <div className="stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
          {list.map(p => (
            <div key={p.id} className="card card-hover" style={{ overflow: 'hidden' }}>
              <div style={{ position: 'relative' }}>
                <PlanThumb accent={p.accent} />
                {p.tour && <button onClick={() => setTour(p)} style={{ position: 'absolute', top: 12, right: 12, display: 'flex', alignItems: 'center', gap: 6, padding: '6px 11px', borderRadius: 99, border: 'none', background: 'rgba(8,26,57,.78)', color: '#fff', fontSize: 12, fontWeight: 600, cursor: 'pointer', backdropFilter: 'blur(4px)' }}><Icon name="eye" size={14} />3D Tour</button>}
              </div>
              <div style={{ padding: '16px 18px 18px' }}>
                <div className="row spread">
                  <h4 style={{ fontSize: 17 }}>{p.name}</h4>
                  <span className="badge badge-gray" style={{ fontSize: 11 }}>{p.style}</span>
                </div>
                <div className="row gap-4" style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--line-2)', fontSize: 13, color: 'var(--ink-2)', fontWeight: 600 }}>
                  <span className="row gap-2"><Icon name="ruler" size={16} style={{ color: 'var(--muted)' }} />{p.size}</span>
                  <span className="row gap-2"><Icon name="bed" size={16} style={{ color: 'var(--muted)' }} />{p.beds} BHK</span>
                  <span className="row gap-2"><Icon name="building" size={16} style={{ color: 'var(--muted)' }} />{p.floors}</span>
                </div>
                <div className="row gap-2" style={{ marginTop: 14 }}>
                  <button className="btn btn-outline btn-sm" style={{ flex: 1 }} onClick={() => setTour(p)}><Icon name="eye" size={15} />View Plan</button>
                  <button className="btn btn-ghost btn-sm" style={{ border: '1px solid var(--line)' }} onClick={() => toast && toast('Plan downloaded')}><Icon name="download" size={15} /></button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {tour && <TourModal plan={tour} onClose={() => setTour(null)} />}
      </div>
    );
  }

  function TourModal({ plan, onClose }) {
    return (
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(8,26,57,.6)', backdropFilter: 'blur(4px)', display: 'grid', placeItems: 'center', zIndex: 1000, padding: 24 }}>
        <div onClick={e => e.stopPropagation()} className="anim-pop card" style={{ width: 760, maxWidth: '100%', padding: 0, overflow: 'hidden' }}>
          <div className="row spread" style={{ padding: '16px 22px', borderBottom: '1px solid var(--line)' }}>
            <div><div style={{ fontWeight: 700, fontSize: 16 }}>{plan.name}</div><div className="faint" style={{ fontSize: 12.5 }}>{plan.style} · {plan.size} · {plan.facing} facing</div></div>
            <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
          </div>
          <div style={{ position: 'relative', height: 380, background: 'radial-gradient(120% 120% at 50% 0%,#16407e,#081a39)', display: 'grid', placeItems: 'center' }}>
            <div style={{ position: 'absolute', inset: 0, opacity: .3, backgroundImage: 'linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)', backgroundSize: '40px 40px' }} />
            <div style={{ textAlign: 'center', color: '#fff', position: 'relative' }}>
              <div style={{ width: 80, height: 80, borderRadius: 99, margin: '0 auto 16px', display: 'grid', placeItems: 'center', background: 'rgba(255,255,255,.12)', border: '1px solid rgba(255,255,255,.25)', cursor: 'pointer' }}><Icon name="arrowR" size={36} /></div>
              <div style={{ fontWeight: 700, fontSize: 18 }}>3D Virtual Walkthrough</div>
              <div style={{ fontSize: 13, color: 'rgba(200,216,240,.8)', marginTop: 6 }}>Immersive tour placeholder — drop in your Matterport / 360° embed</div>
            </div>
          </div>
          <div className="row spread" style={{ padding: '14px 22px' }}>
            <div className="row gap-2">{['Living', 'Bedrooms', 'Kitchen', 'Terrace'].map((r, i) => <span key={r} className={'chip' + (i === 0 ? ' active' : '')} style={{ fontSize: 12 }}>{r}</span>)}</div>
            <button className="btn btn-primary btn-sm"><Icon name="download" size={15} />Download Plan</button>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- JOURNEY: "What would you like to do?" (7 action cards) ---------------- */
  function Journey({ go }) {
    const COL = { blue: ['var(--blue-50)', 'var(--blue-600)'], navy: ['#e9eefb', 'var(--navy-700)'], amber: ['var(--amber-50)', 'var(--amber-600)'], emerald: ['var(--emerald-50)', 'var(--emerald-700)'] };
    return (
      <div>
        <div className="anim-fade-up" style={{ textAlign: 'center', maxWidth: 640, margin: '8px auto 30px' }}>
          <div style={{ width: 60, height: 60, borderRadius: 16, margin: '0 auto 16px', display: 'grid', placeItems: 'center', background: 'linear-gradient(150deg,var(--blue-500),var(--navy-800))', color: '#fff', boxShadow: 'var(--sh-glow)' }}><Icon name="sparkles" size={30} /></div>
          <h1 style={{ fontSize: 30, fontWeight: 800 }}>What would you like to do?</h1>
          <p className="muted" style={{ fontSize: 15, marginTop: 8 }}>Your plot is verified, {D.user.firstName}. Choose an action to get started — you can always come back here.</p>
        </div>

        <div className="stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, maxWidth: 1020, margin: '0 auto' }}>
          {D.onboardingActions.map((c, i) => {
            const cc = COL[c.color];
            const wide = i === 6; // last card spans for 7-card balance
            return (
              <button key={c.id} onClick={() => go(c.route)} className="card card-hover" style={{ textAlign: 'left', cursor: 'pointer', padding: '24px 22px', border: '1px solid var(--line)', gridColumn: wide ? '2 / 3' : undefined, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <span style={{ width: 54, height: 54, borderRadius: 14, display: 'grid', placeItems: 'center', background: cc[0], color: cc[1] }}><Icon name={c.icon} size={26} /></span>
                <div>
                  <div className="row spread"><div style={{ fontWeight: 700, fontSize: 16.5 }}>{c.title}</div><Icon name="arrowR" size={18} style={{ color: 'var(--faint)' }} /></div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 4, lineHeight: 1.45 }}>{c.desc}</div>
                </div>
              </button>
            );
          })}
        </div>

        <div style={{ textAlign: 'center', marginTop: 28 }}>
          <button className="btn btn-ghost" onClick={() => go('dashboard')}>Skip to dashboard<Icon name="arrowR" size={16} /></button>
        </div>
      </div>
    );
  }

  Object.assign(window, { SamplePlans, Journey });
})();