// Comment-Editor (Modal zum Bearbeiten/Anlegen eines Pins)

function CommentEditor({ pin, onSave, onDelete, onClose }) {
  const [draft, setDraft] = React.useState(pin);

  const togglePhase = (p) => {
    if (draft.phase === p) return;
    setDraft({ ...draft, phase: p, subtags: [] }); // subtags reset bei Phasenwechsel
  };

  const toggleSubtag = (t) => {
    const has = draft.subtags?.includes(t);
    setDraft({
      ...draft,
      subtags: has ? draft.subtags.filter(x => x !== t) : [...(draft.subtags || []), t],
    });
  };

  const phase = draft.phase;
  const subtags = window.SUB_TAGS[phase] || [];

  return (
    <div className="comment-editor-overlay" onClick={onClose}>
      <div className="comment-editor" onClick={e => e.stopPropagation()}>
        <div className="editor-head">
          <div className="editor-title">{pin._new ? 'Neuer Kommentar' : 'Kommentar bearbeiten'}</div>
          <button className="editor-close" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="editor-body">
          <div>
            <label className="field-label">4-V Phase</label>
            <div className="phase-picker">
              {window.PHASE_ORDER.map(p => {
                const meta = window.PHASES[p];
                const active = phase === p;
                return (
                  <button
                    key={p}
                    className={`phase-pick ${active ? 'active' : ''}`}
                    style={active ? { borderColor: meta.color, background: meta.bg } : {}}
                    onClick={() => togglePhase(p)}
                  >
                    <div className="ppc-dot" style={{ background: meta.color }}>{p}</div>
                    <span>{meta.name}</span>
                  </button>
                );
              })}
            </div>
          </div>
          <div>
            <label className="field-label">Sub-Tags</label>
            <div className="subtag-picker">
              {subtags.map(t => (
                <button
                  key={t}
                  className={`subtag-pick ${draft.subtags?.includes(t) ? 'active' : ''}`}
                  style={draft.subtags?.includes(t) ? { background: window.phaseColor(phase) } : {}}
                  onClick={() => toggleSubtag(t)}
                >
                  {t}
                </button>
              ))}
            </div>
          </div>
          <div>
            <label className="field-label">Kommentar</label>
            <textarea
              className="text-area"
              placeholder="Was möchtest du dir hier merken?"
              value={draft.text || ''}
              onChange={e => setDraft({ ...draft, text: e.target.value })}
              autoFocus
            />
          </div>
        </div>
        <div className="editor-foot">
          {!pin._new && (
            <button className="btn btn-danger" onClick={onDelete}>Löschen</button>
          )}
          <div style={{ flex: 1 }} />
          <button className="btn btn-secondary" onClick={onClose}>Abbrechen</button>
          <button className="btn btn-primary" onClick={() => onSave(draft)}>Speichern</button>
        </div>
      </div>
    </div>
  );
}

window.CommentEditor = CommentEditor;