/* global React */
// LyricsInput.jsx — Feature 1: lyrics editor with prefill examples

const { useState: useStateL } = React;

function LyricsInput({ lyrics, setLyrics, examples }) {
  const words = lyrics.trim() ? lyrics.trim().split(/\s+/).length : 0;
  const lines = lyrics.trim() ? lyrics.trim().split('\n').length : 0;
  const chars = lyrics.length;

  const onPaste = () => {
    navigator.clipboard?.readText?.().then((t) => {
      if (t) setLyrics(t);
    }).catch(() => {});
  };

  return (
    <div className="panel">
      <div className="panel-head">
        <span className="num">01</span>
        <span className="title">Lyrics</span>
        <span className="hint">— write or paste</span>
        <div className="right">
          <button className="btn ghost sm" onClick={onPaste}>Paste</button>
          <button className="btn ghost sm" onClick={() => setLyrics('')} disabled={!lyrics}>Clear</button>
        </div>
      </div>

      <div className="panel-body">
        <div className="lyrics-area">
          <textarea className="lyrics-textarea"
                    value={lyrics}
                    onChange={(e) => setLyrics(e.target.value)}
                    spellCheck={false}
                    placeholder={"Begin here…\n\nA verse, a fragment, an image —\nwhatever the song should carry.\n\nThe LLM will read your lyrics, find their structure,\nand return labelled sections."} />

          <div className="lyrics-footer">
            <div className="preset-row">
              <span className="label">Examples</span>
              {examples.map((ex) => (
                <button key={ex.label} className="chip" onClick={() => setLyrics(ex.text)}>{ex.label}</button>
              ))}
            </div>
            <div className="meta-line">
              <span className="led">
                <span><b>{lines}</b> lines</span>
                <span><b>{words}</b> words</span>
                <span><b>{chars}</b> chars</span>
              </span>
              <span>{lyrics.trim() ? '● ready to structure' : '○ awaiting input'}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LyricsInput = LyricsInput;