// easy-settings.jsx — OpenRouter auth gate, settings panel, error screens.
//
// Owns:
//   • useOpenRouter()           localStorage-backed auth + defaults hook
//   • AuthGateDialog            modal asking for SSO/key before generating
//   • SettingsLauncher          fixed bottom-left cog button
//   • SettingsPanel             slide-up panel with account + defaults
//   • ErrorScreen               full-screen connection/generation error
//   • TextModelPicker / ImageModelPicker
//
// Mocked OpenRouter model catalogues — realistic ids for vibe.

const {
  useState: stUseState, useEffect: stUseEffect,
  useRef: stUseRef, useMemo: stUseMemo, useCallback: stUseCb,
} = React;

// ──────────────────────────── State hook ─────────────────────────────────
// Model catalogues are fetched live (useOpenRouterModels in mocks.jsx).
// Defaults are intentionally null/empty; the live list auto-picks sensible
// values once loaded (and migrates stale ids the user may have from older
// sessions).

const OR_DEFAULTS = {
  auth: { method: null, apiKey: '', email: '' }, // method: null | 'sso' | 'key'
  textModel: null,
  imageModels: [],
  primaryImageModel: null,
};

function loadOR() {
  try {
    const raw = localStorage.getItem('ez.openrouter');
    if (!raw) return { ...OR_DEFAULTS };
    return { ...OR_DEFAULTS, ...JSON.parse(raw) };
  } catch { return { ...OR_DEFAULTS }; }
}

function useOpenRouter() {
  const [state, setState] = stUseState(loadOR);
  stUseEffect(() => {
    try { localStorage.setItem('ez.openrouter', JSON.stringify(state)); } catch {}
  }, [state]);

  // Live OpenRouter catalogue (single fetch, shared across the whole app)
  const models = useOpenRouterModels(state.auth.apiKey || '');

  // Auto-migrate stale selections as soon as the live list loads.
  // On first load (`imageModels` empty), auto-enable each vendor's flagship
  // model so the user gets a Flux/Riverflow/Gemini/etc. starter set without
  // hand-picking. After that, just clean up dead ids and pick a primary.
  stUseEffect(() => {
    if (models.loading || models.error) return;
    if (!models.imageModels.length && !models.textModels.length) return;
    setState((s) => {
      const patch = {};
      // Image: ensure primary is in live list; fix imageModels list too.
      if (models.imageModels.length) {
        const live = new Set(models.imageModels.map((m) => m.id));
        const isFirstTime = !s.imageModels || s.imageModels.length === 0;
        let cleaned = (s.imageModels || []).filter((id) => live.has(id));
        if (isFirstTime) {
          // Enable one flagship per vendor on first load.
          cleaned = pickFlagshipsByVendor(models.imageModels);
        }
        if (cleaned.length !== (s.imageModels || []).length
            || !cleaned.every((id, i) => (s.imageModels || [])[i] === id)) {
          patch.imageModels = cleaned;
        }
        const primary = s.primaryImageModel && live.has(s.primaryImageModel)
          ? s.primaryImageModel
          : pickDefaultImageModel(models.imageModels);
        if (primary !== s.primaryImageModel) patch.primaryImageModel = primary;
        // If no models are enabled, enable at least the primary.
        const finalList = patch.imageModels ?? s.imageModels ?? [];
        if (!finalList.length && primary) patch.imageModels = [primary];
      }
      // Text: ensure textModel is in live list.
      if (models.textModels.length) {
        const live = new Set(models.textModels.map((m) => m.id));
        const t = s.textModel && live.has(s.textModel)
          ? s.textModel
          : pickDefaultTextModel(models.textModels);
        if (t !== s.textModel) patch.textModel = t;
      }
      if (Object.keys(patch).length === 0) return s;
      return { ...s, ...patch };
    });
  }, [models.loading, models.error, models.imageModels, models.textModels]);

  const isAuthed = !!state.auth.method;

  const update = (patch) => setState((s) => ({ ...s, ...patch }));
  const setAuth = (auth) => setState((s) => ({ ...s, auth: { ...s.auth, ...auth } }));
  const signOut = () => setState((s) => ({ ...s, auth: { method: null, apiKey: '', email: '' } }));

  return { ...state, isAuthed, update, setAuth, signOut, models };
}

