import { store, useApp } from '../state/store.ts';

export function Library() {
  const app = useApp();
  if (!app.libraryOpen) return null;
  return (
    <div className="modal-backdrop" onClick={() => store.setLibraryOpen(false)}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h2>Songs</h2>
          <button onClick={() => void store.newSong()}>New song</button>
          <span className="spacer" />
          <button onClick={() => store.setLibraryOpen(false)}>Close</button>
        </div>
        <div className="songlist">
          {app.songs.length === 0 && <p className="dim">No songs yet.</p>}
          {app.songs.map((s) => (
            <div key={s.id} className={`songrow ${s.id === app.rec?.id ? 'active' : ''}`}>
              <button className="songopen" onClick={() => void store.openSong(s.id)} title="Open">
                <span className="songname">{s.name}</span>
                <span className="dim">
                  {s.trackCount} track{s.trackCount === 1 ? '' : 's'}, {s.noteCount} notes, {new Date(s.updatedAt).toLocaleString()}
                </span>
              </button>
              <button className="mini" title="Duplicate" onClick={() => void store.duplicateSong(s.id)}>⧉</button>
              <button
                className="mini danger"
                title="Delete"
                onClick={() => {
                  if (window.confirm(`Delete "${s.name}"? This cannot be undone.`)) void store.deleteSongById(s.id);
                }}
              >✕</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}