// app.jsx — shell: sidebar nav, top bar, routing, Tweaks panel.
const { useState: useShState, useEffect: useShEffect, useRef: useShRef } = React;

function LangSelect({ lang, onLang }) {
  const [open, setOpen] = useShState(false);
  const ref = useShRef(null);
  useShEffect(() => {
    if (!open) return;
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [open]);
  const cur = LANGS.find((l) => l.code === lang) || LANGS[0];
  return (
    <div className="lang-select" ref={ref}>
      <button className={`lang-trigger ${open ? 'open' : ''}`} onClick={() => setOpen((v) => !v)} title={tx('Language')}>
        {React.createElement(Icon.globe, { size: 16 })}
        <span className="lang-cur">{cur.label}</span>
        {React.createElement(Icon.chevD, { size: 13, className: 'caret' })}
      </button>
      {open && (
        <div className="lang-menu">
          {LANGS.map((l) => (
            <button key={l.code} className={l.code === lang ? 'on' : ''} onClick={() => { onLang(l.code); setOpen(false); }}>
              <span className="lang-code">{l.label}</span>
              <span className="lang-name">{l.name}</span>
              {l.code === lang && React.createElement(Icon.check, { size: 14, stroke: 2.6, className: 'tick' })}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function SearchModal({ onClose, go }) {
  const [q, setQ] = useShState('');
  const items = [
    { label: 'Requests', route: 'bookings', sub: '3 awaiting confirmation', icon: 'inbox' },
    { label: 'Price requests', route: 'quotes', sub: 'Customer orders open for offers', icon: 'tag' },
    { label: 'Work orders', route: 'orders', sub: '6 active jobs', icon: 'wrench' },
    { label: 'Services & pricing', route: 'pricing', sub: 'Manage bookable services', icon: 'tag' },
    { label: 'Purchasing', route: 'purchasing', sub: 'Open supply requests', icon: 'cart' },
    { label: 'Finances', route: 'finances', sub: 'Stripe payouts and invoices', icon: 'wallet' },
    { label: 'Team & roles', route: 'team', sub: 'Staff access and invites', icon: 'users' },
    { label: 'Settings', route: 'settings', sub: 'Shop profile and marketplace badges', icon: 'settings' },
  ].filter((x) => !q.trim() || (x.label + ' ' + x.sub).toLowerCase().includes(q.trim().toLowerCase()));
  const open = (route) => { go(route); onClose(); toast(fmt('Opened {name}', { name: tx(items.find((x) => x.route === route)?.label || route) }), 'search'); };
  return (
    <Modal title={tx('Search')} sub={tx('Jump to a workflow or object')} onClose={onClose}>
      <div className="field">
        <input className="input" value={q} onChange={(e) => setQ(e.target.value)} placeholder={tx('Search requests, orders, services…')} autoFocus />
      </div>
      <div className="col" style={{ gap: 8 }}>
        {items.map((item) => (
          <div className="list-item clickable" key={item.route} onClick={() => open(item.route)} style={{ border: '1px solid var(--border)', borderRadius: 'var(--r)', padding: '12px 14px' }}>
            <div className="veh-ic" style={{ width: 32, height: 32 }}>{React.createElement(Icon[item.icon], { size: 16 })}</div>
            <div style={{ flex: 1 }}><div className="strong sec">{tx(item.label)}</div><div className="tiny muted">{tx(item.sub)}</div></div>
            {React.createElement(Icon.chevR, { size: 15, style: { color: 'var(--text-3)' } })}
          </div>
        ))}
        {items.length === 0 && <div className="empty">{tx('No results')}</div>}
      </div>
    </Modal>
  );
}

function NotificationsModal({ onClose }) {
  const [items, setItems] = useShState([
    { id: 'n1', text: 'New request from Anna Nowak', route: 'bookings', icon: 'inbox' },
    { id: 'n2', text: 'Control arm request is overdue', route: 'purchasing', icon: 'alert' },
    { id: 'n3', text: 'Stripe payout pending capture', route: 'finances', icon: 'wallet' },
  ]);
  return (
    <Modal title={tx('Notifications')} sub={tx('Operational alerts from the shop')} onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>{tx('Close')}</button>
        <button className="btn btn-primary" disabled={items.length === 0} onClick={() => { setItems([]); toast(tx('Notifications cleared'), 'check'); }}>{tx('Mark all read')}</button>
      </>}>
      <div className="col" style={{ gap: 9 }}>
        {items.map((n) => (
          <div className="list-item" key={n.id} style={{ border: '1px solid var(--border)', borderRadius: 'var(--r)', padding: '12px 14px' }}>
            <div className="veh-ic" style={{ width: 32, height: 32 }}>{React.createElement(Icon[n.icon], { size: 16 })}</div>
            <div style={{ flex: 1 }}><div className="strong sec">{tx(n.text)}</div><div className="tiny muted">{tx('Just now')}</div></div>
            <button className="btn btn-ghost sm" onClick={() => setItems((xs) => xs.filter((x) => x.id !== n.id))}>{tx('Dismiss')}</button>
          </div>
        ))}
        {items.length === 0 && <div className="empty">{tx('No unread notifications')}</div>}
      </div>
    </Modal>
  );
}

function ShopModal({ profile, onClose, go }) {
  return (
    <Modal title={profile.name} sub={profile.address} onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>{tx('Close')}</button>
        <button className="btn btn-primary" onClick={() => { go('settings'); onClose(); }}>{tx('Open settings')}</button>
      </>}>
      <div className="row" style={{ gap: 14, marginBottom: 16, alignItems: 'flex-start' }}>
        <Avatar name={profile.name} photo={profile.photo} size={62} accent />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="strong" style={{ fontSize: 16 }}>{profile.name}</div>
          <div className="tiny muted" style={{ marginTop: 4, lineHeight: 1.45 }}>{tx(profile.description || 'Full-service workshop')}</div>
          <div className="tiny muted" style={{ marginTop: 6 }}>{profile.phone} · {profile.city}</div>
        </div>
      </div>
      <div className="grid-2">
        <div className="card card-pad" style={{ boxShadow: 'none', background: 'var(--surface-2)' }}>
          <div className="tiny muted">{tx('Rating')}</div>
          <div className="val" style={{ fontSize: 28, fontWeight: 700 }}>{SHOP.rating}</div>
          <div className="tiny muted">{SHOP.reviews} {tx('reviews')}</div>
        </div>
        <div className="card card-pad" style={{ boxShadow: 'none', background: 'var(--surface-2)' }}>
          <div className="tiny muted">{tx('Opening hours')}</div>
          <div className="sec strong" style={{ marginTop: 8 }}>{tx(profile.hours)}</div>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 14 }}>
        {SHOP.specializations.map((s) => <Badge key={s} kind="outline">{tx(s)}</Badge>)}
      </div>
    </Modal>
  );
}

function ApiConnectionModal({ onClose, onConnected }) {
  const [baseUrl, setBaseUrl] = useShState(AutoCareAPI.baseUrl());
  const [email, setEmail] = useShState('tomek@autofix.example');
  const [password, setPassword] = useShState('autocare-dev');
  const [busy, setBusy] = useShState(false);
  const [error, setError] = useShState('');
  const connect = async () => {
    setBusy(true);
    setError('');
    try {
      await AutoCareAPI.login({ baseUrl, email, password });
      await AutoCareAPI.hydrateTenantState();
      toast(tx('Connected to backend'), 'checkCircle');
      onConnected();
    } catch (e) {
      setError(e.message || tx('Could not connect to backend'));
    } finally {
      setBusy(false);
    }
  };
  return (
    <Modal title={tx('Connect backend')} sub={tx('Use real API data when the Go backend is running')} onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>{tx('Cancel')}</button>
        <button className="btn btn-primary" disabled={busy || !email || !password || !baseUrl} onClick={connect}>
          {busy ? tx('Connecting…') : tx('Connect')}
        </button>
      </>}>
      {error && <div className="card" style={{ background: 'var(--danger-soft)', color: 'var(--danger)', border: 0, boxShadow: 'none', padding: '10px 12px', marginBottom: 14 }}>{error}</div>}
      <div className="field"><label>{tx('API base URL')}</label><input className="input" value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)} /></div>
      <div className="field"><label>Email</label><input className="input" value={email} onChange={(e) => setEmail(e.target.value)} /></div>
      <div className="field" style={{ marginBottom: 0 }}><label>{tx('Password')}</label><input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} /></div>
    </Modal>
  );
}

