// Rechte Sidebar: Tabs für Kommentare, Checkliste, Probenplan

function SidebarRight({ state, dispatch, onEditPin, onSelectPin, selectedPinId }) {
  const ann = state.annotations[state.activePieceId] || { strokes: [], pins: [], checklist: {}, rehearsals: [] };
  const tab = state.activeTab;

  const filteredPins = ann.pins.filter(p => {
    if (state.activePhaseFilter && p.phase !== state.activePhaseFilter) return false;
    return true;
  });

  // Pins die in Proben verlinkt sind, dürfen nicht gelöscht werden
  const linkedPinIds = new Set();
  (ann.rehearsals || []).forEach(r => {
    (r.linkedPins || []).forEach(id => linkedPinIds.add(id));
  });

  return (
    <aside className="sidebar-right">
      <div className="right-header">
        <h3 className="right-title">
          {tab === 'comments' && 'Kommentare'}
          {tab === 'checklist' && 'Checkliste'}
          {tab === 'rehearsals' && 'Probenplan'}
        </h3>
        {tab === 'comments' && (
          <div className="filter-chips">
            <button
              className={`filter-chip ${!state.activePhaseFilter ? 'active' : ''}`}
              onClick={() => dispatch({ type: 'set-filter', phase: null })}
            >
              Alle ({ann.pins.length})
            </button>
            {window.PHASE_ORDER.map(p => {
              const count = ann.pins.filter(pin => pin.phase === p).length;
              const meta = window.PHASES[p];
              return (
                <button
                  key={p}
                  className={`filter-chip ${state.activePhaseFilter === p ? 'active' : ''}`}
                  onClick={() => dispatch({ type: 'set-filter', phase: p })}
                  style={state.activePhaseFilter === p ? { background: meta.color, borderColor: meta.color } : {}}
                >
                  <span className="filter-chip-dot" style={{ background: meta.color }} />
                  {p} ({count})
                </button>
              );
            })}
          </div>
        )}
      </div>

      <div className="right-tabs">
        <button className={`right-tab ${tab === 'comments' ? 'active' : ''}`} onClick={() => dispatch({ type: 'set-tab', tab: 'comments' })}>
          Kommentare
        </button>
        <button className={`right-tab ${tab === 'checklist' ? 'active' : ''}`} onClick={() => dispatch({ type: 'set-tab', tab: 'checklist' })}>
          Checkliste
        </button>
        <button className={`right-tab ${tab === 'rehearsals' ? 'active' : ''}`} onClick={() => dispatch({ type: 'set-tab', tab: 'rehearsals' })}>
          Proben
        </button>
      </div>

      {tab === 'comments' && (
        <CommentsList
          pins={filteredPins}
          allPins={ann.pins}
          onEditPin={onEditPin}
          onSelectPin={onSelectPin}
          selectedPinId={selectedPinId}
          onDeletePin={(id) => dispatch({ type: 'delete-pin', id })}
          onReorder={(fromIndex, toIndex) => dispatch({ type: 'reorder-pins', fromIndex, toIndex })}
          isFiltered={!!state.activePhaseFilter}
          linkedPinIds={linkedPinIds}
        />
      )}
      {tab === 'checklist' && (
        <ChecklistPanel
          checklist={ann.checklist}
          onToggle={(key) => dispatch({ type: 'toggle-check', key })}
          onToggleNa={(key) => dispatch({ type: 'toggle-na', key })}
        />
      )}
      {tab === 'rehearsals' && (
        <RehearsalsPanel
          rehearsals={ann.rehearsals}
          pins={ann.pins}
          dispatch={dispatch}
        />
      )}
    </aside>
  );
}

