// admin/app.jsx — platform super-admin console: tenants, admins, lifecycle.
const { useState: useAd, useEffect: useAdEffect, useRef: useAdRef } = React;
const A = window.AdminData;
const API_BASE = (window.localStorage && localStorage.getItem('carfelloAdminApiBase')) || '/admin-api';
const PLATFORM_HEADERS = { 'Content-Type': 'application/json' };
const ADMIN_ACCESS_TOKEN_KEY = 'carfelloAdminAccessToken';
const ADMIN_REFRESH_TOKEN_KEY = 'carfelloAdminRefreshToken';
const ADMIN_USER_KEY = 'carfelloAdminUser';

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)", "dark": false }/*EDITMODE-END*/;
const CURRENCY_OPTIONS = [
  { code: 'PLN', label: 'PLN · Poland' },
  { code: 'EUR', label: 'EUR · Europe' },
  { code: 'USD', label: 'USD · United States' },
  { code: 'BYN', label: 'BYN · Belarus' },
];
const WORKSHOP_TYPE_OPTIONS = [
  { value: 'mechanical_repair', label: 'Mechanical repair' },
  { value: 'electrical_and_electronic_service', label: 'Electrical and electronic service' },
  { value: 'bodywork_and_paint', label: 'Bodywork and paint' },
  { value: 'tire_and_wheel_service', label: 'Tire and wheel service' },
  { value: 'detailing_and_car_wash', label: 'Detailing and car wash' },
];
const WORKSHOP_SPECIALIZATION_OPTIONS = ['mechanics', 'diagnostics', 'tires', 'brakes', 'suspension', 'electrical', 'bodywork', 'paint', 'pdr', 'detailing', 'car_wash', 'towing'];
const EUROPE_EUR_COUNTRIES = new Set(['AD','AL','AT','BA','BE','BG','CH','CY','CZ','DE','DK','EE','ES','FI','FR','GB','GR','HR','HU','IE','IS','IT','LI','LT','LU','LV','MC','MD','ME','MK','MT','NL','NO','PT','RO','RS','SE','SI','SK','SM','UA','VA']);

