/* MAIN APP — async data loading + API integration */
const { useState, useEffect, useCallback } = React;

function App() {
  const [loading,    setLoading]    = useState(true);
  const [apiError,   setApiError]   = useState(false);
  const [data,       setData]       = useState(null);
  const [screen,     setScreen]     = useState('hero');
  const [floorN,     setFloorN]     = useState(null);
  const [unit,       setUnit]       = useState(null);
  const [sheetUnit,  setSheetUnit]  = useState(null);
  const [dir,        setDir]        = useState(() => {
    try { return JSON.parse(localStorage.getItem('jaroun_tweaks') || '{}').direction || 'cream'; }
    catch { return 'cream'; }
  });
  const [twOpen,     setTwOpen]     = useState(false);
  const [admin,      setAdmin]      = useState(() => window.JarounStore.isAdmin());
  const [loginOpen,  setLoginOpen]  = useState(false);

  useTweaksHost(setDir);

  /* ---- بارگذاری داده از API (با fallback به data.js) ---- */
  const fetchData = useCallback(async () => {
    setLoading(true);
    setApiError(false);
    try {
      const result = await window.JarounStore.fetchUnits();
      window.JAROUN = result;
      setData(result);
    } catch (e) {
      /* fallback: اگه data.js بارگذاری شده باشه ازش استفاده کن */
      if (window.JAROUN) {
        setData(window.JAROUN);
        setApiError(true);
      } else {
        setApiError(true);
      }
    }
    setLoading(false);
  }, []);

  useEffect(() => { fetchData(); }, [fetchData]);

  /* ---- login / logout ---- */
  async function doLogin(pw) {
    const ok = await window.JarounStore.login(pw);
    if (!ok) return false;
    setAdmin(true);
    setLoginOpen(false);
    await fetchData();
    return true;
  }

  function logout() {
    window.JarounStore.logout();
    setAdmin(false);
    setSheetUnit(null);
    fetchData();
  }

  /* ---- بعد از ذخیره/واگذاری، داده رو refresh کن ---- */
  async function onSaved() {
    const prevSheetUnitId = sheetUnit ? sheetUnit.id : null;
    await fetchData();
    /* واحد انتخاب‌شده رو از داده جدید پیدا کن */
    if (prevSheetUnitId && window.JAROUN) {
      for (const fl of window.JAROUN.floors) {
        const found = fl.units.find(u => u.id === prevSheetUnitId);
        if (found) { setUnit(found); setSheetUnit(found); break; }
      }
    }
  }

  useEffect(() => {
    document.documentElement.setAttribute('data-dir', dir);
    try {
      const s = JSON.parse(localStorage.getItem('jaroun_tweaks') || '{}');
      s.direction = dir;
      localStorage.setItem('jaroun_tweaks', JSON.stringify(s));
    } catch {}
  }, [dir]);

  function goFloors()  { setScreen('floors'); setUnit(null); setSheetUnit(null); }
  function pickFloor(n){ setFloorN(n); setScreen('plan'); setUnit(null); }
  function openUnit(u) { setUnit(u); }
  function openName(u) { if (admin) setSheetUnit(u); }

  /* ---- loading / error screen ---- */
  if (loading) return (
    <div className="app-loading">
      <div className="loading-spinner" />
      <div className="kicker en" style={{ marginTop: 18, opacity: .5 }}>LOADING · در حال بارگذاری</div>
    </div>
  );

  if (!data && apiError) return (
    <div className="app-loading">
      <div className="kicker en" style={{ color: 'var(--red)', marginBottom: 12 }}>خطا در اتصال به سرور</div>
      <button className="op-cta" style={{ width: 'auto', padding: '12px 28px' }} onClick={fetchData}>
        تلاش مجدد <span className="arrow">←</span>
      </button>
    </div>
  );

  const floor = data.floors.find(f => f.n === floorN);

  return (
    <React.Fragment>
      <div className="grain" />

      {apiError && (
        <div className="api-warn mono en">⚠ OFFLINE MODE · نمایش داده‌های محلی</div>
      )}

      {screen !== 'hero' && (
        <div className="topbar">
          <div className="brand" onClick={() => setScreen('hero')} style={{ cursor: 'pointer' }}>
            <img className="brand-logo" src={(window.__resources && window.__resources.logo) || "assets/logo.jpg"} alt="chegall" />
            <span className="brand-text">chegall</span>
          </div>
          <Breadcrumb screen={screen} floor={floor} onHome={() => setScreen('hero')} onFloors={goFloors} />
          <div className="topbar-right">
            {admin ? (
              <button className="admin-pill on" onClick={logout} title="خروج از حساب مدیر">
                <span className="dot" /> مدیر · خروج
              </button>
            ) : (
              <button className="admin-pill" onClick={() => setLoginOpen(true)}>
                <span className="lockico">▦</span> ورود مدیر
              </button>
            )}
            <div className="kicker">جَرون</div>
          </div>
        </div>
      )}

      {screen === 'hero'   && <Hero onEnter={goFloors} />}
      {screen === 'floors' && (
        <FloorSelect floors={data.floors} active={floorN} onPick={pickFloor} onBack={() => setScreen('hero')} />
      )}
      {screen === 'plan' && floor && (
        <FloorPlan floor={floor} selUnit={unit && unit.id} onUnit={openUnit} onBackFloors={goFloors} />
      )}

      <div className={'op-shell ' + (unit ? 'open' : '')}>
        {unit && floor && (
          <OwnerPanel unit={unit} floor={floor} admin={admin} onName={openName} onClose={() => setUnit(null)} />
        )}
      </div>
      <div className={'op-scrim ' + (unit && !sheetUnit ? 'on' : '')} onClick={() => setUnit(null)} />

      {sheetUnit && floor && admin && (
        <PersonSheet
          unit={sheetUnit} floor={floor} admin={admin}
          onClose={() => setSheetUnit(null)}
          onBackOwner={() => setSheetUnit(null)}
          onSaved={onSaved}
        />
      )}

      {loginOpen && <LoginModal onClose={() => setLoginOpen(false)} onLogin={doLogin} />}

      {twOpen  && <TweakPanel dir={dir} setDir={setDir} onClose={() => setTwOpen(false)} />}
      {!twOpen && <button className="tw-fab" onClick={() => setTwOpen(true)} aria-label="تنظیمات ظاهری">◐</button>}
    </React.Fragment>
  );
}

