// Dashboard: Noten-Übersicht

function PieceThumbnail({ piece, pinCount = 0 }) {
  const canvasRef = React.useRef(null);
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    if (!piece) return;
    let cancelled = false;

    if (piece.kind === 'demo') {
      fetch('demo-score.svg')
        .then(r => r.text())
        .then(svgText => {
          if (cancelled) return;
          const img = new Image();
          const blob = new Blob([svgText], { type: 'image/svg+xml' });
          const url = URL.createObjectURL(blob);
          img.onload = () => {
            if (cancelled) return;
            const canvas = canvasRef.current;
            if (!canvas) return;
            const aspect = img.height / img.width;
            canvas.width = 400;
            canvas.height = Math.round(400 * aspect);
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            URL.revokeObjectURL(url);
            setLoaded(true);
          };
          img.src = url;
        });
    } else if (piece.kind === 'pdf' && piece.pdfFilename && window.pdfjsLib) {
      const pdfjs = window.pdfjsLib;
      pdfjs.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js';
      pdfjs.getDocument('/api/uploads/' + piece.pdfFilename).promise.then(pdf => {
        if (cancelled) return;
        return pdf.getPage(1);
      }).then(page => {
        if (cancelled || !page) return;
        const viewport = page.getViewport({ scale: 0.8 });
        const canvas = canvasRef.current;
        if (!canvas) return;
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        const ctx = canvas.getContext('2d');
        page.render({ canvasContext: ctx, viewport }).promise.then(() => {
          if (!cancelled) setLoaded(true);
        });
      }).catch(() => {});
    }

    return () => { cancelled = true; };
  }, [piece?.id]);

  return (
    <div className="piece-tile-cover">
      <canvas
        ref={canvasRef}
        className={`piece-tile-thumb-canvas ${loaded ? 'loaded' : ''}`}
      />
      {!loaded && (
        <div className="piece-tile-cover-overlay">
          <Icon name="music" size={28} />
        </div>
      )}
      {pinCount > 0 && (
        <div className="piece-tile-pin-count">
          <Icon name="pin" size={10} stroke={2.5} />
          {pinCount}
        </div>
      )}
    </div>
  );
}

