/* RequirementsPage.jsx — requirements & feedback module (social-feed style).
   Anyone (incl. viewers) can post & reply; editors/managers can resolve.
   Filter by status (open/resolved) and time range; optional product filter. */
const { useState: useStateRQ, useMemo: useMemoRQ } = React;

const RQ_COLORS = ['#0A59F7', '#C8691E', '#5B5BD6', '#0E8A7A', '#C7000B', '#7A5AF8'];
function rqColor(handle) { let h = 0; for (const ch of handle) h = (h * 31 + ch.charCodeAt(0)) >>> 0; return RQ_COLORS[h % RQ_COLORS.length]; }
function rqInitials(name) { return name.split(' ').map(s => s[0]).join('').slice(0, 2).toUpperCase(); }
function rqMember(handle) { return (typeof MEMBERS !== 'undefined' && MEMBERS.find(m => m.handle === handle)) || { handle, name: handle, role: 'viewer' }; }
const reqCode = (r) => 'REQ-' + String(parseInt(String(r.id).replace(/\D/g, ''), 10) || 0).padStart(3, '0');

function rqTimeAgo(iso, zh) {
  const then = new Date(String(iso).replace(' ', 'T'));
  const now = new Date();
  const diff = Math.max(0, now - then);
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return zh ? '刚刚' : 'just now';
  if (mins < 60) return zh ? mins + ' 分钟前' : mins + 'm ago';
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return zh ? hrs + ' 小时前' : hrs + 'h ago';
  const days = Math.floor(hrs / 24);
  if (days < 30) return zh ? days + ' 天前' : days + 'd ago';
  const months = Math.floor(days / 30);
  return zh ? months + ' 个月前' : months + 'mo ago';
}
function rqDaysSince(iso) {
  const then = new Date(String(iso).replace(' ', 'T'));
  return (new Date() - then) / 86400000;
}

function RqAvatar({ handle, size = 36 }) {
  const m = rqMember(handle);
  return (
    <span className="rounded-full flex items-center justify-center font-semibold text-white shrink-0"
      style={{ width: size, height: size, fontSize: Math.round(size * 0.36), background: rqColor(handle) }}>
      {rqInitials(m.name)}
    </span>
  );
}

function RqProductTag({ id }) {
  const p = (typeof PRODUCT_MAP !== 'undefined' && PRODUCT_MAP[id]) || { name: id, nameZh: id };
  return (
    <span className="inline-flex items-center gap-1 h-6 px-2 rounded-[4px] bg-sunken border border-line text-[11.5px] text-ink2 shrink-0">
      <Icon name="tag" size={11} className="text-ink3" />{tr(p.name, p.nameZh)}
    </span>
  );
}

function RqStatusPill({ status }) {
  const resolved = status === 'resolved';
  return (
    <span className={cx('inline-flex items-center gap-1 h-6 px-2 rounded-full text-[11.5px] font-medium shrink-0',
      resolved ? 'bg-[color:var(--success)]/12 text-success' : 'bg-[color:var(--warning)]/12 text-warning')}>
      <Icon name={resolved ? 'check' : 'clock'} size={11} />
      {resolved ? tr('Resolved', '已解决') : tr('Open', '待处理')}
    </span>
  );
}

/* one mock image attachment block */
function RqImage({ label }) {
  return (
    <div className="mt-3 max-w-[380px] rounded-[8px] border border-line bg-sunken h-36 flex flex-col items-center justify-center gap-1.5 text-ink3">
      <Icon name="image" size={20} />
      <span className="font-mono text-[11px]">{label}</span>
    </div>
  );
}

