import React, { useState, useRef, useEffect } from 'react';
import './Mention.css';

const USERS = [
  { name: '王伟', dept: '华东大区' }, { name: '李娜', dept: '华南大区' }, { name: '张强', dept: '华北大区' },
  { name: '陈静', dept: '研发中心' }, { name: '刘洋', dept: '市场部' }
];

export default function Mention({ modelValue = '', users = USERS, onChange }) {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(-1);
  const [mentioned, setMentioned] = useState([]);
  const inputRef = useRef(null);
  const root = useRef(null);

  useEffect(() => {
    const onDoc = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); };
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, []);

  const onInput = (e) => {
    const pos = e.target.selectionStart, v = e.target.value;
    if (onChange) onChange(v);
    const at = v.lastIndexOf('@', pos - 1);
    if (at >= 0 && (at === 0 || /\s/.test(v[at - 1])) && !/\s/.test(v.slice(at + 1, pos))) { setActive(-1); setOpen(true); }
    else setOpen(false);
  };
  const move = (d) => setActive((a) => Math.max(-1, Math.min(users.length - 1, a + d)));
  const insert = (name) => {
    const el = inputRef.current, pos = el.selectionStart, v = el.value;
    const at = v.lastIndexOf('@', pos - 1);
    if (at >= 0 && (at === 0 || /\s/.test(v[at - 1]))) el.value = v.slice(0, at) + '@' + name + ' ' + v.slice(pos);
    else el.value = v.slice(0, pos) + '@' + name + ' ' + v.slice(pos);
    if (mentioned.indexOf(name) < 0) setMentioned((m) => [...m, name]);
    if (onChange) onChange(el.value);
    setOpen(false);
    el.focus();
  };
  const remove = (n) => setMentioned((m) => m.filter((x) => x !== n));

  return (
    <div className="aa-mention" ref={root}>
      <div className="aa-mention-area">
        <textarea
          ref={inputRef}
          className="aa-mention-input"
          value={modelValue}
          rows={3}
          placeholder="输入 @ 提及同事…"
          onChange={onInput}
          onKeyDown={(e) => {
            if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
            else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
            else if (e.key === 'Enter') { e.preventDefault(); if (active >= 0) insert(users[active].name); }
            else if (e.key === 'Escape') setOpen(false);
          }}
        />
        {open && (
          <div className="aa-mention-panel">
            {users.map((u, i) => (
              <div key={u.name} className={'aa-mention-item' + (i === active ? ' is-active' : '')} onClick={() => insert(u.name)}>
                <span className="aa-mention-avatar">{u.name[0]}</span>
                <span className="aa-mention-name">{u.name}</span>
                <span className="aa-mention-dept">{u.dept}</span>
              </div>
            ))}
          </div>
        )}
      </div>
      <div className="aa-mention-chips">
        {mentioned.map((n) => (
          <span key={n} className="aa-mention-chip">@{n} <b onClick={() => remove(n)}>×</b></span>
        ))}
      </div>
    </div>
  );
}