// ──────────────────────────── Modal shell ────────────────────────────────
function Modal({ open, onClose, children, wide = false, dismissible = true }) {
  stUseEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape' && dismissible) onClose?.(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose, dismissible]);
  if (!open) return null;
  return (
    <div className="ez-modal" onClick={dismissible ? onClose : undefined}>
      <div className={`ez-modal-card ${wide ? 'is-wide' : ''}`} onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

// ─────────────────────────── Auth gate ───────────────────────────────────
function AuthGateDialog({ open, onClose, or, onAuthed, reason = 'generate' }) {
  const [tab, setTab] = stUseState('sso'); // 'sso' | 'key'
  const [key, setKey] = stUseState(or.auth.apiKey || '');
  const [busy, setBusy] = stUseState(false);
  const [err, setErr] = stUseState(null);

  stUseEffect(() => { if (open) { setErr(null); setBusy(false); setKey(or.auth.apiKey || ''); } }, [open]);

  const doSSO = () => {
    setBusy(true); setErr(null);
    // Simulated SSO: pop open, wait, succeed
    setTimeout(() => {
      or.setAuth({ method: 'sso', email: 'sen@openrouter.ai' });
      setBusy(false);
      onAuthed?.();
    }, 1200);
  };

  const doKey = () => {
    setErr(null);
    const v = (key || '').trim();
    if (!v.startsWith('sk-or-') && !v.startsWith('sk-')) {
      setErr('Geçersiz anahtar. OpenRouter anahtarı `sk-or-` ile başlamalı.');
      return;
    }
    if (v.length < 20) {
      setErr('Anahtar çok kısa görünüyor. Tam anahtarı yapıştır.');
      return;
    }
    setBusy(true);
    setTimeout(() => {
      or.setAuth({ method: 'key', apiKey: v, email: '' });
      setBusy(false);
      onAuthed?.();
    }, 700);
  };

  return (
    <Modal open={open} onClose={onClose} wide dismissible>
      <div className="ez-auth">
        <div className="ez-auth-head">
          <div className="ez-auth-mark"><IconKey size={28} stroke={2} /></div>
          <div>
            <h2>Önce OpenRouter'a bağlan</h2>
            <p>
              {reason === 'generate'
                ? 'Resim oluşturmadan önce OpenRouter hesabınla bağlan. Birkaç saniye sürer, sonra geri kaldığın yerden devam edersin.'
                : 'OpenRouter hesabınla bağlan.'}
            </p>
          </div>
          <button className="ez-modal-close" onClick={onClose} aria-label="Kapat">
            <IconClose size={22} />
          </button>
        </div>

        <div className="ez-auth-tabs">
          <button className={`ez-auth-tab ${tab === 'sso' ? 'is-active' : ''}`} onClick={() => setTab('sso')}>
            <IconPlug size={18} /> Tek tıkla giriş
          </button>
          <button className={`ez-auth-tab ${tab === 'key' ? 'is-active' : ''}`} onClick={() => setTab('key')}>
            <IconKey size={18} /> Anahtarı yapıştır
          </button>
        </div>

        {tab === 'sso' && (
          <div className="ez-auth-body">
            <div className="ez-auth-pro">
              <ul className="ez-mode-card-list">
                <li><IconBigCheck size={18} stroke={2.4} /> Ücretsiz hesap aç — kredi kartı yok</li>
                <li><IconBigCheck size={18} stroke={2.4} /> Yeni pencerede OpenRouter açılır, izin verirsin</li>
                <li><IconBigCheck size={18} stroke={2.4} /> Anahtarın bu cihazda kalır, bizimle paylaşılmaz</li>
              </ul>
              <button className="ez-cta is-huge" onClick={doSSO} disabled={busy}>
                {busy
                  ? <><span className="ez-spinner" /> Bağlanıyor…</>
                  : <><IconPlug size={22} stroke={2} /> OpenRouter ile giriş yap</>}
              </button>
              <span className="ez-auth-hint">
                Bu, OAuth giriş penceresi açar. <a href="#" onClick={(e) => e.preventDefault()}>Yardım</a>
              </span>
            </div>
          </div>
        )}

        {tab === 'key' && (
          <div className="ez-auth-body">
            <label className="ez-auth-label">OpenRouter API anahtarı</label>
            <div className="ez-auth-input">
              <IconKey size={20} />
              <input
                type="password"
                value={key}
                onChange={(e) => setKey(e.target.value)}
                placeholder="sk-or-v1-..."
                spellCheck={false}
                autoComplete="off"
              />
            </div>
            {err && (
              <div className="ez-auth-error">
                <IconAlert size={18} /> {err}
              </div>
            )}
            <span className="ez-auth-hint">
              Anahtar nereden? <a href="https://openrouter.ai/keys" target="_blank" rel="noreferrer">openrouter.ai/keys</a> — “Create Key” düğmesine dokun. Anahtar sadece bu cihazda saklanır.
            </span>
            <button className="ez-cta is-huge" onClick={doKey} disabled={busy || !key.trim()}>
              {busy
                ? <><span className="ez-spinner" /> Doğrulanıyor…</>
                : <><IconBigCheck size={22} stroke={2.4} /> Kaydet ve devam et</>}
            </button>
          </div>
        )}

        <div className="ez-auth-foot">
          <IconQuestion size={16} /> OpenRouter, AI modellerine tek hesapla erişim sağlar.
          Hesabın yok mu? <a href="https://openrouter.ai" target="_blank" rel="noreferrer">openrouter.ai</a> üzerinden 1 dakikada açabilirsin.
        </div>
      </div>
    </Modal>
  );
}

// ─────────────────────────── Settings ────────────────────────────────────
function SettingsLauncher({ onOpen, isAuthed }) {
  return (
    <button className="ez-settings-fab" onClick={onOpen} aria-label="Ayarlar">
      <span className="ez-settings-fab-icon">
        <IconSettings size={22} stroke={2} />
      </span>
      <span className="ez-settings-fab-text">
        <span>Ayarlar</span>
        <span className={`ez-settings-fab-sub ${isAuthed ? 'is-ok' : 'is-warn'}`}>
          <span className="ez-dot" /> {isAuthed ? 'Bağlı' : 'Bağlı değil'}
        </span>
      </span>
    </button>
  );
}

function SettingsPanel({ open, onClose, or, onOpenAuth }) {
  const [tab, setTab] = stUseState('account'); // 'account' | 'models' | 'about'
  const [testState, setTestState] = stUseState(null); // null | 'busy' | 'ok' | 'fail'
  const credits = useCredits(or.auth.apiKey || '', open);
  const ledger = useLedger();

  const runTest = async () => {
    setTestState('busy');
    try {
      await credits.refresh();
      setTestState('ok');
    } catch {
      setTestState('fail');
    }
  };

  return (
    <Modal open={open} onClose={onClose} wide>
      <div className="ez-settings">
        <div className="ez-settings-head">
          <div>
            <span className="ez-step-title-eyebrow">Ayarlar</span>
            <h2>Hesap ve varsayılan modeller</h2>
          </div>
          <button className="ez-modal-close" onClick={onClose} aria-label="Kapat">
            <IconClose size={22} />
          </button>
        </div>

        <div className="ez-settings-tabs">
          <button className={`ez-settings-tab ${tab === 'account' ? 'is-active' : ''}`} onClick={() => setTab('account')}>
            <IconPlug size={18} /> Hesap
          </button>
          <button className={`ez-settings-tab ${tab === 'models' ? 'is-active' : ''}`} onClick={() => setTab('models')}>
            <IconWand size={18} /> Modeller
          </button>
          <button className={`ez-settings-tab ${tab === 'about' ? 'is-active' : ''}`} onClick={() => setTab('about')}>
            <IconQuestion size={18} /> Hakkında
          </button>
        </div>

        <div className="ez-settings-body">
          {tab === 'account' && (
            <div className="ez-settings-stack">
              <div className={`ez-status-card ${or.isAuthed ? 'is-ok' : 'is-warn'}`}>
                <div className="ez-status-icon">
                  {or.isAuthed ? <IconBigCheck size={26} stroke={2.4} /> : <IconAlert size={26} stroke={2.2} />}
                </div>
                <div className="ez-status-body">
                  <h3>
                    {or.isAuthed
                      ? (or.auth.method === 'sso' ? 'OpenRouter ile bağlısın' : 'API anahtarı tanımlı')
                      : 'OpenRouter\'a bağlı değilsin'}
                  </h3>
                  <p>
                    {or.isAuthed
                      ? (or.auth.method === 'sso'
                          ? <>Hesap: <b>{or.auth.email || 'sen@openrouter.ai'}</b> · tek tıkla giriş</>
                          : <>Anahtar: <b>{maskKey(or.auth.apiKey)}</b> · cihazda kayıtlı</>)
                      : 'Resim oluşturmadan önce bağlan. Birkaç saniye sürer.'}
                  </p>
                </div>
                {or.isAuthed ? (
                  <button className="ez-cta is-ghost" onClick={or.signOut}>
                    <IconLogout size={18} /> Çıkış
                  </button>
                ) : (
                  <button className="ez-cta" onClick={onOpenAuth}>
                    <IconPlug size={18} /> Bağlan
                  </button>
                )}
              </div>

              {or.isAuthed && (
                <>
                  <div className="ez-stat-grid">
                    <div className="ez-stat">
                      <div className="ez-stat-lbl">Kalan kredi</div>
                      <div className="ez-stat-val">
                        {credits.loading ? '…'
                          : credits.error ? <span style={{ color: '#ff6b35', fontSize: 12 }}>{credits.error}</span>
                          : credits.remaining != null ? fmtUSD(credits.remaining)
                          : '—'}
                      </div>
                      {credits.total != null && (
                        <div className="ez-stat-sub">toplam {fmtUSD(credits.total)}</div>
                      )}
                    </div>
                    <div className="ez-stat">
                      <div className="ez-stat-lbl">Bugün harcanan</div>
                      <div className="ez-stat-val">{fmtUSD(ledger.stats.todayCost)}</div>
                      <div className="ez-stat-sub">cihaz kaydından</div>
                    </div>
                    <div className="ez-stat">
                      <div className="ez-stat-lbl">Bu ay istek</div>
                      <div className="ez-stat-val">{ledger.stats.monthCalls}</div>
                      <div className="ez-stat-sub">{ledger.stats.monthImages} görsel · {fmtUSD(ledger.stats.monthCost)}</div>
                    </div>
                    <div className="ez-stat">
                      <div className="ez-stat-lbl">Lifetime kullanım</div>
                      <div className="ez-stat-val">
                        {credits.used != null ? fmtUSD(credits.used) : '—'}
                      </div>
                      <div className="ez-stat-sub">OpenRouter geçmişi</div>
                    </div>
                  </div>

                  <div className="ez-settings-row">
                    <div>
                      <div className="ez-settings-row-title">Bağlantıyı test et</div>
                      <div className="ez-settings-row-sub">
                        OpenRouter sunucularına erişimi kontrol et ve krediyi yenile.
                      </div>
                    </div>
                    <div className="ez-test-cluster">
                      {testState === 'ok'   && <span className="ez-test-pill is-ok"><IconBigCheck size={14} stroke={2.6} /> Bağlantı iyi</span>}
                      {testState === 'fail' && <span className="ez-test-pill is-fail"><IconAlert size={14} stroke={2.4} /> Hata aldım</span>}
                      <button className="ez-cta is-ghost" onClick={runTest} disabled={testState === 'busy'}>
                        {testState === 'busy'
                          ? <><span className="ez-spinner" /> Test ediliyor…</>
                          : <><IconRefresh size={18} stroke={2} /> Test et</>}
                      </button>
                    </div>
                  </div>
                </>
              )}

              <div className="ez-help">
                <div className="ez-help-icon"><IconQuestion size={22} /></div>
                <div>
                  <b>Güvenlik:</b> Anahtar ve oturum bilgisi <b>sadece bu cihazda</b> tutulur (tarayıcı belleğinde). Sunucumuza gönderilmez.
                </div>
              </div>
            </div>
          )}

          {tab === 'models' && <EasyModelsTab or={or} />}

          {tab === 'about' && (
            <div className="ez-settings-stack">
              <div className="ez-help">
                <div className="ez-help-icon"><IconSpark size={22} /></div>
                <div>
                  <b>AI Resim · Kolay Mod</b> — büyüklere uygun, jargonsuz AI resim üretme.
                  Tüm modellere <b>OpenRouter</b> üzerinden bağlanır. Anahtarın bu cihazda kalır.
                </div>
              </div>

              <div className="ez-settings-row">
                <div>
                  <div className="ez-settings-row-title">Geçmişi temizle</div>
                  <div className="ez-settings-row-sub">Yaptığın resim galerini sıfırla. Geri alınamaz.</div>
                </div>
                <button className="ez-cta is-ghost" onClick={() => {
                  if (confirm('Tüm geçmişi silmek istediğine emin misin?')) {
                    try { localStorage.removeItem('ez.history'); } catch {}
                    location.reload();
                  }
                }}>
                  <IconClose size={18} /> Sil
                </button>
              </div>

              <div className="ez-settings-row">
                <div>
                  <div className="ez-settings-row-title">Mod tercihi</div>
                  <div className="ez-settings-row-sub">Açılışta hangi mod yüklensin?</div>
                </div>
                <button className="ez-cta is-ghost" onClick={() => {
                  try { localStorage.removeItem('ez.mode'); } catch {}
                  location.reload();
                }}>
                  <IconRefresh size={18} /> Bir daha sor
                </button>
              </div>

              <div className="ez-auth-foot" style={{ marginTop: 4 }}>
                Sürüm 1.0 · {new Date().getFullYear()} · OpenRouter SDK desteğiyle
              </div>
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
}

function maskKey(k) {
  if (!k) return '—';
  if (k.length < 10) return '••••';
  return k.slice(0, 8) + '…' + k.slice(-4);
}
function slug(s) { return (s || '').toLowerCase().replace(/[^a-z0-9]+/g, '-'); }
function fmtUSD(v) {
  const n = Number(v);
  if (!Number.isFinite(n)) return '—';
  if (Math.abs(n) >= 100) return '$' + n.toFixed(2);
  if (Math.abs(n) >= 1)   return '$' + n.toFixed(3);
  return '$' + n.toFixed(4);
}

// ─────────────────────────── EasyModelsTab ───────────────────────────────────
// Renders live OpenRouter catalogues (text + image) with search.
function EasyModelsTab({ or }) {
  const models = or.models || { textModels: [], imageModels: [], loading: false, error: null };
  const [textQ, setTextQ] = stUseState('');
  const [imgQ, setImgQ] = stUseState('');

  const filterModels = (arr, q) => {
    const s = q.trim().toLowerCase();
    if (!s) return arr;
    return arr.filter((m) =>
      m.id.toLowerCase().includes(s) ||
      m.name.toLowerCase().includes(s) ||
      (m.vendor || '').toLowerCase().includes(s)
    );
  };

  const filteredText = filterModels(models.textModels, textQ);
  const filteredImage = filterModels(models.imageModels, imgQ);

  return (
    <div className="ez-settings-stack">
      <div className="ez-section">
        <div className="ez-section-head">
          <h3>Yazı yardımcısı</h3>
          <p>
            Prompt'u AI ile geliştir, fikir ver, çevir. Sadece bir metin modeli seç.
            {models.loading
              ? ' (Modeller yükleniyor…)'
              : models.error
                ? ` (Hata: ${models.error})`
                : ` (${models.textModels.length} model)`}
          </p>
        </div>
        <div className="ez-model-search">
          <input
            type="text"
            placeholder="Modelde ara — örn: claude, sonnet, gemini, ücretsiz…"
            value={textQ}
            onChange={(e) => setTextQ(e.target.value)}
          />
          {textQ && <button className="ez-model-search-x" onClick={() => setTextQ('')}><IconClose size={14} /></button>}
        </div>
        <div className="ez-model-list ez-model-list-scroll">
          {models.loading && <div className="ez-model-empty"><span className="ez-spinner" /> Modeller yükleniyor…</div>}
          {!models.loading && models.error && (
            <div className="ez-auth-error"><IconAlert size={18} /> {models.error}</div>
          )}
          {!models.loading && !models.error && !filteredText.length && (
            <div className="ez-model-empty">Aramana uygun model yok.</div>
          )}
          {filteredText.map((m) => (
            <button
              key={m.id}
              className={`ez-model-row ${or.textModel === m.id ? 'is-active' : ''}`}
              onClick={() => or.update({ textModel: m.id })}
            >
              <span className="ez-radio-pip"><span className="ez-radio-pip-dot" /></span>
              <div className="ez-model-meta">
                <div className="ez-model-name">
                  {m.name}
                  {m.tag && <span className={`ez-model-tag tag-${slug(m.tag)}`}>{m.tag}</span>}
                </div>
                <div className="ez-model-sub">{m.vendor} · {m.id}</div>
                {m.note && <div className="ez-model-note">{m.note}</div>}
              </div>
              <div className="ez-model-spec">
                <span>{m.cost}</span>
              </div>
            </button>
          ))}
        </div>
      </div>

      <div className="ez-section">
        <div className="ez-section-head">
          <h3>Resim modelleri</h3>
          <p>
            Birden fazla model seçebilirsin; yıldız ile varsayılan olanı belirle.
            {models.loading
              ? ' (Modeller yükleniyor…)'
              : models.error
                ? ` (Hata: ${models.error})`
                : ` (${models.imageModels.length} görsel modeli)`}
          </p>
        </div>
        <div className="ez-model-search">
          <input
            type="text"
            placeholder="Modelde ara — örn: gemini, flux, nano banana…"
            value={imgQ}
            onChange={(e) => setImgQ(e.target.value)}
          />
          {imgQ && <button className="ez-model-search-x" onClick={() => setImgQ('')}><IconClose size={14} /></button>}
        </div>
        <div className="ez-model-list">
          {models.loading && <div className="ez-model-empty"><span className="ez-spinner" /> Modeller yükleniyor…</div>}
          {!models.loading && !filteredImage.length && (
            <div className="ez-model-empty">Aramana uygun model yok.</div>
          )}
          {filteredImage.map((m) => {
            const on = (or.imageModels || []).includes(m.id);
            const primary = or.primaryImageModel === m.id;
            const toggle = () => {
              const next = on
                ? or.imageModels.filter((x) => x !== m.id)
                : [...(or.imageModels || []), m.id];
              const patch = { imageModels: next };
              if (!on && !or.primaryImageModel) patch.primaryImageModel = m.id;
              if (on && primary) patch.primaryImageModel = next[0] || null;
              or.update(patch);
            };
            return (
              <div key={m.id} className={`ez-model-row ${on ? 'is-active' : ''}`}>
                <button className="ez-model-toggle" onClick={toggle} aria-label="Seç">
                  <span className={`ez-check-box ${on ? 'is-on' : ''}`}>
                    {on && <IconBigCheck size={14} stroke={3} />}
                  </span>
                </button>
                <div className="ez-model-meta" onClick={toggle} role="button">
                  <div className="ez-model-name">
                    {m.name}
                    {m.tag && <span className={`ez-model-tag tag-${slug(m.tag)}`}>{m.tag}</span>}
                  </div>
                  <div className="ez-model-sub">{m.vendor} · {m.id}</div>
                  {m.note && <div className="ez-model-note">{m.note}</div>}
                </div>
                <div className="ez-model-spec">
                  <span>{m.cost}</span>
                </div>
                <button
                  className={`ez-star ${primary ? 'is-on' : ''}`}
                  onClick={() => or.update({
                    primaryImageModel: m.id,
                    imageModels: on ? or.imageModels : [...(or.imageModels || []), m.id],
                  })}
                  aria-label={primary ? 'Varsayılan' : 'Varsayılan yap'}
                  title={primary ? 'Varsayılan model' : 'Varsayılan yap'}
                >
                  {primary ? <IconStarFill size={20} /> : <IconStar size={20} stroke={2} />}
                </button>
              </div>
            );
          })}
        </div>
        {(or.imageModels || []).length === 0 && !models.loading && (
          <div className="ez-auth-error">
            <IconAlert size={18} /> En az bir resim modeli seç — yoksa resim oluşturulamaz.
          </div>
        )}
        <div className="ez-help" style={{ marginTop: 6 }}>
          <div className="ez-help-icon"><IconQuestion size={18} /></div>
          <div>
            <b>Sketch / Inpaint için ipucu:</b> Görseli girdi alarak yeniden çizebilen modelleri seç —
            örn. <b>Gemini 2.5 Flash Image (Nano Banana)</b>, <b>Gemini 3.x Flash Image</b>,
            <b> GPT-5 Image</b>. Tüm görsel modelleri image input desteklemez —
            denersin, olmazsa başkasını seçersin.
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────── Error screen ────────────────────────────────
function ErrorScreen({ error, onRetry, onOpenSettings, onHome }) {
  const e = error || {};
  const icon = e.kind === 'auth'    ? <IconKey size={42} stroke={2} />
            :  e.kind === 'network' ? <IconWifiOff size={42} stroke={2} />
            :  e.kind === 'rate'    ? <IconClock size={42} stroke={2} />
            :  e.kind === 'model'   ? <IconUnplug size={42} stroke={2} />
            :                          <IconAlert size={42} stroke={2} />;

  const titles = {
    auth:    'Bağlantı sona ermiş',
    network: 'İnternet erişilemiyor',
    rate:    'Bir tık fazla hızlısın',
    model:   'Bu model şu an cevap vermiyor',
    quota:   'Kredin bitmiş',
    unknown: 'Bir şey ters gitti',
  };
  const subs = {
    auth:    'OpenRouter oturumun yenilenmeli. Yeniden bağlanırsan kaldığın yerden devam ederiz.',
    network: 'Bilgisayar/telefon internete bağlı görünmüyor. Wi-Fi ya da mobil veriyi kontrol et.',
    rate:    'OpenRouter çok kısa sürede çok istek aldı. Bir dakika bekleyip tekrar dene.',
    model:   'Seçtiğin resim modeli şu an meşgul. Ayarlardan başka bir model seçebilirsin.',
    quota:   'OpenRouter hesabında kredi kalmamış. openrouter.ai üzerinden yenileyebilirsin.',
    unknown: 'Beklemediğim bir hata aldım. Yeniden denemek genelde çözüyor.',
  };

  return (
    <div className="ez-gen">
      <div className="ez-gen-inner ez-error-inner">
        <div className="ez-error-art">{icon}</div>
        <div>
          <h2 className="ez-gen-title">{titles[e.kind] || titles.unknown}</h2>
          <p className="ez-gen-sub">{subs[e.kind] || subs.unknown}</p>
          {e.detail && (
            <div className="ez-error-detail">
              <span className="ez-error-detail-label">Teknik detay</span>
              <code>{e.detail}</code>
            </div>
          )}
        </div>
        <div className="ez-error-actions">
          {onRetry && (
            <button className="ez-cta is-huge" onClick={onRetry}>
              <IconRefresh size={20} stroke={2.2} /> Yeniden dene
            </button>
          )}
          <button className="ez-cta is-ghost" onClick={onOpenSettings}>
            <IconSettings size={18} /> Ayarları aç
          </button>
          <button className="ez-cta is-ghost" onClick={onHome}>
            <IconHomeRoof size={18} /> Ana sayfa
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  useOpenRouter,
  AuthGateDialog, SettingsLauncher, SettingsPanel, ErrorScreen, Modal, EasyModelsTab,
});