/* App router + tweak panel */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "teal",
  "density": "comfortable",
  "showDemoSwitch": true,
  "sidebarStart": "expanded"
}/*EDITMODE-END*/;

function hexToRgb(hex) {
  const h = hex.replace('#','');
  const n = parseInt(h.length===3 ? h.split('').map(c=>c+c).join('') : h, 16);
  return [(n>>16)&255, (n>>8)&255, n&255];
}

const ACCENT_PALETTES = {
  violet: { 500:'#635BFF', 600:'#4F46E5', 400:'#8B85FF', 300:'#B3AEFF', 200:'#D6D3FF', 50:'#F4F2FF', 100:'#EBE9FE', 800:'#3730A3', deep1:'#2E2A8C', deep2:'#1A164F', deep3:'#0A083A' },
  indigo: { 500:'#4F46E5', 600:'#3730A3', 400:'#818CF8', 300:'#A5B4FC', 200:'#C7D2FE', 50:'#EEF2FF', 100:'#E0E7FF', 800:'#1E1B4B', deep1:'#2A2391', deep2:'#1A1456', deep3:'#0B0838' },
  teal:   { 500:'#0EAF9E', 600:'#0B8E80', 400:'#3FD2C0', 300:'#7CE3D6', 200:'#A8EEE4', 50:'#E6FAF7', 100:'#C8F1EA', 800:'#0B5048', deep1:'#0E5E55', deep2:'#073A35', deep3:'#031E1B' },
  orange: { 500:'#F47B20', 600:'#C25A0D', 400:'#FB9A50', 300:'#FCBA85', 200:'#FED4B0', 50:'#FFF1E2', 100:'#FFDBB5', 800:'#7A2E03', deep1:'#7A360B', deep2:'#4A1F05', deep3:'#260F02' },
  pacto:  { 500:'#5B2BE2', 600:'#4521B0', 400:'#8A66ED', 300:'#AE93F2', 200:'#CFBDF8', 50:'#F1EBFF', 100:'#DDD0FB', 800:'#2A0F66', deep1:'#311178', deep2:'#1C0A48', deep3:'#0C0428' },
};

function applyAccent(name) {
  const p = ACCENT_PALETTES[name] || ACCENT_PALETTES.violet;
  const [r,g,b] = hexToRgb(p[500]);
  document.documentElement.style.setProperty('--accent-500', p[500]);
  document.documentElement.style.setProperty('--accent-600', p[600]);
  document.documentElement.style.setProperty('--accent-400', p[400]);
  document.documentElement.style.setProperty('--accent-300', p[300]);
  document.documentElement.style.setProperty('--accent-200', p[200]);
  document.documentElement.style.setProperty('--accent-100', p[100]);
  document.documentElement.style.setProperty('--accent-50',  p[50]);
  document.documentElement.style.setProperty('--accent-deep1', p.deep1);
  document.documentElement.style.setProperty('--accent-deep2', p.deep2);
  document.documentElement.style.setProperty('--accent-deep3', p.deep3);
  document.documentElement.style.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
  document.documentElement.style.setProperty('--accent-glow', `rgba(${r}, ${g}, ${b}, 0.35)`);
  // Override Tailwind violet at runtime
  const css = `
    .bg-violet-500 { background-color: ${p[500]} !important; }
    .bg-violet-600 { background-color: ${p[600]} !important; }
    .bg-violet-50  { background-color: ${p[50]}  !important; }
    .bg-violet-50\\/40 { background-color: rgba(${r}, ${g}, ${b}, 0.06) !important; }
    .bg-violet-100 { background-color: ${p[100]} !important; }
    .bg-violet-200 { background-color: ${p[200]} !important; }
    .text-violet-200 { color: ${p[200]} !important; }
    .text-violet-200\\/70 { color: rgba(${r}, ${g}, ${b}, 0.55) !important; }
    .text-violet-200\\/80 { color: rgba(${r}, ${g}, ${b}, 0.65) !important; }
    .text-violet-200\\/60 { color: rgba(${r}, ${g}, ${b}, 0.5) !important; }
    .text-violet-100 { color: ${p[100]} !important; }
    .text-violet-300 { color: ${p[300]} !important; }
    .text-violet-400 { color: ${p[400]} !important; }
    .text-violet-500 { color: ${p[500]} !important; }
    .text-violet-600 { color: ${p[600]} !important; }
    .text-violet-700 { color: ${p[600]} !important; }
    .text-violet-800 { color: ${p[800]} !important; }
    .border-violet-100 { border-color: ${p[100]} !important; }
    .border-violet-200 { border-color: ${p[200]} !important; }
    .border-violet-300 { border-color: ${p[300]} !important; }
    .border-violet-500 { border-color: ${p[500]} !important; }
    .ring-violet-400 { --tw-ring-color: ${p[400]} !important; }
    .accent-violet-500 { accent-color: ${p[500]} !important; }
    .from-violet-600 { --tw-gradient-from: ${p[500]} var(--tw-gradient-from-position); --tw-gradient-to: rgba(${r}, ${g}, ${b}, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
    .to-violet-800   { --tw-gradient-to: ${p.deep1} var(--tw-gradient-to-position); }
    .hover\\:border-violet-200:hover { border-color: ${p[200]} !important; }
    .hover\\:bg-violet-50\\/40:hover { background-color: rgba(${r}, ${g}, ${b}, 0.08) !important; }
    .ring-violet-400.ring-inset { box-shadow: inset 0 0 0 2px ${p[400]} !important; }
  `;
  let tag = document.getElementById('accent-override');
  if (!tag) { tag = document.createElement('style'); tag.id = 'accent-override'; document.head.appendChild(tag); }
  tag.textContent = css;
}

