// Auth modal — sign in / sign up, and "submit your business" flow
const { useState: useAuthState } = React;

function AuthModal({ mode, onClose, onAuth }) {
  const t = useT();
  const [tab, setTab] = useAuthState(mode || "signin");
  const [email, setEmail] = useAuthState("");
  const [name, setName] = useAuthState("");
  const [password, setPassword] = useAuthState("");
  const [err, setErr] = useAuthState(null);

  const submit = () => {
    if (!email.includes("@")) return setErr(t.errEmail);
    if (tab === "signup" && !name.trim()) return setErr(t.errName);
    if (password.length < 4) return setErr(t.errPassword);
    const user = {
      email,
      name: tab === "signup" ? name : email.split("@")[0],
      initial: (tab === "signup" ? name : email)[0].toUpperCase(),
      joined: "april 2026",
    };
    onAuth(user);
    onClose();
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="auth-modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Zapri">✕</button>
        <div className="auth-head">
          <div className="mono tiny muted">LIKOVNE-DELAVNICE.SI</div>
          <h2 className="auth-title">
            {tab === "signin"
              ? t.welcomeBack.split("\n").map((l, i) => <React.Fragment key={i}>{l}{i === 0 && <br/>}</React.Fragment>)
              : t.createAccount.split("\n").map((l, i) => <React.Fragment key={i}>{l}{i === 0 && <br/>}</React.Fragment>)
            }
          </h2>
          <p className="auth-sub">
            {tab === "signin" ? t.signInSub : t.signUpSub}
          </p>
        </div>

        <div className="auth-tabs">
          <button className={`auth-tab ${tab === "signin" ? "on" : ""}`} onClick={() => setTab("signin")}>{t.tabSignIn}</button>
          <button className={`auth-tab ${tab === "signup" ? "on" : ""}`} onClick={() => setTab("signup")}>{t.tabSignUp}</button>
        </div>

        <div className="auth-fields">
          {tab === "signup" && (
            <div className="field">
              <label>{t.fieldName}</label>
              <input value={name} onChange={e => setName(e.target.value)} placeholder="Janez Novak" />
            </div>
          )}
          <div className="field">
            <label>{t.fieldEmail}</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="janez@example.si" />
          </div>
          <div className="field">
            <label>{t.fieldPassword}</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••••" />
          </div>
          {err && <div className="auth-err mono tiny">{err}</div>}
          <button className="btn-primary auth-submit" onClick={submit}>
            {tab === "signin" ? t.btnSignIn : t.btnSignUp}
          </button>
          <div className="auth-divider mono tiny">{t.orDivider}</div>
          <button className="auth-oauth" onClick={submit}>
            <span className="oauth-g">G</span> {t.googleBtn}
          </button>
          <div className="auth-foot mono tiny">
            {tab === "signin" ? (
              <>{t.noAccount} <a href="#" onClick={e => {e.preventDefault(); setTab("signup");}}>{t.tabSignUp} →</a></>
            ) : (
              <>{t.hasAccount} <a href="#" onClick={e => {e.preventDefault(); setTab("signin");}}>{t.tabSignIn} →</a></>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function SubmitBusinessModal({ onClose, onSubmit, user }) {
  const t = useT();
  const [step, setStep] = useAuthState(1);
  const [form, setForm] = useAuthState({
    title: "", host: "", city: "Ljubljana", category: "pottery",
    price: 50, duration: "3h", capacity: "", blurb: "", source: "", image_url: "",
    level: "Vsi", audience: "all", schedule_type: "recurring",
  });
  const [sending, setSending] = useAuthState(false);
  const [uploading, setUploading] = useAuthState(false);
  const [submitErr, setSubmitErr] = useAuthState("");
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canNext1 = form.title.trim() && form.host.trim();
  const canSubmit = canNext1 && form.blurb.trim() && form.source.trim();

  const submit = () => {
    setSending(true);
    setSubmitErr("");
    fetch(`${window.getApiBase()}/workshops`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title:      form.title,
        host:       form.host,
        city:       form.city,
        category:   form.category,
        price:      Number(form.price) || 0,
        duration:   form.duration,
        capacity:   (() => {
          const s = String(form.capacity || "").trim();
          if (!s) return null;
          const n = parseInt(s, 10);
          return Number.isFinite(n) && n > 0 ? n : null;
        })(),
        blurb:      form.blurb,
        source:        form.source,
        source_url:    form.source,
        image_url:     form.image_url || null,
        level:         form.level,
        schedule_type: form.schedule_type,
        for_kids:      form.audience === "kids" ? 1 : 0,
        submitted_by:  user?.name || "",
      }),
    })
      .then(r => r.json())
      .then(d => {
        if (d.id) { onSubmit(form); setStep(3); }
        else { setSubmitErr("Napaka pri oddaji. Poskusi znova."); setSending(false); }
      })
      .catch(() => { setSubmitErr("Napaka pri oddaji. Poskusi znova."); setSending(false); });
  };

  return (
    <div className="modal-backdrop">
      <div className="submit-modal">
        <button className="modal-close" onClick={onClose} aria-label="Zapri">✕</button>
        <div className="submit-head">
          <div className="mono tiny muted">{t.submitForHosts}</div>
          <h2 className="submit-title">{t.submitTitle}</h2>
          <p className="submit-sub">{t.submitSub}</p>
          <div className="submit-steps mono tiny">
            <span className={step >= 1 ? "on" : ""}>{t.step1}</span>
            <span className={step >= 2 ? "on" : ""}>{t.step2}</span>
            <span className={step >= 3 ? "on" : ""}>{t.step3}</span>
          </div>
        </div>

        <div className="submit-body">
          {step === 1 && (
            <>
              <div className="field">
                <label>{t.fieldWorkshopName}</label>
                <input value={form.title} onChange={e => update("title", e.target.value)} placeholder="npr. Vrteča se glina" />
              </div>
              <div className="field">
                <label>{t.fieldHostName}</label>
                <input value={form.host} onChange={e => update("host", e.target.value)} placeholder="npr. Studio Krog" />
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{t.fieldCity}</label>
                  <select value={form.city} onChange={e => update("city", e.target.value)}>
                    {SLOVENIAN_CITIES.map(c => <option key={c.name} value={c.name}>{c.name}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>{t.fieldCategory}</label>
                  <select value={form.category} onChange={e => update("category", e.target.value)}>
                    {CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}
                  </select>
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Za koga</label>
                  <div className="chip-row">
                    {[
                      { id: "all",    label: "Vsi" },
                      { id: "kids",   label: "Otroci" },
                      { id: "adults", label: "Odrasli" },
                    ].map(a => (
                      <button key={a.id} type="button"
                        className={`chip-option${form.audience === a.id ? " on" : ""}`}
                        onClick={() => update("audience", a.id)}>{a.label}</button>
                    ))}
                  </div>
                </div>
                <div className="field">
                  <label>Nivo</label>
                  <div className="chip-row">
                    {["Vsi", "Začetniki", "Srednji", "Napredno"].map(l => (
                      <button key={l} type="button"
                        className={`chip-option${form.level === l ? " on" : ""}`}
                        onClick={() => update("level", l)}>{l}</button>
                    ))}
                  </div>
                </div>
              </div>
              <div className="submit-actions">
                <div className="mono tiny muted">{t.loggedAs} <b>{user?.name}</b></div>
                <button className="btn-primary" onClick={() => setStep(2)} disabled={!canNext1}>{t.nextBtn}</button>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div className="field-row">
                <div className="field">
                  <label>{t.fieldPrice}</label>
                  <input type="number" value={form.price} onChange={e => update("price", +e.target.value)} />
                </div>
                <div className="field">
                  <label>{t.fieldDuration}</label>
                  <input value={form.duration} onChange={e => update("duration", e.target.value)} placeholder="npr. 3h" />
                </div>
                <div className="field">
                  <label>{t.fieldCapacity}</label>
                  <input type="number" min="1" value={form.capacity} onChange={e => update("capacity", e.target.value)} placeholder="—" />
                </div>
              </div>
              <div className="field">
                <label>Vrsta delavnice</label>
                <div className="chip-row">
                  {[
                    { id: "recurring", label: "Po dogovoru" },
                    { id: "weekly",    label: "Vsak teden" },
                    { id: "monthly",   label: "Vsak mesec" },
                    { id: "one-time",  label: "Enkratni termin" },
                  ].map(s => (
                    <button key={s.id} type="button"
                      className={`chip-option${form.schedule_type === s.id ? " on" : ""}`}
                      onClick={() => update("schedule_type", s.id)}>{s.label}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>{t.fieldDesc}</label>
                <textarea rows="4" value={form.blurb} onChange={e => update("blurb", e.target.value)}
                          placeholder="Kaj naredi udeleženec? Kaj odnese domov?" />
              </div>
              <div className="field">
                <label>{t.fieldWebsite}</label>
                <input value={form.source} onChange={e => update("source", e.target.value)} placeholder="https://mojatelje.si" />
              </div>
              <div className="field">
                <label>{t.fieldPhoto}</label>
                <label className="upload-drop" style={{cursor:"pointer"}}>
                  {uploading ? (
                    <span className="mono tiny">Nalagam…</span>
                  ) : form.image_url ? (
                    <div className="upload-preview-wrap">
                      <img className="upload-preview" src={form.image_url} alt="preview" />
                      <span className="mono tiny muted">Klikni za zamenjavo</span>
                    </div>
                  ) : (
                    <span className="mono tiny">📎 Izberi fotografijo</span>
                  )}
                  <input type="file" accept="image/*" style={{display:"none"}}
                    onChange={e => {
                      const file = e.target.files[0];
                      if (!file) return;
                      setUploading(true);
                      const fd = new FormData();
                      fd.append("file", file);
                      fetch(`${window.getApiBase()}/upload`, { method: "POST", body: fd })
                        .then(r => r.json())
                        .then(d => { if (d.url) update("image_url", d.url); })
                        .catch(() => {})
                        .finally(() => setUploading(false));
                    }}
                  />
                </label>
              </div>
              <div className="submit-actions">
                <button className="btn-fav" onClick={() => setStep(1)}>{t.backBtn}</button>
                <button className="btn-primary" onClick={submit} disabled={!canSubmit || sending}>
                  {sending ? "Pošiljam…" : t.submitBtn}
                </button>
              </div>
              {submitErr && <p className="submit-err mono tiny">{submitErr}</p>}
            </>
          )}

          {step === 3 && (
            <div className="submit-done">
              <div className="big-check">✓</div>
              <h3 className="submit-done-title">{t.doneTitle}</h3>
              <p>{t.doneThanks(user?.name, form.title, user?.email)}</p>
              <button className="btn-primary" onClick={onClose}>{t.okBtn}</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function ReviewComposer({ user, onSubmit, onCancel }) {
  const t = useT();
  const [rating, setRating] = useAuthState(0);
  const [text, setText] = useAuthState("");
  return (
    <div className="review-composer">
      <div className="avatar avatar-cobalt">{user.initial}</div>
      <div className="review-composer-body">
        <div className="review-composer-name">{user.name}</div>
        <div className="rate-stars review-composer-stars">
          {[1,2,3,4,5].map(i => (
            <button key={i} className={`rate-star ${rating >= i ? "on" : ""}`}
                    onClick={() => setRating(i === rating ? 0 : i)}>★</button>
          ))}
        </div>
        <textarea rows="3" placeholder={t.composerPlaceholder} value={text} onChange={e => setText(e.target.value)} />
        <div className="review-composer-actions">
          <button className="btn-fav" onClick={onCancel}>{t.cancelBtn}</button>
          <button className="btn-primary" disabled={!rating}
                  onClick={() => onSubmit({ rating, text })}>
            {t.publishReview}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AuthModal, SubmitBusinessModal, ReviewComposer });