function CommentsList({ pins, allPins, onEditPin, onSelectPin, selectedPinId, onDeletePin, onReorder, isFiltered, linkedPinIds }) {
  const [dragId, setDragId] = React.useState(null);
  const [dragOverId, setDragOverId] = React.useState(null);

  // Show pins in allPins order (filtered if needed)
  const ordered = allPins.filter(p => pins.some(fp => fp.id === p.id));

  if (ordered.length === 0) {
    return (
      <div className="comments-list">
        <div className="comment-empty">
          <Icon name="message" size={28} />
          <div style={{ marginTop: 10 }}>Noch keine Kommentare.</div>
          <div style={{ marginTop: 4, fontSize: 12 }}>Wähle das <b>Pin</b>-Werkzeug oben und klicke in die Noten.</div>
        </div>
      </div>
    );
  }

  const handleDragStart = (e, pin) => {
    if (isFiltered) return;
    setDragId(pin.id);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', pin.id);
  };

  const handleDragOver = (e, pin) => {
    if (isFiltered || !dragId) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    if (pin.id !== dragOverId) setDragOverId(pin.id);
  };

  const handleDrop = (e, targetPin) => {
    e.preventDefault();
    if (isFiltered || !dragId || dragId === targetPin.id) {
      setDragId(null);
      setDragOverId(null);
      return;
    }
    const fromIndex = allPins.findIndex(p => p.id === dragId);
    const toIndex = allPins.findIndex(p => p.id === targetPin.id);
    if (fromIndex !== -1 && toIndex !== -1) {
      onReorder(fromIndex, toIndex);
    }
    setDragId(null);
    setDragOverId(null);
  };

  const handleDragEnd = () => {
    setDragId(null);
    setDragOverId(null);
  };

  return (
    <div className="comments-list">
      {ordered.map(pin => {
        const meta = window.PHASES[pin.phase];
        const num = allPins.findIndex(p => p.id === pin.id) + 1;
        const isDragging = dragId === pin.id;
        const isDragOver = dragOverId === pin.id && dragId !== pin.id;
        return (
          <div
            key={pin.id}
            className={`comment-card ${pin.id === selectedPinId ? 'selected' : ''} ${isDragging ? 'comment-dragging' : ''} ${isDragOver ? 'comment-drag-over' : ''}`}
            onClick={() => onSelectPin(pin.id)}
            draggable={!isFiltered}
            onDragStart={(e) => handleDragStart(e, pin)}
            onDragOver={(e) => handleDragOver(e, pin)}
            onDrop={(e) => handleDrop(e, pin)}
            onDragEnd={handleDragEnd}
          >
            <div className="comment-head">
              {!isFiltered && <div className="comment-drag-handle" title="Ziehen zum Sortieren"><Icon name="grip" size={14} /></div>}
              <div className="comment-pin-num" style={{ background: meta.color }}>{num}</div>
              <div className="comment-phase-tag" style={{ background: meta.bg, color: meta.color }}>
                {pin.phase} · {meta.name}
              </div>
              <div className="comment-meta">{window.formatRelative(pin.createdAt)}</div>
            </div>
            <div className="comment-body">{pin.text || <span style={{ color: 'var(--text-soft)', fontStyle: 'italic' }}>(leer)</span>}</div>
            {pin.subtags && pin.subtags.length > 0 && (
              <div className="comment-subtags">
                {pin.subtags.map(t => <span key={t} className="comment-subtag">{t}</span>)}
              </div>
            )}
            <div className="comment-actions">
              <button className="comment-action" onClick={(e) => { e.stopPropagation(); onEditPin(pin); }}>
                Bearbeiten
              </button>
              {linkedPinIds && linkedPinIds.has(pin.id) ? (
                <span className="comment-action linked-hint" title="Dieser Kommentar ist in einer Probe verlinkt">
                  <Icon name="calendar" size={11} /> verlinkt
                </span>
              ) : (
                <button className="comment-action danger" onClick={(e) => { e.stopPropagation(); if (confirm('Kommentar löschen?')) onDeletePin(pin.id); }}>
                  Löschen
                </button>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ChecklistPanel({ checklist, onToggle, onToggleNa }) {
  return (
    <div className="checklist-panel">
      {window.PHASE_ORDER.map(phase => {
        const items = window.CHECKLISTS[phase];
        const meta = window.PHASES[phase];
        const naCount = items.filter((_, i) => checklist[`${phase}-${i}-na`]).length;
        const relevant = items.length - naCount;
        const done = items.filter((_, i) => checklist[`${phase}-${i}`]).length;
        return (
          <div key={phase} className="checklist-section">
            <div className="checklist-section-head">
              <div className="phase-badge" style={{ background: meta.color, width: 22, height: 22, fontSize: 10 }}>
                {phase}
              </div>
              <div className="checklist-section-title">{meta.name}</div>
              <div className="checklist-counter">
                {done}/{relevant}
                {naCount > 0 && <span className="checklist-na-hint"> ({naCount} n/r)</span>}
              </div>
            </div>
            {items.map((item, i) => {
              const key = `${phase}-${i}`;
              const checked = !!checklist[key];
              const isNa = !!checklist[key + '-na'];
              return (
                <div
                  key={key}
                  className={`checklist-item ${checked ? 'done' : ''} ${isNa ? 'na' : ''}`}
                  onClick={() => !isNa && onToggle(key)}
                >
                  <div className={`checkbox ${checked ? 'checked' : ''} ${isNa ? 'na' : ''}`} style={checked ? { background: meta.color, borderColor: meta.color } : {}}>
                    {checked && <Icon name="check" size={11} stroke={3} />}
                    {isNa && <span className="checkbox-na">–</span>}
                  </div>
                  <div className="checklist-text">{item}</div>
                  <button
                    className={`checklist-na-btn ${isNa ? 'active' : ''}`}
                    title={isNa ? 'Wieder relevant' : 'Nicht relevant'}
                    onClick={(e) => { e.stopPropagation(); onToggleNa(key); }}
                  >
                    n/r
                  </button>
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

function RehearsalsPanel({ rehearsals, pins, dispatch }) {
  const [editing, setEditing] = React.useState(null);

  const startNew = () => {
    setEditing({
      id: window.uid(),
      date: Date.now(),
      title: '',
      phases: [],
      linkedPins: [],
      notes: '',
      _new: true,
    });
  };

  const sorted = [...rehearsals].sort((a, b) => b.date - a.date);

  return (
    <div className="rehearsal-panel">
      <button
        className="btn btn-secondary"
        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 12 }}
        onClick={startNew}
      >
        <Icon name="plus" size={14} stroke={2.5} /> Neue Probe
      </button>
      {sorted.length === 0 && (
        <div className="comment-empty">
          <Icon name="calendar" size={28} />
          <div style={{ marginTop: 10 }}>Noch keine Proben geplant.</div>
        </div>
      )}
      {sorted.map(r => {
        const linked = (r.linkedPins || []).map(id => pins.find(p => p.id === id)).filter(Boolean);
        return (
          <div key={r.id} className="rehearsal-card" onClick={() => setEditing({ ...r, linkedPins: r.linkedPins || [] })}>
            <div className="rehearsal-head">
              <div className="rehearsal-date">{window.formatDate(r.date)}</div>
            </div>
            <div className="rehearsal-title">{r.title || <span style={{ color: 'var(--text-soft)', fontStyle: 'italic' }}>(ohne Titel)</span>}</div>
            {r.notes && <div className="rehearsal-notes">{r.notes}</div>}
            {r.phases && r.phases.length > 0 && (
              <div className="rehearsal-tags">
                {r.phases.map(p => (
                  <span key={p} className="rehearsal-tag" style={{ background: window.phaseColor(p) }}>
                    {p} {window.PHASES[p].name}
                  </span>
                ))}
              </div>
            )}
            {linked.length > 0 && (
              <div className="rehearsal-linked-pins">
                {linked.map(pin => {
                  const num = pins.findIndex(p => p.id === pin.id) + 1;
                  return (
                    <div key={pin.id} className="rehearsal-linked-pin">
                      <span className="rehearsal-linked-pin-num" style={{ background: window.phaseColor(pin.phase) }}>{num}</span>
                      <span className="rehearsal-linked-pin-text">{pin.text ? pin.text.split(/\s+/).slice(0, 6).join(' ') + (pin.text.split(/\s+/).length > 6 ? '…' : '') : '(leer)'}</span>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        );
      })}
      {editing && (
        <RehearsalEditor
          rehearsal={editing}
          pins={pins}
          onSave={(r) => { dispatch({ type: 'save-rehearsal', rehearsal: r }); setEditing(null); }}
          onDelete={() => { dispatch({ type: 'delete-rehearsal', id: editing.id }); setEditing(null); }}
          onClose={() => setEditing(null)}
        />
      )}
    </div>
  );
}

function RehearsalEditor({ rehearsal, pins, onSave, onDelete, onClose }) {
  const [r, setR] = React.useState({ ...rehearsal, linkedPins: rehearsal.linkedPins || [] });

  const togglePhase = (p) => {
    setR({ ...r, phases: r.phases.includes(p) ? r.phases.filter(x => x !== p) : [...r.phases, p] });
  };

  const toggleLinkedPin = (pinId) => {
    setR(prev => ({
      ...prev,
      linkedPins: prev.linkedPins.includes(pinId)
        ? prev.linkedPins.filter(id => id !== pinId)
        : [...prev.linkedPins, pinId],
    }));
  };

  // V3 + V4 Pins zur Auswahl
  const linkablePins = pins.filter(p => p.phase === 'V3' || p.phase === 'V4');

  return (
    <div className="comment-editor-overlay" onClick={onClose}>
      <div className="comment-editor" onClick={e => e.stopPropagation()}>
        <div className="editor-head">
          <div className="editor-title">Probe {rehearsal._new ? 'anlegen' : 'bearbeiten'}</div>
          <button className="editor-close" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="editor-body">
          <div>
            <label className="field-label">Datum</label>
            <input type="date" className="text-input"
              value={new Date(r.date).toISOString().slice(0, 10)}
              onChange={e => setR({ ...r, date: new Date(e.target.value).getTime() })}
            />
          </div>
          <div>
            <label className="field-label">Titel</label>
            <input type="text" className="text-input" placeholder="z.B. Probe 3 — Vermittlung Mittelteil"
              value={r.title}
              onChange={e => setR({ ...r, title: e.target.value })}
            />
          </div>
          <div>
            <label className="field-label">Phasen-Schwerpunkt</label>
            <div className="phase-picker">
              {window.PHASE_ORDER.map(p => {
                const meta = window.PHASES[p];
                const active = r.phases.includes(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">Kommentare verlinken <span style={{ fontWeight: 400, color: 'var(--text-soft)' }}>(V3 · V4)</span></label>
            {linkablePins.length === 0 ? (
              <div style={{ fontSize: 12, color: 'var(--text-soft)', padding: '8px 0' }}>
                Noch keine Kommentare in V3/V4 vorhanden.
              </div>
            ) : (
              <div className="rehearsal-pin-picker">
                {linkablePins.map(pin => {
                  const active = r.linkedPins.includes(pin.id);
                  const meta = window.PHASES[pin.phase];
                  const num = pins.findIndex(p => p.id === pin.id) + 1;
                  return (
                    <button
                      key={pin.id}
                      className={`rehearsal-pin-option ${active ? 'active' : ''}`}
                      onClick={() => toggleLinkedPin(pin.id)}
                    >
                      <div className={`checkbox ${active ? 'checked' : ''}`} style={active ? { background: meta.color, borderColor: meta.color, width: 16, height: 16 } : { width: 16, height: 16 }}>
                        {active && <Icon name="check" size={10} stroke={3} />}
                      </div>
                      <span className="rehearsal-pin-option-num" style={{ background: meta.color }}>{num}</span>
                      <span className="rehearsal-pin-option-phase">{pin.phase}</span>
                      <span className="rehearsal-pin-option-text">
                        {pin.text ? pin.text.split(/\s+/).slice(0, 8).join(' ') + (pin.text.split(/\s+/).length > 8 ? '…' : '') : '(leer)'}
                      </span>
                    </button>
                  );
                })}
              </div>
            )}
          </div>
          <div>
            <label className="field-label">Notizen</label>
            <textarea className="text-area" placeholder="Was wurde geprobt? Was als Nächstes?"
              value={r.notes}
              onChange={e => setR({ ...r, notes: e.target.value })}
            />
          </div>
        </div>
        <div className="editor-foot">
          {!rehearsal._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(r)}>Speichern</button>
        </div>
      </div>
    </div>
  );
}

window.SidebarRight = SidebarRight;