/* eslint-disable */
// =============================================================
// 基础组件 —— 复用于三个视图
// =============================================================
const { useState, useMemo, useEffect, useRef } = React;

// ---------- 头像 ----------
function Avatar({ id, size=28, gray=false }) {
  const m = U.memberById(id);
  if(!m) return null;
  return (
    <div className="avatar" style={{
      width:size, height:size,
      background: gray ? '#c8ccd1' : m.color,
      fontSize: size*0.36,
      color: gray ? '#fff' : '#fff',
      filter: gray ? 'saturate(0)' : 'none'
    }} title={m.name}>{m.short}</div>
  );
}

// ---------- 紧急状态圆点 ----------
function UrgencyDot({ task }) {
  const u = U.urgency(task);
  const cls = 'udot udot-' + u;
  const tip = ({overdue:'逾期/阻塞', urgent:'≤2 天', soon:'本周', later:'宽松', none:'—'})[u];
  return <span className={cls} title={tip}></span>;
}

// ---------- 单条任务行(默认极简,hover 才出协助/更新) ----------
function TaskRow({ task, dense=false, showOwner=false, onOpen }) {
  const u = U.urgency(task);
  const stale = U.isStale(task);
  const cls = ['trow','trow-'+u, stale?'trow-stale':'', dense?'trow-dense':''].join(' ');
  const dueCls = ['tdue','tdue-'+u].join(' ');
  const cmtCount = (window.COMMENTS[task.id]||[]).length;

  return (
    <div className={cls} onClick={()=>onOpen&&onOpen(task)}>
      <UrgencyDot task={task} />
      <div className="tname">
        <span className="tname-text">{task.name}</span>
        {task.status==='blocked' && <span className="tchip tchip-block">阻塞</span>}
        {task.status==='paused' && <span className="tchip tchip-pause">暂缓</span>}
        {task.status==='done' && <span className="tchip tchip-done">完成</span>}
        {stale && <span className="tchip tchip-stale" title={`${task.updatedAt} 天未更新`}>僵尸</span>}
        {cmtCount>0 && <span className="tchip tchip-cmt" title={`${cmtCount} 条点评`}>💬{cmtCount}</span>}
      </div>
      {showOwner && <Avatar id={task.owner} size={20}/>}
      <span className={dueCls}>{U.dueLabel(task)}</span>
    </div>
  );
}

// ---------- 任务详情弹层(@提及 + 点评) ----------
function TaskModal({ task, onClose }) {
  const [draft, setDraft] = useState('');
  const [comments, setComments] = useState(window.COMMENTS[task.id] || []);
  const owner = U.memberById(task.owner);

  function add(){
    if(!draft.trim()) return;
    const next = [...comments, { by:'fuzeren', at:'今天', text: draft }];
    setComments(next);
    window.COMMENTS[task.id] = next;  // 沿用原"点评"语义,直接写回内存数据
    setDraft('');
  }
  function insertMention(id){
    const m = U.memberById(id);
    setDraft(d => (d ? d+' ' : '') + '@'+m.name+' ');
  }

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <UrgencyDot task={task}/>
          <h3>{task.name}</h3>
          <button className="x" onClick={onClose}>×</button>
        </div>
        <div className="modal-meta">
          <div><span className="lbl">负责人</span><Avatar id={task.owner} size={20}/><span>{owner.name}</span></div>
          <div><span className="lbl">截止</span><span>{U.dueLabel(task)}{task.dueDate?` (${task.dueDate})`:''}</span></div>
          <div><span className="lbl">状态</span><span>{U.statusLabel(task.status)}</span></div>
          <div><span className="lbl">最近更新</span><span>{task.updatedAt} 天前</span></div>
          {task.assists && task.assists.length>0 &&
            <div><span className="lbl">协助</span>{task.assists.map(a=>(<Avatar key={a} id={a} size={18}/>))}</div>}
          {task.raw && <div><span className="lbl">说明</span><span className="raw">{task.raw}</span></div>}
        </div>
        <div className="modal-body">
          <div className="cmt-title">点评 · @提及</div>
          <div className="cmt-list">
            {comments.length===0 && <div className="cmt-empty">还没有点评。</div>}
            {comments.map((c,i)=>(
              <div className="cmt" key={i}>
                <Avatar id={c.by} size={22}/>
                <div className="cmt-body">
                  <div className="cmt-head"><b>{U.memberById(c.by).name}</b> <span className="cmt-at">{c.at}</span></div>
                  <div className="cmt-text" dangerouslySetInnerHTML={{__html: c.text.replace(/(@[^\s]+)/g,'<em>$1</em>')}}></div>
                </div>
              </div>
            ))}
          </div>
          <div className="cmt-input">
            <textarea value={draft} onChange={e=>setDraft(e.target.value)}
              placeholder="写点评… 可 @ 提及成员" rows="2"/>
            <div className="cmt-row">
              <div className="cmt-mentions">
                @ {window.MEMBERS.map(m=>(
                  <button key={m.id} className="mtag" onClick={()=>insertMention(m.id)}>{m.short}</button>
                ))}
              </div>
              <button className="btn-primary" onClick={add}>发送</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 暴露给其他 babel 文件
Object.assign(window, { Avatar, UrgencyDot, TaskRow, TaskModal });