function AdLangSelect({ lang, onLang }) {
  const [open, setOpen] = useAd(false);
  const ref = useAdRef(null);
  useAdEffect(() => {
    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)}>
        {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 tenantInitials(name) { return A.initialsOf(name || '?'); }
function currencyForCountry(code) {
  const c = String(code || '').toUpperCase();
  if (c === 'PL') return 'PLN';
  if (c === 'BY') return 'BYN';
  if (c === 'US') return 'USD';
  if (EUROPE_EUR_COUNTRIES.has(c)) return 'EUR';
  return 'EUR';
}
function adminAccessToken() {
  try { return localStorage.getItem(ADMIN_ACCESS_TOKEN_KEY) || ''; } catch (_) { return ''; }
}
function setAdminSession(tokens) {
  try {
    if (tokens?.accessToken) localStorage.setItem(ADMIN_ACCESS_TOKEN_KEY, tokens.accessToken);
    if (tokens?.refreshToken) localStorage.setItem(ADMIN_REFRESH_TOKEN_KEY, tokens.refreshToken);
    if (tokens?.user) localStorage.setItem(ADMIN_USER_KEY, JSON.stringify(tokens.user));
  } catch (_) {}
}
function clearAdminSession() {
  try {
    localStorage.removeItem(ADMIN_ACCESS_TOKEN_KEY);
    localStorage.removeItem(ADMIN_REFRESH_TOKEN_KEY);
    localStorage.removeItem(ADMIN_USER_KEY);
  } catch (_) {}
}
function storedAdminUser() {
  try {
    const raw = localStorage.getItem(ADMIN_USER_KEY);
    return raw ? JSON.parse(raw) : null;
  } catch (_) {
    return null;
  }
}
function adminUserFromSession() {
  const user = storedAdminUser();
  if (!adminAccessToken() || !user) return null;
  return user;
}
function adminDisplayName(user) {
  const value = user?.name || user?.email || 'Platform admin';
  return String(value).split('@')[0].split(/[._-]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ') || value;
}
function slugifyTenant(value) {
  return (value || '').toLowerCase()
    .replace(/[ąćęłńóśźż]/g, (c) => ({ą:'a',ć:'c',ę:'e',ł:'l',ń:'n',ó:'o',ś:'s',ź:'z',ż:'z'}[c] || c))
    .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 48);
}
function googleMapsApiKey() {
  try {
    const params = new URLSearchParams(window.location.search || '');
    return params.get('googleMapsApiKey') || window.AUTOCARE_GOOGLE_MAPS_API_KEY || localStorage.getItem('carfelloGoogleMapsApiKey') || '';
  } catch (_) {
    return '';
  }
}
function tenantWebBaseUrl() {
  try {
    const params = new URLSearchParams(window.location.search || '');
    return (params.get('tenantWebUrl') || 'https://garage.carfello.app').replace(/\/$/, '');
  } catch (_) {
    return 'https://garage.carfello.app';
  }
}
function loadGoogleMaps() {
  const key = googleMapsApiKey();
  if (window.google?.maps?.places) return Promise.resolve(window.google);
  if (window.__carfelloAdminGoogleMapsPromise) return window.__carfelloAdminGoogleMapsPromise;
  if (!key) return Promise.reject(new Error('Google Maps API key is not configured'));
  window.__carfelloAdminGoogleMapsPromise = new Promise((resolve, reject) => {
    window.__carfelloAdminGoogleMapsReady = () => {
      if (window.google?.maps?.places) resolve(window.google);
      else reject(new Error('Google Maps loaded without Places runtime'));
    };
    const existing = document.getElementById('google-maps-admin-js');
    if (existing) return;
    const script = document.createElement('script');
    const params = new URLSearchParams({
      key,
      v: 'weekly',
      libraries: 'places',
      loading: 'async',
      auth_referrer_policy: 'origin',
      callback: '__carfelloAdminGoogleMapsReady',
    });
    script.id = 'google-maps-admin-js';
    script.async = true;
    script.defer = true;
    script.src = `https://maps.googleapis.com/maps/api/js?${params.toString()}`;
    script.onerror = () => reject(new Error('Google Maps could not load'));
    document.head.appendChild(script);
  });
  return window.__carfelloAdminGoogleMapsPromise;
}
function cityFromGooglePlace(place) {
  const components = Array.isArray(place?.address_components) ? place.address_components : [];
  const city = components.find((c) => c.types?.includes('locality'))
    || components.find((c) => c.types?.includes('postal_town'))
    || components.find((c) => c.types?.includes('administrative_area_level_2'));
  return city?.long_name || '';
}
function countryFromGooglePlace(place) {
  const components = Array.isArray(place?.address_components) ? place.address_components : [];
  const country = components.find((c) => c.types?.includes('country'));
  return (country?.short_name || '').toUpperCase();
}
function googleLatLng(location) {
  if (!location) return null;
  const lat = typeof location.lat === 'function' ? location.lat() : location.lat;
  const lng = typeof location.lng === 'function' ? location.lng() : location.lng;
  if (typeof lat !== 'number' || typeof lng !== 'number') return null;
  return { lat: Number(lat.toFixed(7)), lng: Number(lng.toFixed(7)) };
}
function placeCandidate(place, fallbackName = '') {
  const location = googleLatLng(place?.geometry?.location);
  if (!location) return null;
  return {
    name: place.name || fallbackName || '',
	    address: place.formatted_address || place.vicinity || '',
	    city: cityFromGooglePlace(place),
	    countryCode: countryFromGooglePlace(place),
	    googlePlaceId: place.place_id || '',
    location,
  };
}
function addressSearchQueries({ name, city, address }) {
  const raw = String(address || '').trim();
  if (raw.length < 4) return [];
  const c = String(city || '').trim();
  const n = String(name || '').trim();
  const queries = [
    n && `${n}, ${raw}, ${c}`,
    `${raw}, ${c}`,
    raw,
  ];
  const haystack = `${raw} ${c}`.toLowerCase();
  if (haystack.includes('минск') || haystack.includes('minsk')) queries.push(`${raw}, Minsk, Belarus`);
	  if (haystack.includes('тбилиси') || haystack.includes('tbilisi')) queries.push(`${raw}, Tbilisi, Georgia`);
	  if (haystack.includes('батуми') || haystack.includes('batumi')) queries.push(`${raw}, Batumi, Georgia`);
	  if (haystack.includes('milan') || haystack.includes('milano')) queries.push(`${raw}, Milan, Italy`, `${raw}, Milano, Italia`);
  return Array.from(new Set(queries.filter(Boolean).map((q) => q.replace(/\s+/g, ' ').trim())));
}
function bestGeocodeResult(results) {
  const list = Array.isArray(results) ? results : [];
  return list.find((r) => r.types?.includes('street_address'))
    || list.find((r) => r.types?.includes('premise'))
    || list.find((r) => r.types?.includes('establishment'))
    || list.find((r) => r.types?.includes('route'))
    || list[0]
    || null;
}
function adminLoginLocal(value) {
  return String(value || '')
    .toLowerCase()
    .replace(/@carfello\.app$/i, '')
    .replace(/[ąćęłńóśźż]/g, (c) => ({ą:'a',ć:'c',ę:'e',ł:'l',ń:'n',ó:'o',ś:'s',ź:'z',ż:'z'}[c] || c))
    .replace(/[_\s-]+/g, '.')
    .replace(/[^a-z0-9.]+/g, '')
    .replace(/\.{2,}/g, '.')
    .replace(/^\.+/g, '')
    .slice(0, 48);
}
function adminLoginFinal(login) {
  return adminLoginLocal(login).replace(/\.+$/g, '');
}
function adminLoginEmail(login) {
  const local = adminLoginFinal(login);
  return local ? `${local}@carfello.app` : '';
}
function adminNameFromLogin(login) {
  const parts = adminLoginFinal(login).split('.').filter(Boolean);
  if (parts.length === 0) return '';
  return parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
}
function hasFirstLastLogin(login) {
  return adminLoginFinal(login).split('.').filter(Boolean).length >= 2;
}
const COUNTRY_LABELS = {
  BY: 'Belarus',
  GE: 'Georgia',
  IT: 'Italy',
  PL: 'Poland',
};
const CITY_COUNTRIES = {
  batumi: 'GE',
  gdansk: 'PL',
  'gdańsk': 'PL',
  georgia: 'GE',
  krakow: 'PL',
  'kraków': 'PL',
  minsk: 'BY',
  milan: 'IT',
  milano: 'IT',
  poznan: 'PL',
  'poznań': 'PL',
  tbilisi: 'GE',
  warsaw: 'PL',
  warszawa: 'PL',
  wroclaw: 'PL',
  'wrocław': 'PL',
};
function normalizeRegionText(value) {
  return String(value || '').trim().toLowerCase();
}
function tenantCountry(t) {
  if (t.countryCode) return String(t.countryCode).toUpperCase();
  const city = normalizeRegionText(t.city);
  const address = normalizeRegionText(t.address);
  const haystack = `${city} ${address}`;
  if (CITY_COUNTRIES[city]) return CITY_COUNTRIES[city];
  if (haystack.includes('belarus') || haystack.includes('беларус') || haystack.includes('minsk') || haystack.includes('минск')) return 'BY';
  if (haystack.includes('georgia') || haystack.includes('tbilisi') || haystack.includes('batumi')) return 'GE';
  if (haystack.includes('italy') || haystack.includes('italia') || haystack.includes('milan') || haystack.includes('milano')) return 'IT';
  return 'PL';
}
function countryLabel(code) {
  return COUNTRY_LABELS[code] || code || 'Unknown';
}
function cityLabel(city) {
  return city && city !== '—' ? city : 'Unknown city';
}
function regionMatches(t, region) {
  if (!region || region.country === 'all') return true;
  if (tenantCountry(t) !== region.country) return false;
  if (!region.city || region.city === 'all') return true;
  return normalizeRegionText(t.city) === normalizeRegionText(region.city);
}
function regionLabel(region) {
  if (!region || region.country === 'all') return tx('all regions');
  if (region.city && region.city !== 'all') return cityLabel(region.city);
  return countryLabel(region.country);
}
function regionSub(region, count) {
  if (!region || region.country === 'all') return `${tx('All countries')} · ${count} ${tx('Tenants').toLowerCase()}`;
  const base = region.city && region.city !== 'all' ? countryLabel(region.country) : tx('All cities');
  return `${base} · ${count} ${tx('Tenants').toLowerCase()}`;
}
function regionOptions(tenants) {
  const countries = new Map();
  tenants.forEach((tenant) => {
    const country = tenantCountry(tenant);
    const city = cityLabel(tenant.city);
    if (!countries.has(country)) countries.set(country, new Map());
    const cities = countries.get(country);
    cities.set(city, (cities.get(city) || 0) + 1);
  });
  return Array.from(countries.entries())
    .sort(([a], [b]) => countryLabel(a).localeCompare(countryLabel(b)))
    .map(([country, cities]) => ({
      country,
      label: countryLabel(country),
      count: Array.from(cities.values()).reduce((sum, value) => sum + value, 0),
      cities: Array.from(cities.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([city, count]) => ({ city, count })),
    }));
}
function planMrr(plan) {
  const p = A.PLANS[plan] || A.PLANS.commission;
  return p.billing === 'Subscription' ? +(p.sub.replace(/\D/g, '')) || 0 : 0;
}
function displayStatus(raw) { return raw === 'suspended' ? 'suspended' : 'active'; }
function displayDate(value) {
  if (!value) return 'Today';
  const d = new Date(value);
  return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
}
function mapTenant(t) {
  const plan = A.PLANS[t.plan] ? t.plan : (t.monetizationModel === 'subscription' ? 'pro' : 'commission');
  return {
    id: t.id, name: t.name, slug: t.slug || slugifyTenant(t.name), url: t.publicUrl || `https://${t.slug || slugifyTenant(t.name)}.carfello.app`,
    initials: tenantInitials(t.name), city: t.city || '—', countryCode: t.countryCode || tenantCountry(t), currency: t.currency || currencyForCountry(t.countryCode || tenantCountry(t)), address: t.address || '—', plan,
    status: displayStatus(t.status), rawStatus: t.status, created: displayDate(t.createdAt),
    ad: !!t.ad,
    mrr: plan === 'commission' ? 0 : planMrr(plan), orders: 0,
    admins: (t.admins || []).map((a) => ({ id: a.id, name: a.name, email: a.email || a.phone || '—', role: a.role === 'owner' ? 'owner' : 'manager', status: a.status, acceptToken: a.acceptToken || '' })),
  };
}
function tenantAdminAcceptUrl(tenant, admin) {
  if (!tenant?.url || !admin?.acceptToken) return '';
  return `${tenant.url.replace(/\/$/, '')}/accept-invite?token=${encodeURIComponent(admin.acceptToken)}`;
}
function platformAdminAcceptUrl(admin) {
  if (!admin?.acceptToken) return '';
  return `${window.location.origin}/accept-invite?token=${encodeURIComponent(admin.acceptToken)}`;
}
function copyText(value, message) {
  if (!value) return;
  navigator.clipboard?.writeText(value).then(
    () => toast(message || tx('Copied'), 'check'),
    () => toast(value, 'mail')
  );
}
async function api(path, init = {}) {
  const token = adminAccessToken();
  const headers = { ...PLATFORM_HEADERS, ...(token ? { Authorization: `Bearer ${token}` } : {}), ...(init.headers || {}) };
  const response = await fetch(`${API_BASE}${path}`, { ...init, headers });
  if (response.status === 401 && window.__carfelloAdminLogout) {
    window.__carfelloAdminLogout();
  }
  if (!response.ok) {
    let message = `API ${response.status}`;
    try { const body = await response.json(); message = body.message || body.error || message; } catch (_) {}
    const error = new Error(message);
    error.status = response.status;
    throw error;
  }
  if (response.status === 204) return null;
  return response.json();
}
function TStatusBadge({ status }) { const m = A.TStatus[status] || A.TStatus.active; return <Badge kind={m.badge} pip>{tx(m.label)}</Badge>; }
function PlanPill({ plan }) { const p = A.PLANS[plan] || A.PLANS.commission; return <span className="plan-pill"><b>{p.label}</b><span>{p.sub}</span></span>; }

function RegionSelector({ tenants, region, onRegion, count }) {
  const [open, setOpen] = useAd(false);
  const ref = useAdRef(null);
  const countries = regionOptions(tenants);
  useAdEffect(() => {
    if (!open) return;
    const close = (event) => { if (ref.current && !ref.current.contains(event.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [open]);
  const choose = (next) => {
    onRegion(next);
    setOpen(false);
  };
  return (
    <div className="region-select" ref={ref}>
      <button className={`shop-switch region-trigger ${open ? 'open' : ''}`} onClick={() => setOpen((value) => !value)}>
        <div className="shop-av" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}>{React.createElement(Icon.globe, { size: 15 })}</div>
        <div className="shop-meta"><b>{regionLabel(region)}</b><span>{regionSub(region, count)}</span></div>
        {React.createElement(Icon.chevD, { size: 14, className: 'region-caret' })}
      </button>
      {open && (
        <div className="region-menu">
          <button className={!region || region.country === 'all' ? 'on' : ''} onClick={() => choose({ country: 'all', city: 'all' })}>
            <span>{tx('All regions')}</span><small>{tenants.length} {tx('Tenants').toLowerCase()}</small>
          </button>
          {countries.map((item) => (
            <div className="region-group" key={item.country}>
              <button className={region?.country === item.country && (!region.city || region.city === 'all') ? 'on' : ''} onClick={() => choose({ country: item.country, city: 'all' })}>
                <span>{item.label}</span><small>{item.count} {tx('Tenants').toLowerCase()}</small>
              </button>
              {region?.country === item.country && item.cities.map((city) => (
                <button key={city.city} className={`city ${normalizeRegionText(region.city) === normalizeRegionText(city.city) ? 'on' : ''}`} onClick={() => choose({ country: item.country, city: city.city })}>
                  <span>{city.city}</span><small>{city.count}</small>
                </button>
              ))}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function Sidebar({ route, go, counts, tenants, region, onRegion, user, onLogout }) {
  const items = [
    { k: 'overview', label: 'Overview', icon: 'grid' },
    { k: 'tenants', label: 'Tenants', icon: 'wrench', count: counts.total },
    { k: 'applications', label: 'Applications', icon: 'inbox', count: counts.applications },
    { k: 'admins', label: 'Platform administrators', icon: 'users', count: counts.admins },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">{React.createElement(Icon.shield, { size: 18, stroke: 2.4 })}</div>
        <div><div className="brand-name">Carfello</div><div className="brand-sub">{tx('Platform admin')}</div></div>
      </div>
      <RegionSelector tenants={tenants} region={region} onRegion={onRegion} count={counts.total} />
      <nav className="nav">
        <div className="nav-group-label">{tx('Platform')}</div>
        {items.map((it) => (
          <div key={it.k} className={`nav-item ${route.name === it.k || (it.k === 'tenants' && route.name === 'tenant') ? 'active' : ''}`} onClick={() => go(it.k)}>
            <span className="ico">{React.createElement(Icon[it.icon], { size: 17 })}</span>{tx(it.label)}
            {it.count != null && <span className="count">{it.count}</span>}
          </div>
        ))}
      </nav>
      <div className="nav-foot">
        <button className="user-chip user-chip-btn" onClick={onLogout}>
          <Avatar name={adminDisplayName(user)} accent size={32} />
          <div style={{ flex: 1, minWidth: 0 }}><div className="sec strong" style={{ fontSize: 13 }}>{adminDisplayName(user)}</div><div className="tiny muted">{tx('Super admin')}</div></div>
          {React.createElement(Icon.logout, { size: 16, style: { color: 'var(--text-3)' } })}
        </button>
      </div>
    </aside>
  );
}

function ApplicationsView({ applications, actions }) {
  const pending = applications.filter((item) => ['submitted', 'changes_requested'].includes(item.status));
  return (
    <div className="page view-fade">
      <div className="page-head">
        <div><div className="page-title">{tx('Workshop applications')}</div><div className="page-sub">{tx('Review new workshops and ownership claims before granting access')}</div></div>
        <span className="spacer" />
        <Badge kind="warning" pip>{pending.length} {tx('pending')}</Badge>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>{tx('Workshop')}</th><th>{tx('Owner')}</th><th>{tx('Request')}</th><th>{tx('Status')}</th><th /></tr></thead>
          <tbody>{applications.map((item) => (
            <tr key={item.id}>
              <td><div className="strong">{item.workshopName}</div><div className="tiny muted">{item.address} · {item.city}</div></td>
              <td><div className="sec">{item.ownerName}</div><div className="tiny muted mono">{item.ownerEmail || item.ownerPhone}</div></td>
              <td><div>{item.claimTenantId ? <Badge kind="accent" pip>{tx('Ownership claim')}</Badge> : <Badge kind="neutral">{tx('New workshop')}</Badge>}</div><div className="tiny muted" style={{ marginTop: 5 }}>{(item.team || []).length} {tx('team account(s) prepared')}</div></td>
              <td><Badge kind={item.status === 'approved' ? 'success' : item.status === 'rejected' ? 'danger' : 'warning'} pip>{tx(item.status)}</Badge></td>
              <td style={{ textAlign: 'right' }}>
                {['submitted', 'changes_requested'].includes(item.status) ? <div className="row" style={{ justifyContent: 'flex-end', gap: 6 }}>
                  <button className="btn btn-outline sm" onClick={() => actions.reviewApplication(item, 'changes_requested')}>{tx('Request changes')}</button>
                  <button className="btn btn-danger sm" onClick={() => actions.reviewApplication(item, 'rejected')}>{tx('Reject')}</button>
                  <button className="btn btn-primary sm" onClick={() => actions.reviewApplication(item, 'approved')}>{tx(item.claimTenantId ? 'Approve claim' : 'Approve')}</button>
                </div> : <span className="tiny muted">{item.reviewNote || '—'}</span>}
              </td>
            </tr>
          ))}</tbody>
        </table>
        {applications.length === 0 && <div className="card-pad muted">{tx('No workshop applications')}</div>}
      </div>
    </div>
  );
}

/* ---------------- Platform administrators ---------------- */
function PlatformAdminsView({ admins, currentUser, actions }) {
  const [addOpen, setAddOpen] = useAd(false);
  const [removeAdmin, setRemoveAdmin] = useAd(null);
  return (
    <div className="page view-fade">
      <div className="page-head">
        <div><div className="page-title">{tx('Platform administrators')}</div><div className="page-sub">{tx('Accounts that can create tenants and manage the Carfello platform')}</div></div>
        <span className="spacer" />
        <button className="btn btn-primary" onClick={() => setAddOpen(true)}>{React.createElement(Icon.userPlus, { size: 15 })} {tx('Add administrator')}</button>
      </div>
      <div className="card table-wrap">
        <table>
          <thead><tr><th>{tx('Administrator')}</th><th>Email</th><th>{tx('Status')}</th><th>{tx('Created')}</th><th /></tr></thead>
          <tbody>
            {admins.map((admin) => {
              const isSelf = admin.id === currentUser?.id;
              const canRemove = !isSelf && admins.length > 1;
              return (
                <tr key={admin.id}>
                  <td><div className="row" style={{ gap: 10 }}><Avatar name={admin.name} size={34} /><div><b>{admin.name}</b>{isSelf && <div className="tiny muted">{tx('You')}</div>}</div></div></td>
                  <td className="mono" style={{ fontSize: 12.5 }}>{admin.email}</td>
                  <td><Badge kind={admin.status === 'active' ? 'success' : 'warning'} pip>{tx(admin.status === 'active' ? 'Active' : 'Invitation pending')}</Badge></td>
                  <td>{displayDate(admin.createdAt)}</td>
                  <td style={{ textAlign: 'right' }}><button className="icon-btn sm danger" title={isSelf ? tx('You cannot remove yourself') : tx('Remove')} disabled={!canRemove} onClick={() => setRemoveAdmin(admin)}>{React.createElement(Icon.trash, { size: 15 })}</button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {admins.length === 0 && <div className="empty">{tx('No platform administrators')}</div>}
      </div>
      {addOpen && <AddPlatformAdminModal onClose={() => setAddOpen(false)} actions={actions} />}
      {removeAdmin && (
        <Modal title={tx('Remove platform administrator')} onClose={() => setRemoveAdmin(null)}
          footer={<><button className="btn btn-ghost" onClick={() => setRemoveAdmin(null)}>{tx('Cancel')}</button><span className="spacer" /><button className="btn btn-danger" onClick={async () => { await actions.removePlatformAdmin(removeAdmin.id); setRemoveAdmin(null); }}>{tx('Remove access')}</button></>}>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--text-2)' }}>{fmt('{name} will no longer be able to sign in to the platform admin console.', { name: removeAdmin.name })}</p>
        </Modal>
      )}
    </div>
  );
}

/* ---------------- Overview ---------------- */
function OverviewView({ tenants, go }) {
  const active = tenants.filter((t) => t.status === 'active');
  const suspended = tenants.filter((t) => t.status === 'suspended');
  const mrr = tenants.reduce((s, t) => s + t.mrr, 0);
  const recent = tenants.slice(0, 5);
  return (
    <div className="page view-fade">
      <div className="page-head">
        <div><div className="page-title">{tx('Overview')}</div><div className="page-sub">{tx('Super admin')} · Carfello</div></div>
        <span className="spacer" />
        <button className="btn btn-primary" onClick={() => go('tenants', { register: true })}>{React.createElement(Icon.plus, { size: 15 })} {tx('Register tenant')}</button>
      </div>
      <div className="stat-grid">
        <Stat label={tx('Total tenants')} icon="wrench" value={tenants.length} />
        <Stat label={tx('Active')} icon="checkCircle" value={active.length} accent />
        <Stat label={tx('Suspended')} icon="alert" value={suspended.length} />
        <Stat label={tx('Monthly revenue')} icon="wallet" value={A.zl(mrr)} />
      </div>
      <div className="card">
        <div className="card-hd">{React.createElement(Icon.wrench, { size: 16, style: { color: 'var(--text-2)' } })}<h3>{tx('Recently registered')}</h3><span className="spacer" /><button className="btn btn-ghost sm" onClick={() => go('tenants')}>{tx('View all')} {React.createElement(Icon.chevR, { size: 14 })}</button></div>
        <table className="tbl">
          <tbody>
            {recent.map((t) => (
              <tr key={t.id} className="clickable" onClick={() => go('tenant', { id: t.id })}>
                <td><div className="veh"><div className="veh-ic" style={{ fontWeight: 700, fontSize: 12 }}>{t.initials}</div><div><b>{t.name}</b><span>{t.city} · {t.currency} · {t.id}</span></div></div></td>
                <td><PlanPill plan={t.plan} /></td>
                <td>{t.admins.length} {tx('Admins').toLowerCase()}</td>
                <td className="muted">{t.created}</td>
                <td style={{ textAlign: 'right' }}><TStatusBadge status={t.status} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---------------- Tenants ---------------- */
function TenantsView({ tenants, go, actions, openRegister }) {
  const [q, setQ] = useAd('');
  const [filter, setFilter] = useAd('all');
  const [confirm, setConfirm] = useAd(null); // {kind, tenant}
  let list = tenants;
  if (filter !== 'all') list = list.filter((t) => t.status === filter);
  if (q.trim()) { const s = q.toLowerCase(); list = list.filter((t) => (t.name + t.city + t.id).toLowerCase().includes(s)); }

  return (
    <div className="page view-fade">
      <div className="page-head">
        <div><div className="page-title">{tx('Tenants')}</div><div className="page-sub">{tenants.filter((t) => t.status === 'active').length} {tx('active')} {fmt('of {n} tenants', { n: tenants.length })}</div></div>
        <span className="spacer" />
        <button className="btn btn-primary" onClick={openRegister}>{React.createElement(Icon.plus, { size: 15 })} {tx('Register tenant')}</button>
      </div>

      <div className="row" style={{ marginBottom: 16, gap: 12 }}>
        <div className="adm-search">{React.createElement(Icon.search, { size: 16 })}<input placeholder={tx('Search tenants…')} value={q} onChange={(e) => setQ(e.target.value)} /></div>
        <Seg value={filter} options={[{ value: 'all', label: tx('All') || 'All' }, { value: 'active', label: tx('Active') }, { value: 'suspended', label: tx('Suspended') }]} onChange={setFilter} />
      </div>

      <div className="card">
        <table className="tbl">
          <thead><tr>
            <th>{tx('Workshop')}</th><th>{tx('Location')}</th><th>{tx('Plan')}</th><th>Ad</th><th>{tx('Admins')}</th><th>{tx('Revenue')}</th><th>{tx('Status')}</th><th style={{ textAlign: 'right' }}></th>
          </tr></thead>
          <tbody>
            {list.map((t) => (
              <tr key={t.id} className="clickable" onClick={() => go('tenant', { id: t.id })}>
                <td><div className="veh"><div className="veh-ic" style={{ fontWeight: 700, fontSize: 12 }}>{t.initials}</div><div><b>{t.name}</b><span>{t.id}</span></div></div></td>
                <td><div className="row" style={{ gap: 6 }}>{React.createElement(Icon.pin, { size: 14, style: { color: 'var(--text-3)' } })}<span>{t.city}</span><span className="badge">{t.currency}</span></div></td>
                <td><PlanPill plan={t.plan} /></td>
                <td>{t.ad ? <Badge kind="accent">Ad</Badge> : <span className="muted">—</span>}</td>
                <td><div className="adm-stack">{t.admins.slice(0, 3).map((a) => <span key={a.id} className="adm-dot" title={a.name}>{A.initialsOf(a.name)}</span>)}{t.admins.length > 3 && <span className="adm-dot more">+{t.admins.length - 3}</span>}</div></td>
                <td className="mono" style={{ fontSize: 12.5 }}>{t.mrr ? A.zl(t.mrr) : '—'}</td>
                <td><TStatusBadge status={t.status} /></td>
                <td onClick={(e) => e.stopPropagation()} style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                  <div className="row" style={{ gap: 8, justifyContent: 'flex-end' }}>
                    <Switch on={t.status === 'active'} onClick={() => setConfirm({ kind: t.status === 'active' ? 'deactivate' : 'activate', tenant: t })} />
                    <button className="icon-btn sm danger" title={tx('Delete tenant')} onClick={() => setConfirm({ kind: 'delete', tenant: t })}>{React.createElement(Icon.trash, { size: 15 })}</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {list.length === 0 && <div className="empty"><div className="ico">{React.createElement(Icon.search, { size: 30 })}</div>{tx('No tenants found')}</div>}
      </div>

      {confirm && <ConfirmModal info={confirm} onClose={() => setConfirm(null)} actions={actions} />}
    </div>
  );
}

/* ---------------- Tenant detail ---------------- */
function TenantDetailView({ tenant, go, actions }) {
  const [addOpen, setAddOpen] = useAd(false);
  const [confirm, setConfirm] = useAd(null);
  if (!tenant) return null;
  const p = A.PLANS[tenant.plan];
  return (
    <div className="page view-fade">
      <div className="breadcrumb"><a onClick={() => go('tenants')}>{tx('Tenants')}</a>{React.createElement(Icon.chevR, { size: 13 })}<span style={{ color: 'var(--text-2)' }}>{tenant.name}</span></div>
      <div className="page-head">
        <div className="row" style={{ gap: 14 }}>
          <div className="veh-ic" style={{ width: 48, height: 48, fontWeight: 700, fontSize: 17, borderRadius: 'var(--r)' }}>{tenant.initials}</div>
          <div><div className="page-title" style={{ fontSize: 22 }}>{tenant.name}</div><div className="page-sub">{tenant.slug}.carfello.app · {tenant.address}, {tenant.city}</div></div>
        </div>
        <span className="spacer" />
        <TStatusBadge status={tenant.status} />
      </div>

      {tenant.status === 'suspended' && (
        <div className="banner-warn">{React.createElement(Icon.alert, { size: 16 })}<span>{tx('Suspended — staff cannot sign in')}. {tx('Reactivate to restore access')}.</span>
          <span className="spacer" /><button className="btn btn-success sm" onClick={() => actions.setStatus(tenant.id, 'active')}>{tx('Activate tenant')}</button></div>
      )}

      <div className="two-col">
        <div className="card">
          <div className="card-hd">{React.createElement(Icon.users, { size: 16, style: { color: 'var(--text-2)' } })}<h3>{tx('Administrators')}</h3><span className="count">{tenant.admins.length}</span><span className="spacer" /><button className="btn btn-outline sm" onClick={() => setAddOpen(true)}>{React.createElement(Icon.userPlus, { size: 14 })} {tx('Add admin')}</button></div>
	          {tenant.admins.map((a) => (
	            <div className="list-item" key={a.id}>
	              <Avatar name={a.name} size={36} />
	              <div style={{ flex: 1, minWidth: 0 }}>
                  <b style={{ fontSize: 13.5 }}>{a.name}</b>
                  <div className="tiny muted row" style={{ gap: 5 }}>{React.createElement(Icon.mail, { size: 12 })}{a.email}</div>
                  {a.acceptToken && <button className="invite-copy" onClick={() => copyText(tenantAdminAcceptUrl(tenant, a), tx('First-login link copied'))}>{React.createElement(Icon.mail, { size: 12 })}{tx('Copy first-login link')}</button>}
                </div>
	              <Badge kind={a.role === 'owner' ? 'accent' : 'neutral'}>{tx(A.ROLE[a.role])}</Badge>
              <button className="icon-btn sm" title={tx('Remove')} disabled={a.role === 'owner' && tenant.admins.filter((x) => x.role === 'owner').length === 1}
                onClick={() => setConfirm({ kind: 'removeAdmin', tenant, admin: a })}>{React.createElement(Icon.trash, { size: 14 })}</button>
            </div>
          ))}
        </div>

        <div className="col" style={{ gap: 16 }}>
          <div className="card card-pad">
            <div className="group-label" style={{ marginBottom: 14 }}>{tx('Workshop info')}<span className="ln" /></div>
            <div className="kv"><span>{tx('Plan')}</span><PlanPill plan={tenant.plan} /></div>
            <div className="kv"><span>Sponsored placement</span><Switch on={tenant.ad} onClick={() => actions.setAd(tenant.id, !tenant.ad)} /></div>
            <div className="kv"><span>{tx('Created')}</span><b>{tenant.created}</b></div>
            <div className="kv"><span>{tx('Revenue')}</span><b className="mono">{tenant.mrr ? A.zl(tenant.mrr) + ' / mo' : '—'}</b></div>
            <div className="kv"><span>{tx('Location')}</span><b>{tenant.city}</b></div>
            <div className="kv"><span>{tx('Country')}</span><b>{tenant.countryCode}</b></div>
            <div className="kv"><span>{tx('Currency')}</span><b>{tenant.currency}</b></div>
            <div className="kv"><span>URL</span><a href={tenant.url} target="_blank" rel="noreferrer" style={{ color: 'var(--accent)', fontWeight: 650 }}>{tenant.slug}.carfello.app</a></div>
          </div>

          <div className="card card-pad danger-zone">
            <div className="group-label" style={{ marginBottom: 12 }}>{tx('Danger zone')}<span className="ln" /></div>
            <p className="tiny muted" style={{ margin: '0 0 13px', lineHeight: 1.5 }}>{tx('Deactivating blocks staff sign-in and hides the shop from the marketplace.')}</p>
            <div className="col" style={{ gap: 10 }}>
              {tenant.status === 'active'
                ? <button className="btn btn-outline block" onClick={() => setConfirm({ kind: 'deactivate', tenant })}>{tx('Deactivate tenant')}</button>
                : <button className="btn btn-success block" onClick={() => actions.setStatus(tenant.id, 'active')}>{tx('Activate tenant')}</button>}
              <button className="btn btn-danger block" onClick={() => setConfirm({ kind: 'delete', tenant })}>{React.createElement(Icon.trash, { size: 15 })} {tx('Delete tenant')}</button>
            </div>
          </div>
        </div>
      </div>

      {addOpen && <AddAdminModal tenant={tenant} onClose={() => setAddOpen(false)} actions={actions} />}
      {confirm && <ConfirmModal info={confirm} onClose={() => setConfirm(null)} actions={actions} afterDelete={() => go('tenants')} />}
    </div>
  );
}

/* ---------------- Modals ---------------- */
function AdminRow({ a, onChange, onRemove, removable }) {
  const login = adminLoginLocal(a.login || a.name);
  return (
    <div className="admin-row">
      <div className="ar-ic">{React.createElement(Icon.user, { size: 16 })}</div>
      <div className="admin-login-field">
        <input className="input mono" placeholder="firstname.lastname" value={login} onChange={(e) => onChange({ ...a, login: adminLoginLocal(e.target.value), name: adminNameFromLogin(e.target.value), email: adminLoginEmail(e.target.value) })} />
        <span>@carfello.app</span>
      </div>
      <select className="select" value={a.role} onChange={(e) => onChange({ ...a, role: e.target.value })} style={{ width: 120 }}>
        <option value="owner">{tx('Owner')}</option><option value="manager">{tx('Manager')}</option>
      </select>
      <button className="icon-btn sm" disabled={!removable} onClick={onRemove}>{React.createElement(Icon.x, { size: 14 })}</button>
    </div>
  );
}

function AdminMapPicker({ location, onLocation, editable }) {
  const elRef = useAdRef(null);
  const mapRef = useAdRef(null);
  const markerRef = useAdRef(null);
  useAdEffect(() => {
    if (!googleMapsApiKey() || !elRef.current) return;
    let cancelled = false;
    loadGoogleMaps()
      .then((google) => {
        if (cancelled || !elRef.current) return;
        const center = location || { lat: 53.9023, lng: 27.5619 };
        const map = new google.maps.Map(elRef.current, {
          center,
          zoom: location ? 15 : 11,
          mapTypeControl: false,
          streetViewControl: false,
          fullscreenControl: false,
        });
        const marker = new google.maps.Marker({ position: center, map, draggable: !!editable });
        const pick = (latLng) => {
          if (!editable || !latLng) return;
          const next = { lat: Number(latLng.lat().toFixed(7)), lng: Number(latLng.lng().toFixed(7)) };
          marker.setPosition(next);
          onLocation(next);
        };
        map.addListener('click', (event) => pick(event.latLng));
        marker.addListener('dragend', (event) => pick(event.latLng));
        mapRef.current = map;
        markerRef.current = marker;
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);
  useAdEffect(() => {
    if (!location || !mapRef.current || !markerRef.current) return;
    markerRef.current.setPosition(location);
    mapRef.current.panTo(location);
    mapRef.current.setZoom(Math.max(mapRef.current.getZoom() || 15, 15));
  }, [location?.lat, location?.lng]);
  if (!googleMapsApiKey()) {
    return <div className="map-picker map-picker-empty">{tx('Google Places key is not configured')}</div>;
  }
  return <div className="map-picker" ref={elRef} />;
}

function RegisterTenantModal({ onClose, actions }) {
  const addressRef = useAdRef(null);
  const placesRef = useAdRef(null);
  const geocoderRef = useAdRef(null);
  const searchSeqRef = useAdRef(0);
  const [name, setName] = useAd(''); const [city, setCity] = useAd(''); const [countryCode, setCountryCode] = useAd(''); const [currency, setCurrency] = useAd('PLN'); const [address, setAddress] = useAd('');
  const [slug, setSlug] = useAd('');
  const [slugTouched, setSlugTouched] = useAd(false);
  const [plan, setPlan] = useAd('commission');
  const [workshopTypes, setWorkshopTypes] = useAd(['mechanical_repair']);
  const [specializations, setSpecializations] = useAd(['mechanics']);
  const [admins, setAdmins] = useAd([{ k: 1, login: '', name: '', email: '', role: 'owner' }]);
  const [candidate, setCandidate] = useAd(null);
  const [location, setLocation] = useAd(null);
  const [googlePlaceId, setGooglePlaceId] = useAd('');
  const [manualMap, setManualMap] = useAd(false);
  const [placeStatus, setPlaceStatus] = useAd(googleMapsApiKey() ? 'Start typing workshop name or address.' : 'Google Maps key is not configured. Use manual coordinates.');
  const setAdmin = (k, v) => setAdmins((xs) => xs.map((a) => a.k === k ? { ...v, k } : a));
  const validAdmins = admins
    .map((a) => ({ ...a, login: adminLoginLocal(a.login || a.name) }))
    .filter((a) => hasFirstLastLogin(a.login))
    .map((a) => ({ ...a, name: adminNameFromLogin(a.login), email: adminLoginEmail(a.login) }));
  useAdEffect(() => { if (!slugTouched) setSlug(slugifyTenant(name)); }, [name, slugTouched]);
  function applyCandidate(next, status, { autoAddress = false, confirmed = false } = {}) {
    if (!next) return;
    setCandidate(next);
    setLocation(next.location);
    if (autoAddress && next.address) setAddress(next.address);
    if (autoAddress && next.city) setCity((current) => current.trim() ? current : next.city);
    if (next.countryCode) {
      setCountryCode(next.countryCode);
      setCurrency(currencyForCountry(next.countryCode));
    }
    setGooglePlaceId(confirmed ? next.googlePlaceId : '');
    setManualMap(!confirmed);
    setPlaceStatus(status);
  }
  function geocodeQuery(google, query) {
    const geocoder = geocoderRef.current || new google.maps.Geocoder();
    geocoderRef.current = geocoder;
    return new Promise((resolve) => {
      geocoder.geocode({ address: query }, (results, status) => {
        if (status !== 'OK') return resolve(null);
        const result = bestGeocodeResult(results);
        resolve(result ? placeCandidate(result) : null);
      });
    });
  }
  function placeTextQuery(google, query) {
    if (!placesRef.current) {
      const node = document.createElement('div');
      placesRef.current = new google.maps.places.PlacesService(node);
    }
    return new Promise((resolve) => {
      placesRef.current.findPlaceFromQuery({
        query,
        fields: ['place_id', 'name', 'formatted_address', 'geometry', 'address_components'],
      }, (results, status) => {
        if (status !== google.maps.places.PlacesServiceStatus.OK) return resolve(null);
        resolve(placeCandidate(results?.[0]));
      });
    });
  }
  async function searchAddress(value, { quiet = false } = {}) {
    if (!googleMapsApiKey()) return null;
    const queries = addressSearchQueries({ name, city, address: value });
    if (!queries.length) return null;
    const seq = ++searchSeqRef.current;
    try {
      const google = await loadGoogleMaps();
      if (!quiet) setPlaceStatus('Searching Google Maps...');
      for (const query of queries) {
        const placeMatch = await placeTextQuery(google, query);
        if (seq !== searchSeqRef.current) return null;
        if (placeMatch) {
          applyCandidate(placeMatch, 'Google found a possible match. Confirm it or choose manually.');
          return placeMatch;
        }
        const geocodeMatch = await geocodeQuery(google, query);
        if (seq !== searchSeqRef.current) return null;
        if (geocodeMatch) {
          applyCandidate(geocodeMatch, 'Google found this address. Confirm it or adjust the map point.');
          return geocodeMatch;
        }
      }
      if (!quiet) setPlaceStatus('Google did not find this address. Choose the point manually on the map.');
    } catch (_) {
      if (!quiet) setPlaceStatus('Google Places is unavailable. Choose the point manually.');
    }
    return null;
  }
  async function reverseGeocodeLocation(next) {
    setLocation(next);
    setGooglePlaceId('');
    setManualMap(true);
    if (!googleMapsApiKey()) return;
    const seq = ++searchSeqRef.current;
    setPlaceStatus('Resolving address from the selected map point...');
    try {
      const google = await loadGoogleMaps();
      const geocoder = geocoderRef.current || new google.maps.Geocoder();
      geocoderRef.current = geocoder;
      geocoder.geocode({ location: next }, (results, status) => {
        if (seq !== searchSeqRef.current) return;
        if (status !== 'OK') {
          setPlaceStatus('Map point selected. Address was not found, edit it manually.');
          return;
        }
        const result = bestGeocodeResult(results);
	        const resolved = result ? placeCandidate(result) : null;
        if (!resolved) {
          setPlaceStatus('Map point selected. Address was not found, edit it manually.');
          return;
        }
	        if (resolved.city) setCity(resolved.city);
	        if (resolved.countryCode) { setCountryCode(resolved.countryCode); setCurrency(currencyForCountry(resolved.countryCode)); }
        applyCandidate({ ...resolved, location: next }, 'Address updated from the selected map point.', { autoAddress: true });
      });
    } catch (_) {
      setPlaceStatus('Map point selected. Address was not found, edit it manually.');
    }
  }
  useAdEffect(() => {
    if (!googleMapsApiKey() || !addressRef.current) return;
    let cancelled = false;
    loadGoogleMaps()
      .then((google) => {
        if (cancelled || !addressRef.current) return;
        geocoderRef.current = geocoderRef.current || new google.maps.Geocoder();
        const autocomplete = new google.maps.places.Autocomplete(addressRef.current, {
          fields: ['place_id', 'name', 'formatted_address', 'geometry', 'address_components'],
        });
        autocomplete.addListener('place_changed', () => {
          const place = autocomplete.getPlace();
          const next = placeCandidate(place);
          if (!next?.location) {
            searchAddress(place.name || addressRef.current?.value || address, { quiet: false });
            return;
          }
          applyCandidate(next, 'Google found this workshop. Confirm it or choose manually.');
        });
        setPlaceStatus('Google place search is ready.');
      })
      .catch(() => setPlaceStatus('Google Places is unavailable. Choose the point manually.'));
    return () => { cancelled = true; };
  }, []);
  useAdEffect(() => {
    if (!googleMapsApiKey() || googlePlaceId || !address.trim()) return;
    const timer = setTimeout(() => searchAddress(address, { quiet: true }), 650);
    return () => clearTimeout(timer);
  }, [address, city, name, googlePlaceId]);
  const normalizedSlug = slugifyTenant(slug || name);
  const validLocation = location && Number.isFinite(Number(location.lat)) && Number.isFinite(Number(location.lng));
  const canCreate = name.trim() && city.trim() && address.trim() && normalizedSlug && workshopTypes.length > 0 && specializations.length > 0 && validLocation && validAdmins.length > 0;
  const missingCreate = [
    !name.trim() && tx('Workshop name'),
    !city.trim() && tx('City'),
    !address.trim() && tx('Address'),
    !normalizedSlug && 'Tenant URL',
    workshopTypes.length === 0 && 'workshop types',
    specializations.length === 0 && 'specializations',
    !validLocation && tx('Map point'),
    validAdmins.length === 0 && 'administrator firstname.lastname',
  ].filter(Boolean);

  const create = () => {
    const owner = validAdmins.find((a) => a.role === 'owner') || validAdmins[0];
    actions.createTenant({
	      name: name.trim(), slug: normalizedSlug, city: city.trim(), countryCode: countryCode || candidate?.countryCode || '', currency, address: address.trim(), plan,
      ownerName: owner.name.trim(), ownerEmail: owner.email.trim(), ownerPhone: '',
      workshopType: workshopTypes,
      specializations,
      googlePlaceId: googlePlaceId || null,
      location: { lat: Number(location.lat), lng: Number(location.lng) },
      admins: validAdmins.map((a) => ({ name: a.name.trim(), email: a.email.trim(), role: a.role })),
    });
    onClose();
  };
  const confirmGooglePlace = () => {
    if (!candidate) return;
    if (candidate.name) setName((current) => current.trim() ? current : candidate.name);
	    if (candidate.address) setAddress(candidate.address);
	    if (candidate.city) setCity(candidate.city);
	    if (candidate.countryCode) { setCountryCode(candidate.countryCode); setCurrency(currencyForCountry(candidate.countryCode)); }
    setLocation(candidate.location);
    setGooglePlaceId(candidate.googlePlaceId);
    setManualMap(false);
    setPlaceStatus('Google place confirmed.');
  };
  const chooseManual = () => {
    setGooglePlaceId('');
    setManualMap(true);
    if (candidate?.location) setLocation(candidate.location);
    setPlaceStatus('Click the map or drag the marker to set the workshop entrance.');
  };
  const updateAddress = (value) => {
    setAddress(value);
    setCandidate(null);
    setGooglePlaceId('');
    setManualMap(true);
    setPlaceStatus('Address changed. Confirm a Google result or choose the point manually.');
  };
  return (
    <Modal wide title={tx('Register a new tenant')} onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>{tx('Cancel')}</button><span className="spacer" /><button className="btn btn-primary" disabled={!canCreate} onClick={create}>{React.createElement(Icon.check, { size: 15, stroke: 2.6 })} {tx('Create tenant')}</button></>}>
      <div className="grid-2">
        <div className="field"><label>{tx('Workshop name')}</label><input className="input" placeholder="Auto Serwis Kowalski" value={name} onChange={(e) => setName(e.target.value)} /></div>
        <div className="field"><label>{tx('City')}</label><input className="input" placeholder="Kraków" value={city} onChange={(e) => setCity(e.target.value)} /></div>
      </div>
      <div className="grid-2">
        <div className="field"><label>{tx('Country')}</label><input className="input" placeholder="PL" value={countryCode} onChange={(e) => { const next = e.target.value.toUpperCase().slice(0, 2); setCountryCode(next); setCurrency(currencyForCountry(next)); }} /></div>
        <div className="field"><label>{tx('Currency')}</label><select className="input" value={currency} onChange={(e) => setCurrency(e.target.value)}>{CURRENCY_OPTIONS.map((option) => <option key={option.code} value={option.code}>{option.label}</option>)}</select></div>
      </div>
      <div className="field"><label>Tenant URL</label><div className="slug-field"><input className="input" placeholder="auto-serwis-kowalski" value={slug} onChange={(e) => { setSlugTouched(true); setSlug(slugifyTenant(e.target.value)); }} /><span>.carfello.app</span></div></div>
      <div className="field"><label>{tx('Address')}</label><input ref={addressRef} className="input" placeholder="Start typing existing workshop or address" value={address} onChange={(e) => updateAddress(e.target.value)} /></div>
      <div className="grid-2">
        <div className="field"><label>Workshop types</label><div className="plan-grid">{WORKSHOP_TYPE_OPTIONS.map((option) => <button key={option.value} className={`plan-opt ${workshopTypes.includes(option.value) ? 'on' : ''}`} onClick={() => setWorkshopTypes((current) => current.includes(option.value) ? current.filter((item) => item !== option.value) : [...current, option.value])}><b>{option.label}</b>{workshopTypes.includes(option.value) && <span className="plan-check">{React.createElement(Icon.check, { size: 13, stroke: 3 })}</span>}</button>)}</div></div>
        <div className="field"><label>Specializations</label><div className="plan-grid">{WORKSHOP_SPECIALIZATION_OPTIONS.map((specialization) => <button key={specialization} className={`plan-opt ${specializations.includes(specialization) ? 'on' : ''}`} onClick={() => setSpecializations((current) => current.includes(specialization) ? current.filter((item) => item !== specialization) : [...current, specialization])}><b>{specialization}</b>{specializations.includes(specialization) && <span className="plan-check">{React.createElement(Icon.check, { size: 13, stroke: 3 })}</span>}</button>)}</div></div>
      </div>
      <div className="place-box">
        <div className="place-status">{React.createElement(Icon.pin, { size: 14 })}<span>{tx(placeStatus)}</span></div>
        {candidate && (
          <div className={`place-confirm ${googlePlaceId === candidate.googlePlaceId ? 'confirmed' : ''}`}>
            <div>
              <b>{candidate.name || name || tx('Selected Google place')}</b>
              <span>{candidate.address}</span>
              <small className="mono">{candidate.location.lat}, {candidate.location.lng}</small>
            </div>
            <div className="row" style={{ gap: 8 }}>
              <button className="btn btn-primary sm" onClick={confirmGooglePlace}>{React.createElement(Icon.check, { size: 14 })} {tx('This is my workshop')}</button>
              <button className="btn btn-outline sm" onClick={chooseManual}>{tx('Choose manually')}</button>
            </div>
          </div>
        )}
        <AdminMapPicker location={location} editable={manualMap || !googlePlaceId} onLocation={reverseGeocodeLocation} />
        {location && <div className="coord-line"><span>Lat</span><b className="mono">{Number(location.lat).toFixed(7)}</b><span>Lng</span><b className="mono">{Number(location.lng).toFixed(7)}</b></div>}
      </div>
      <div className="field"><label>{tx('Subscription plan')}</label>
        <div className="plan-grid">{Object.keys(A.PLANS).map((k) => (
          <button key={k} className={`plan-opt ${plan === k ? 'on' : ''}`} onClick={() => setPlan(k)}>
            <b>{A.PLANS[k].label}</b><span>{A.PLANS[k].sub}</span>
            {plan === k && <span className="plan-check">{React.createElement(Icon.check, { size: 13, stroke: 3 })}</span>}
          </button>))}</div>
      </div>
      <div className="group-label" style={{ margin: '20px 0 12px' }}>{tx('Assign administrators')}<span className="ln" /></div>
      <div className="col" style={{ gap: 9 }}>
        {admins.map((a) => <AdminRow key={a.k} a={a} onChange={(v) => setAdmin(a.k, v)} removable={admins.length > 1} onRemove={() => setAdmins((xs) => xs.filter((x) => x.k !== a.k))} />)}
      </div>
      <button className="btn btn-ghost sm" style={{ marginTop: 10 }} onClick={() => setAdmins((xs) => [...xs, { k: Date.now(), login: '', name: '', email: '', role: 'manager' }])}>{React.createElement(Icon.plus, { size: 14 })} {tx('Add another admin')}</button>
      {validAdmins.length === 0 && <div className="tiny" style={{ color: 'var(--danger)', marginTop: 10, display: 'flex', gap: 6, alignItems: 'center' }}>{React.createElement(Icon.alert, { size: 13 })}{tx('At least one administrator is required')}</div>}
      {admins.some((a) => adminLoginLocal(a.login || a.name) && !hasFirstLastLogin(a.login || a.name)) && <div className="tiny muted" style={{ marginTop: 8 }}>{tx('Use firstname.lastname, for example amal.kabulov. The @carfello.app suffix is added automatically.')}</div>}
      {!validLocation && <div className="tiny" style={{ color: 'var(--danger)', marginTop: 10, display: 'flex', gap: 6, alignItems: 'center' }}>{React.createElement(Icon.alert, { size: 13 })}{tx('Workshop map location is required')}</div>}
      {!canCreate && missingCreate.length > 0 && <div className="tiny muted" style={{ marginTop: 8 }}>{fmt('{req} missing', { req: missingCreate.join(', ') })}</div>}
    </Modal>
  );
}

function AddAdminModal({ tenant, onClose, actions }) {
  const [login, setLogin] = useAd(''); const [role, setRole] = useAd('manager');
  const local = adminLoginLocal(login);
  const name = adminNameFromLogin(local);
  const email = adminLoginEmail(local);
  const ok = Boolean(adminLoginFinal(local));
  return (
    <Modal title={tx('Add admin')} sub={tenant.name} onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>{tx('Cancel')}</button><span className="spacer" /><button className="btn btn-primary" disabled={!ok} onClick={() => { actions.addAdmin(tenant.id, { name, email, role }); onClose(); }}>{React.createElement(Icon.mail, { size: 15 })} {tx('Invite by email')}</button></>}>
      <div className="field"><label>{tx('Login')}</label><div className="admin-login-field"><input className="input mono" placeholder="firstname.lastname" value={local} onChange={(e) => setLogin(adminLoginLocal(e.target.value))} /><span>@carfello.app</span></div></div>
      <div className="field"><label>{tx('Generated name')}</label><input className="input" value={name} readOnly /></div>
      <div className="field" style={{ marginBottom: 0 }}><label>{tx('Role')}</label>
        <select className="select" value={role} onChange={(e) => setRole(e.target.value)}><option value="owner">{tx('Owner')}</option><option value="manager">{tx('Manager')}</option></select>
      </div>
      {!ok && <div className="tiny muted" style={{ marginTop: 10 }}>{tx('Use firstname.lastname. Custom email domains are not allowed.')}</div>}
    </Modal>
  );
}

function AddPlatformAdminModal({ onClose, actions }) {
  const [login, setLogin] = useAd('');
  const [busy, setBusy] = useAd(false);
  const [error, setError] = useAd('');
  const local = adminLoginLocal(login);
  const name = adminNameFromLogin(local);
  const email = adminLoginEmail(local);
  const ok = hasFirstLastLogin(local);
  const submit = async () => {
    if (!ok || busy) return;
    setBusy(true);
    setError('');
    try {
      await actions.createPlatformAdmin({ name, email });
      onClose();
    } catch (err) {
      setError(err.message || 'Could not invite platform administrator');
    } finally {
      setBusy(false);
    }
  };
  return (
    <Modal title={tx('Add platform administrator')} sub={tx('The invitation link is valid for 72 hours')} onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>{tx('Cancel')}</button><span className="spacer" /><button className="btn btn-primary" disabled={!ok || busy} onClick={submit}>{React.createElement(Icon.mail, { size: 15 })} {busy ? tx('Creating...') : tx('Create and copy invitation')}</button></>}>
      <div className="field"><label>{tx('Login')}</label><div className="admin-login-field"><input className="input mono" autoFocus placeholder="kuvvat or anna.nowak" value={local} onChange={(e) => setLogin(adminLoginLocal(e.target.value))} /><span>@carfello.app</span></div></div>
      <div className="field"><label>{tx('Generated name')}</label><input className="input" value={name} readOnly /></div>
      <div className="tiny muted">{tx('The administrator will open a one-time link and choose their own password. No password is sent or stored in plain text.')}</div>
      {!ok && local && <div className="tiny" style={{ color: 'var(--danger)', marginTop: 10 }}>{tx('Use a Carfello login, for example kuvvat or anna.nowak.')}</div>}
      {error && <div className="banner-warn auth-error" style={{ marginTop: 12 }}>{React.createElement(Icon.alert, { size: 16 })}<span>{error}</span></div>}
    </Modal>
  );
}

function ConfirmModal({ info, onClose, actions, afterDelete }) {
  const { kind, tenant, admin } = info;
  const meta = {
    deactivate: { title: tx('Deactivate tenant'), body: tx('Deactivating blocks staff sign-in and hides the shop from the marketplace.'), btn: tx('Deactivate'), cls: 'btn-danger', run: () => actions.setStatus(tenant.id, 'suspended') },
    activate: { title: tx('Activate tenant'), body: tenant.name, btn: tx('Activate'), cls: 'btn-success', run: () => actions.setStatus(tenant.id, 'active') },
    delete: { title: tx('Delete tenant'), body: tx('Permanently delete this tenant and all its data?') + ' ' + tx('This cannot be undone.'), btn: tx('Delete tenant'), cls: 'btn-danger', run: () => { actions.deleteTenant(tenant.id); afterDelete && afterDelete(); } },
    removeAdmin: { title: tx('Remove'), body: admin && admin.name, btn: tx('Remove'), cls: 'btn-danger', run: () => actions.removeAdmin(tenant.id, admin.id) },
  }[kind];
  return (
    <Modal title={meta.title} onClose={onClose}
      footer={<><button className="btn btn-ghost" onClick={onClose}>{tx('Cancel')}</button><span className="spacer" /><button className={`btn ${meta.cls}`} onClick={() => { meta.run(); onClose(); }}>{meta.btn}</button></>}>
      <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--text-2)' }}>{meta.body}</p>
    </Modal>
  );
}

function AdminLoginScreen({ onLogin }) {
  const [email, setEmail] = useAd('amal@carfello.app');
  const [password, setPassword] = useAd('');
  const [busy, setBusy] = useAd(false);
  const [error, setError] = useAd('');
  const submit = async (event) => {
    event.preventDefault();
    setError('');
    setBusy(true);
    try {
      const tokens = await api('/auth/login', {
        method: 'POST',
        body: JSON.stringify({ provider: 'email', email: email.trim(), password }),
      });
      if (tokens?.user?.type !== 'platform_admin') {
        clearAdminSession();
        throw new Error('Platform admin access is required');
      }
      setAdminSession(tokens);
      onLogin(tokens.user);
    } catch (err) {
      setError(err.message || 'Could not sign in');
    } finally {
      setBusy(false);
    }
  };
  return (
    <div className="admin-auth-shell">
      <form className="admin-auth-card" onSubmit={submit}>
        <div className="brand auth-brand">
          <div className="brand-mark">{React.createElement(Icon.shield, { size: 18, stroke: 2.4 })}</div>
          <div><div className="brand-name">Carfello</div><div className="brand-sub">{tx('Platform admin')}</div></div>
        </div>
        <div>
          <div className="page-title auth-title">{tx('Sign in')}</div>
          <div className="page-sub">{tx('Use your Carfello platform admin account')}</div>
        </div>
        <div className="field"><label>Email</label><input className="input" type="email" autoComplete="username" value={email} onChange={(e) => setEmail(e.target.value)} required /></div>
        <div className="field"><label>Password</label><input className="input" type="password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} required /></div>
        {error && <div className="banner-warn auth-error">{React.createElement(Icon.alert, { size: 16 })}<span>{error}</span></div>}
        <button className="btn btn-primary auth-submit" disabled={busy}>{busy ? tx('Signing in...') : tx('Sign in')}</button>
      </form>
      <ToastHost />
    </div>
  );
}

/* ---------------- Shell ---------------- */
function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [sessionUser, setSessionUser] = useAd(adminUserFromSession());
  const [tenants, setTenants] = useAd([]);
  const [platformAdmins, setPlatformAdmins] = useAd([]);
  const [applications, setApplications] = useAd([]);
  const [region, setRegion] = useAd({ country: 'all', city: 'all' });
  const [route, setRoute] = useAd({ name: 'overview', params: {} });
  const [lang, setLangState] = useAd(I18N.lang);
  const [register, setRegister] = useAd(false);
  const [loading, setLoading] = useAd(true);
  I18N.lang = lang;

  useAdEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-theme', tw.dark ? 'dark' : 'light');
    r.style.setProperty('--accent', tw.accent);
    r.style.setProperty('--accent-press', `color-mix(in oklch, ${tw.accent} 82%, black)`);
  }, [tw]);
  useAdEffect(() => { document.documentElement.setAttribute('lang', lang); }, [lang]);
  useAdEffect(() => {
    window.__carfelloAdminLogout = () => {
      clearAdminSession();
      setSessionUser(null);
      setTenants([]);
      setPlatformAdmins([]);
      setApplications([]);
    };
    return () => { delete window.__carfelloAdminLogout; };
  }, []);
  useAdEffect(() => {
    if (!sessionUser) { setLoading(false); return undefined; }
    let alive = true;
    setLoading(true);
    Promise.all([api('/platform/tenants'), api('/platform/admins'), api('/platform/tenant-applications')])
      .then(([tenantItems, adminItems, applicationItems]) => {
        if (!alive) return;
        setTenants((tenantItems || []).map(mapTenant));
        setPlatformAdmins(adminItems || []);
        setApplications(applicationItems || []);
      })
      .catch((err) => toast(err.message || 'Could not load platform data', 'alert'))
      .finally(() => { if (alive) setLoading(false); });
    return () => { alive = false; };
  }, [sessionUser?.id]);

  const go = (name, params = {}) => {
    if (params.register) { setRoute({ name: 'tenants', params: {} }); setRegister(true); document.querySelector('.main')?.scrollTo({ top: 0 }); return; }
    setRoute({ name, params }); document.querySelector('.main')?.scrollTo({ top: 0 });
  };
  const changeLang = (l) => { setLang(l); setLangState(l); };
  const logout = () => {
    clearAdminSession();
    setSessionUser(null);
    setTenants([]);
    setPlatformAdmins([]);
    setApplications([]);
    setRoute({ name: 'overview', params: {} });
  };

  const actions = {
    reviewApplication: async (application, status) => {
      const needsNote = status !== 'approved';
      const reviewNote = needsNote ? window.prompt(status === 'rejected' ? 'Reason for rejection' : 'What must be changed?') : '';
      if (needsNote && reviewNote == null) return;
      try {
        const updated = await api(`/platform/tenant-applications/${application.id}/review`, { method: 'PATCH', body: JSON.stringify({ status, reviewNote: reviewNote || null }) });
        setApplications((items) => items.map((item) => item.id === application.id ? updated : item));
        if (status === 'approved') {
          const tenantItems = await api('/platform/tenants');
          setTenants((tenantItems || []).map(mapTenant));
          const preparedSetupLinks = [];
          const setupBaseUrl = tenantWebBaseUrl();
          if (updated.ownerInviteToken) preparedSetupLinks.push(`owner: ${setupBaseUrl}/accept-invite?token=${encodeURIComponent(updated.ownerInviteToken)}`);
          Object.entries(updated.teamInviteTokens || {}).forEach(([email, token]) => preparedSetupLinks.push(`${email}: ${setupBaseUrl}/accept-invite?token=${encodeURIComponent(token)}`));
          if (preparedSetupLinks.length) copyText(preparedSetupLinks.join('\n'), tx('Owner and team setup links copied'));
          toast(tx(application.claimTenantId ? 'Ownership claim approved' : 'Workshop approved'), 'check');
        } else {
          toast(tx(status === 'rejected' ? 'Application rejected' : 'Changes requested'), status === 'rejected' ? 'alert' : 'mail');
        }
      } catch (err) {
        toast(err.message || 'Could not review application', 'alert');
      }
    },
    createPlatformAdmin: async (input) => {
      try {
        const admin = await api('/platform/admins', { method: 'POST', body: JSON.stringify(input) });
        setPlatformAdmins((items) => [...items, admin]);
        copyText(platformAdminAcceptUrl(admin), tx('First-login link copied'));
        toast(tx('Platform administrator invited'), 'mail');
        return admin;
      } catch (err) {
        toast(err.message || 'Could not invite platform administrator', 'alert');
        throw err;
      }
    },
    removePlatformAdmin: async (id) => {
      try {
        await api(`/platform/admins/${id}`, { method: 'DELETE' });
        setPlatformAdmins((items) => items.filter((item) => item.id !== id));
        toast(tx('Platform access removed'), 'check');
      } catch (err) {
        toast(err.message || 'Could not remove platform administrator', 'alert');
        throw err;
      }
    },
    setStatus: async (id, status) => {
      const current = tenants.find((t) => t.id === id);
      const endpoint = status === 'active'
        ? (current && current.rawStatus === 'suspended' ? 'reactivate' : 'verify')
        : 'suspend';
      try {
        const updated = await api(`/platform/tenants/${id}/${endpoint}`, { method: 'POST', body: JSON.stringify({ reason: 'Platform admin action' }) });
        const next = mapTenant(updated);
        setTenants((ts) => ts.map((t) => t.id === id ? next : t));
        toast(tx(status === 'active' ? 'Tenant activated' : 'Tenant deactivated'), status === 'active' ? 'check' : 'alert');
      } catch (err) { toast(err.message || 'Could not update tenant', 'alert'); }
    },
    setAd: async (id, ad) => {
      try {
        const updated = await api(`/platform/tenants/${id}`, { method: 'PATCH', body: JSON.stringify({ ad }) });
        const next = mapTenant(updated);
        setTenants((ts) => ts.map((t) => t.id === id ? next : t));
        toast(ad ? 'Sponsored placement enabled' : 'Sponsored placement disabled', 'check');
      } catch (err) { toast(err.message || 'Could not update sponsored placement', 'alert'); }
    },
    deleteTenant: async (id) => {
      try {
        await api(`/platform/tenants/${id}`, { method: 'DELETE' });
        setTenants((ts) => ts.filter((t) => t.id !== id));
        toast(tx('Tenant deleted'), 'trash');
      } catch (err) { toast(err.message || 'Could not delete tenant', 'alert'); }
    },
    addAdmin: async (id, a) => {
      try {
	        const admin = await api(`/platform/tenants/${id}/admins`, { method: 'POST', body: JSON.stringify({ name: a.name, email: a.email, role: a.role }) });
	        setTenants((ts) => ts.map((t) => t.id === id ? { ...t, admins: [...t.admins, { id: admin.id, name: admin.name, email: admin.email || admin.phone || '—', role: admin.role === 'owner' ? 'owner' : 'manager', status: admin.status, acceptToken: admin.acceptToken || '' }] } : t));
	        if (admin.acceptToken) {
            const tenant = tenants.find((t) => t.id === id);
            copyText(tenantAdminAcceptUrl(tenant, admin), tx('First-login link copied'));
          }
          toast(tx('Invite sent'), 'mail');
      } catch (err) { toast(err.message || 'Could not invite admin', 'alert'); }
    },
    removeAdmin: async (id, aid) => {
      try {
        await api(`/platform/tenants/${id}/admins/${aid}`, { method: 'DELETE' });
        setTenants((ts) => ts.map((t) => t.id === id ? { ...t, admins: t.admins.filter((x) => x.id !== aid) } : t));
        toast(tx('Admin removed'), 'check');
      } catch (err) { toast(err.message || 'Could not remove admin', 'alert'); }
    },
    createTenant: async (data) => {
      try {
        const created = await api('/platform/tenants', {
          method: 'POST',
          body: JSON.stringify({
            name: data.name, slug: data.slug, city: data.city, address: data.address,
            countryCode: data.countryCode,
            currency: data.currency,
            ownerName: data.ownerName, ownerEmail: data.ownerEmail, ownerPhone: data.ownerPhone || '',
            plan: data.plan, admins: data.admins.map((a) => ({ name: a.name, email: a.email, role: a.role })),
            location: data.location,
            googlePlaceId: data.googlePlaceId,
            workshopType: data.workshopType,
            warranty: false, insurance: false, specializations: data.specializations,
          }),
        });
        const t = mapTenant(created);
        setTenants((ts) => [t, ...ts]); toast(tx('Tenant created'), 'check'); go('tenant', { id: t.id });
        if (t.url) window.open(t.url, '_blank', 'noopener,noreferrer');
      } catch (err) { toast(err.message || 'Could not create tenant', 'alert'); }
    },
  };

  const scopedTenants = tenants.filter((tenant) => regionMatches(tenant, region));
  const counts = { total: scopedTenants.length, admins: platformAdmins.length, applications: applications.filter((item) => ['submitted', 'changes_requested'].includes(item.status)).length };
  const cur = route.name === 'tenant' ? tenants.find((t) => t.id === route.params.id) : null;

  if (!sessionUser) {
    return <AdminLoginScreen onLogin={setSessionUser} />;
  }

  return (
      <div className="viewport">
      <div className="shell">
        <Sidebar route={route} go={go} counts={counts} tenants={tenants} region={region} onRegion={(next) => { setRegion(next); if (route.name === 'tenant') go('tenants'); }} user={sessionUser} onLogout={logout} />
        <main className="main">
          {loading && <div className="banner-warn" style={{ margin: 20 }}>{React.createElement(Icon.clock, { size: 16 })}<span>Loading tenants from API...</span></div>}
          {route.name === 'overview' && <OverviewView tenants={scopedTenants} go={go} />}
          {route.name === 'tenants' && <TenantsView tenants={scopedTenants} go={go} actions={actions} openRegister={() => setRegister(true)} />}
          {route.name === 'applications' && <ApplicationsView applications={applications} actions={actions} />}
          {route.name === 'tenant' && <TenantDetailView tenant={cur} go={go} actions={actions} />}
          {route.name === 'admins' && <PlatformAdminsView admins={platformAdmins} currentUser={sessionUser} actions={actions} />}
        </main>
      </div>

      {register && <RegisterTenantModal onClose={() => setRegister(false)} actions={actions} />}
      <ToastHost />
      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor label="Accent color" value={tw.accent} options={ACCENTS} onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={tw.dark} onChange={(v) => setTweak('dark', v)} />
      </TweaksPanel>
    </div>
  );
}

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