/* global React, firebase */
/* ============================================
   EAStrategyPDF — single download button + language picker
   Stores two files per EA in Firestore /eas/{eaId}:
     strategyPdfAr : { url, name, bytes }   (Arabic file)
     strategyPdfEn : { url, name, bytes }   (English file)
   - Any visitor: one "Download Strategy" button → menu to pick language.
   - Admin (window.__effAdminMode): upload / replace / remove each language.
   ============================================ */

function EAStrategyPDF({ eaId, name = '' }) {
  React.useEffect(() => {
    if (document.getElementById('strat-pdf-styles')) return;
    const el = document.createElement('style');
    el.id = 'strat-pdf-styles';
    el.textContent = STRAT_PDF_CSS;
    document.head.appendChild(el);
  }, []);

  const [ar, setAr] = React.useState(null);
  const [en, setEn] = React.useState(null);
  const [busy, setBusy] = React.useState('');   // 'ar' | 'en' | ''
  const [error, setError] = React.useState('');
  const [open, setOpen] = React.useState(false);
  const [, setTick] = React.useState(0);
  const arRef = React.useRef(null);
  const enRef = React.useRef(null);
  const rootRef = React.useRef(null);
  const isAdmin = window.__effAdminMode;

  React.useEffect(() => {
    if (!window.fb || !eaId) return;
    const unsub = window.fb.db.collection('eas').doc(eaId).onSnapshot(
      doc => {
        const d = doc.exists ? doc.data() : null;
        setAr(d?.strategyPdfAr || null);
        setEn(d?.strategyPdfEn || null);
      },
      () => { setAr(null); setEn(null); }
    );
    return () => unsub();
  }, [eaId]);

  React.useEffect(() => {
    const handler = () => setTick(t => t + 1);
    window.addEventListener('eff_admin_changed', handler);
    return () => window.removeEventListener('eff_admin_changed', handler);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const close = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [open]);

  async function upload(lang, file) {
    if (!isAdmin || !window.fb || !file) return;
    if (file.type !== 'application/pdf' && !/\.pdf$/i.test(file.name)) {
      setError('Please choose a PDF file'); return;
    }
    if (file.size > 25 * 1024 * 1024) { setError('Max size is 25MB'); return; }
    setError(''); setBusy(lang);
    try {
      const res = await window.Cloudinary.uploadRawToCloudinary(file, `eas/${eaId}/strategy`);
      const field = lang === 'ar' ? 'strategyPdfAr' : 'strategyPdfEn';
      await window.fb.db.collection('eas').doc(eaId).set({
        [field]: { url: res.url, name: file.name, bytes: res.bytes || file.size },
        updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
      }, { merge: true });
    } catch (e) {
      setError(e.message || 'Upload failed');
      console.error('Strategy PDF upload error:', e);
    } finally {
      setBusy('');
    }
  }

  async function remove(lang) {
    if (!isAdmin || !window.fb) return;
    const field = lang === 'ar' ? 'strategyPdfAr' : 'strategyPdfEn';
    try {
      await window.fb.db.collection('eas').doc(eaId).set({ [field]: null }, { merge: true });
    } catch (e) { setError(e.message); }
  }

  function fmtSize(bytes) {
    if (!bytes) return '';
    const mb = bytes / (1024 * 1024);
    return mb >= 1 ? `${mb.toFixed(1)} MB` : `${Math.max(1, Math.round(bytes / 1024))} KB`;
  }

  const langs = [
    { key: 'en', label: 'English', flag: 'EN', file: en },
    { key: 'ar', label: 'Arabic',  flag: 'AR', file: ar },
  ];
  const available = langs.filter(l => l.file?.url);

  // Nothing uploaded and not admin → render nothing
  if (!isAdmin && available.length === 0) return null;

  const PdfIcon = () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <path d="M14 2v6h6" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
    </svg>
  );

  function pick(lang) {
    setOpen(false);
    const file = lang === 'ar' ? ar : en;
    if (file?.url) window.open(file.url, '_blank', 'noopener');
  }

  return (
    <div className="strat-pdf-wrap" dir="ltr" ref={rootRef}>
      {/* Single download button (visitor-facing) */}
      {available.length > 0 && (
        <div className="strat-pdf-dd">
          <button className="strat-pdf-btn" onClick={() => setOpen(o => !o)}>
            <span className="strat-pdf-icon"><PdfIcon/></span>
            <span className="strat-pdf-text">
              <span className="strat-pdf-title">Download Strategy</span>
              <span className="strat-pdf-sub">Choose language · PDF</span>
            </span>
            <span className={`strat-pdf-caret ${open ? 'up' : ''}`} aria-hidden="true">⌄</span>
          </button>

          {open && (
            <div className="strat-pdf-menu" role="menu">
              {available.map(l => (
                <button key={l.key} className="strat-pdf-item" onClick={() => pick(l.key)}>
                  <span className="strat-pdf-flag">{l.flag}</span>
                  <span className="strat-pdf-item-text">
                    <span className="strat-pdf-item-label">{l.label}</span>
                    <span className="strat-pdf-item-sub">PDF{l.file.bytes ? ` · ${fmtSize(l.file.bytes)}` : ''}</span>
                  </span>
                  <span className="strat-pdf-dl" aria-hidden="true">↓</span>
                </button>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Admin upload controls */}
      {isAdmin && (
        <div className="strat-pdf-admin-panel">
          <span className="strat-pdf-admin-eyebrow">ADMIN · Strategy files</span>
          <div className="strat-pdf-admin-row">
            {langs.map(l => {
              const ref = l.key === 'ar' ? arRef : enRef;
              return (
                <div key={l.key} className="strat-pdf-admin-slot">
                  <div className="strat-pdf-admin-info">
                    <span className="strat-pdf-flag sm">{l.flag}</span>
                    <span className="strat-pdf-admin-name">
                      {busy === l.key ? 'Uploading…' : (l.file?.url ? (l.file.name || 'Uploaded') : 'No file')}
                    </span>
                  </div>
                  <div className="strat-pdf-admin-actions">
                    <button onClick={() => ref.current?.click()} disabled={busy === l.key}>
                      {l.file?.url ? '↻ Replace' : '↗ Upload'}
                    </button>
                    {l.file?.url && (
                      <button className="strat-pdf-danger" onClick={() => remove(l.key)}>× Remove</button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
          <input ref={arRef} type="file" accept="application/pdf,.pdf" style={{ display: 'none' }}
            onChange={(e) => { upload('ar', e.target.files[0]); e.target.value = ''; }}/>
          <input ref={enRef} type="file" accept="application/pdf,.pdf" style={{ display: 'none' }}
            onChange={(e) => { upload('en', e.target.files[0]); e.target.value = ''; }}/>
        </div>
      )}

      {error && <div className="strat-pdf-error">⚠ {error}</div>}
    </div>
  );
}

window.EAStrategyPDF = EAStrategyPDF;

/* Self-contained styles — injected at runtime so they don't depend on a
   CDN-cached styles.css (Cloudflare may serve a stale stylesheet). */
const STRAT_PDF_CSS = `
.strat-pdf-wrap { margin-top: 16px; }
.strat-pdf-dd { position: relative; max-width: 320px; }
.strat-pdf-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,229,255,0.10), rgba(124,92,255,0.06));
  border: 1px solid var(--line-strong, rgba(0,229,255,0.35));
  color: var(--text, #E6EDF7); cursor: pointer; text-align: left;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.strat-pdf-btn:hover {
  transform: translateY(-2px); border-color: var(--cyan, #00E5FF);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 0 1px var(--line-strong, rgba(0,229,255,0.35)), 0 0 28px rgba(0,229,255,0.12);
}
.strat-pdf-icon { color: var(--cyan, #00E5FF); display: inline-flex; flex-shrink: 0; }
.strat-pdf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.strat-pdf-title { font-size: 14px; font-weight: 600; }
.strat-pdf-sub { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.06em; color: var(--text-3, #7A8499); }
.strat-pdf-caret { margin-left: auto; font-size: 16px; color: var(--cyan, #00E5FF); flex-shrink: 0; transition: transform 0.2s; }
.strat-pdf-caret.up { transform: rotate(180deg); }
.strat-pdf-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: rgba(8,10,20,0.96); backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong, rgba(0,229,255,0.35)); border-radius: 10px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.6); padding: 6px;
  animation: stratMenuIn 0.16s ease;
}
@keyframes stratMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.strat-pdf-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 6px;
  background: transparent; border: none; color: var(--text, #E6EDF7);
  cursor: pointer; text-align: left; transition: background 0.15s;
}
.strat-pdf-item:hover { background: rgba(0,229,255,0.08); }
.strat-pdf-item + .strat-pdf-item { margin-top: 2px; }
.strat-pdf-item-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.strat-pdf-item-label { font-size: 13px; font-weight: 600; }
.strat-pdf-item-sub { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--text-3, #7A8499); letter-spacing: 0.05em; }
.strat-pdf-dl { color: var(--cyan, #00E5FF); font-size: 15px; flex-shrink: 0; }
.strat-pdf-flag {
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--cyan, #00E5FF); background: rgba(0,229,255,0.10);
  border: 1px solid var(--line-strong, rgba(0,229,255,0.35)); border-radius: 6px;
  padding: 4px 7px; flex-shrink: 0;
}
.strat-pdf-flag.sm { font-size: 10px; padding: 3px 6px; }
.strat-pdf-admin-panel {
  margin-top: 12px; padding: 12px; border-radius: 10px;
  border: 1px dashed rgba(255,45,170,0.4);
  background: repeating-linear-gradient(45deg, rgba(255,45,170,0.04) 0 8px, transparent 8px 16px);
}
.strat-pdf-admin-eyebrow {
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--magenta, #FF2DAA);
}
.strat-pdf-admin-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.strat-pdf-admin-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  background: rgba(5,6,13,0.5); border: 1px solid var(--line, rgba(0,229,255,0.15));
}
.strat-pdf-admin-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.strat-pdf-admin-name { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-2, #B4BDD0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.strat-pdf-admin-actions { display: flex; gap: 6px; flex-shrink: 0; }
.strat-pdf-admin-actions button {
  padding: 5px 9px; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.04em;
  background: rgba(5,6,13,0.6); border: 1px solid var(--line-strong, rgba(0,229,255,0.35));
  border-radius: 6px; color: var(--cyan, #00E5FF); cursor: pointer; transition: all 0.15s;
}
.strat-pdf-admin-actions button:hover { background: rgba(0,229,255,0.10); }
.strat-pdf-admin-actions button:disabled { opacity: 0.6; cursor: wait; }
.strat-pdf-admin-actions .strat-pdf-danger { color: var(--red, #FF3B5C); border-color: rgba(255,59,92,0.4); }
.strat-pdf-admin-actions .strat-pdf-danger:hover { background: rgba(255,59,92,0.12); }
.strat-pdf-error {
  margin-top: 10px; padding: 8px 12px; font-family: var(--font-mono, monospace); font-size: 11px;
  color: var(--red, #FF3B5C); background: rgba(255,59,92,0.12);
  border: 1px solid rgba(255,59,92,0.35); border-radius: 6px;
}
`;