/* Modals — membership (join) + detailed search. ModalHost renders both. */
const { useState: mUseState, useEffect: mUseEffect, useMemo: mUseMemo } = React;

function Overlay({ onClose, children, wide }) {
  mUseEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', h); document.body.style.overflow = ''; };
  }, []);
  return (
    <div className="ov" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className={'ov-card' + (wide ? ' ov-wide' : '')} role="dialog" aria-modal="true">
        <button className="ov-close" onClick={onClose} aria-label="Kapat"><Icon name="close" size={20} /></button>
        {children}
      </div>
    </div>
  );
}

/* ---------- JOIN / MEMBERSHIP ---------- */
function JoinModal({ onClose, onJoined }) {
  const benefits = [
    { ic: 'sliders', t: 'Detaylı arama', d: 'Kategori, hicrî/milâdî tarih ve süreye göre binlerce sohbette filtreleyin.' },
    { ic: 'bookmark', t: 'Listelerim', d: 'Sevdiğiniz sohbetleri kaydedin, kendi dinleme listelerinizi oluşturun.' },
    { ic: 'clock', t: 'Kaldığınız yerden', d: 'Her cihazda kaldığınız âna geri dönün; ilerlemeniz sizinle.' },
    { ic: 'star', t: 'Önce siz', d: 'Yeni eklenen sohbetlerden ve mübârek gün programlarından ilk siz haberdar olun.' },
  ];

  const [mode, setMode] = mUseState('join'); // join | login
  const [name, setName] = mUseState('');
  const [email, setEmail] = mUseState('');
  const [password, setPassword] = mUseState('');
  const [busy, setBusy] = mUseState(false);
  const [error, setError] = mUseState('');

  const finish = () => { window.memberStore.set(true); onJoined && onJoined(); };

  const submit = async () => {
    setError('');
    if (!window.SK_API) { finish(); return; } // API yoksa eski davranış
    if (!email || password.length < 6) { setError('E-posta ve en az 6 karakterli parola gerekli.'); return; }
    setBusy(true);
    try {
      if (mode === 'login') {
        await window.SK_API.login({ email, password });
      } else {
        try {
          await window.SK_API.register({ name, email, password });
        } catch (e) {
          if (/kayıtlı/i.test(e.message)) { await window.SK_API.login({ email, password }); }
          else throw e;
        }
      }
      finish();
    } catch (e) {
      setError(e.message || 'İşlem başarısız.');
    } finally { setBusy(false); }
  };

  return (
    <Overlay onClose={onClose} wide>
      <div className="join">
        <div className="join-l">
          <div className="kicker accent" style={{ marginBottom: 16 }}>Server Kürsü Üyeliği</div>
          <h2 className="join-h">Bugün Server Kürsü’ye üye olun.</h2>
          <p className="join-p">Üye olarak bu ilim ve irfan hazinesini canlı tutarsınız — üstelik ayrıcalıklı erişim kazanırsınız. Bütün arşivde derinlemesine arama, kişisel listeler ve daha fazlası için aramıza katılın.</p>
          <ul className="join-benefits">
            {benefits.map(b => (
              <li key={b.t}><span className="jb-ic"><Icon name={b.ic} size={18} /></span>
                <div><b>{b.t}</b><span>{b.d}</span></div></li>
            ))}
          </ul>
        </div>
        <div className="join-r">
          <div className="join-form">
            <div className="join-price"><b>Ücretsiz</b><span>katılım · gönül bağı</span></div>
            {mode === 'join' && (
              <label className="fld"><span>Ad Soyad</span>
                <input type="text" placeholder="Adınız" value={name} onChange={e => setName(e.target.value)} /></label>
            )}
            <label className="fld"><span>E-Posta</span>
              <input type="email" placeholder="ornek@eposta.com" value={email} onChange={e => setEmail(e.target.value)} /></label>
            <label className="fld"><span>Parola</span>
              <input type="password" placeholder="En az 6 karakter" value={password} onChange={e => setPassword(e.target.value)} /></label>
            {error && <p style={{ color: '#c0392b', margin: '2px 0 0', fontSize: 13 }}>{error}</p>}
            <button className="btn btn-primary join-cta" onClick={submit} disabled={busy}>
              <Icon name="star" size={16} /> {busy ? '…' : (mode === 'login' ? 'Giriş Yap ve Devam Et' : 'Üye Ol ve Devam Et')}
            </button>
            {mode === 'join'
              ? <p className="join-fine">Zaten üye misiniz? <a href="#" onClick={e => { e.preventDefault(); setError(''); setMode('login'); }}>Giriş yapın</a></p>
              : <p className="join-fine">Hesabınız yok mu? <a href="#" onClick={e => { e.preventDefault(); setError(''); setMode('join'); }}>Üye olun</a></p>}
          </div>
        </div>
      </div>
    </Overlay>
  );
}

/* ---------- DETAILED SEARCH ---------- */
function Field({ label, children }) { return <div className="ds-field"><label>{label}</label>{children}</div>; }
function Sel({ value, onChange, children }) {
  return <div className="ds-sel"><select value={value} onChange={e => onChange(e.target.value)}>{children}</select><Icon name="chevD" size={16} /></div>;
}

