// App shell — routing, sidebar, topbar, tweaks

function App() {
  const [tweaks, setTweaks] = useState(window.__TWEAKS__);
  const [route, setRoute] = useState(() => localStorage.getItem('meridian.route') || 'dashboard');
  const [reservation, setReservation] = useState(null);
  const [checkIn, setCheckIn] = useState(null);
  const [editMode, setEditMode] = useState(false);

  useEffect(() => { localStorage.setItem('meridian.route', route); }, [route]);

  // Apply theme & accent
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.setAttribute('data-accent', tweaks.accent);
  }, [tweaks]);

  // Tweak protocol
  useEffect(() => {
    const handle = e => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handle);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', handle);
  }, []);

  const nav = (r, payload) => {
    if (r === 'reservation') { setReservation(payload); setRoute('reservation'); }
    else setRoute(r);
  };
  const selectReservation = r => { setReservation(r); setRoute('reservation'); };
  const openCheckIn = r => setCheckIn(r);

  const updateTweak = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[k]: v}}, '*');
  };

  const navItems = [
    { group: 'main', items: [
      { id:'dashboard', label:'Dashboard', icon: Icons.Home },
      { id:'reservations', label:'Reservations', icon: Icons.Ticket, badge: '4' },
      { id:'calendar', label:'Calendar', icon: Icons.Calendar },
      { id:'inbox', label:'Inbox', icon: Icons.Inbox, badge: '3' },
    ]},
    { group: 'ops', label: 'Operations', items: [
      { id:'tasks', label:'Tasks & cleaning', icon: Icons.Broom },
      { id:'listings', label:'Listings', icon: Icons.Building },
      { id:'reviews', label:'Reviews', icon: Icons.Star },
    ]},
    { group: 'biz', label: 'Business', items: [
      { id:'finance', label:'Finance', icon: Icons.Chart },
      { id:'settings', label:'Team & settings', icon: Icons.Settings },
    ]},
  ];

  const routeLabels = {
    dashboard:'Dashboard', reservations:'Reservations', reservation:'Reservation',
    calendar:'Calendar', inbox:'Inbox', tasks:'Tasks & cleaning',
    listings:'Listings', reviews:'Reviews', finance:'Finance', settings:'Team & settings',
  };

  return (
    <div className="app">
      {/* Sidebar */}
      <aside className="sidebar">
        <div className="logo">
          <div className="logo-mark">M</div>
          <div className="logo-word">Meridian</div>
          <span className="logo-sub mono">v3.1</span>
        </div>
        {navItems.map(group => (
          <div key={group.group} className="nav-group">
            {group.label && <div className="nav-label">{group.label}</div>}
            {group.items.map(n => {
              const Ic = n.icon;
              const active = route === n.id || (n.id === 'reservations' && route === 'reservation');
              return (
                <div key={n.id} className={`nav-item ${active ? 'active' : ''}`} onClick={() => nav(n.id)}>
                  <Ic className="nav-icon"/> {n.label}
                  {n.badge && <span className="nav-badge">{n.badge}</span>}
                </div>
              );
            })}
          </div>
        ))}
        <div className="sidebar-foot">
          <div className="portfolio-pill">
            <div className="pav">AR</div>
            <div className="pinfo"><div className="pname">Ana Ribeiro</div><div className="pmeta">Meridian · 8 listings</div></div>
            <Icons.ChevD size={14} color="var(--ink-4)"/>
          </div>
        </div>
      </aside>

      {/* Main */}
      <main className="main">
        <div className="topbar">
          <div className="crumbs">
            <span>Meridian</span><span>/</span>
            <span className="now">{routeLabels[route]}</span>
            {route === 'reservation' && reservation && <><span>/</span><span className="mono xsmall">{reservation.id || 'R-2026-4471'}</span></>}
          </div>
          <div className="topbar-search">
            <Icons.Search size={14}/>
            <input placeholder="Search guests, reservations, properties…"/>
            <span className="kbd">⌘ K</span>
          </div>
          <button className="iconbtn"><Icons.Bell size={16}/><div className="dot"/></button>
          <button className="iconbtn" onClick={() => updateTweak('theme', tweaks.theme === 'light' ? 'dark' : 'light')}>
            {tweaks.theme === 'light' ? <Icons.Sparkle size={16}/> : <Icons.Sparkle size={16}/>}
          </button>
          <button className="btn btn-primary"><Icons.Plus size={14}/> Quick add</button>
        </div>

        {route === 'dashboard'   && <Dashboard nav={nav} openCheckIn={openCheckIn}/>}
        {route === 'reservations'&& <Reservations nav={nav} selectReservation={selectReservation}/>}
        {route === 'reservation' && <ReservationDetail reservation={reservation} nav={nav} openCheckIn={openCheckIn}/>}
        {route === 'calendar'    && <Calendar nav={nav}/>}
        {route === 'inbox'       && <Inbox nav={nav}/>}
        {route === 'finance'     && <Finance nav={nav}/>}
        {route === 'listings'    && <Listings nav={nav}/>}
        {route === 'tasks'       && <Tasks nav={nav}/>}
        {route === 'reviews'     && <Reviews nav={nav}/>}
        {route === 'settings'    && <Settings/>}
      </main>

      {checkIn && <CheckInModal reservation={checkIn} close={() => setCheckIn(null)}/>}

      {/* Tweaks panel */}
      <div className={`tweaks ${editMode ? 'open' : ''}`}>
        <div className="tweaks-title">Tweaks <button className="iconbtn" onClick={() => setEditMode(false)}><Icons.X size={14}/></button></div>
        <div className="tweaks-row">
          <label>Theme</label>
          <div className="seg">
            <button className={tweaks.theme === 'light' ? 'on' : ''} onClick={() => updateTweak('theme', 'light')}>Light</button>
            <button className={tweaks.theme === 'dark' ? 'on' : ''} onClick={() => updateTweak('theme', 'dark')}>Dark</button>
          </div>
        </div>
        <div className="tweaks-row">
          <label>Accent</label>
          <div className="swatches">
            {[
              { id:'moss',   c:'#2F4A2B' },
              { id:'ink',    c:'#1E2430' },
              { id:'rust',   c:'#8C3A1E' },
              { id:'cobalt', c:'#1E3A7A' },
            ].map(s => (
              <div key={s.id} className={`swatch ${tweaks.accent === s.id ? 'on' : ''}`} style={{background:s.c}} onClick={() => updateTweak('accent', s.id)}/>
            ))}
          </div>
        </div>
        <div className="tweaks-row">
          <label>Density</label>
          <div className="seg">
            <button className={tweaks.density === 'compact' ? 'on' : ''} onClick={() => updateTweak('density','compact')}>Compact</button>
            <button className={tweaks.density === 'comfortable' ? 'on' : ''} onClick={() => updateTweak('density','comfortable')}>Comfortable</button>
          </div>
        </div>
      </div>
    </div>
  );
}

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