// T2 Falcon Admin — Contracts & Cost Management: page + picker + list

const { useState: useStateCM, useMemo: useMemoCM, useEffect: useEffectCM, useRef: useRefCM } = React;

// ---- Falcon / Client perspective picker (mirrors Templates / Wallet pickers) ----
const CmViewAsPicker = ({ t, onPick }) => (
  <div className="tpl-picker-page">
    <div className="tpl-picker-card">
      <div className="tpl-picker-head">
        <div>
          <h2>{t.cmPickerTitle || 'Choose how to view Contracts & Cost'}</h2>
          <p>{t.cmPickerSubtitle || 'Select a perspective. You can switch back any time from the breadcrumb.'}</p>
        </div>
      </div>
      <div className="tpl-picker-grid">
        <button className="tpl-picker-tile falcon" onClick={() => onPick('falcon')}>
          <span className="ic-wrap"><T2Mark size={28} color="white" /></span>
          <span className="ttl">{t.cmShowAsFalcon || 'Show as Falcon'}</span>
          <span className="dsc">{t.cmShowAsFalconDesc || 'Browse contracts across every client. Read-only operations view.'}</span>
          <span className="cta">{t.cmShowAsFalcon || 'Show as Falcon'} <IcChevronRight size={14} stroke={2} /></span>
        </button>
        <button className="tpl-picker-tile client" onClick={() => onPick('client')}>
          <span className="ic-wrap"><IcBuildingS size={26} stroke={1.7} /></span>
          <span className="ttl">{t.cmShowAsClient || 'Show as Client'}</span>
          <span className="dsc">{t.cmShowAsClientDesc || 'See the page exactly as Aramco would — only their contracts.'}</span>
          <span className="cta">{t.cmShowAsClient || 'Show as Client'} <IcChevronRight size={14} stroke={2} /></span>
        </button>
      </div>
    </div>
  </div>
);

// ---- Row status text (table) ----
const CmRowStatus = ({ status, t }) => {
  const map = {
    active:  { cls: 'active',  label: t.cmStatusActive  || 'Active'  },
    pending: { cls: 'pending', label: t.cmStatusPending || 'Pending' },
    expired: { cls: 'expired', label: t.cmStatusExpired || 'Expired' },
  };
  const m = map[status] || map.active;
  return <span className={`cm-row-status ${m.cls}`}>{m.label}</span>;
};

// ---- Row actions menu ----
const CmRowMenu = ({ open, onClose, onView, t }) => {
  if (!open) return null;
  return (
    <div className="tpl-row-menu" onClick={(e) => e.stopPropagation()}>
      <div className="item" onClick={() => { onView && onView(); onClose(); }}>
        <IcInfo size={14} stroke={1.5} /> {t.cmMoreDetails || 'More Details'}
      </div>
    </div>
  );
};

// ---- Pool every contract that belongs to a node or any of its descendants. ----
const collectIds = (node, acc) => {
  if (!node) return acc;
  acc.add(node.id);
  (node.children || []).forEach(c => collectIds(c, acc));
  return acc;
};

const findInTreeCM = (node, id) => {
  if (!node) return null;
  if (node.id === id) return node;
  for (const c of (node.children || [])) {
    const r = findInTreeCM(c, id);
    if (r) return r;
  }
  return null;
};

// ---- Main page ----
const fmtMoney = (n) => n === null || n === undefined
  ? '---'
  : new Intl.NumberFormat('en-US').format(n);