function TweakPanel({ dir, setDir, onClose }) {
  const dirs = [
    { id: 'cream', label: 'CREAM', sw: 'linear-gradient(90deg,#ECE7DD 60%,#E1251B 60%)' },
    { id: 'dark',  label: 'DARK',  sw: 'linear-gradient(90deg,#131210 60%,#F0392B 60%)' },
    { id: 'mono',  label: 'MONO',  sw: 'linear-gradient(90deg,#fff 60%,#FF2D16 60%)' },
  ];
  return (
    <div className="tw">
      <div className="tw-head">
        <span className="kicker">TWEAKS · ظاهر</span>
        <button className="op-x" style={{ fontSize: 22 }} onClick={onClose} aria-label="بستن">×</button>
      </div>
      <div className="tw-body">
        <div className="tw-label">DIRECTION · جهت طراحی</div>
        <div className="tw-dirs">
          {dirs.map(d => (
            <button key={d.id} className={'tw-dir ' + (dir === d.id ? 'on' : '')} onClick={() => setDir(d.id)}>
              <span className="tw-sw" style={{ background: d.sw }} />
              <span>{d.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function Breadcrumb({ screen, floor, onHome, onFloors }) {
  return (
    <div className="crumb mono en">
      <button onClick={onHome}>JAROUN</button>
      <span>/</span>
      <button onClick={onFloors} className={screen === 'floors' ? 'cur' : ''}>LEVELS</button>
      {screen === 'plan' && floor && (
        <React.Fragment>
          <span>/</span>
          <button className="cur">{floor.label_en}</button>
        </React.Fragment>
      )}
    </div>
  );
}

function useTweaksHost(setDir) {
  useEffect(() => {
    function onMsg(e) {
      const d = e.data;
      if (!d || d.type !== 'tweak:update') return;
      if (d.key === 'direction') setDir(d.value);
    }
    window.addEventListener('message', onMsg);
    try {
      const saved = JSON.parse(localStorage.getItem('jaroun_tweaks') || '{}');
      if (saved.direction) setDir(saved.direction);
    } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);