// Motun.jsx — 墨吞：把这则笔记变成作品（文生图 / 谱曲 / 动画·视频 / 成稿 PPT / 文本转 HTML）
// 让创意，从文字记录，到数字化生成。（演示流程，未接真实 API）
const { useState: useStateM, createElement: hM } = React;

// —— 精细 AI 图标（stroke 1.5 · currentColor · 24 画板）—— //
function gicon(children) {
  return (props) => {
    const { size = 18 } = props || {};
    return hM('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
      stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' }, children);
  };
}
const GIcon = {
  // 文生图：相框 + 日出山峦 + 文字行 → 闪光
  image: gicon([
    hM('rect', { key: 0, x: 3.5, y: 5, width: 17, height: 14, rx: 2 }),
    hM('circle', { key: 1, cx: 8.5, cy: 9.5, r: 1.4 }),
    hM('path', { key: 2, d: 'M4 17l4.5-4.2 3 2.6 3.2-3.4L20 16' }),
    hM('path', { key: 3, d: 'M18 4.2l.6 1.6 1.6.6-1.6.6-.6 1.6-.6-1.6L15.8 6.4l1.6-.6.6-1.6Z', fill: 'currentColor', stroke: 'none' }),
  ]),
  // 谱曲：五线谱 + 音符 + 波形尾
  music: gicon([
    hM('path', { key: 0, d: 'M4 7h9M4 11h6M4 15h7', opacity: .55 }),
    hM('circle', { key: 1, cx: 15.5, cy: 16.5, r: 2.2 }),
    hM('path', { key: 2, d: 'M17.7 16.5V7.5l3.3-1.2v8' }),
    hM('circle', { key: 3, cx: 18.8, cy: 15.3, r: 2.2 }),
  ]),
  // 动画 / 视频：场记板 + 播放
  video: gicon([
    hM('path', { key: 0, d: 'M3.5 9.5h17V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18V9.5Z' }),
    hM('path', { key: 1, d: 'M3.8 9.5 5 5.6l16-.0' , opacity: 0 }),
    hM('path', { key: 2, d: 'M4 9.5 4.8 6l15.4-1.4.5 3.4' }),
    hM('path', { key: 3, d: 'M8 6.2 9.4 9M12 5.6 13.4 8.4M16 5 17.4 7.8', opacity: .6 }),
    hM('path', { key: 4, d: 'M10.5 12.5v4l3.5-2-3.5-2Z', fill: 'currentColor', stroke: 'none' }),
  ]),
  // 成稿 PPT：幻灯片 + 标题 + 柱图
  deck: gicon([
    hM('rect', { key: 0, x: 3.5, y: 4.5, width: 17, height: 13, rx: 1.5 }),
    hM('path', { key: 1, d: 'M6.5 8h6', opacity: .7 }),
    hM('path', { key: 2, d: 'M7 14.5v-2.5M10 14.5v-4M13 14.5v-1.8' }),
    hM('path', { key: 3, d: 'M12 17.5V20M9 20h6' }),
  ]),
  // 文本转 HTML：浏览器窗 + 代码尖括号
  html: gicon([
    hM('rect', { key: 0, x: 3.5, y: 5, width: 17, height: 14, rx: 2 }),
    hM('path', { key: 1, d: 'M3.5 9h17', opacity: .7 }),
    hM('circle', { key: 2, cx: 6, cy: 7, r: .6, fill: 'currentColor', stroke: 'none' }),
    hM('circle', { key: 3, cx: 8, cy: 7, r: .6, fill: 'currentColor', stroke: 'none' }),
    hM('path', { key: 4, d: 'M10.5 12.5 8.5 14.5l2 2M13.5 12.5l2 2-2 2' }),
  ]),
};

const MOTUN_TOOLS = [
  { id: 'image', name: '文生图',     ico: 'image', kind: 'image', label: '一幅插画' },
  { id: 'music', name: '谱曲',       ico: 'music', kind: 'audio', label: '环境配乐 · 0:30' },
  { id: 'video', name: '动画 / 视频', ico: 'video', kind: 'video', label: '短片草稿' },
  { id: 'deck',  name: '成稿 PPT',   ico: 'deck',  kind: 'deck',  label: '提案 · 5 页' },
  { id: 'html',  name: '文本转 HTML', ico: 'html',  kind: 'html',  label: '网页一页' },
];

function ResultBody({ kind }) {
  if (kind === 'image') return <div className="gen-image" />;
  if (kind === 'audio') return (
    <div className="gen-wave">{Array.from({ length: 34 }).map((_, i) =>
      <span key={i} style={{ height: 6 + Math.abs(Math.sin(i * 1.7)) * 22 + (i % 3) * 3 + 'px' }} />)}
    </div>
  );
  if (kind === 'video') return (
    <div className="gen-video"><span className="gen-play"><Icon name="play" size={16} /></span></div>
  );
  if (kind === 'deck') return (
    <div className="gen-deck">{[0, 1, 2, 3, 4].map(i => <span key={i} className={i === 0 ? 'lead' : ''} />)}</div>
  );
  if (kind === 'html') return (
    <div className="gen-html"><b />{[0, 1, 2].map(i => <i key={i} style={{ width: [70, 90, 55][i] + '%' }} />)}</div>
  );
  if (kind === 'link') return (
    <div className="gen-link">
      <span className="gen-link-fav"><Icon name="link" size={14} /></span>
      <span className="gen-link-lines"><i style={{ width: '64%' }} /><i style={{ width: '40%' }} /></span>
    </div>
  );
  return null;
}

function MotunHub({ note }) {
  const [results, setResults] = useStateM([]);
  const [busy, setBusy] = useStateM(null);
  const [open, setOpen] = useStateM(true);

  function run(tool) {
    if (busy) return;
    setBusy(tool.id);
    const rid = Date.now();
    setResults(r => [{ rid, tool, status: 'gen' }, ...r]);
    setTimeout(() => {
      setResults(r => r.map(x => x.rid === rid ? { ...x, status: 'done' } : x));
      setBusy(null);
    }, 1100);
  }

  return (
    <div className={'motun' + (open ? '' : ' collapsed')}>
      <button className="motun-head" onClick={() => setOpen(o => !o)}>
        <span className="motun-ava">墨</span>
        <div style={{ flex: 1, textAlign: 'left' }}>
          <div className="nm">墨吞 · 把这则笔记变成作品</div>
          <div className="motun-tag">连接各类生成模型 — 让创意从文字记录，走向数字化生成</div>
        </div>
        {results.length > 0 && !open && <span className="motun-badge">{results.length} 件产物</span>}
        <Icon name="chevDown" size={16} className={'motun-chev' + (open ? ' open' : '')} />
      </button>

      {open && (<React.Fragment>
      <div className="motun-tools">
        {MOTUN_TOOLS.map(tl => {
          const C = GIcon[tl.ico];
          return (
            <button key={tl.id} className={'mtool' + (busy === tl.id ? ' busy' : '')} disabled={!!busy} onClick={() => run(tl)}>
              <span className="mtool-ico"><C size={20} /></span>
              <span>{tl.name}</span>
            </button>
          );
        })}
      </div>

      {results.length > 0 && (
        <div className="gen-list">
          {results.map(r => {
            const C = GIcon[r.tool.ico];
            return (
              <div key={r.rid} className={'gen-card' + (r.status === 'gen' ? ' gen' : '')}>
                <div className="gen-card-top">
                  <C size={14} />
                  <span className="gen-card-name">{r.tool.name}</span>
                  {r.status === 'gen'
                    ? <span className="gen-state"><Icon name="refresh" size={11} className="spin" /> 生成中</span>
                    : <span className="gen-state done"><Icon name="check" size={11} /> {r.tool.label}</span>}
                </div>
                <div className="gen-card-body">
                  {r.status === 'gen' ? <div className="gen-skel" /> : <ResultBody kind={r.tool.kind} />}
                </div>
                {r.status === 'done' && (
                  <div className="gen-card-foot">
                    <span className="src">源自《{note.title}》</span>
                    <span className="acts"><span><Icon name="download" size={12} /></span><span><Icon name="copy" size={12} /></span></span>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
      </React.Fragment>)}
    </div>
  );
}

Object.assign(window, { MotunHub, GIcon, ResultBody, MOTUN_TOOLS });