// Clientes app — same shell as Dashboard/CRM, with list↔detail routing

const CLI_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1F93FF",
  "density": "comfortable"
}/*EDITMODE-END*/;

function ClientesApp() {
  const [t, setTweak] = useTweaks(CLI_TWEAK_DEFAULTS);

  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem('horos-theme') || 'light'; }
    catch { return 'light'; }
  });
  React.useEffect(() => {
    document.documentElement.dataset.theme = theme;
    try { localStorage.setItem('horos-theme', theme); } catch {}
  }, [theme]);

  React.useEffect(() => {
    const root = document.documentElement;
    const a = t.accent;
    root.style.setProperty('--accent', a);
    root.style.setProperty('--accent-soft', cliShade(a, 60));
    root.style.setProperty('--accent-glow', cliHexA(a, 0.35));
  }, [t.accent]);

  // route: list | detail
  const [selected, setSelected] = React.useState(() => {
    try {
      const id = new URL(location.href).searchParams.get('id');
      if (id) {
        return CLIENTES.find(c => c.id === id) || null;
      }
    } catch {}
    return null;
  });

  React.useEffect(() => {
    const url = new URL(location.href);
    if (selected) url.searchParams.set('id', selected.id);
    else url.searchParams.delete('id');
    history.replaceState(null, '', url);
  }, [selected]);

  const handleSelect = (c) => {
    if (c.credit) {
      // Registro rico (CLIENTES demo) → abre detalhe completo
      setSelected(c);
    } else {
      // Lead do banco → ficha na metade da tela (botão no painel abre em tela cheia)
      setSheetId(c.id);
    }
  };
  const [sheetId, setSheetId] = React.useState(null);
  const closeSheet = React.useCallback(() => setSheetId(null), []);

  return (
    <div className={`app density-${t.density}`}>
      <Sidebar active="clients" />

      <div className="main">
        <Topbar theme={theme} onThemeChange={setTheme} />
        <div className="content cli-content">
          {selected ? (
            <ClienteDetailPage c={selected} onBack={() => setSelected(null)} />
          ) : (
            <ClientesListPage onSelect={handleSelect} />
          )}
          {sheetId && <ClienteSheetDrawer leadId={sheetId} onClose={closeSheet} />}
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Aparência">
          <TweakColor label="Cor de destaque" value={t.accent} onChange={(v) => setTweak('accent', v)}
                      options={['#1F93FF', '#007dff', '#10b981', '#f97316', '#ec4899']} />
          <TweakRadio label="Densidade" value={t.density} onChange={(v) => setTweak('density', v)}
                      options={[{ value: 'comfortable', label: 'Confortável' }, { value: 'compact', label: 'Compacta' }]} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function cliHexA(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function cliShade(hex, amount) {
  const h = hex.replace('#', '');
  const r = Math.min(255, parseInt(h.slice(0, 2), 16) + amount);
  const g = Math.min(255, parseInt(h.slice(2, 4), 16) + amount);
  const b = Math.min(255, parseInt(h.slice(4, 6), 16) + amount);
  return `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;
}

(async () => {
  if (window.DB_PROMISE) await window.DB_PROMISE;
  const cliRoot = ReactDOM.createRoot(document.getElementById('root'));
  cliRoot.render(<ClientesApp />);
})();