"use client";

import { Modal } from "./modal";
import type { ArtistHit } from "@/lib/artist-resolve";

/** Disambiguation picker: several MusicBrainz artists share a name (e.g. two bands both called
 *  "Looking Glass"), so let the user choose the right one by its MB disambiguation text instead
 *  of silently trusting Last.fm's — sometimes wrong — MBID. Candidates arrive in MB relevance
 *  order, so the first is flagged "Suggested". */
export function ArtistPicker({
  open,
  name,
  candidates,
  onPick,
  onClose,
}: {
  open: boolean;
  name: string;
  candidates: ArtistHit[];
  onPick: (mbid: string, name: string) => void;
  onClose: () => void;
}) {
  return (
    <Modal open={open} onClose={onClose} title="Which artist?">
      <p className="muted-note">
        More than one artist is named “{name}”. Pick the right one.
      </p>
      <ul className="list">
        {candidates.map((c, i) => (
          <li key={c.mbid} className="list-row">
            <div className="main">
              <div className="rtitle">
                <button className="linkish" onClick={() => onPick(c.mbid, c.name)}>
                  {c.name}
                </button>
              </div>
              <div className="rmeta">
                <span>{c.disambiguation || "no description on MusicBrainz"}</span>
              </div>
            </div>
            <div className="actions">
              {i === 0 ? <span className="chip working">Suggested</span> : null}
            </div>
          </li>
        ))}
      </ul>
    </Modal>
  );
}