function useTweaks() {
  const [t, setT] = useState(() => ({ ...TWEAK_DEFAULTS }));
  const set = (k, v) => {
    setT(prev => {
      const next = typeof k === 'object' ? { ...prev, ...k } : { ...prev, [k]: v };
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
      return next;
    });
  };
  return [t, set];
}

function TweaksPanel({ open, onClose, tweaks, setTweak }) {
  if (!open) return null;
  return (
    <div className="fixed top-4 right-4 z-[120] w-[320px] bg-white rounded-xl2 shadow-pop border border-line-200 overflow-hidden no-print">
      <div className="px-4 py-3 border-b border-line-100 flex items-center justify-between bg-paper-100">
        <div className="flex items-center gap-2">
          <Icon name="sparkles" className="text-violet-600"/>
          <div className="font-semibold text-[13px]">Tweaks</div>
        </div>
        <button onClick={onClose} className="text-ink-400 hover:text-ink-900 h-7 w-7 rounded-md hover:bg-paper-200 flex items-center justify-center"><Icon name="x"/></button>
      </div>
      <div className="p-4 space-y-4">
        <div>
          <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold mb-2">Cor de acento</div>
          <div className="grid grid-cols-4 gap-2">
            {Object.entries(ACCENT_PALETTES).map(([k, p]) => (
              <button key={k} onClick={()=>setTweak('accent', k)}
                className={`h-12 rounded-lg border-2 flex flex-col items-center justify-center gap-1 ${tweaks.accent===k?'border-ink-900':'border-line-200'}`}>
                <span className="h-4 w-4 rounded-full" style={{background:p[500]}}/>
                <span className="text-[10px] capitalize">{k}</span>
              </button>
            ))}
          </div>
        </div>
        <div>
          <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold mb-2">Demo switcher</div>
          <label className="flex items-center justify-between text-[13px]">
            <span>Mostrar toggle flutuante</span>
            <Toggle checked={tweaks.showDemoSwitch} onChange={v=>setTweak('showDemoSwitch', v)}/>
          </label>
          <div className="text-[11px] text-ink-400 mt-1">Aid visual de demo · canto inferior direito</div>
        </div>
        <div className="border-t border-line-100 pt-3 text-[11px] text-ink-400">
          As alterações persistem entre recarregamentos.
        </div>
      </div>
    </div>
  );
}

