/* Additional feature mockups: Search, Metadata Editor, Mini Player, Now Playing */

function SearchMockup() {
  // Album-art placeholder: a small DG-style yellow corner badge on a warm portrait gradient.
  const Art = ({ id }) => (
    <svg className="sr-art" viewBox="0 0 60 60" width="60" height="60" aria-hidden="true">
      <defs>
        <radialGradient id={`g${id}`} cx="50%" cy="40%" r="80%">
          <stop offset="0%" stopColor="#6d4a2e"/>
          <stop offset="55%" stopColor="#3b2418"/>
          <stop offset="100%" stopColor="#1c1109"/>
        </radialGradient>
      </defs>
      <rect width="60" height="60" fill={`url(#g${id})`}/>
      {/* silhouette suggestion */}
      <circle cx="30" cy="24" r="10" fill="#0f0905" opacity="0.55"/>
      <path d="M8 60 C 12 42, 48 42, 52 60 Z" fill="#0f0905" opacity="0.55"/>
      {/* DG-style corner badge */}
      <rect x="44" y="2" width="14" height="10" fill="#f1c733"/>
      <path d="M46 4 h10 v6 h-10 z" fill="#f1c733" stroke="#7a2618" strokeWidth="0.6"/>
    </svg>
  );

  const songs = [
    { t: 'Piano Sonata No. 14 in C-sharp minor, Op. 27, No. 2, "Moonlight" : II. Allegretto', d: "2:05" },
    { t: 'Piano Sonata No. 14 in C-sharp minor, Op. 27, No. 2, "Moonlight" : I. Adagio sostenuto', d: "5:13" },
    { t: 'Piano Sonata No. 14 in C-sharp minor, Op. 27, No. 2, "Moonlight" : III. Presto agitato', d: "6:51" },
  ];

  return (
    <div className="mk mk-search">
      {/* Search input row */}
      <div className="sr-input">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
          <circle cx="11" cy="11" r="6.5"/><path d="M16 16l5 5"/>
        </svg>
        <span className="sr-q">moonlight sonata<span className="sr-caret"/></span>
      </div>
      <div className="sr-divider"/>

      {/* Albums section */}
      <div className="sr-section">
        <span className="sr-section-label">Albums</span>
        <span className="sr-section-count">1</span>
      </div>
      <div className="sr-row sr-row-album sr-row-selected">
        <Art id="a1"/>
        <div className="sr-meta">
          <div className="sr-title">Beethoven: The Complete Piano Sonatas</div>
          <div className="sr-sub">Igor Levit · 2019</div>
        </div>
        <svg className="sr-chev" width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 3l4 4-4 4"/>
        </svg>
      </div>

      {/* Songs section */}
      <div className="sr-section sr-section-pad">
        <span className="sr-section-label">Songs</span>
        <span className="sr-section-count">3</span>
      </div>
      {songs.map((s, i) => (
        <div key={i} className="sr-row sr-row-song">
          <Art id={`s${i}`}/>
          <div className="sr-meta">
            <div className="sr-title">{s.t}</div>
            <div className="sr-sub">Igor Levit · Beethoven: The Complete Piano Sonatas</div>
          </div>
          <div className="sr-dur">{s.d}</div>
        </div>
      ))}

      {/* Footer / keyboard hints */}
      <div className="sr-footer">
        <div className="sr-foot-left">1 album, 3 songs</div>
        <div className="sr-foot-right">
          <kbd className="sr-kbd">↑↓</kbd><span className="sr-key-lbl">Select</span>
          <kbd className="sr-kbd">Return</kbd><span className="sr-key-lbl">Choose</span>
          <kbd className="sr-kbd">Esc</kbd><span className="sr-key-lbl">Close</span>
        </div>
      </div>
    </div>
  );
}

