/* shared.jsx — 图标、状态栏、浣熊头像、通用小组件 */
/* global React */

const RACCOON_SRC = (typeof window !== 'undefined' && window.__resources && window.__resources.raccoon) || 'assets/office-raccoon-logo.svg';

/* ---------- 线性图标 (lucide 风格, stroke 1.5) ---------- */
function Icon({ d, size = 22, sw = 1.6, fill, children, ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill || 'none'}
      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
      {...rest}>
      {children || <path d={d} />}
    </svg>
  );
}
const Ic = {
  menu: (p) => <Icon {...p}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="15" y2="18"/></Icon>,
  mic: (p) => <Icon {...p}><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="22"/></Icon>,
  arrowUp: (p) => <Icon {...p}><line x1="12" y1="19" x2="12" y2="5"/><polyline points="6 12 12 6 18 12"/></Icon>,
  chevR: (p) => <Icon {...p}><polyline points="9 18 15 12 9 6"/></Icon>,
  chevL: (p) => <Icon {...p}><polyline points="15 18 9 12 15 6"/></Icon>,
  chevD: (p) => <Icon {...p}><polyline points="6 9 12 15 18 9"/></Icon>,
  back: (p) => <Icon {...p}><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></Icon>,
  search: (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></Icon>,
  gear: (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></Icon>,
  plus: (p) => <Icon {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></Icon>,
  x: (p) => <Icon {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon>,
  cloud: (p) => <Icon {...p}><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></Icon>,
  laptop: (p) => <Icon {...p}><rect x="3" y="4" width="18" height="12" rx="2"/><line x1="2" y1="20" x2="22" y2="20"/></Icon>,
  chart: (p) => <Icon {...p}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></Icon>,
  route: (p) => <Icon {...p}><circle cx="6" cy="19" r="3"/><circle cx="18" cy="5" r="3"/><path d="M9 19h5a4 4 0 0 0 4-4V8"/></Icon>,
  slides: (p) => <Icon {...p}><rect x="3" y="4" width="18" height="13" rx="2"/><line x1="12" y1="17" x2="12" y2="21"/><line x1="8" y1="21" x2="16" y2="21"/></Icon>,
  pen: (p) => <Icon {...p}><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></Icon>,
  doc: (p) => <Icon {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></Icon>,
  folder: (p) => <Icon {...p}><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></Icon>,
  books: (p) => <Icon {...p}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></Icon>,
  cal: (p) => <Icon {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></Icon>,
  heart: (p) => <Icon {...p}><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></Icon>,
  mail: (p) => <Icon {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="2 6 12 13 22 6"/></Icon>,
  check: (p) => <Icon {...p}><polyline points="20 6 9 17 4 12"/></Icon>,
  checkCircle: (p) => <Icon {...p}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></Icon>,
  clock: (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></Icon>,
  upload: (p) => <Icon {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></Icon>,
  sparkle: (p) => <Icon {...p}><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/></Icon>,
  plug: (p) => <Icon {...p}><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v3a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8z"/></Icon>,

  /* ---------- AI 资料类图标 · 对齐 apps/office 入口设计（线框 + 紫色 sparkle） ---------- */
  kbAi: ({ size = 22, ...rest }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...rest}>
      <rect x="3" y="4" width="14" height="16" rx="2.4" />
      <rect x="5.8" y="7.2" width="8.4" height="2.2" rx="0.6" />
      <rect x="5.8" y="11" width="8.4" height="2.2" rx="0.6" />
      <rect x="5.8" y="14.8" width="8.4" height="2.2" rx="0.6" />
      <path d="M19.5 3l.55 1.45L21.5 5l-1.45.55L19.5 7l-.55-1.45L17.5 5l1.45-.55z" fill="#8e6bf2" stroke="none" />
    </svg>
  ),
  docAi: ({ size = 22, ...rest }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...rest}>
      <rect x="3" y="4" width="14" height="16" rx="2.4" />
      <line x1="6.4" y1="9" x2="13.6" y2="9" />
      <line x1="6.4" y1="12" x2="13.6" y2="12" />
      <line x1="6.4" y1="15" x2="11" y2="15" />
      <path d="M19.5 3l.55 1.45L21.5 5l-1.45.55L19.5 7l-.55-1.45L17.5 5l1.45-.55z" fill="#8e6bf2" stroke="none" />
    </svg>
  ),

  /* ---------- 填充式图标 · 对齐 apps/office 设计系统 ---------- */
  fileSolid: ({ size = 22, ...rest }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" {...rest}>
      <path d="M4 0C2.89543 0 2 0.895431 2 2V14C2 15.1046 2.89543 16 4 16H12C13.1046 16 14 15.1046 14 14V5.41421C14 5.01639 13.842 4.63486 13.5607 4.35355L9.64645 0.43934C9.36514 0.158035 8.98361 0 8.58579 0H4ZM3 2C3 1.44772 3.44772 1 4 1H8V4.5C8 5.32843 8.67157 6 9.5 6H13V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V2ZM12.7929 5H9.5C9.22386 5 9 4.77614 9 4.5V1.20711L12.7929 5Z"/>
    </svg>
  ),
  folderSolid: ({ size = 22, ...rest }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" {...rest}>
      <path d="M2 4.5V6H5.58579C5.71839 6 5.84557 5.94732 5.93934 5.85355L7.29289 4.5L5.93934 3.14645C5.84557 3.05268 5.71839 3 5.58579 3H3.5C2.67157 3 2 3.67157 2 4.5ZM1 4.5C1 3.11929 2.11929 2 3.5 2H5.58579C5.98361 2 6.36514 2.15804 6.64645 2.43934L8.20711 4H12.5C13.8807 4 15 5.11929 15 6.5V11.5C15 12.8807 13.8807 14 12.5 14H3.5C2.11929 14 1 12.8807 1 11.5V4.5ZM2 7V11.5C2 12.3284 2.67157 13 3.5 13H12.5C13.3284 13 14 12.3284 14 11.5V6.5C14 5.67157 13.3284 5 12.5 5H8.20711L6.64645 6.56066C6.36514 6.84197 5.98361 7 5.58579 7H2Z"/>
    </svg>
  ),
  filePenSolid: ({ size = 22, ...rest }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" {...rest}>
      <path d="M1.00509 12.1763C1.09634 13.7511 2.40232 15 4 15H6.00286C6.01015 14.8859 6.02795 14.7701 6.05716 14.6532L6.22047 14H4L3.85074 13.9945C2.81588 13.9182 2 13.0544 2 12V8H5L5.17627 7.99491C6.75108 7.90366 8 6.59768 8 5V2H12L12.1493 2.00549C13.1841 2.08183 14 2.94564 14 4V6.00299C14.3368 5.98764 14.6757 6.03128 15 6.13392V4L14.9949 3.82373C14.9037 2.24892 13.5977 1 12 1H7.62132L7.44547 1.00774C6.97949 1.04885 6.5405 1.25239 6.20711 1.58579L1.58579 6.20711L1.46691 6.33693C1.16649 6.69549 1 7.14982 1 7.62132V12L1.00509 12.1763ZM5 7L2.2175 6.99866C2.2409 6.96925 2.26606 6.94105 2.29289 6.91421L6.91421 2.29289L7 2.219V5L6.99451 5.14926C6.91817 6.18412 6.05436 7 5 7ZM7.97975 12.3772L12.8092 7.54776C13.5395 6.81741 14.7237 6.81741 15.454 7.54776C16.1843 8.27811 16.1843 9.46223 15.454 10.1926L10.6246 15.022C10.343 15.3036 9.99019 15.5033 9.60387 15.5999L8.10597 15.9744C7.45456 16.1372 6.86451 15.5472 7.02737 14.8958L7.40184 13.3979C7.49842 13.0116 7.69818 12.6588 7.97975 12.3772Z"/>
    </svg>
  ),
  uploadSolid: ({ size = 22, ...rest }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" {...rest}>
      <path d="M8.35355 0.146447C8.15829 -0.0488155 7.84171 -0.0488155 7.64645 0.146447L3.14645 4.64645C2.95118 4.84171 2.95118 5.15829 3.14645 5.35355C3.34171 5.54882 3.65829 5.54882 3.85355 5.35355L7.5 1.70711V10.5C7.5 10.7761 7.72386 11 8 11C8.27614 11 8.5 10.7761 8.5 10.5V1.70711L12.1464 5.35355C12.3417 5.54882 12.6583 5.54882 12.8536 5.35355C13.0488 5.15829 13.0488 4.84171 12.8536 4.64645L8.35355 0.146447ZM2 7.5C2 7.22386 1.77614 7 1.5 7C1.22386 7 1 7.22386 1 7.5V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V7.5C15 7.22386 14.7761 7 14.5 7C14.2239 7 14 7.22386 14 7.5V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V7.5Z"/>
    </svg>
  ),
};

/* ---------- iOS 状态栏 ---------- */
function StatusBar({ time = '9:41' }) {
  return (
    <div className="statusbar">
      <div className="sb-time">{time}</div>
      <div className="sb-right">
        {/* 信号 */}
        <svg className="sb-icon" width="18" height="12" viewBox="0 0 18 12" fill="currentColor">
          <rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5" width="3" height="7" rx="1"/>
          <rect x="10" y="2.5" width="3" height="9.5" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/>
        </svg>
        {/* wifi */}
        <svg className="sb-icon" width="17" height="12" viewBox="0 0 17 12" fill="currentColor">
          <path d="M8.5 2.2c2.7 0 5.2 1 7 2.8l-1.5 1.6a7.8 7.8 0 0 0-11 0L1.5 5A10 10 0 0 1 8.5 2.2z"/>
          <path d="M8.5 6.1c1.6 0 3.1.6 4.2 1.7l-1.6 1.6a4.2 4.2 0 0 0-5.2 0L4.3 7.8A6 6 0 0 1 8.5 6.1z"/>
          <circle cx="8.5" cy="10.4" r="1.4"/>
        </svg>
        {/* 电池 */}
        <svg className="sb-icon" width="26" height="12" viewBox="0 0 26 12" fill="none">
          <rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke="currentColor" opacity="0.4"/>
          <rect x="2" y="2" width="17" height="8" rx="1.6" fill="currentColor"/>
          <rect x="24" y="4" width="1.6" height="4" rx="0.8" fill="currentColor" opacity="0.5"/>
        </svg>
      </div>
    </div>
  );
}

/* ---------- 浣熊头像 ---------- */
function Raccoon({ size = 'sm', brand = false }) {
  return (
    <span className={`raccoon ${size} ${brand ? 'brand' : ''}`}>
      <img src={RACCOON_SRC} alt="小浣熊" />
    </span>
  );
}

/* ---------- 屏幕外壳 ---------- */
function Screen({ tinted = false, time, children }) {
  return (
    <div className={`screen ${tinted ? 'tinted' : ''}`}>
      <StatusBar time={time} />
      {children}
      <div className="home-indicator" />
    </div>
  );
}

/* ---------- 波形 (静态随机高度) ---------- */
function Wave({ n = 30 }) {
  const hs = React.useMemo(
    () => Array.from({ length: n }, (_, i) => {
      const base = Math.sin(i * 0.7) * 0.5 + 0.5;
      return 6 + Math.round(base * 18 + (i % 3) * 3);
    }),
    [n],
  );
  return (
    <div className="wave">
      {hs.map((h, i) => <i key={i} style={{ height: h }} />)}
    </div>
  );
}

Object.assign(window, { Icon, Ic, StatusBar, Raccoon, Screen, Wave, RACCOON_SRC });