function DetailedSearch({ onClose }) {
  const D = window.SK_DATA;
  const [cat, setCat] = mUseState('Hepsi');
  const [title, setTitle] = mUseState('');
  const [dur, setDur] = mUseState('Hepsi');
  const [hg, setHg] = mUseState(''); const [hm, setHm] = mUseState(''); const [hy, setHy] = mUseState('');
  const [mg, setMg] = mUseState(''); const [mm, setMm] = mUseState(''); const [my, setMy] = mUseState('');
  const [ran, setRan] = mUseState(false);

  const durMatch = (t) => {
    switch (dur) {
      case '5 dakika ve altı': return t.dur <= 300;
      case '5–20 dakika arası': return t.dur > 300 && t.dur <= 1200;
      case '20–60 dakika arası': return t.dur > 1200 && t.dur <= 3600;
      case '60 dakika ve üzeri': return t.dur > 3600;
      default: return true;
    }
  };
  const catMatch = (t) => {
    if (cat === 'Hepsi') return true;
    const base = cat.replace(/\s*\((MZK|MEC)\)\s*/,'').trim();
    return t.category === cat || t.category === base;
  };
  const results = mUseMemo(() => {
    if (!ran) return null;
    const n = title.trim().toLocaleLowerCase('tr');
    return [D.featured, ...D.talks].filter(t => catMatch(t) && durMatch(t) &&
      (!n || t.title.toLocaleLowerCase('tr').includes(n)));
  }, [ran, cat, title, dur]);

  const run = () => setRan(true);
  // re-run live once submitted
  mUseEffect(() => { if (ran) setRan(true); }, [cat, title, dur]);

  return (
    <Overlay onClose={onClose} wide>
      <div className="ds">
        <div className="ds-head">
          <h2><Icon name="sliders" size={20} style={{ color: 'var(--accent-ink)' }} /> Detaylı Arama</h2>
          <span className="ds-badge"><Icon name="star" size={13} /> Üyelere özel</span>
        </div>
        <div className="ds-body">
          <div className="ds-form">
            <Field label="Kategoriye göre ara">
              <Sel value={cat} onChange={setCat}>
                <option>Hepsi</option>
                {D.nav.map(g => (
                  <optgroup key={g.tag} label={`${g.person.name} #${g.tag}`}>
                    {g.cats.filter(c => c !== 'Hakkında').map(c => <option key={c}>{c}</option>)}
                  </optgroup>
                ))}
                <option>Tüm Sohbetleri Listele</option>
                <option>Kısa ve Öz Paylaşımlar</option>
              </Sel>
            </Field>
            <Field label="Sohbet başlığında ara">
              <input className="ds-input" value={title} onChange={e => setTitle(e.target.value)} placeholder="Örn. hac, merhamet, sabır…" />
            </Field>
            <div className="ds-2">
              <Field label="Hicrî tarihe göre ara">
                <div className="ds-date">
                  <input className="ds-input" placeholder="Gün" value={hg} onChange={e => setHg(e.target.value)} />
                  <Sel value={hm} onChange={setHm}><option value="">Ay</option>{D.hijriMonths.map(m => <option key={m}>{m}</option>)}</Sel>
                  <input className="ds-input" placeholder="Yıl" value={hy} onChange={e => setHy(e.target.value)} />
                </div>
              </Field>
              <Field label="Milâdî tarihe göre ara">
                <div className="ds-date">
                  <input className="ds-input" placeholder="Gün" value={mg} onChange={e => setMg(e.target.value)} />
                  <Sel value={mm} onChange={setMm}><option value="">Ay</option>{D.gregMonths.map(m => <option key={m}>{m}</option>)}</Sel>
                  <input className="ds-input" placeholder="Yıl" value={my} onChange={e => setMy(e.target.value)} />
                </div>
              </Field>
            </div>
            <button className="ds-acc" onClick={() => setRan(r => r)} type="button"><span>Tarih aralığına göre ara (Hicrî / Milâdî)</span><Icon name="chevD" size={16} /></button>
            <Field label="Süreye göre ara">
              <Sel value={dur} onChange={setDur}>{D.durations.map(d => <option key={d}>{d}</option>)}</Sel>
            </Field>
            <button className="btn btn-primary ds-find" onClick={run}><Icon name="search" size={17} /> Bul</button>
          </div>

          <div className="ds-results">
            {results === null ? (
              <div className="ds-empty">
                <Icon name="search" size={30} style={{ color: 'var(--ink-4)' }} />
                <p>Aramak istediğiniz kriterleri seçin, sonuçlar burada görünsün.</p>
              </div>
            ) : results.length === 0 ? (
              <div className="ds-empty"><p>Seçtiğiniz kriterlere uygun sohbet bulunamadı.</p></div>
            ) : (
              <>
                <div className="ds-count">{results.length} sohbet bulundu</div>
                <div className="ds-list">
                  {results.map(t => (
                    <a key={t.slug} className="ds-row" href={`watch.html?v=${t.slug}`}>
                      <Monogram person={t.speaker} size={40} />
                      <div className="ds-row-main">
                        <b>{t.title}</b>
                        <span>{t.category} · {t.speaker.short}{t.greg !== '—' ? ` · ${t.greg}` : ''}</span>
                      </div>
                      <span className="ds-row-dur">{t.durLabel}</span>
                    </a>
                  ))}
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </Overlay>
  );
}

/* ---------- HOST ---------- */
function ModalHost() {
  const [which, setWhich] = mUseState(null);
  mUseEffect(() => {
    const h = (e) => setWhich(e.detail);
    window.addEventListener('sk-modal', h);
    return () => window.removeEventListener('sk-modal', h);
  }, []);
  if (!which) return null;
  if (which === 'join') return <JoinModal onClose={() => setWhich(null)} onJoined={() => setWhich(null)} />;
  if (which === 'search') { window.location.href = 'search.html'; return null; }
  return null;
}

window.ModalHost = ModalHost;