const NAV = [
  { group: 'Operations', items: [
    { k: 'overview', label: 'Overview', icon: 'grid' },
    { k: 'bookings', label: 'Requests', icon: 'inbox', count: 3 },
    { k: 'quotes', label: 'Price requests', icon: 'tag', count: 2 },
    { k: 'orders', label: 'Work orders', icon: 'wrench', count: 6 },
    { k: 'schedule', label: 'Schedule', icon: 'calendar' },
  ]},
  { group: 'Shop', items: [
    { k: 'pricing', label: 'Services & pricing', icon: 'tag' },
    { k: 'purchasing', label: 'Purchasing', icon: 'cart', alert: true },
    { k: 'finances', label: 'Finances', icon: 'wallet' },
    { k: 'reviews', label: 'Reviews', icon: 'star' },
  ]},
  { group: 'Manage', items: [
    { k: 'team', label: 'Team & roles', icon: 'users' },
    { k: 'settings', label: 'Settings', icon: 'settings' },
  ]},
];

const ACCENTS = ['oklch(55% 0.17 256)', 'oklch(56% 0.13 162)', 'oklch(62% 0.16 47)', 'oklch(55% 0.18 296)', 'oklch(42% 0.03 260)'];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "oklch(55% 0.17 256)",
  "style": "calm",
  "density": "regular",
  "dark": false
}/*EDITMODE-END*/;

