import React from 'react';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';

/* ============================================================
 * CollapseArrow：侧边栏折叠箭头（VSCode 风格）
 *
 * - 由父级绝对定位到主区边缘（即侧边栏与主区的 Separator 位置）垂直居中；
 *   侧边栏折叠为 0 后主区仍在，箭头始终可见可点，支持"再点击展开"。
 * - 箭头始终指向栏的方向：展开时指栏（点击收起），折叠后反向（点击展开）。
 * - 可见性：**常驻可见**——不透明背景（background.paper）+ 实心边框 + 阴影，
 *   opacity 展开 0.9 / 折叠 1，hover 全亮加深阴影；不再半透明叠加 iframe 混色。
 * - 28x28 触控目标，zIndex 12 盖在 iframe 内容之上。
 * ============================================================ */

export default function CollapseArrow({ side, collapsed = false, onToggle }) {
  const right = side === 'right';
  const label = collapsed ? `展开${right ? '右' : '左'}侧边栏` : `折叠${right ? '右' : '左'}侧边栏`;
  // 展开 → 指向栏（收起动作）；折叠 → 反向（展开动作）
  const Icon = collapsed
    ? (right ? ChevronLeftIcon : ChevronRightIcon)
    : (right ? ChevronRightIcon : ChevronLeftIcon);

  return (
    <Tooltip title={label} placement={right ? 'left' : 'right'}>
      <IconButton
        size="small"
        aria-label={label}
        onClick={onToggle}
        sx={{
          position: 'absolute', top: '50%', [right ? 'right' : 'left']: 2,
          transform: 'translateY(-50%)', zIndex: 12,
          width: 28, height: 28, minWidth: 28, p: 0,
          opacity: collapsed ? 1 : 0.9,
          bgcolor: 'background.paper', border: 1, borderColor: 'divider',
          boxShadow: (t) => t.shadows[2],
          transition: 'opacity .12s ease, background-color .12s ease, box-shadow .12s ease',
          '&:hover': { opacity: 1, bgcolor: 'action.hover', boxShadow: (t) => t.shadows[4] },
          '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: -2 },
        }}
      >
        <Icon sx={{ fontSize: 18 }} />
      </IconButton>
    </Tooltip>
  );
}