// Tag manager modal: view, rename, recolor, delete tags.
const TMIcons = window.Icons;
const { TAG_COLORS: TM_TAG_COLORS } = window.PMStore;

const TAG_COLOR_MAP = {
  emerald: '#10b981', blue: '#3b82f6', purple: '#a855f7',
  pink: '#ec4899', amber: '#f59e0b', red: '#ef4444',
  gray: '#6b7280', teal: '#14b8a6',
};

function TagManager({ state, onClose, onUpdateTag, onDeleteTag }) {
  const [editingId, setEditingId] = React.useState(null);
  const [editName, setEditName] = React.useState('');

  React.useEffect(() => {
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => window.removeEventListener('keydown', onEsc);
  }, [onClose]);

  const startEdit = (tag) => {
    setEditingId(tag.id);
    setEditName(tag.name);
  };

  const saveEdit = (tag) => {
    const name = editName.trim();
    if (name && name !== tag.name) onUpdateTag(tag.id, { name });
    setEditingId(null);
  };

  return (
    <div className="drawer-overlay" onClick={onClose}>
      <div className="tag-manager-panel" onClick={e => e.stopPropagation()}>
        <div className="drawer-header">
          <span style={{ fontWeight: 700, fontSize: 15 }}>Etiket Yönetimi</span>
          <div style={{ flex: 1 }} />
          <button className="icon-btn" onClick={onClose}><TMIcons.X size={16} /></button>
        </div>
        <div className="tag-manager-body">
          {state.tags.length === 0 ? (
            <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-faint)', fontSize: 13 }}>
              Henüz etiket yok.<br />Görev düzenleyicisinden ekleyebilirsiniz.
            </div>
          ) : state.tags.map(tag => (
            <div key={tag.id} className="tag-manager-row">
              <div className={`tag tag-${tag.color}`} style={{ flexShrink: 0 }}>{tag.name}</div>
              {editingId === tag.id ? (
                <input
                  className="tag-edit-input"
                  value={editName}
                  autoFocus
                  onChange={e => setEditName(e.target.value)}
                  onKeyDown={e => {
                    if (e.key === 'Enter') saveEdit(tag);
                    if (e.key === 'Escape') setEditingId(null);
                  }}
                  onBlur={() => saveEdit(tag)}
                />
              ) : (
                <button className="tag-edit-name" onClick={() => startEdit(tag)}>{tag.name}</button>
              )}
              <div className="tag-color-row">
                {TM_TAG_COLORS.map(color => (
                  <button
                    key={color}
                    className={`tag-color-dot ${tag.color === color ? 'active' : ''}`}
                    style={{ background: TAG_COLOR_MAP[color] || '#aaa' }}
                    onClick={() => onUpdateTag(tag.id, { color })}
                    title={color}
                  />
                ))}
              </div>
              <button
                className="icon-btn icon-btn-sm danger"
                onClick={() => onDeleteTag(tag.id)}
                title="Etiketi sil"
              >
                <TMIcons.Trash size={13} />
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.TagManager = TagManager;