// Anılar okuyucu — sadece çift içindir. #anilar adresinden ya da anı
// formundaki "Gelen anıları oku" düğmesinden açılır; basit bir anahtarla
// korunur (api/memories.js'teki MEMORIES_KEY ile aynı; varsayılan '2561').
// "Okundu" işaretleri bu cihazda (localStorage) tutulur.
const { useState: useStateAdm, useEffect: useEffectAdm } = React;

const READ_STORE_KEY = 'be-memories-read';

function loadReadIds() {
  try {
    const saved = JSON.parse(localStorage.getItem(READ_STORE_KEY) || '{}');
    return saved && typeof saved === 'object' ? saved : {};
  } catch (e) { return {}; }
}

const ADM_ERR_TEXT = {
  forbidden: 'Anahtar yanlış. Tekrar deneyin.',
  blob_not_configured: 'Anı deposu henüz bağlı değil.',
  network: 'Bağlantı hatası. İnternetinizi kontrol edin.',
  failed: 'Bir hata oluştu, tekrar deneyin.',
};

function formatDate(ts) {
  if (!ts) return '';
  try {
    return new Date(ts).toLocaleString('tr-TR', {
      day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit',
    });
  } catch (e) { return ''; }
}

function Admin({ onBack }) {
  const [key, setKey] = useStateAdm(() => {
    try { return localStorage.getItem('be-admin-key') || ''; } catch (e) { return ''; }
  });
  const [authed, setAuthed] = useStateAdm(false);
  const [items, setItems] = useStateAdm([]);
  const [status, setStatus] = useStateAdm('idle'); // idle | loading | error | ok
  const [errCode, setErrCode] = useStateAdm(null);
  const [readIds, setReadIds] = useStateAdm(loadReadIds);

  const toggleRead = (id) => {
    if (!id) return;
    setReadIds((cur) => {
      const next = { ...cur };
      if (next[id]) delete next[id]; else next[id] = true;
      try { localStorage.setItem(READ_STORE_KEY, JSON.stringify(next)); } catch (e) {}
      return next;
    });
  };

  const load = async (k) => {
    const clean = (k || '').trim();
    if (!clean) return;
    setStatus('loading');
    setErrCode(null);
    let res;
    try {
      res = await fetch('/api/memories?key=' + encodeURIComponent(clean));
    } catch (e) {
      setStatus('error'); setErrCode('network'); return;
    }
    if (res.status === 403) {
      setAuthed(false); setStatus('error'); setErrCode('forbidden');
      try { localStorage.removeItem('be-admin-key'); } catch (e) {}
      return;
    }
    if (!res.ok) {
      let code = 'failed';
      try { const j = await res.json(); code = j.error || code; } catch {}
      setStatus('error'); setErrCode(code); return;
    }
    const j = await res.json();
    setItems(j.items || []);
    setAuthed(true);
    setStatus('ok');
    try { localStorage.setItem('be-admin-key', clean); } catch (e) {}
  };

  // Anahtar daha önce kaydedildiyse otomatik yükle.
  useEffectAdm(() => { if (key) load(key); }, []); // eslint-disable-line

  return (
    <ScreenShell onBack={onBack} title="anılar">
      {!authed ? (
        <div style={{maxWidth:360}}>
          <p className="body-sm" style={{opacity:0.85, marginBottom:16}}>
            Misafirlerin yazdığı anılar burada. Açmak için anahtarı girin.
          </p>
          <input
            type="password"
            value={key}
            onChange={(e) => { setKey(e.target.value); if (status === 'error') setStatus('idle'); }}
            onKeyDown={(e) => { if (e.key === 'Enter') load(key); }}
            placeholder="Anahtar"
            style={admStyles.input}
          />
          <button
            onClick={() => load(key)}
            disabled={status === 'loading'}
            style={{...admStyles.openBtn, opacity: status === 'loading' ? 0.6 : 1}}
          >
            <span className="label">{status === 'loading' ? 'Açılıyor…' : 'Aç'}</span>
          </button>
          {status === 'error' && (
            <div className="body-sm" style={admStyles.errorBox}>
              {ADM_ERR_TEXT[errCode] || ADM_ERR_TEXT.failed}
            </div>
          )}
        </div>
      ) : (
        <div>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16}}>
            <div className="label" style={{opacity:0.75}}>
              {items.length} anı{items.length > 0 ? ` · ${items.filter((m) => readIds[m.id]).length} okundu` : ''}
            </div>
            <button onClick={() => load(key)} style={admStyles.refreshBtn}>
              <span className="label-sm">{status === 'loading' ? 'Yenileniyor…' : 'Yenile'}</span>
            </button>
          </div>

          {items.length === 0 ? (
            <div className="body-sm" style={{opacity:0.8}}>Henüz anı gelmedi.</div>
          ) : (
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {items.map((m, i) => (
                <MemoryCard
                  key={m.id || i}
                  text={m.text}
                  name={m.name}
                  ts={m.ts}
                  read={!!readIds[m.id]}
                  onToggleRead={() => toggleRead(m.id)}
                />
              ))}
            </div>
          )}
        </div>
      )}
    </ScreenShell>
  );
}