/* ----------------- ROUTER ----------------- */
function App() {
  const [route, setRoute] = useState(() => {
    const h = (location.hash || '').replace(/^#\/?/, '');
    return h || 'login';
  });
  const [scope, setScope] = useState({ kind:'rede', id:'r3' }); // Smart Fit by default
  const [tweaks, setTweak] = useTweaks();
  const [tweaksOpen, setTweaksOpen] = useState(false);

  // Apply accent on change
  useEffect(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);

  // Sync hash with route
  useEffect(() => {
    location.hash = '#/' + route;
    window.scrollTo(0, 0);
  }, [route]);

  // Listen to hash changes (back/forward)
  useEffect(() => {
    const onHash = () => {
      const h = (location.hash || '').replace(/^#\/?/, '');
      setRoute(h || 'login');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Tweak protocol
  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      else if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const navigate = (r) => setRoute(r);

  const role = route.startsWith('admin') ? 'admin' : route.startsWith('portal') ? 'portal' : null;

  const isLogin = route === 'login';
  const is404 = route === '404';

  /* Render page contents based on route */
  function renderPage() {
    // Admin routes
    if (route === 'admin')                       return <AdminDashboard onNavigate={navigate}/>;
    if (route === 'admin/orquestrador')          return <AdminOrquestrador/>;
    if (route === 'admin/clientes')              return <AdminClientes onNavigate={navigate}/>;
    if (route === 'admin/clientes/novo')         return <AdminClienteNovo onNavigate={navigate}/>;
    if (route.startsWith('admin/clientes/'))     return <AdminClienteDetail onNavigate={navigate} id={route.split('/')[2]}/>;
    if (route === 'admin/adquirentes')           return <AdminAdquirentes onNavigate={navigate}/>;
    if (route.startsWith('admin/adquirentes/'))  return <AdminAdquirenteDetail onNavigate={navigate} id={route.split('/')[2]}/>;
    if (route === 'admin/taxas/adquirentes')     return <AdminTaxasAdquirentes/>;
    if (route === 'admin/taxas/clientes')        return <AdminTaxasClientes/>;
    if (route === 'admin/antecipacoes/solicitacoes') return <AdminAntecipacoesSolicitacoes/>;
    if (route === 'admin/antecipacoes/aprovacoes')   return <AdminAntecipacoesAprovacoes/>;
    if (route === 'admin/acoes/cancelamento')    return <AdminCancelamento/>;
    if (route === 'admin/acoes/baixa')           return <AdminBaixa/>;
    if (route === 'admin/acoes/transacoes')      return <AdminTransacoes onNavigate={navigate}/>;
    if (route === 'admin/conciliacao')           return <AdminConciliacao/>;
    if (route === 'admin/chargeback/importar')   return <AdminChargebackImportar/>;
    if (route === 'admin/chargeback/disputas')   return <AdminChargebackDisputas/>;
    if (route === 'admin/antifraude')            return <AdminAntifraude/>;
    if (route === 'admin/relatorios')            return <AdminRelatorios/>;
    if (route === 'admin/config/usuarios')       return <AdminConfigUsuarios/>;
    if (route === 'admin/config/auditoria')      return <AdminConfigAuditoria/>;

    // Portal routes
    if (route === 'portal')                        return <PortalDashboard scope={scope} onNavigate={navigate}/>;
    if (route === 'portal/vendas/simulador')       return <PortalSimulador scope={scope}/>;
    if (route === 'portal/vendas')                 return <PortalVendas scope={scope} onNavigate={navigate}/>;
    if (route === 'portal/vendas/carencia')        return <PortalCarencia scope={scope}/>;
    if (route === 'portal/agenda/previsao')        return <PortalAgendaPrevisao scope={scope}/>;
    if (route === 'portal/agenda/realizados')      return <PortalAgendaRealizados scope={scope}/>;
    if (route === 'portal/antecipacoes/solicitar') return <PortalAntecipacaoSolicitar scope={scope}/>;
    if (route === 'portal/antecipacoes/consulta')  return <PortalAntecipacoesConsulta scope={scope}/>;
    if (route === 'portal/assinaturas/planos')     return <PortalAssinaturasPlanos scope={scope}/>;
    if (route === 'portal/assinaturas/venda')      return <PortalAssinaturasVenda scope={scope}/>;
    if (route === 'portal/conciliacao/vendas')     return <PortalConciliacaoVendas scope={scope}/>;
    if (route === 'portal/conciliacao/pagamentos') return <PortalConciliacaoPagamentos scope={scope}/>;
    if (route === 'portal/relatorios')             return <PortalRelatorios/>;
    if (route === 'portal/config')                 return <PortalConfig scope={scope}/>;
    if (route === 'portal/integracao')             return <PortalIntegracao/>;

    return <NotFoundScreen onNavigate={navigate}/>;
  }

  /* Auth screens (no shell) */
  if (isLogin) return (
    <ToastProvider>
      <LoginScreen onNavigate={navigate}/>
      <TweaksPanel open={tweaksOpen} onClose={()=>{setTweaksOpen(false); window.parent.postMessage({type:'__edit_mode_dismissed'}, '*');}} tweaks={tweaks} setTweak={setTweak}/>
    </ToastProvider>
  );

  if (is404) return (
    <ToastProvider>
      <NotFoundScreen onNavigate={navigate}/>
    </ToastProvider>
  );

  /* Admin or Portal — pick the shell */
  const Shell = role === 'admin' ? AdminShell : PortalShell;
  const shellProps = role === 'portal' ? { current: route, onNavigate: navigate, scope, setScope } : { current: route, onNavigate: navigate };

  return (
    <ToastProvider>
      <Shell {...shellProps}>
        <div key={route} className="fade-up">
          {renderPage()}
        </div>
      </Shell>
      {tweaks.showDemoSwitch && (
        <DemoSwitcher role={role} onSwitch={(r) => navigate(r === 'admin' ? 'admin' : 'portal')}/>
      )}
      <TweaksPanel open={tweaksOpen} onClose={()=>{setTweaksOpen(false); window.parent.postMessage({type:'__edit_mode_dismissed'}, '*');}} tweaks={tweaks} setTweak={setTweak}/>
    </ToastProvider>
  );
}

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