function Sidebar({ route, go, onShop, profile, counts, lang, onLang, onSync, onSearch, onNotifications }) {
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">{React.createElement(Icon.wrench, { size: 18, stroke: 2.4 })}</div>
        <div><div className="brand-name">AutoCare</div><div className="brand-sub">{tx('Manager cabinet')}</div></div>
      </div>
      <div className="sidebar-tools">
        <LangSelect lang={lang} onLang={onLang} />
        <button className="icon-btn" title={tx('Sync backend')} onClick={onSync}>{React.createElement(Icon.refresh, { size: 17 })}</button>
        <button className="icon-btn" title={tx('Search')} onClick={onSearch}>{React.createElement(Icon.search, { size: 17 })}</button>
        <button className="icon-btn" title={tx('Notifications')} style={{ position: 'relative' }} onClick={onNotifications}>
          {React.createElement(Icon.bell, { size: 17 })}
          <span style={{ position: 'absolute', top: 7, right: 8, width: 7, height: 7, borderRadius: '50%', background: 'var(--warning)', border: '1.5px solid var(--surface)' }} />
        </button>
      </div>
      <div className="shop-switch" onClick={onShop}>
        <Avatar name={profile.name || SHOP.name} photo={profile.photo} size={28} />
        <div className="shop-meta"><b>{profile.name}</b><span>{profile.city}</span></div>
        {React.createElement(Icon.chevD, { size: 15, style: { color: 'var(--text-3)' } })}
      </div>
      <div className="shop-rating" onClick={() => go('reviews')}>
        <span className="shop-rating-score">{React.createElement(Icon.star, { size: 13, fill: 'currentColor' })}<b>{SHOP.rating}</b></span>
        <span className="shop-rating-meta">{SHOP.reviews} {tx('reviews')} · {tx('3 new this week')}</span>
        {React.createElement(Icon.chevR, { size: 13, style: { color: 'var(--text-3)' } })}
      </div>
      <nav className="nav">
        {NAV.map((g) => (
          <div key={g.group}>
            <div className="nav-group-label">{tx(g.group)}</div>
            {g.items.map((it) => {
              const active = route === it.k || (it.k === 'orders' && route === 'workorder');
              return (
                <div key={it.k} className={`nav-item ${active ? 'active' : ''}`} onClick={() => go(it.k)}>
                  <span className="ico">{React.createElement(Icon[it.icon], { size: 17 })}</span>
                  {tx(it.label)}
                  {counts[it.k] != null && counts[it.k] > 0 && <span className="count">{counts[it.k]}</span>}
                  {it.alert && !counts[it.k] && <span className="dot-alert" />}
                </div>
              );
            })}
          </div>
        ))}
      </nav>
      <div className="nav-foot">
        <button className="customer-quote-link" onClick={() => window.open(CLIENT_WEB_URL, '_blank')}>
          {React.createElement(Icon.user, { size: 15 })}
          <span>{tx('Customer web app')}</span>
          {React.createElement(Icon.chevR, { size: 13 })}
        </button>
        <div className="user-chip">
          <Avatar name="Marta Wiśniewska" accent size={32} />
          <div style={{ flex: 1, minWidth: 0 }}><div className="sec strong" style={{ fontSize: 13 }}>Marta Wiśniewska</div><div className="tiny muted">{tx('Manager')}</div></div>
          {React.createElement(Icon.logout, { size: 16, style: { color: 'var(--text-3)' } })}
        </div>
      </div>
    </aside>
  );
}

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useShState('overview');
  const [selectedOrderId, setSelectedOrderId] = useShState(HERO.id);
  const [lang, setLangState] = useShState(I18N.lang);
  const [searchOpen, setSearchOpen] = useShState(false);
  const [notificationsOpen, setNotificationsOpen] = useShState(false);
  const [shopOpen, setShopOpen] = useShState(false);
  const [apiOpen, setApiOpen] = useShState(false);
  const strictApi = AutoCareAPI.strict();
  const [apiReady, setApiReady] = useShState(!strictApi);
  const [profile] = useStoredState('ac.shopProfile', SHOP);
  const [bookings] = useStoredState('ac.bookings', BOOKINGS);
  const [done] = useStoredState('ac.bookings.done', {});
  const [orders] = useStoredState('ac.workOrders', WORK_ORDERS);
  const [supply] = useStoredState('ac.supply', SUPPLY);
  const [quotes] = useStoredState('ac.quoteRequests', QUOTE_REQUESTS);
  const counts = {
    bookings: bookings.filter((b) => !done[b.id]).length,
    quotes: quotes.filter((q) => q.status === 'open' && !(q.offers || []).some((o) => o.workshopId === CURRENT_WORKSHOP_ID)).length,
    orders: orders.filter((w) => ['accepted', 'in_progress', 'ready'].includes(w.status)).length,
    purchasing: supply.filter((s) => ['open', 'overdue'].includes(s.status)).length,
  };
  I18N.lang = lang; // keep engine in sync before children render
  const go = (k, payload) => {
    if (k === 'workorder' && payload) setSelectedOrderId(payload);
    setRoute(k);
    document.querySelector('.main')?.scrollTo({ top: 0 });
  };
  const changeLang = (l) => { setLang(l); setLangState(l); };
  const syncBackend = async () => {
    if (!AutoCareAPI.enabled()) {
      setApiOpen(true);
      setApiReady(false);
      return;
    }
    const ok = await AutoCareAPI.hydrateTenantState();
    setApiReady(ok || !strictApi);
    if (!ok && strictApi) setApiOpen(true);
  };

  // apply theme + style + density to document root
  useShEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-theme', tw.dark ? 'dark' : 'light');
    r.setAttribute('data-style', tw.style);
    r.style.setProperty('--accent', tw.accent);
    r.style.setProperty('--accent-press', `color-mix(in oklch, ${tw.accent} 82%, black)`);
    const dens = tw.density === 'compact' ? '232px' : tw.density === 'comfy' ? '264px' : '248px';
    r.style.setProperty('--sidebar-w', dens);
  }, [tw]);

  useShEffect(() => { document.documentElement.setAttribute('lang', lang); }, [lang]);
  useShEffect(() => {
    if (AutoCareAPI.enabled()) {
      AutoCareAPI.hydrateTenantState().then((ok) => {
        setApiReady(ok || !strictApi);
        if (!ok && strictApi) setApiOpen(true);
      });
    } else if (strictApi) {
      setApiOpen(true);
    }
  }, []);

  if (strictApi && !apiReady) {
    return (
      <div className="viewport">
        <ToastHost />
        <ApiConnectionModal onClose={() => setApiOpen(true)} onConnected={async () => {
          const ok = await AutoCareAPI.hydrateTenantState();
          setApiReady(ok);
          setApiOpen(!ok);
        }} />
      </div>
    );
  }

  const views = {
    overview: <OverviewView go={go} />,
    bookings: <BookingsView go={go} />,
    quotes: <QuoteRequestsView />,
    orders: <OrdersView go={go} />,
    workorder: <WorkOrderView key={selectedOrderId} orderId={selectedOrderId} onBack={() => go('orders')} />,
    schedule: <ScheduleView />,
    pricing: <PricingView />,
    purchasing: <PurchasingView />,
    finances: <FinancesView />,
    reviews: <ReviewsView />,
    team: <TeamView />,
    settings: <SettingsView />,
  };

  return (
    <div className="viewport">
      <div className="shell">
        <Sidebar
          route={route}
          go={go}
          onShop={() => setShopOpen(true)}
          profile={profile}
          counts={counts}
          lang={lang}
          onLang={changeLang}
          onSync={syncBackend}
          onSearch={() => setSearchOpen(true)}
          onNotifications={() => setNotificationsOpen(true)}
        />
        <main className="main">{views[route]}</main>
      </div>

      <ToastHost />
      {searchOpen && <SearchModal onClose={() => setSearchOpen(false)} go={go} />}
      {notificationsOpen && <NotificationsModal onClose={() => setNotificationsOpen(false)} />}
      {shopOpen && <ShopModal profile={profile} onClose={() => setShopOpen(false)} go={go} />}
      {apiOpen && <ApiConnectionModal onClose={() => setApiOpen(false)} onConnected={() => setApiOpen(false)} />}

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor label="Accent color" value={tw.accent}
          options={ACCENTS}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Visual style" />
        <TweakRadio label="Style" value={tw.style} options={['calm', 'warm', 'sharp']} onChange={(v) => setTweak('style', v)} />
        <TweakRadio label="Density" value={tw.density} options={['compact', 'regular', 'comfy']} onChange={(v) => setTweak('density', v)} />
        <TweakToggle label="Dark mode" value={tw.dark} onChange={(v) => setTweak('dark', v)} />
      </TweaksPanel>
    </div>
  );
}

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