function MemoryCard({ text, name, ts, read, onToggleRead }) {
  const [shown, setShown] = useStateAdm(false);
  return (
    <div style={{...admStyles.memCard, ...(read ? admStyles.memCardRead : {})}}>
      <div className="body-sm" style={{color:'var(--burgundy)', whiteSpace:'pre-wrap', lineHeight:1.6, opacity: read ? 0.65 : 1}}>
        {text}
      </div>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:10, marginTop:14, flexWrap:'wrap'}}>
        <div style={{display:'flex', alignItems:'center', gap:8, flexWrap:'wrap'}}>
          <button
            onClick={() => setShown((s) => !s)}
            style={shown ? admStyles.nameShown : admStyles.revealBtn}
          >
            <span className="label-sm">{shown ? (name || 'İsim yazılmamış') : 'İsmi göster'}</span>
          </button>
          <button
            onClick={onToggleRead}
            style={read ? admStyles.readDone : admStyles.readBtn}
          >
            {read && <Icons.Check size={13}/>}
            <span className="label-sm">{read ? 'Okundu' : 'Okundu işaretle'}</span>
          </button>
        </div>
        {ts && <div className="label-sm" style={{opacity:0.5}}>{formatDate(ts)}</div>}
      </div>
    </div>
  );
}

const admStyles = {
  input:{
    width:'100%',
    background:'transparent',
    border:'1.5px solid rgba(150,40,64,0.25)',
    borderRadius:14,
    padding:'12px 16px',
    color:'var(--burgundy)',
    fontSize:15,
    outline:'none',
    fontFamily:"'Pilea',sans-serif",
    letterSpacing:'0.02em',
  },
  openBtn:{
    marginTop:12,
    display:'flex', alignItems:'center', justifyContent:'center',
    width:'100%', padding:'14px 16px', borderRadius:999,
    background:'transparent',
    border:'1.5px solid var(--burgundy)',
    color:'var(--burgundy)',
  },
  refreshBtn:{
    padding:'8px 16px', borderRadius:999,
    border:'1px solid rgba(150,40,64,0.3)',
    color:'var(--burgundy)',
  },
  memCard:{
    padding:'16px 18px',
    borderRadius:16,
    border:'1px solid rgba(150,40,64,0.2)',
    background:'rgba(150,40,64,0.04)',
  },
  memCardRead:{
    background:'transparent',
    borderStyle:'dashed',
    borderColor:'rgba(150,40,64,0.25)',
  },
  readBtn:{
    display:'inline-flex', alignItems:'center', gap:6,
    padding:'7px 14px', borderRadius:999,
    border:'1px solid rgba(150,40,64,0.3)',
    color:'var(--burgundy)',
    background:'transparent',
  },
  readDone:{
    display:'inline-flex', alignItems:'center', gap:6,
    padding:'7px 14px', borderRadius:999,
    border:'1.5px solid var(--burgundy)',
    color:'var(--bg)',
    background:'var(--burgundy)',
  },
  revealBtn:{
    padding:'7px 14px', borderRadius:999,
    border:'1px solid rgba(150,40,64,0.3)',
    color:'var(--burgundy)',
    background:'transparent',
  },
  nameShown:{
    padding:'7px 14px', borderRadius:999,
    border:'1.5px solid var(--burgundy)',
    color:'var(--bg)',
    background:'var(--burgundy)',
  },
  errorBox:{
    marginTop:14,
    padding:'12px 16px',
    borderRadius:14,
    border:'1px solid rgba(150,40,64,0.3)',
    background:'rgba(150,40,64,0.06)',
    color:'var(--burgundy)',
    opacity:0.95,
  },
};

window.Admin = Admin;