// 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;
  });

  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 })}
        />
      )}
      {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}
          dispatch={dispatch}
        />
      )}
    </aside>
  );
}

function CommentsList({ pins, allPins, onEditPin, onSelectPin, selectedPinId, onDeletePin }) {
  // Sortiere nach Position auf der Seite (oben → unten)
  const sorted = [...pins].sort((a, b) => {
    if (a.pageIndex !== b.pageIndex) return a.pageIndex - b.pageIndex;
    return a.y - b.y;
  });

  if (sorted.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>
    );
  }

  return (
    <div className="comments-list">
      {sorted.map(pin => {
        const meta = window.PHASES[pin.phase];
        const num = allPins.findIndex(p => p.id === pin.id) + 1;
        return (
          <div
            key={pin.id}
            className={`comment-card ${pin.id === selectedPinId ? 'selected' : ''}`}
            onClick={() => onSelectPin(pin.id)}
          >
            <div className="comment-head">
              <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>
              <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, dispatch }) {
  const [editing, setEditing] = React.useState(null);

  const startNew = () => {
    setEditing({
      id: window.uid(),
      date: Date.now(),
      title: '',
      phases: [],
      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 => (
        <div key={r.id} className="rehearsal-card" onClick={() => setEditing({ ...r })}>
          <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>
          )}
        </div>
      ))}
      {editing && (
        <RehearsalEditor
          rehearsal={editing}
          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, onSave, onDelete, onClose }) {
  const [r, setR] = React.useState(rehearsal);

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

  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">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;