/* Lovingo — puzzle creation flow */

const PRESET_QUESTIONS = [
  "Bana taktığın lakap",
  "En sevdiğimiz müzik grubu",
  "Bizim için özel olan bir kelime",
  "En sevdiğim içecek",
  "Sana aldığım ilk hediye",
  "Aramızdaki vedalaşma kelimesi",
  "Senin hakkında en sevdiğim özelliğin",
  "Birlikte izlediğiniz ilk film",
  "Hayalimizdeki şehir",
  "En sevdiğim mevsim",
];

// used only by the "Örnek doldur" button and the hero preview
const DEMO_ANSWERS = [
  "Aşkım!", "Skapova", "Sonsuzluk", "Kahve", "Kitap",
  "Bay bay", "Gülüşün", "Titanik", "Roma", "Sonbahar",
];

const EXTRA_SUGGESTIONS = [
  "İlk dans ettiğiniz şarkı?",
  "Ona verdiğin lakap?",
  "En sevdiğiniz mevsim?",
  "Birlikte gitmek istediğiniz ülke?",
  "İlk buluşmanızda ne içtiniz?",
  "Evcil hayvanınızın adı?",
];

function Create({ names, setNames, items, setItems, onGenerate, onBack, step, setStep }) {
  const filled = items.filter((it) => window.LovingoEngine.normalizeAnswer(it.a).length >= 2).length;
  const canGenerate = filled >= 3;

  function setItem(i, patch) {
    setItems(items.map((it, idx) => (idx === i ? { ...it, ...patch } : it)));
  }

  return (
    <div className="wrap create-wrap">
      <nav className="nav">
        <button className="brand brand-btn" onClick={onBack}>
          <span className="brand-mark"><Icon name="heart" size={18} stroke={2} style={{ color: "#fff" }} /></span>
          Lovelyzer
        </button>
        <div className="chip"><Icon name="lock" size={14} /> Sadece ikinize özel</div>
      </nav>

      <Stepper step={step} />

      {step === 0 && (
        <div className="step-panel fade-in">
          <div className="step-head">
            <h2 className="step-title">İkinizin adı</h2>
            <p className="step-desc">Bulmacanın kapağında ve PDF'te yer alacak.</p>
          </div>
          <div className="glass names-card">
            <div className="names-grid">
              <div>
                <label className="label">Birinci isim</label>
                <input className="field" value={names.a} placeholder="örn. Ömer"
                  onChange={(e) => setNames({ ...names, a: e.target.value })} />
              </div>
              <div className="amp">&</div>
              <div>
                <label className="label">İkinci isim</label>
                <input className="field" value={names.b} placeholder="örn. Zeynep"
                  onChange={(e) => setNames({ ...names, b: e.target.value })} />
              </div>
            </div>
            <div style={{ marginTop: 20 }}>
              <label className="label">Özel bir tarih (opsiyonel)</label>
              <input className="field" value={names.date} placeholder="13 Şubat 2026"
                onChange={(e) => setNames({ ...names, date: e.target.value })} />
            </div>
          </div>
          <div className="step-actions">
            <button className="btn btn-ghost" onClick={onBack}><Icon name="arrow-left" size={18} /> Geri</button>
            <button className="btn btn-primary" onClick={() => setStep(1)}
              disabled={!names.a || !names.b}
              style={{ opacity: names.a && names.b ? 1 : 0.5 }}>
              Devam <Icon name="arrow-right" size={18} />
            </button>
          </div>
        </div>
      )}

      {step === 1 && (
        <div className="step-panel fade-in">
          <div className="step-head">
            <div>
              <h2 className="step-title">On anı, on kelime</h2>
              <p className="step-desc">Soruları düzenleyebilir, cevaplarınızı yazabilirsiniz. Her cevap bulmacada bir kelimeye dönüşür.</p>
            </div>
            <div className="step-head-tools">
              <button className="btn btn-ghost btn-sm" onClick={() => setItems(items.map((it, i) => ({ ...it, a: DEMO_ANSWERS[i] || "" })))}>
                <Icon name="sparkle" size={15} /> Örnek doldur
              </button>
              <button className="btn btn-ghost btn-sm" onClick={() => setItems(items.map((it) => ({ ...it, a: "" })))}>
                Temizle
              </button>
            </div>
          </div>

          <div className="q-list">
            {items.map((it, i) => {
              const word = window.LovingoEngine.normalizeAnswer(it.a);
              const hasWord = word.length >= 2;
              return (
                <div className="glass q-card" key={i}>
                  <div className="q-num">{String(i + 1).padStart(2, "0")}</div>
                  <div className="q-body">
                    <input className="field q-field-q" value={it.q}
                      onChange={(e) => setItem(i, { q: e.target.value })} />
                    <div className="q-answer-row">
                      <input className="field" placeholder="Cevabınız…" value={it.a}
                        onChange={(e) => setItem(i, { a: e.target.value })} />
                      <div className={"word-pill " + (hasWord ? "on" : "")}>
                        {hasWord ? word : "—"}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="step-actions">
            <button className="btn btn-ghost" onClick={() => setStep(0)}><Icon name="arrow-left" size={18} /> Geri</button>
            <div className="gen-meta">
              <span className={canGenerate ? "ok" : ""}>{filled}/10 cevap</span>
              {!canGenerate && <span className="hint">en az 3 cevap gerekli</span>}
            </div>
            <button className="btn btn-primary" disabled={!canGenerate}
              style={{ opacity: canGenerate ? 1 : 0.5 }}
              onClick={() => onGenerate()}>
              Bulmacayı Oluştur <Icon name="sparkle" size={18} />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function Stepper({ step }) {
  const steps = ["Çift", "Sorular", "Bulmaca"];
  return (
    <div className="stepper">
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          <div className={"stepper-item " + (i <= step ? "done" : "")}>
            <span className="stepper-dot">{i < step ? <Icon name="check" size={14} stroke={2.4} /> : i + 1}</span>
            <span className="stepper-label">{s}</span>
          </div>
          {i < steps.length - 1 && <span className={"stepper-bar " + (i < step ? "done" : "")} />}
        </React.Fragment>
      ))}
    </div>
  );
}

Object.assign(window, { Create, PRESET_QUESTIONS, DEMO_ANSWERS });