// Main app shell
const { useState: useStateA, useEffect: useEffectA } = React;

const App = () => {
  const { Icon, ToastHost } = window.SB_UI;
  const { NAV } = window.SB_DATA;
  const [page, setPage] = useState('dashboard');
  const [admin, setAdmin] = useState(() => {
    const token = localStorage.getItem(window.TOKEN_KEY);
    return token ? { token } : null;
  });

  if (!admin) {
    return <window.LoginPage onLogin={setAdmin} />;
  }
  const current = NAV.find(n => n.id === page);

  const PAGE = {
    dashboard: window.Dashboard,
    leads: window.Leads,
    conversations: window.Conversations,
    products: window.Products,
    scripts: window.Scripts,
    rules: window.Rules,
    campaigns: window.Campaigns,
    library: window.Library,
    lab: window.Lab,
    meta: window.Meta,
    settings: window.Settings,
  }[page];

  return (
    <ToastHost>
      <div className="app">
        <Sidebar page={page} setPage={setPage} />
        <main className="main">
          <Topbar page={current} />
          <div className="content">
            {PAGE ? <PAGE /> : <div className="empty"><div className="empty-icon"><Icon name="hammer" size={28} /></div><div>صفحه در دست ساخت</div></div>}
          </div>
        </main>
        <BottomNav page={page} setPage={setPage} />
      </div>
    </ToastHost>
  );
};

const Sidebar = ({ page, setPage }) => {
  const { Icon } = window.SB_UI;
  const { NAV } = window.SB_DATA;
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
            <path d="M3 7 L12 3 L21 7 L21 17 L12 21 L3 17 Z" stroke="white" strokeWidth="1.7" strokeLinejoin="round" />
            <circle cx="12" cy="12" r="3" fill="white" />
          </svg>
        </div>
        <div>
          <div className="brand-name">SalesBot</div>
          <div className="brand-sub mono">v2.4.0 — Pro</div>
        </div>
      </div>

      {NAV.map(n => (
        <div key={n.id}
          className={`nav-item ${page === n.id ? 'active' : ''}`}
          onClick={() => setPage(n.id)}>
          <span className="num">{n.num}</span>
          <Icon name={n.icon} size={16} />
          <span className="lab">{n.name}</span>
          {n.dot && <span className="badge-dot" />}
        </div>
      ))}

      <div className="sidebar-footer">
        <div className="avatar">ع‌م</div>
        <div className="user-meta" style={{ flex: 1, minWidth: 0 }}>
          <div className="nm">علی محمدی</div>
          <div className="rl">مدیر سیستم</div>
        </div>
        <button className="icon-btn" style={{ width: 30, height: 30 }}><Icon name="log-out" size={13} /></button>
      </div>
    </aside>
  );
};

const Topbar = ({ page }) => {
  const { Icon } = window.SB_UI;
  return (
    <header className="topbar">
      <div>
        <div className="page-title">{page?.name}</div>
        <div className="page-crumb mono">SalesBot &nbsp;/&nbsp; {page?.name}</div>
      </div>
      <div className="topbar-tools">
        <div className="search">
          <Icon name="search" size={14} color="var(--text-3)" />
          <input placeholder="جستجو در همه چیز..." />
          <span className="kbd">⌘K</span>
        </div>
        <button className="icon-btn"><Icon name="moon" size={15} /></button>
        <button className="icon-btn"><Icon name="bell" size={15} /><span className="dot" /></button>
        <button className="icon-btn"><Icon name="help-circle" size={15} /></button>
      </div>
    </header>
  );
};

const BottomNav = ({ page, setPage }) => {
  const { Icon } = window.SB_UI;
  const { NAV } = window.SB_DATA;
  return (
    <nav className="bottom-nav">
      {NAV.map(n => (
        <button key={n.id} className={`bn-item ${page === n.id ? 'active' : ''}`} onClick={() => setPage(n.id)}>
          <Icon name={n.icon} size={18} />
          <span>{n.name}</span>
        </button>
      ))}
    </nav>
  );
};

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