function Dashboard({ user, state, dispatch, onOpenPiece, onLogout, onUploadPdf, onImportZip, onOpenAdmin }) {
  const [search, setSearch] = React.useState('');
  const [menuOpen, setMenuOpen] = React.useState(false);
  const importRef = React.useRef(null);
  const fileRef = React.useRef(null);
  const menuRef = React.useRef(null);

  React.useEffect(() => {
    const handler = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const filtered = state.pieces.filter(p =>
    p.title.toLowerCase().includes(search.toLowerCase()) ||
    (p.composer || '').toLowerCase().includes(search.toLowerCase())
  );

  // Statistiken
  const totalPins = state.pieces.reduce((sum, p) => sum + (state.annotations[p.id]?.pins.length || 0), 0);
  const totalRehearsals = state.pieces.reduce((sum, p) => sum + (state.annotations[p.id]?.rehearsals.length || 0), 0);
  
  const phaseStats = window.PHASE_ORDER.reduce((acc, ph) => {
    let done = 0, total = 0;
    state.pieces.forEach(p => {
      const cl = state.annotations[p.id]?.checklist || {};
      const items = window.CHECKLISTS[ph];
      const naCount = items.filter((_, i) => cl[`${ph}-${i}-na`]).length;
      total += items.length - naCount;
      done += items.filter((_, i) => cl[`${ph}-${i}`]).length;
    });
    acc[ph] = { done, total, pct: total ? (done / total) * 100 : 0 };
    return acc;
  }, {});

  const overallPct = window.PHASE_ORDER.reduce((s, p) => s + phaseStats[p].pct, 0) / 4;

  const onFile = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    if (file.type !== 'application/pdf') { alert('Bitte eine PDF-Datei hochladen.'); return; }
    onUploadPdf(file);
    e.target.value = '';
  };

  const initials = (user.name || user.email).split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase();

  return (
    <div className="dashboard">
      <header className="dash-topbar">
        <div className="topbar-brand">
          <a href="https://kalikoer.com" target="_blank" rel="noopener noreferrer"><img src="kalikoer-logo.png" alt="Kalikoer" className="topbar-logo" /></a>
        </div>
        <div style={{ flex: 1 }} />
        {user.email === 'johannes.golda@posteo.de' && (
          <button className="btn btn-secondary admin-nav-btn" onClick={onOpenAdmin} title="Admin-Panel">
            <Icon name="shield" size={14} /> Admin
          </button>
        )}
        <div ref={menuRef} style={{ position: 'relative' }}>
          <button className="dash-user" onClick={() => setMenuOpen(!menuOpen)}>
            <div className="dash-avatar">{initials}</div>
            <span className="dash-user-name">{user.name}</span>
          </button>
          {menuOpen && (
            <div className="user-menu">
              <div className="user-menu-info">
                <div className="user-menu-name">{user.name}</div>
                <div className="user-menu-email">{user.email}</div>
              </div>
              <button className="user-menu-item" onClick={onLogout}>
                <Icon name="x" size={14} /> Abmelden
              </button>
            </div>
          )}
        </div>
      </header>

      <div className="dash-content">
        <div className="dash-hero">
          <div>
            <h1>Hallo {user.name.split(' ')[0]} 👋</h1>
            <p>Deine Notenübersicht — wähle ein Stück, um mit der Probenarbeit fortzufahren.</p>
          </div>
          <div className="dash-actions">
            <button className="dash-cta secondary" onClick={() => importRef.current.click()}>
              <Icon name="import" size={16} /> Stück importieren
            </button>
            <input ref={importRef} type="file" accept=".zip" hidden onChange={(e) => {
              const f = e.target.files[0];
              if (f) onImportZip(f);
              e.target.value = '';
            }} />
            <button className="dash-cta secondary" onClick={() => fileRef.current.click()}>
              <Icon name="upload" size={16} /> PDF hochladen
            </button>
            <input ref={fileRef} type="file" accept="application/pdf" hidden onChange={onFile} />
          </div>
        </div>

        <div className="stats-row">
          <div className="stat-card">
            <div className="stat-label">Stücke</div>
            <div className="stat-value-row">
              <span className="stat-value">{state.pieces.length}</span>
            </div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Kommentare</div>
            <div className="stat-value-row">
              <span className="stat-value">{totalPins}</span>
            </div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Proben</div>
            <div className="stat-value-row">
              <span className="stat-value">{totalRehearsals}</span>
            </div>
          </div>
          <div className="stat-card">
            <div className="stat-label">4-V Fortschritt</div>
            <div className="stat-value-row">
              <span className="stat-value">{Math.round(overallPct)}</span>
              <span className="stat-value-suffix">%</span>
            </div>
            <div className="stat-phases">
              {window.PHASE_ORDER.map(p => (
                <div key={p} className="stat-phase-pill" title={`${window.PHASES[p].name}: ${phaseStats[p].done}/${phaseStats[p].total}`}>
                  <div className="stat-phase-pill-fill" style={{ width: `${phaseStats[p].pct}%`, background: window.PHASES[p].color }} />
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="pieces-section-head">
          <h2>Deine Stücke</h2>
          <div className="pieces-search">
            <span className="pieces-search-icon"><Icon name="eye" size={14} /></span>
            <input type="text" placeholder="Stücke durchsuchen…" value={search} onChange={e => setSearch(e.target.value)} />
          </div>
        </div>

        {filtered.length === 0 && search && (
          <div className="empty-state">
            <Icon name="music" size={32} />
            <h3>Keine Treffer</h3>
            <p>Kein Stück passt zu „{search}".</p>
          </div>
        )}

        {state.pieces.length === 0 && !search && (
          <div className="empty-state">
            <Icon name="music" size={32} />
            <h3>Noch keine Stücke</h3>
            <p>Lade dein erstes PDF hoch, um zu beginnen.</p>
            <button className="dash-cta" style={{ marginTop: 14 }} onClick={() => fileRef.current.click()}>
              <Icon name="upload" size={16} /> PDF hochladen
            </button>
          </div>
        )}

        {filtered.length > 0 && (
          <div className="pieces-grid">
            {filtered.map(p => {
              const ann = state.annotations[p.id] || { pins: [], rehearsals: [], checklist: {} };
              const phaseProgress = window.PHASE_ORDER.map(ph => {
                const items = window.CHECKLISTS[ph];
                const naCount = items.filter((_, i) => ann.checklist[`${ph}-${i}-na`]).length;
                const relevant = items.length - naCount;
                const done = items.filter((_, i) => ann.checklist[`${ph}-${i}`]).length;
                return { phase: ph, pct: relevant ? (done / relevant) * 100 : 0 };
              });
              return (
                <div key={p.id} className="piece-tile" onClick={() => onOpenPiece(p.id)}>
                  <PieceThumbnail piece={p} pinCount={ann.pins.length} />
                  <div className="piece-tile-body">
                    <div className="piece-tile-title">{p.title}</div>
                    <div className="piece-tile-meta">
                      {p.composer || (p.kind === 'demo' ? 'Demo-Stück' : 'PDF')}
                      {' · '}
                      {window.formatRelative(p.createdAt)}
                    </div>
                    <div className="piece-tile-phases">
                      {phaseProgress.map(({ phase, pct }) => (
                        <div key={phase} className="piece-tile-phase-dot" title={`${phase}: ${Math.round(pct)}%`}>
                          <div className="piece-tile-phase-dot-fill" style={{ width: `${pct}%`, background: window.phaseColor(phase) }} />
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className="piece-tile-foot">
                    <span>{ann.rehearsals.length} Probe{ann.rehearsals.length === 1 ? '' : 'n'}</span>
                    <div className="piece-tile-actions">
                      <button
                        className="piece-tile-action"
                        title="Stück exportieren (.zip)"
                        onClick={(e) => {
                          e.stopPropagation();
                          window.exportPieceZip(p, ann).catch(err => {
                            console.error('Export fehlgeschlagen:', err);
                            alert('Export fehlgeschlagen.');
                          });
                        }}
                      >
                        <Icon name="package" size={13} />
                      </button>
                      <button
                        className="piece-tile-action danger"
                        title="Stück löschen"
                        onClick={(e) => {
                          e.stopPropagation();
                          if (confirm(`"${p.title}" wirklich löschen?`)) {
                            dispatch({ type: 'delete-piece', id: p.id });
                          }
                        }}
                      >
                        <Icon name="trash" size={13} />
                      </button>
                      <div className="piece-tile-action" title="Öffnen">
                        <Icon name="chevron-right" size={14} />
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
            <button className="piece-tile piece-tile-add" onClick={() => fileRef.current.click()}>
              <Icon name="plus" size={28} stroke={2} />
              <span style={{ fontSize: 13, fontWeight: 500 }}>PDF hochladen</span>
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;