/* FLOOR SELECT + FLOOR PLAN (real plan image + pins) */

function FloorSelect({ floors, active, onPick, onBack }) {
  const [hover, setHover] = React.useState(null);
  const stack = [...floors].reverse(); // 7 at top
  const cur = floors.find(f => f.n === (hover || active || 7)) || floors[floors.length - 1] || null;
  if (!cur) return (
    <div className="screen floorselect">
      <header className="scr-head">
        <button className="btn" onClick={onBack}><span className="arrow">↗</span>ورودی</button>
        <div className="scr-head-mid"><h2 className="scr-title">انتخاب طبقه</h2></div>
      </header>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'center', flex:1 }}>
        <div className="kicker" style={{ opacity:.5 }}>در حال بارگذاری داده‌ها…</div>
      </div>
    </div>
  );
  return (
    <div className="screen floorselect">
      <header className="scr-head">
        <button className="btn" onClick={onBack}><span className="arrow">↗</span>ورودی</button>
        <div className="scr-head-mid">
          <h2 className="scr-title">انتخاب طبقه</h2>
        </div>
        <div className="kicker">۷ طبقه · ۷۷ واحد</div>
      </header>

      <div className="fs-body">
        <div className="fs-stack">
          {stack.map((f) => (
            <button
              key={f.n}
              className={'fs-floor ' + (active === f.n ? 'active ' : '') + (hover === f.n ? 'hov' : '')}
              onMouseEnter={() => setHover(f.n)}
              onMouseLeave={() => setHover(null)}
              onClick={() => onPick(f.n)}
            >
              <span className="fs-num mono en">{String(f.n).padStart(2, '0')}</span>
              <span className="fs-fa">{f.label_fa}</span>
              <span className="fs-tag">{f.tag_fa}</span>
              <span className="fs-arrow">→</span>
            </button>
          ))}
          <div className="fs-base"><span className="kicker">لابی · همکف</span></div>
        </div>

        <div className="fs-preview">
          <div className="fs-prev-card">
            <div className="fs-prev-plan">
              <img src={(window.__resources && window.__resources.plan) || "assets/plan.jpg"} alt="" />
              <div className="fs-prev-veil" />
            </div>
            <div className="fs-prev-meta">
              <div className="fs-prev-fa">{cur.label_fa}</div>
              <div className="fs-prev-row">
                <span>{faNum(cur.units.length)} واحد</span>
                <span>·</span>
                <span>{cur.tag_fa}</span>
              </div>
              <button className="op-cta fs-prev-cta" onClick={() => onPick(cur.n)}>
                مشاهدهٔ پلان طبقه <span className="arrow">←</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FloorPlan({ floor, onUnit, onBackFloors, selUnit }) {
  const wrapRef = React.useRef(null);
  return (
    <div className="screen floorplan">
      <header className="scr-head">
        <button className="btn" onClick={onBackFloors}><span className="arrow">↗</span>طبقات</button>
        <div className="scr-head-mid">
          <h2 className="scr-title">{floor.label_fa}</h2>
        </div>
        <div className="kicker">{floor.tag_fa}</div>
      </header>

      <div className="fp-body">
        <div className="fp-stage" ref={wrapRef}>
          <div className="fp-plan-wrap">
            <img className="fp-plan-img" src={(window.__resources && window.__resources.planCut) || "assets/plan-cut.png"} alt={'پلان ' + floor.label_fa} />
            {floor.units.map(u => (
              <button
                key={u.id}
                className={'unitpin ' + (selUnit === u.id ? 'on' : '')}
                style={{ left: u.xp + '%', top: u.yp + '%' }}
                onClick={() => onUnit(u)}
                title={'واحد ' + faNum(u.unitNo)}
                aria-label={'واحد ' + faNum(u.unitNo)}
              >
                <span className="unitpin-dot mono en">{faNum(u.unitNo)}</span>
              </button>
            ))}
          </div>
        </div>

        <aside className="fp-side">
          <div className="kicker">واحدهای این طبقه</div>
          <p className="fp-hint">روی دایره‌های قرمز روی پلان یا شمارهٔ هر واحد در فهرست زیر کلیک کنید تا مالک و اطلاعات واحد نمایش داده شود.</p>
          <ul className="fp-list">
            {floor.units.map(u => (
              <li key={u.id}
                  className={'fp-row ' + (selUnit === u.id ? 'on' : '')}
                  onClick={() => onUnit(u)}>
                <span className="mono en fp-row-no">{faNum(u.unitNo)}</span>
                <span className="fp-row-area">{faNum(u.area)} متر · {faNum(u.beds)} خواب</span>
                <span className="fp-row-arrow">→</span>
              </li>
            ))}
          </ul>
          <div className="fp-foot">{faNum(floor.units.length)} واحد در این طبقه</div>
        </aside>
      </div>
    </div>
  );
}

window.FloorSelect = FloorSelect;
window.FloorPlan = FloorPlan;