import React from 'react';
import Box from '@mui/material/Box';
import PanelFrame from './PanelFrame.jsx';
import { tabBtnId, tabPanelId } from './TabStrip.jsx';

/* ============================================================
 * ContentView：主区内容分发（按标签 type）
 *
 * - 'panel'    → PanelFrame（iframe，LRU 由 panelRenderKeys 控制挂载）
 * - 其他 react 类型 → tab.render() 返回对应组件（记事本/密码箱/面板列表…）
 * 仅激活标签可见，其余保持挂载（keep-alive 保留 iframe 与编辑状态）。
 * 每个标签包一层 role=tabpanel，与 TabStrip 的 tab 通过 id 配对（ARIA）。
 * ============================================================ */

export default function ContentView({ tabs, activeKey, refreshNonce = 0, panelRenderKeys = null }) {
  return (
    <>
      {tabs.map((tab) => {
        const active = tab.key === activeKey;
        if (tab.type === 'panel') {
          // LRU 裁剪：只渲染当前 + 最近使用的 iframe，其余卸载省内存
          if (panelRenderKeys && !panelRenderKeys.has(tab.key)) return null;
          return (
            <Box
              key={tab.key}
              id={tabPanelId(tab.key)}
              role="tabpanel"
              aria-labelledby={tabBtnId(tab.key)}
              sx={{ display: active ? 'block' : 'none', width: '100%', height: '100%' }}
            >
              <PanelFrame
                panel={tab.panel}
                active={active}
                refreshNonce={refreshNonce}
              />
            </Box>
          );
        }
        return (
          <Box
            key={tab.key}
            id={tabPanelId(tab.key)}
            role="tabpanel"
            aria-labelledby={tabBtnId(tab.key)}
            sx={{ display: active ? 'block' : 'none', width: '100%', height: '100%' }}
          >
            {tab.render ? tab.render() : null}
          </Box>
        );
      })}
    </>
  );
}