/* skills.jsx — Skill 公共组件：来源标记、Agent 标签、卡片、Markdown 渲染、Skill 详情弹窗
   You 的 YOUR SKILLS、Playbook 的 Mine / Marketplace 共用 */
/* global React */
window.P21 = window.P21 || {};
(() => {
  const { C, MONO, useP, Btn, Check, Modal, X, D } = window.P21;

  const SRC_MARK = { persom: '✦', rec: '◉', import: '', market: '↓' };
  const AGENT_NAME = { CC: 'Claude Code', CX: 'Codex' };

  /* Agent 小标签 [CC] [CX] */
  function AgentTags({ ids }) {
    if (!ids || !ids.length) return <span style={{ fontSize: 11.5, color: C.faint }}>Not installed</span>;
    return (
      <span style={{ display: 'inline-flex', gap: 4 }}>
        {ids.map(a => (
          <span key={a} title={AGENT_NAME[a]} style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '.02em', color: C.ink2, border: `1px solid ${C.border}`, borderRadius: 4, padding: '1px 5px', background: '#fff' }}>{a}</span>
        ))}
      </span>
    );
  }

  /* 极简 Markdown 渲染：## 标题、有序 / 无序列表、段落 */
  function Md({ text }) {
    const lines = (text || '').split('\n').filter(l => l.trim());
    return (
      <div>
        {lines.map((l, i) => {
          if (l.startsWith('## ')) return <div key={i} style={{ fontWeight: 600, fontSize: 14.5, marginTop: i ? 14 : 0 }}>{l.slice(3)}</div>;
          if (l.startsWith('- ')) return <div key={i} style={{ marginTop: 4, paddingLeft: 14, position: 'relative', lineHeight: 1.55 }}><span style={{ position: 'absolute', left: 2, color: C.faint }}>•</span>{l.slice(2)}</div>;
          const m = l.match(/^(\d+)\.\s(.*)$/);
          if (m) return <div key={i} style={{ marginTop: 4, display: 'flex', gap: 8, lineHeight: 1.55 }}><span style={{ color: C.faint, minWidth: 14 }}>{m[1]}.</span><span>{m[2]}</span></div>;
          return <div key={i} style={{ marginTop: 4, lineHeight: 1.55 }}>{l}</div>;
        })}
      </div>
    );
  }

  /* 两列小卡片：You 的 YOUR WORLD / YOUR SKILLS 共用样式 */
  function MiniCard({ title, desc, right, meta, onClick, serif = true }) {
    return (
      <div onClick={onClick} className="p21-h-soft"
        style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: '16px 18px', cursor: 'pointer', minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
          <div style={{ fontFamily: serif ? 'Newsreader, Georgia, serif' : 'inherit', fontSize: serif ? 20 : 15.5, fontWeight: serif ? 400 : 500, lineHeight: 1.25, minWidth: 0 }}>{title}</div>
          {right}
        </div>
        <div style={{ marginTop: 6, color: C.muted, lineHeight: 1.5 }}>{desc}</div>
        {meta && <div style={{ marginTop: 10, fontSize: 12, color: C.faint }}>{meta}</div>}
      </div>
    );
  }

  /* Skill 详情弹窗
     mode = 'installed'：看已安装的 Skill，底部可改装到哪些 Agent
     mode = 'market'   ：Marketplace 的 Skill，标题下写作者和 Free，带 scripts 时先确认，再勾选 Agent 安装 */
  function SkillDetailModal({ m, onClose }) {
    const { s, set } = useP();
    const isMarket = m.mode === 'market';
    const item = isMarket ? D.market.find(x => x.id === m.id) : s.skills.find(x => x.id === m.id);
    const installedFromMarket = isMarket ? s.skills.find(k => k.marketId === m.id) : null;
    const [agents, setAgents] = React.useState(() => {
      const cur = isMarket ? (installedFromMarket ? installedFromMarket.agents : ['CC']) : item.agents;
      return { CC: cur.includes('CC'), CX: cur.includes('CX') };
    });
    const [ack, setAck] = React.useState(false);
    if (!item) return null;
    const scripts = isMarket ? item.scripts || [] : [];
    const picked = Object.keys(agents).filter(a => agents[a]);
    const needAck = scripts.length > 0 && !installedFromMarket;
    const srcLine = isMarket ? null
      : item.src === 'market' ? `↓ From Marketplace · by ${item.author}`
      : item.src === 'persom' ? '✦ Drafted by Persom from what you do'
      : item.src === 'rec' ? '◉ Recorded by you'
      : `Imported from ${item.agents.map(a => AGENT_NAME[a]).join(', ') || 'an agent'}`;

    const install = () => {
      const k = { id: 'k' + Date.now(), name: item.name, desc: item.desc, src: 'market', author: item.author, agents: picked, ago: 'Just now', marketId: item.id };
      set({ skills: [k, ...s.skills], modal: null, toast: `Installed "${item.name}" · in Mine › Installed` });
    };
    const saveAgents = () => {
      set({ skills: s.skills.map(k => k.id === item.id ? { ...k, agents: picked } : k), modal: null, toast: 'Saved' });
    };

    return (
      <Modal width={640} onClose={onClose}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, color: C.muted }}>
          <span>{isMarket ? 'Marketplace' : 'Skill'}</span>
          <X onClick={onClose} />
        </div>
        <div style={{ marginTop: 12, fontSize: 24, fontWeight: 600, letterSpacing: '-.01em' }}>{item.name}</div>
        {isMarket && <div style={{ marginTop: 2, fontSize: 13, color: C.muted }}>by {item.author} · {item.installs} installs · Free</div>}
        <div style={{ marginTop: 4, fontSize: 15, color: C.muted }}>{item.desc}</div>
        {srcLine && <div style={{ marginTop: 10, fontSize: 13, color: C.green }}>{srcLine}</div>}
        <div style={{ marginTop: 18, paddingTop: 16, borderTop: `1px solid ${C.line2}` }}><Md text={D.skillBody} /></div>

        {scripts.length > 0 && (
          <div style={{ marginTop: 18, padding: '12px 14px', borderRadius: 8, background: '#FAF3E8' }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: C.amber }}>This skill includes scripts that will run on this Mac</div>
            <div style={{ marginTop: 6, fontFamily: MONO, fontSize: 12.5, lineHeight: 1.7 }}>{scripts.map(f => <div key={f}>{f}</div>)}</div>
            {needAck && <div style={{ marginTop: 8 }}><Check on={ack} onClick={() => setAck(!ack)}><span style={{ fontSize: 13 }}>I understand, install it anyway</span></Check></div>}
          </div>
        )}

        <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <span style={{ color: C.muted }}>{isMarket ? 'Install to' : 'Installed in'}</span>
          {['CC', 'CX'].map(a => <Check key={a} on={agents[a]} onClick={() => setAgents({ ...agents, [a]: !agents[a] })}>{AGENT_NAME[a]}</Check>)}
        </div>
        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <Btn onClick={onClose}>Cancel</Btn>
          {isMarket
            ? (installedFromMarket ? <Btn kind="primary" disabled>Installed ✓</Btn> : <Btn kind="primary" disabled={!picked.length || (needAck && !ack)} onClick={install}>Install</Btn>)
            : <Btn kind="primary" onClick={saveAgents}>Save</Btn>}
        </div>
      </Modal>
    );
  }

  Object.assign(window.P21, { SRC_MARK, AGENT_NAME, AgentTags, Md, MiniCard, SkillDetailModal });
})();