// T2 Falcon Admin — Main app

const { useState, useEffect, useMemo } = React;

// Placeholder page (for non-Hierarchy sidebar items)
const PlaceholderPage = ({ title, t }) => (
  <div className="page" style={{ gridTemplateColumns: '1fr' }}>
    <div className="content-panel" style={{ alignItems: 'center', justifyContent: 'center', padding: 80 }}>
      <div className="empty-state">
        <div style={{ width: 72, height: 72, background: 'var(--teal-light)', borderRadius: 20,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      margin: '0 auto 16px', color: 'var(--teal)',
                      border: '1px solid rgba(13, 63, 68, 0.12)' }}>
          <IcBuilding size={32} stroke={1.5} />
        </div>
        <h2 style={{ fontSize: 20, color: 'var(--text)', fontWeight: 600, marginBottom: 8 }}>{title}</h2>
        <p style={{ maxWidth: 380, margin: '0 auto', lineHeight: 1.6 }}>{t.placeholderBody}</p>
      </div>
    </div>
  </div>
);

// Toasts
const Toasts = ({ toasts, dismiss }) => (
  <div className="toast-stack">
    {toasts.map(toast => (
      <div key={toast.id} className="toast">
        <span className="toast-icon"><IcCheck size={12} stroke={3} /></span>
        <span className="toast-msg">{toast.msg}</span>
        <button className="toast-close" onClick={() => dismiss(toast.id)}><IcClose size={14} /></button>
      </div>
    ))}
  </div>
);

// Tweaks defaults (persisted via edit mode host)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "defaultLang": "en",
  "defaultClient": "aramco",
  "sidebarStart": "expanded",
  "showRoleUI": true
}/*EDITMODE-END*/;

// ===== System-wide "Ask AI" assistant (opens from the header on every page) =====
const AiSpark = ({ size }) => <svg width={size || 16} height={size || 16} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l1.7 4.6 4.6 1.7-4.6 1.7L12 15.1l-1.7-4.6L5.7 8.8l4.6-1.7L12 2.5z" /><path d="M18.5 13.5l.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4-2.4-.9 2.4-.9.9-2.4z" /></svg>;