/* a single feed card */
function RqCard({ item, zh, onReply, onToggleResolve }) {
  const [draft, setDraft] = useStateRQ('');
  const m = rqMember(item.author);
  const submit = () => { if (!draft.trim()) return; onReply(item.id, draft.trim()); setDraft(''); };
  return (
    <div className="rounded-[12px] border border-line bg-panel p-4">
      <div className="flex gap-3">
        <RqAvatar handle={item.author} />
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-[13.5px] font-medium text-ink">{m.name}</span>
            <span className="text-[11px] text-ink3">{tr((ROLES[m.role] || {}).label || m.role, (ROLES[m.role] || {}).labelZh || m.role)}</span>
            <span className="text-ink3 text-[11px]">·</span>
            <span className="text-[11.5px] text-ink3">{rqTimeAgo(item.time, zh)}</span>
            <div className="ml-auto flex items-center gap-2">
              <RqProductTag id={item.product} />
              <RqStatusPill status={item.status} />
            </div>
          </div>
          <p className="text-[14px] text-ink mt-2 leading-relaxed whitespace-pre-wrap">
            <button type="button" title={tr('Copy ID', '复制编号')}
              onClick={e => { e.stopPropagation(); try { navigator.clipboard.writeText(reqCode(item)); } catch (_) {} }}
              className="inline-flex items-center h-[18px] px-1.5 rounded-[4px] bg-sunken border border-line text-[11px] font-mono text-ink3 shrink-0 align-middle mr-1.5 hover:text-ink hover:border-line2 transition">
              {reqCode(item)}
            </button>
            <span className="text-ink3 mr-1.5">·</span>
            {zh ? (item.textZh || item.text) : item.text}
          </p>
          {item.image && <RqImage label={zh ? (item.image.labelZh || item.image.label) : item.image.label} />}

          {item.replies.length > 0 && (
            <div className="mt-3.5 pt-3.5 border-t border-line flex flex-col gap-3">
              {item.replies.map((r, i) => {
                const rm = rqMember(r.author);
                return (
                  <div key={i} className="flex gap-2.5">
                    <RqAvatar handle={r.author} size={26} />
                    <div className="min-w-0">
                      <div className="flex items-center gap-1.5">
                        <span className="text-[12.5px] font-medium text-ink">{rm.name}</span>
                        <span className="text-[11px] text-ink3">{rqTimeAgo(r.time, zh)}</span>
                      </div>
                      <p className="text-[13px] text-ink2 mt-0.5 leading-snug whitespace-pre-wrap">{zh ? (r.textZh || r.text) : r.text}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          <div className="flex items-center gap-2 mt-3">
            <div className="relative flex-1">
              <input value={draft} onChange={e => setDraft(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); } }}
                placeholder={tr('Write a reply…', '写条回复…')}
                className="w-full h-8 bg-sunken border border-line rounded-[8px] pl-3 pr-9 text-[13px] text-ink focus-ring focus:border-line2" />
              <button onClick={submit} disabled={!draft.trim()}
                className="absolute right-1.5 top-1/2 -translate-y-1/2 text-ink3 hover:text-accent disabled:opacity-30 disabled:hover:text-ink3">
                <Icon name="send" size={15} />
              </button>
            </div>
            {canEdit() && (
              <Button size="sm" variant={item.status === 'resolved' ? 'ghost' : 'secondary'}
                icon={item.status === 'resolved' ? 'refresh' : 'check'} onClick={() => onToggleResolve(item.id)}>
                {item.status === 'resolved' ? tr('Reopen', '重新打开') : tr('Resolve', '标记已解决')}
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function RequirementsPage() {
  const zh = getAppLang() === 'zh';
  const idRef = React.useRef(9000);
  const [list, setList] = useStateRQ(() => REQUESTS.map(r => ({ ...r, replies: r.replies.map(x => ({ ...x })) })));
  const [statusF, setStatusF] = useStateRQ('all');   // all | open | resolved
  const [timeF, setTimeF] = useStateRQ('all');        // all | 7d | 30d
  const [prodF, setProdF] = useStateRQ('all');
  const [q, setQ] = useStateRQ('');

  // composer
  const [draft, setDraft] = useStateRQ('');
  const [draftProduct, setDraftProduct] = useStateRQ('system');
  const [draftImage, setDraftImage] = useStateRQ(false);

  const openCount = list.filter(r => r.status === 'open').length;
  const resolvedCount = list.filter(r => r.status === 'resolved').length;

  const items = useMemoRQ(() => list
    .filter(r => statusF === 'all' || r.status === statusF)
    .filter(r => prodF === 'all' || r.product === prodF)
    .filter(r => timeF === 'all' || rqDaysSince(r.time) <= (timeF === '7d' ? 7 : 30))
    .filter(r => !q || (r.text + ' ' + (r.textZh || '')).toLowerCase().includes(q.toLowerCase()))
    .slice()
    .sort((a, b) => new Date(String(b.time).replace(' ', 'T')) - new Date(String(a.time).replace(' ', 'T')))
  , [list, statusF, prodF, timeF, q]);

  const nowIso = () => { const d = new Date(), p = n => String(n).padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`; };

  const post = () => {
    if (!draft.trim()) return;
    const id = 'rq' + (++idRef.current);
    const item = {
      id, product: draftProduct, author: SESSION.user.handle, status: 'open',
      text: draft.trim(), textZh: draft.trim(),
      image: draftImage ? { label: 'upload.png', labelZh: 'upload.png' } : null,
      time: nowIso(), replies: [],
    };
    setList(l => [item, ...l]);
    setDraft(''); setDraftImage(false); setDraftProduct('system');
  };
  const reply = (id, text) => setList(l => l.map(r => r.id === id
    ? { ...r, replies: [...r.replies, { author: SESSION.user.handle, time: nowIso(), text, textZh: text }] } : r));
  const toggleResolve = (id) => setList(l => l.map(r => r.id === id
    ? { ...r, status: r.status === 'resolved' ? 'open' : 'resolved' } : r));

  return (
    <div className="h-full flex flex-col">
      <PageToolbar
        title={tr('Requirements & feedback', '需求与反馈')}
        titleMeta={`${openCount} ${tr('open','待处理')} · ${resolvedCount} ${tr('resolved','已解决')}`}
        search={{ value:q, onChange:setQ, placeholder:tr('Search feedback…','搜索反馈…') }}
        categories={{ value:prodF, onChange:setProdF, allLabel:tr('All products','全部产品'), options:PRODUCTS.map(p=>({ value:p.id, label:tr(p.name, p.nameZh) })) }}
        facets={
          <Segmented size="sm" value={statusF} onChange={setStatusF} options={[
            { value: 'all', label: tr('All', '全部') },
            { value: 'open', label: tr('Open', '待处理') },
            { value: 'resolved', label: tr('Resolved', '已解决') },
          ]} />
        }
        filters={{ groups:[{ key:'time', label:tr('Time range','时间范围'), opts:[['all',tr('Any time','全部时间')],['7d',tr('7 days','近 7 天')],['30d',tr('30 days','近 30 天')]] }], value:{time:timeF}, onChange:v=>setTimeF(v.time) }}
      />

      <div className="flex-1 overflow-y-auto ds-scroll p-6">
        <div className="max-w-[760px] mx-auto flex flex-col gap-4">
          {/* composer */}
          <div className="rounded-[12px] border border-line bg-panel p-4">
            <div className="flex gap-3">
              <RqAvatar handle={SESSION.user.handle} />
              <div className="flex-1 min-w-0">
                <textarea value={draft} onChange={e => setDraft(e.target.value)} rows={2}
                  placeholder={tr('Share a requirement or feedback for the design system…', '为设计系统提一条需求或反馈…')}
                  className="w-full bg-sunken border border-line rounded-[8px] px-3 py-2 text-[14px] text-ink focus-ring focus:border-line2 resize-none leading-relaxed" />
                {draftImage && (
                  <div className="mt-2 inline-flex items-center gap-1.5 h-7 px-2 rounded-[7px] bg-sunken border border-line text-[12px] text-ink2">
                    <Icon name="image" size={13} className="text-ink3" />upload.png
                    <button onClick={() => setDraftImage(false)} className="text-ink3 hover:text-ink"><Icon name="close" size={12} /></button>
                  </div>
                )}
                <div className="flex items-center gap-2 mt-3 flex-wrap">
                  <span className="text-[12px] text-ink3">{tr('Target', '面向产品')}</span>
                  {PRODUCTS.map(p => (
                    <button key={p.id} onClick={() => setDraftProduct(p.id)}
                      className={cx('h-6 px-2 rounded-[4px] text-[11.5px] font-medium transition border',
                        draftProduct === p.id ? 'bg-accentWeak text-accent border-[color:var(--accent)]/30' : 'bg-panel text-ink2 border-line hover:text-ink hover:bg-hover')}>
                      {tr(p.name, p.nameZh)}</button>
                  ))}
                  <div className="ml-auto flex items-center gap-2">
                    <Button size="sm" variant="ghost" icon="image" onClick={() => setDraftImage(v => !v)}>{tr('Attach', '附图')}</Button>
                    <Button size="sm" variant="primary" icon="send" disabled={!draft.trim()} onClick={post}>{tr('Post', '发布')}</Button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* feed */}
          {items.length === 0 ? (
            <EmptyState icon="chat" title={tr('Nothing here yet', '这里还没有内容')}
              body={tr('No items match the current filters.', '没有符合当前筛选条件的内容。')}
              action={<Button variant="secondary" onClick={() => { setStatusF('all'); setTimeF('all'); setProdF('all'); }}>{tr('Reset filters', '重置筛选')}</Button>} />
          ) : items.map(it => (
            <RqCard key={it.id} item={it} zh={zh} onReply={reply} onToggleResolve={toggleResolve} />
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RequirementsPage });