// App.jsx — Atlas CRM router and shell.

const ROUTES = [
  { hash:'#/dashboard',  label:'Tableau de bord', screen:'Dashboard',  sub:'Vue d\u2019ensemble' },
  { hash:'#/crm',        label:'CRM',             screen:'CRM',        sub:'Gestion clients' },
  { hash:'#/produits',   label:'Produits',        screen:'Produits',   sub:'Catalogue' },
  { hash:'#/categories', label:'Cat\u00e9gories', screen:'Categories', sub:'Gestion des cat\u00e9gories' },
  { hash:'#/services',   label:'Services',        screen:'Services',   sub:'Prestations' },
  { hash:'#/inventaire', label:'Inventaire',      screen:'Inventaire', sub:'Stocks multi-entrep\u00f4ts' },
  { hash:'#/parametres', label:'Param\u00e8tres', screen:'Parametres', sub:'Configuration' },
];

function useHash() {
  const [h, setH] = React.useState(window.location.hash || '#/dashboard');
  React.useEffect(() => {
    const fn = () => setH(window.location.hash || '#/dashboard');
    window.addEventListener('hashchange', fn);
    return () => window.removeEventListener('hashchange', fn);
  }, []);
  return h;
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent":   "#C2410C",
  "density":  "Confortable",
  "theme":    "Clair",
  "sidebar":  "Sombre"
}/*EDITMODE-END*/;

function App() {
  const hash = useHash();
  const route = ROUTES.find(r => r.hash === hash) || ROUTES[0];
  const Screen = ({ Dashboard, CRM, Produits, Categories, Services, Inventaire, Parametres })[route.screen];

  const [theme, setTheme] = React.useState('light');
  const [notif, setNotif] = React.useState(false);
  const tweaksHook = (typeof useTweaks === 'function') ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const tweaks = tweaksHook[0];
  const setTweak = tweaksHook[1];

  // Sync theme to data-theme + tweak
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  // Apply accent color from tweaks
  React.useEffect(() => {
    document.documentElement.style.setProperty('--app-warm', tweaks.accent);
    const r = parseInt(tweaks.accent.slice(1,3),16);
    const g = parseInt(tweaks.accent.slice(3,5),16);
    const b = parseInt(tweaks.accent.slice(5,7),16);
    document.documentElement.style.setProperty('--app-warm-soft', `rgba(${r},${g},${b},.10)`);
  }, [tweaks.accent]);

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  return (
    <div style={{ display:'flex', minHeight:'100vh', background:'var(--app-bg)' }}>
      <Sidebar activeHash={route.hash} routes={ROUTES} />
      <div style={{ flex:1, minWidth:0, display:'flex', flexDirection:'column' }}>
        <Topbar
          title={route.label}
          subtitle={route.sub}
          theme={theme}
          onToggleTheme={()=>setTheme(t=> t==='dark'?'light':'dark')}
          onToggleNotif={()=>setNotif(n=>!n)}
        />
        <Screen />
      </div>

      <NotificationsPanel open={notif} onClose={()=>setNotif(false)} />

      {/* Tweaks panel */}
      {typeof TweaksPanel === 'function' && (
        <TweaksPanel title="Tweaks · Pulse">
          <TweakSection title="Apparence">
            <TweakColor
              label="Accent chaud"
              value={tweaks.accent}
              onChange={v => setTweak('accent', v)}
              options={['#C2410C','#D97706','#0F766E','#1379F0','#9747FF']}
            />
            <TweakRadio
              label="Th\u00e8me"
              value={theme==='dark'?'Sombre':'Clair'}
              onChange={v => setTheme(v==='Sombre'?'dark':'light')}
              options={['Clair','Sombre']}
            />
          </TweakSection>
          <TweakSection title="Navigation">
            <TweakButton onClick={()=>window.location.hash='#/dashboard'}>Aller au tableau de bord</TweakButton>
            <TweakButton onClick={()=>window.location.hash='#/crm'}>CRM &rarr; Pipeline</TweakButton>
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

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