const AskAIGlobal = ({ pageTitle, t = {}, onClose }) => {
  const greeting = `Hi! I'm Falcon AI. Ask me anything about ${pageTitle} — I can summarize what you're seeing, explain a metric, or suggest a next step.`;
  const suggestions = [`Summarize ${pageTitle}`, 'What can I do on this page?', 'Explain the key metrics'];
  const [msgs, setMsgs] = useState([{ role: 'ai', text: greeting }]);
  const [draft, setDraft] = useState('');
  const bodyRef = React.useRef(null);
  useEffect(() => { const b = bodyRef.current; if (b) b.scrollTop = b.scrollHeight; }, [msgs.length]);
  useEffect(() => { const f = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', f); return () => document.removeEventListener('keydown', f); }, []);
  const answer = (q) => {
    const l = q.toLowerCase();
    if (/summar/.test(l)) return `You're on the ${pageTitle} screen. I can walk you through the data shown here, flag anything that needs attention, and suggest what to do next.`;
    if (/do (on|here)|help|how do/.test(l)) return `On ${pageTitle} you can review and manage the items shown. Tell me what you're trying to accomplish and I'll point you to the right action.`;
    if (/metric|number|kpi|data|column|chart/.test(l)) return `I can explain any figure on this page — just tell me which metric or column you'd like me to break down.`;
    return `Good question about ${pageTitle}. In this prototype I give general guidance; connected to live data I'd give exact, page-specific answers.`;
  };
  const send = (q) => { const text = (q || draft).trim(); if (!text) return; setMsgs((m) => [...m, { role: 'user', text }, { role: 'ai', text: answer(text) }]); setDraft(''); };
  return (
    <React.Fragment>
      <div className="drawer-overlay bsa-ai-scrim" onMouseDown={onClose}></div>
      <aside className="drawer bsa-ai-drawer" role="dialog" aria-modal="true">
        <div className="bsa-modal-head bsa-ai-head">
          <div className="bsa-modal-titlewrap"><div className="bsa-modal-title bsa-ai-title"><span className="bsa-ai-spark"><AiSpark size={17} /></span> {t.bsaAskAI || t.askAI || 'Ask AI'}</div><div className="bsa-modal-sub">{pageTitle}</div></div>
          <button className="bsa-modal-close" onClick={onClose} aria-label={t.close || 'Close'}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg></button>
        </div>
        <div className="bsa-ai-body" ref={bodyRef}>
          {msgs.map((m, i) => (
            <div key={i} className={`bsa-ai-msg ${m.role}`}>
              <div className="bsa-ai-bubble">
                {m.role === 'ai' ? <div className="bsa-ai-name"><span className="bsa-ai-ava"><AiSpark size={13} /></span> {t.bsaFalconAi || 'Falcon AI'}</div> : null}
                {m.text}
              </div>
            </div>
          ))}
        </div>
        <div className="bsa-ai-suggest">
          <div className="bsa-ai-suggest-h">{t.bsaSuggestedQ || 'Suggested questions'}</div>
          {suggestions.map((s) => <button key={s} type="button" className="bsa-ai-chip" onClick={() => send(s)}>{s}</button>)}
        </div>
        <div className="bsa-ai-input">
          <input value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') send(); }} placeholder={t.bsaAskAnything || 'Ask anything…'} />
          <button type="button" className="bsa-ai-send" onClick={() => send()} aria-label={t.bsaSendMsg || 'Send'}><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></svg></button>
        </div>
      </aside>
    </React.Fragment>
  );
};

const App = () => {
  // Language
  const [lang, setLang] = useState(() => {
    return localStorage.getItem('admin_lang') || TWEAK_DEFAULTS.defaultLang || 'en';
  });
  const t = adminDict[lang];

  // Mood (light/dark)
  const [mood, setMood] = useState('light');

  // Sidebar state
  const [collapsed, setCollapsed] = useState(TWEAK_DEFAULTS.sidebarStart === 'collapsed');

  // Active page
  const [activePage, setActivePage] = useState('orgHierarchy');

  // Tree state (mutable)
  const [tree, setTree] = useState(() => clone(seedTree));

  // Selected node (client)
  const [selected, setSelected] = useState(TWEAK_DEFAULTS.defaultClient || 'aramco');

  // Expanded tree state
  const [expanded, setExpanded] = useState({ aramco: true, cc: true });

  const toggleExpand = (id) => setExpanded(ex => ({ ...ex, [id]: !ex[id] }));

  // Drawer
  const [drawer, setDrawer] = useState(null);  // { mode: 'add'|'edit', targetId, initialName }

  // Context menu
  const [ctxOpenFor, setCtxOpenFor] = useState(null);

  // Toasts
  const [toasts, setToasts] = useState([]);
  const pushToast = (msg) => {
    const id = Date.now() + Math.random();
    setToasts(ts => [...ts, { id, msg }]);
    setTimeout(() => setToasts(ts => ts.filter(t => t.id !== id)), 3500);
  };
  const dismissToast = (id) => setToasts(ts => ts.filter(t => t.id !== id));

  // Edit mode (Tweaks)
  const [editMode, setEditMode] = useState(false);

  // System-wide "Ask AI": the header button calls window.falconAskAI.open().
  // A page can register its own richer handler (e.g. a transaction assistant); otherwise the
  // generic page-aware panel below opens.
  const [aiOpen, setAiOpen] = useState(false);
  if (!window.falconAskAI) {
    window.falconAskAI = {
      handler: null, _openGlobal: null,
      open() { if (this.handler) this.handler(); else if (this._openGlobal) this._openGlobal(); },
    };
  }
  useEffect(() => { window.falconAskAI._openGlobal = () => setAiOpen(true); return () => { window.falconAskAI._openGlobal = null; }; }, []);

  useEffect(() => {
    document.body.dir = lang === 'ar' ? 'rtl' : 'ltr';
    localStorage.setItem('admin_lang', lang);
  }, [lang]);

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

  // Cross-page navigation: "Activate" a commchannel routes by channel —
  // Voice → Voice Service (Voice account tab); WhatsApp → Meta Service .Mng.
  useEffect(() => {
    window.falconGoVoiceAccount = () => {
      window.__vsInitial = { viewAs: 'client', tab: 'account' };
      setSelected('aramco');
      setActivePage('commChannels:voice');
    };
    window.falconGoMetaService = () => {
      setSelected('aramco');
      setActivePage('commChannels:whatsapp');
    };
    return () => { delete window.falconGoVoiceAccount; delete window.falconGoMetaService; };
  }, []);

  // Select a client -> auto-switch to Organization Hierarchy page,
  // and auto-expand all ancestors so the selected row is rendered + scrollable into view.
  const selectNode = (id) => {
    setSelected(id);
    if (activePage !== 'orgHierarchy') setActivePage('orgHierarchy');
    const path = pathTo(tree, id);
    if (path && path.length > 1) {
      // Expand every ancestor (everything except the node itself)
      setExpanded(ex => {
        const next = { ...ex };
        for (let i = 0; i < path.length - 1; i++) next[path[i]] = true;
        return next;
      });
    }
  };

  // Drawer submit handler
  const handleDrawerSubmit = (name) => {
    if (!drawer) return;
    const next = clone(tree);
    const target = findNode(next, drawer.targetId);
    if (!target) return;

    if (drawer.mode === 'add') {
      const newId = 'n' + Date.now();
      const newNode = { id: newId, type: target.type === 'root' ? 'client' : 'node', name, users: seedTree.users, children: [] };
      if (target.type === 'root') newNode.brand = 'generic';
      target.children = [...(target.children || []), newNode];
      setTree(next);
      setExpanded(ex => ({ ...ex, [drawer.targetId]: true }));
      pushToast(t.toastNodeAdded);
    } else if (drawer.mode === 'edit') {
      target.name = name;
      setTree(next);
      pushToast(t.toastNodeEdited);
    }
    setDrawer(null);
  };

  // Save tweak helper
  const setTweak = (key, value) => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: value } }, '*');
  };

  // Page title + breadcrumb based on activePage
  const pageTitleMap = {
    dashboard:      t.dashboard,
    contactGroups:  t.contactGroups,
    templates:      t.templates,
    templateMgmt:   t.templateMgmt,
    orgHierarchy:   t.orgHierarchy,
    permissions:    t.permissions,
    walletBalance:  t.walletBalance,
    commChannels:   t.commChannels,
    'commChannels:whatsapp': t.smWhatsapp,
    'commChannels:voice': t.vsTitle,
    marketplace:    t.marketplace,
    'marketplace:basic':  t.bsaBasicApp || 'Basic Application',
    'marketplace:survey': t.bsaSurveyPro || 'Survey Pro',
    contractsCost:  t.contractsCost,
    systemSettings: t.systemSettings,
    auditLog:       t.auditLog,
  };
  const pageTitle = pageTitleMap[activePage] || t.orgHierarchy;
  const breadcrumb = [pageTitle];

  return (
    <div className={`app ${collapsed ? 'collapsed' : ''}`} data-screen-label={activePage}>
      <Sidebar
        collapsed={collapsed}
        setCollapsed={setCollapsed}
        activePage={activePage}
        setActivePage={setActivePage}
        lang={lang}
        t={t}
      />
      <div className="main">
        <Topbar
          pageTitle={pageTitle}
          breadcrumb={breadcrumb}
          lang={lang}
          setLang={setLang}
          mood={mood}
          setMood={setMood}
          t={t}
        />

        {activePage === 'orgHierarchy' ? (
          <HierarchyPage
            tree={tree}
            setTree={setTree}
            selected={selected}
            selectNode={selectNode}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
            drawer={drawer}
            setDrawer={setDrawer}
            ctxOpenFor={ctxOpenFor}
            setCtxOpenFor={setCtxOpenFor}
          />
        ) : activePage === 'templates' ? (
          <TemplatesPage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'templateMgmt' ? (
          <TemplateManagementPage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'commChannels:whatsapp' ? (
          <MetaServicePage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'commChannels:voice' ? (
          <VoiceServicePage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'commChannels' ? (
          <CommChannelsPage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'marketplace' ? (
          <MarketplacePage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'marketplace:basic' ? (
          <BasicApplicationPage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'contactGroups' ? (
          <ContactGroupsPage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'contractsCost' ? (
          <ContractsPage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : activePage === 'walletBalance' ? (
          <WalletPage
            tree={tree}
            selected={selected}
            selectNode={(id) => setSelected(id)}
            expanded={expanded}
            toggleExpand={toggleExpand}
            lang={lang}
            t={t}
            pushToast={pushToast}
          />
        ) : (
          <PlaceholderPage title={pageTitle} t={t} />
        )}
      </div>

      {drawer && (
        <NodeDrawer
          mode={drawer.mode}
          initialName={drawer.initialName || ''}
          onSubmit={handleDrawerSubmit}
          onClose={() => setDrawer(null)}
          t={t}
        />
      )}

      <Toasts toasts={toasts} dismiss={dismissToast} />

      {aiOpen && <AskAIGlobal pageTitle={pageTitle} t={t} onClose={() => setAiOpen(false)} />}

      {editMode && (
        <div className="tweaks-panel">
          <div className="tweaks-head">Tweaks</div>
          <div className="tweaks-body">
            <div className="tweak-row">
              <label>Language</label>
              <select value={lang} onChange={(e) => { setLang(e.target.value); setTweak('defaultLang', e.target.value); }}>
                <option value="en">English</option>
                <option value="ar">العربية</option>
              </select>
            </div>
            <div className="tweak-row">
              <label>Active Page</label>
              <select value={activePage} onChange={(e) => setActivePage(e.target.value)}>
                {Object.entries(pageTitleMap).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
            </div>
            <div className="tweak-row">
              <label>Selected Client / Node</label>
              <select value={selected} onChange={(e) => { setSelected(e.target.value); setTweak('defaultClient', e.target.value); }}>
                <option value="falcon">Falcon (root)</option>
                <option value="alrajhi">Al-Rajhi Bank</option>
                <option value="snb">Saudi National Bank</option>
                <option value="bupa">Bupa Arabia</option>
                <option value="aramco">Aramco</option>
                <option value="hr">Aramco › Human Resources</option>
                <option value="cc">Aramco › Contact Center</option>
                <option value="inbound">Aramco › Contact Center › Inbound</option>
              </select>
            </div>
            <div className="tweak-row">
              <label>Sidebar</label>
              <label className="toggle-switch">
                <input type="checkbox" checked={collapsed} onChange={(e) => { setCollapsed(e.target.checked); setTweak('sidebarStart', e.target.checked ? 'collapsed' : 'expanded'); }} />
                <span className="knob"></span>
                <span>Collapsed</span>
              </label>
            </div>
            <div className="tweak-row">
              <label>Simulate</label>
              <button className="btn btn-secondary" style={{ height: 34 }} onClick={() => pushToast(t.toastNodeAdded)}>Show success toast</button>
              <button className="btn btn-secondary" style={{ height: 34 }} onClick={() => setDrawer({ mode: 'add', targetId: selected })}>Open Add Node drawer</button>
              <button className="btn btn-secondary" style={{ height: 34 }} onClick={() => setCtxOpenFor(selected)}>Open node context menu</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

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