const ContractsPage = ({ tree, selected, selectNode, expanded, toggleExpand, lang, t, pushToast }) => {
  const [viewAs, setViewAs] = useStateCM(null);
  const [mode, setMode]     = useStateCM('list'); // 'list' | 'details' | 'create'
  const [active, setActive] = useStateCM(null);   // active contract
  const [openMenuId, setOpenMenuId] = useStateCM(null);
  const [createdContracts, setCreatedContracts] = useStateCM([]); // locally-added contracts (this session)
  // Table pagination (mirrors Hierarchy's Users table footer)
  const [contractsPage, setContractsPage] = useStateCM(1);
  const [contractsPageSize, setContractsPageSize] = useStateCM(20);

  // Same scoped tree pattern as Templates/Wallet — Client view re-roots at Aramco.
  const scopedTree = useMemoCM(() => {
    if (viewAs === 'client') {
      const aramco = findInTreeCM(tree, 'aramco');
      return aramco || tree;
    }
    return tree;
  }, [tree, viewAs]);

  useEffectCM(() => {
    if (viewAs === 'client') {
      const stillValid = findInTreeCM(scopedTree, selected);
      if (!stillValid) selectNode('aramco');
    }
  }, [viewAs]); // eslint-disable-line

  // Close the row action menu when clicking anywhere outside it (same as the rest of the system).
  useEffectCM(() => {
    if (openMenuId === null) return;
    const onDown = (e) => { if (!e.target.closest('.row-menu') && !e.target.closest('.row-action-btn')) setOpenMenuId(null); };
    document.addEventListener('mousedown', onDown);
    return () => document.removeEventListener('mousedown', onDown);
  }, [openMenuId]);

  const scopeNode = findInTreeCM(scopedTree, selected) || scopedTree;

  // Gather contracts whose ownerNode is the selected node OR a descendant.
  // (Falcon root pools across all clients.)
  const contracts = useMemoCM(() => {
    const ids = collectIds(scopeNode, new Set());
    const out = [];
    Object.entries(window.seedContracts).forEach(([nodeId, list]) => {
      if (ids.has(nodeId)) out.push(...list);
    });
    // Append any contracts created in this session that belong to the current scope
    createdContracts.forEach(c => { if (ids.has(c.ownerNode)) out.push(c); });
    return out;
  }, [scopeNode, createdContracts]);

  if (viewAs === null) {
    return <CmViewAsPicker t={t} onPick={(v) => { setViewAs(v); setMode('list'); }} />;
  }

  const isFalcon = viewAs === 'falcon';
  const isRootScope = scopeNode && (scopeNode.id === 'falcon' || scopeNode.type === 'root');
  // Header avatar — mirrors Hierarchy's: Falcon icon for root, BrandLogo for
  // client nodes, initial-avatar for inner org nodes. Re-rendered automatically
  // whenever the tree selection changes.
  const ScopeAvatar = () => {
    if (!scopeNode) return null;
    if (isRootScope) return <span className="node-avatar"><IcFalcon size={18} /></span>;
    if (scopeNode.type === 'client') return <BrandLogo brand={scopeNode.brand} size={32} />;
    return (
      <span className="node-avatar" style={{ background: '#0d3f44', color: 'white' }}>
        <span style={{ fontSize: 12, fontWeight: 700 }}>{(scopeNode.name || 'N').slice(0, 1)}</span>
      </span>
    );
  };

  return (
    <div className={`templates-page cm-page ${isFalcon ? 'with-tree' : 'no-tree'}`}>
      {isFalcon && (
        <TmClientsTree
          tree={tree}
          selected={scopeNode?.id}
          onSelect={(id) => { selectNode(id); setMode('list'); setActive(null); }}
          t={t}
        />
      )}

      <div className="content-panel">
        {mode === 'list' && (
        <div className="content-body">
          {/* Hierarchy-style node header — avatar + name on the left,
              Switch perspective + Add Contract on the right (Falcon view only). */}
          <div className="node-header">
            <div className={`node-title ${isRootScope ? 'falcon' : ''}`}>
              <ScopeAvatar />
              <span>{scopeNode ? scopeNode.name : t.contractsCost}</span>
            </div>
            <div className="node-actions">
              <button
                className="btn btn-secondary"
                onClick={() => { setViewAs(null); setMode('list'); selectNode('falcon'); }}
              >
                <IcArrowLeft size={12} stroke={1.7} /> {t.tplBackToPicker || 'Switch perspective'}
              </button>
              {isFalcon && (
                <button className="btn btn-primary" onClick={() => setMode('create')}>
                  <IcPlus size={15} stroke={2} /> {t.cmAddContract || 'Add Contract'}
                </button>
              )}
            </div>
          </div>

          <div className="table-panel">
            <div className="table-head-bar">
              <div className="table-head-title">{t.cmListTitle || 'Contracts'}</div>
            </div>
            <div className="table-scroll">
              <table className="users-table cm-users-table">
                <thead>
                  <tr>
                    <th>{t.cmContractId       || 'Contract ID'}</th>
                    <th>{t.cmContractName     || 'Contract Name'}</th>
                    <th>{t.cmFarabiRefId      || 'Reference ID'}</th>
                    <th>{t.cmCreationDate     || 'Creation Date'}</th>
                    <th>{t.cmStartDate        || 'Start Date'}</th>
                    <th>{t.cmExpirationDate   || 'Expiration Date'}</th>
                    <th>{(t.cmValueSar     || 'Value (SAR)').replace(/\s*\(SAR\)\s*$/i, '').replace(/\s*\(ريال\)\s*$/i, '')}</th>
                    <th>{(t.cmRemainingSar || 'Remaining').replace(/\s*\(SAR\)\s*$/i, '').replace(/\s*\(ريال\)\s*$/i, '')}</th>
                    <th>{t.cmStatus           || 'Status'}</th>
                    <th className="col-actions">{t.colActions}</th>
                  </tr>
                </thead>
                <tbody>
                  {contracts
                    .slice((contractsPage - 1) * contractsPageSize, contractsPage * contractsPageSize)
                    .map(c => (
                    <tr key={c.id}>
                      <td className="col-username">{c.contractId}</td>
                      <td>{c.name}</td>
                      <td>{c.farabiReferenceId || c.contractId}</td>
                      <td>{c.creationDate}</td>
                      <td>{c.startDate}</td>
                      <td>{c.expirationDate}</td>
                      <td><span className="cm-money"><IcRiyal size={12} /> {fmtMoney(c.value)}</span></td>
                      <td>{c.remaining === null ? 'NA' : <span className="cm-money"><IcRiyal size={12} /> {fmtMoney(c.remaining)}</span>}</td>
                      <td><StatusBadge status={c.status} t={t} /></td>
                      <td className="col-actions" style={{ position: 'relative' }} onClick={(e) => e.stopPropagation()}>
                        <button
                          className={`row-action-btn ${openMenuId === c.id ? 'open' : ''}`}
                          onClick={(e) => { e.stopPropagation(); setOpenMenuId(openMenuId === c.id ? null : c.id); }}
                        >
                          <IcMore size={16} />
                        </button>
                        {openMenuId === c.id && (
                          <div className="row-menu" onClick={(e) => e.stopPropagation()}>
                            <button className="row-menu-item" onClick={() => { setOpenMenuId(null); setActive(c); setMode('details'); }}>
                              <IcInfo size={14} stroke={1.8} /> <span>{t.moreDetails || 'More Details'}</span>
                            </button>
                          </div>
                        )}
                      </td>
                    </tr>
                  ))}
                  {contracts.length === 0 && (
                    <tr><td colSpan={10} style={{ textAlign: 'center', padding: 40, color: 'var(--text-muted)' }}>
                      {t.cmEmpty || 'No contracts for this scope.'}
                    </td></tr>
                  )}
                </tbody>
              </table>
            </div>
            <TablePagination
              total={contracts.length}
              page={contractsPage}
              pageSize={contractsPageSize}
              onPageChange={setContractsPage}
              onPageSizeChange={(n) => { setContractsPageSize(n); setContractsPage(1); }}
              t={t}
            />
          </div>
        </div>
        )}

        {mode === 'details' && active && (
          <ContractDetailsPage
            contract={active}
            scopeNode={scopeNode}
            onBack={() => { setMode('list'); setActive(null); }}
            t={t}
            lang={lang}
            pushToast={pushToast}
            readOnly={!isFalcon}
          />
        )}

        {mode === 'create' && (
          <AddContractWizard
            scopeNode={scopeNode}
            t={t}
            lang={lang}
            onCancel={() => setMode('list')}
            onCreated={(contract) => {
              setCreatedContracts(list => [...list, contract]);
              setMode('list');
              pushToast && pushToast(t.cmContractCreated || 'Contract created ✓');
            }}
          />
        )}
      </div>
    </div>
  );
};

window.ContractsPage = ContractsPage;
window.CmViewAsPicker = CmViewAsPicker;