function MetadataEditorMockup() {
  // Approximation of a "Glenn Gould Bach Vol. 4 — Well-Tempered Clavier" cover.
  const Cover = () => (
    <svg className="meta-art" viewBox="0 0 160 160" width="160" height="160" aria-hidden="true">
      <defs>
        <linearGradient id="mtaPortrait" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#7a9b9a"/>
          <stop offset="100%" stopColor="#243a45"/>
        </linearGradient>
      </defs>
      {/* white top half */}
      <rect width="160" height="160" fill="#efe9dc"/>
      {/* left spine band */}
      <rect x="0" y="0" width="14" height="160" fill="#e5dccb"/>
      <text x="7" y="120" transform="rotate(-90 7 120)" fontFamily="serif" fontSize="6" fill="#6b5e44" letterSpacing="1">THE GLENN GOULD COLLECTION</text>
      {/* sony classical badge */}
      <rect x="128" y="8" width="22" height="14" fill="#cf2030"/>
      <text x="139" y="15" textAnchor="middle" fontFamily="sans-serif" fontSize="4" fontWeight="700" fill="#fff">SONY</text>
      <text x="139" y="20" textAnchor="middle" fontFamily="sans-serif" fontSize="3" fill="#fff">CLASSICAL</text>
      {/* chair pictogram */}
      <g stroke="#222" strokeWidth="0.8" fill="none">
        <path d="M22 8 v12 M22 14 h6 M28 14 v6 M22 20 h6"/>
      </g>
      {/* title block */}
      <text x="22" y="40" fontFamily="Helvetica, Arial, sans-serif" fontSize="13" fontWeight="800" fill="#111">GLENN GOULD</text>
      <text x="22" y="56" fontFamily="Helvetica, Arial, sans-serif" fontSize="13" fontWeight="800" fill="#111">BACH<tspan fontSize="9" fontWeight="600" dx="4">VOL. 4</tspan></text>
      <text x="22" y="68" fontFamily="Helvetica, Arial, sans-serif" fontSize="5" fontWeight="700" fill="#7c8a3e" letterSpacing="0.5">THE WELL-TEMPERED CLAVIER</text>
      <text x="22" y="74" fontFamily="Helvetica, Arial, sans-serif" fontSize="5" fontWeight="700" fill="#7c8a3e" letterSpacing="0.5">BOOKS I &amp; II</text>
      {/* photo lower half */}
      <rect x="0" y="80" width="160" height="80" fill="url(#mtaPortrait)"/>
      {/* coat/silhouette */}
      <path d="M0 160 L0 130 Q40 110 80 118 Q120 110 160 130 L160 160 Z" fill="#1c1f24"/>
      <ellipse cx="80" cy="108" rx="14" ry="17" fill="#d6b08c"/>
      <path d="M68 100 Q80 90 92 100 Q92 92 80 88 Q68 92 68 100 Z" fill="#3a2a22"/>
    </svg>
  );

  const fields = [
    { label: "Title", value: "Mixed", muted: true, full: true },
    { label: "Artist", value: "Glenn Gould", full: true },
    { label: "Album", value: "Bach: The Well-Tempered Clavier Books I & II, BWV 846-893", full: true },
    { label: "Album artist", value: "Glenn Gould", full: true },
    { label: "Composer", value: "Johann Sebastian Bach", full: true },
    { label: "Genre", value: "Classical", full: true },
  ];

  return (
    <div className="mk mk-meta">
      <div className="meta-title">Edit Album Metadata</div>
      <div className="meta-body">
        <div className="meta-art-col">
          <Cover/>
          <button className="meta-replace">Replace artwork</button>
          <div className="meta-artwork-row">
            <span className="meta-artwork-l">Embedded artwork</span>
            <button className="meta-artwork-remove">Remove</button>
          </div>
        </div>
        <div className="meta-form">
          {fields.map((f, i) => (
            <div key={i} className="meta-field">
              <label>{f.label}</label>
              <div className={`meta-input ${f.muted?"is-muted":""}`}>
                <span>{f.value}</span>
              </div>
            </div>
          ))}
          <div className="meta-triplet">
            <div className="meta-field">
              <label>Year</label>
              <div className="meta-input"><span>2004</span></div>
            </div>
            <div className="meta-field">
              <label>Disc</label>
              <div className="meta-input is-muted"><span>Mixed</span></div>
            </div>
            <div className="meta-field">
              <label>Track</label>
              <div className="meta-input is-muted"><span>Mixed</span></div>
            </div>
          </div>
          <div className="meta-actions">
            <button className="meta-btn ghost">Cancel</button>
            <button className="meta-btn primary">Apply to 96 tracks</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function MiniPlayerMockup() {
  return (
    <div className="mini-player">
      <AlbumCover hue1="#7a5a4a" hue2="#2a1a18" motif="star" size={64}/>
      <div className="mini-meta">
        <div className="mini-title">Violin Concerto in D, Op. 35</div>
        <div className="mini-sub">Hilary Hahn · Tchaikovsky</div>
        <div className="mini-bar"><div className="mini-fill" style={{width:'42%'}}/></div>
      </div>
      <div className="mini-controls">
        <button className="iconbtn" aria-label="prev">{Ico.prev}</button>
        <button className="iconbtn play" aria-label="play">{Ico.pause}</button>
        <button className="iconbtn" aria-label="next">{Ico.next}</button>
      </div>
      <div className="mini-pin" title="Always on top">
        <svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M6 1l2 3 3 .5-2.2 2.2.5 3L6 8.5 2.7 9.7l.5-3L1 4.5 4 4z"/></svg>
      </div>
    </div>
  );
}

function NowPlayingMockup() {
  // ECM-style abstract cover: colored lines/threads on deep wine ground.
  const Cover = () => (
    <svg className="np-art-img" viewBox="0 0 320 320" width="320" height="320" aria-hidden="true">
      <defs>
        <radialGradient id="npBg" cx="50%" cy="40%" r="80%">
          <stop offset="0%" stopColor="#7a2a1f"/>
          <stop offset="60%" stopColor="#5a1d18"/>
          <stop offset="100%" stopColor="#2b0d0a"/>
        </radialGradient>
      </defs>
      <rect width="320" height="320" fill="url(#npBg)"/>
      {/* paper grain */}
      <g opacity="0.06" fill="#fff">
        {Array.from({length:80}).map((_,i)=>(
          <circle key={i} cx={Math.random()*320} cy={Math.random()*320} r={Math.random()*1.2}/>
        ))}
      </g>
      {/* threads */}
      {[
        ["#d8c79a", 110, 0.6], ["#c98a6a", 135, 0.55], ["#e9e2cf", 145, 0.7],
        ["#a4baca", 165, 0.55], ["#f1a06a", 185, 0.5], ["#d5d1be", 200, 0.6],
        ["#3b6a7a", 220, 0.45], ["#c97a55", 235, 0.5], ["#7a9aab", 250, 0.4],
        ["#caa57a", 265, 0.5], ["#6a7a4a", 280, 0.35], ["#9aaa8a", 295, 0.4],
      ].map(([color, y, op], i) => (
        <path key={i}
          d={`M ${-10 + i*2} ${y} Q ${80 + (i%3)*20} ${y - 12 - (i%4)*4}, ${160} ${y + 4} T ${330} ${y + (i%3)*6}`}
          stroke={color} strokeWidth="2.2" fill="none" opacity={op} strokeLinecap="round"/>
      ))}
      {/* title text */}
      <text x="160" y="62" textAnchor="middle" fontFamily="serif" fontSize="11" fill="#f3ece0">Johann Sebastian Bach</text>
      <text x="160" y="80" textAnchor="middle" fontFamily="serif" fontSize="11" fill="#f3ece0">Das Wohltemperierte Clavier</text>
      <text x="160" y="106" textAnchor="middle" fontFamily="serif" fontSize="11" fill="#f3ece0">András Schiff</text>
      {/* ECM badge */}
      <g transform="translate(160 296)">
        <rect x="-22" y="-6" width="44" height="12" fill="none" stroke="#f3ece0" strokeWidth="0.5"/>
        <text x="0" y="3" textAnchor="middle" fontFamily="sans-serif" fontSize="5" fill="#f3ece0" letterSpacing="1">ECM NEW SERIES</text>
      </g>
    </svg>
  );

  const Icon = ({ children, size = 18, sw = 1.6 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{children}</svg>
  );

  return (
    <div className="mk mk-nowplaying">
      {/* window chrome */}
      <div className="np-chrome">
        <div className="traffic"><span className="tl red"/><span className="tl yellow"/><span className="tl green"/></div>
        <div className="np-chrome-pill">
          <button className="np-chrome-btn" aria-label="close">
            <Icon size={14}><path d="M5 5l14 14M19 5L5 19"/></Icon>
          </button>
          <button className="np-chrome-btn" aria-label="mini">
            <Icon size={14}><rect x="3" y="6" width="14" height="12" rx="2"/><rect x="7" y="3" width="14" height="12" rx="2"/></Icon>
          </button>
        </div>
      </div>

      {/* centered stage */}
      <div className="np-stage">
        <div className="np-art-wrap">
          <Cover/>
        </div>
        <div className="np-title">The Well-Tempered Clavier, Book I: Prelude in C Major, BWV 846</div>
        <div className="np-sub">András Schiff &nbsp;·&nbsp; Bach: Well Tempered Clavier, Books 1 &amp; 2</div>

        <div className="np-progress">
          <span className="np-time">0:07</span>
          <div className="np-bar">
            <div className="np-bar-fill" style={{width: "7%"}}/>
            <div className="np-bar-knob" style={{left: "7%"}}/>
          </div>
          <span className="np-time np-time-r">-1:40</span>
        </div>

        <div className="np-controls">
          <button className="np-ctrl" aria-label="shuffle">
            <Icon size={20}><path d="M16 3h5v5"/><path d="M4 20L21 3"/><path d="M21 16v5h-5"/><path d="M15 15l6 6"/><path d="M4 4l5 5"/></Icon>
          </button>
          <button className="np-ctrl" aria-label="prev">
            <Icon size={22} sw={1.8}><path d="M19 5L9 12l10 7z" fill="currentColor"/><path d="M5 5v14" /></Icon>
          </button>
          <button className="np-ctrl np-play" aria-label="pause">
            <svg width="34" height="34" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="0.5"/><rect x="14" y="5" width="4" height="14" rx="0.5"/></svg>
          </button>
          <button className="np-ctrl" aria-label="next">
            <Icon size={22} sw={1.8}><path d="M5 5l10 7-10 7z" fill="currentColor"/><path d="M19 5v14"/></Icon>
          </button>
          <button className="np-ctrl" aria-label="repeat">
            <Icon size={20}><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 01-4 4H3"/></Icon>
          </button>
        </div>
      </div>

      {/* up next pill */}
      <button className="np-upnext">
        <Icon size={14}><path d="M3 6h18M3 12h18M3 18h12"/></Icon>
        <span className="np-upnext-l">Up Next</span>
        <span className="np-upnext-n">1/96</span>
      </button>
    </div>
  );
}

window.SearchMockup = SearchMockup;
window.MetadataEditorMockup = MetadataEditorMockup;
window.MiniPlayerMockup = MiniPlayerMockup;
window.NowPlayingMockup = NowPlayingMockup;