// admin.jsx — simple weekly control panel (edit hero, courses, contact) persisted to localStorage

function AdminPage({ go, t, L, store, auth }) {
  const toast = useToast();
  const { data, save, reset } = store;
  const [draft, setDraft] = React.useState(() => structuredClone(data));
  const [editCourse, setEditCourse] = React.useState(null);
  const [viewSub, setViewSub] = React.useState(null);

  React.useEffect(() => { setDraft(structuredClone(data)); }, [data]);

  const set = (path, val) => {
    setDraft(d => {
      const next = structuredClone(d);
      let o = next;
      for (let i = 0; i < path.length - 1; i++) o = o[path[i]];
      o[path[path.length - 1]] = val;
      return next;
    });
  };

  const doSave = () => { save(draft); toast(t('saved')); };
  const doReset = () => { reset(); toast(t('reset')); };

  // delete a submission from the vault (persists immediately)
  const delSub = (kind, id) => {
    const next = structuredClone(data);
    next.submissions[kind] = (next.submissions[kind] || []).filter(s => s.id !== id);
    save(next);
    setViewSub(null);
  };
  // turn any submission (idea or patent) into a sealed digital fingerprint
  const sealSub = React.useCallback(async (sub) => {
    const prev = (data.vault || {})[sub.ref] || null;
    const s = await sealDisclosure(sub, null, prev);
    const next = structuredClone(data);
    next.vault = { ...(next.vault || {}) };
    next.vault[sub.ref] = s;
    next.vaultLog = [{ at: new Date().toISOString(), who: auth && auth.user ? L(auth.user.name) : '—', action: prev ? 'reseal' : 'seal', ref: sub.ref }, ...(next.vaultLog || [])].slice(0, 60);
    save(next);
    toast(t('vlt_sealed_ok'));
    return s;
  }, [data, save, auth]);

  // export full vault as a JSON backup file
  const exportVault = () => {
    const payload = { exportedAt: new Date().toISOString(), submissions: data.submissions, courses: data.courses };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'ibtikar-vault-' + new Date().toISOString().slice(0, 10) + '.json';
    a.click();
    URL.revokeObjectURL(a.href);
    toast(t('vault_export'));
  };

  // pull submissions from cloud and merge into local vault
  const pullCloud = async () => {
    if (!window.cloudFetch) return;
    const res = await window.cloudFetch();
    if (!res.ok) { toast(t('cloud_err_net')); return res; }
    const next = structuredClone(data);
    if (!next.submissions) next.submissions = { ideas: [], patents: [] };
    const seen = { ideas: new Set(next.submissions.ideas.map(s => s.ref)), patents: new Set(next.submissions.patents.map(s => s.ref)) };
    res.rows.forEach(r => {
      const bucket = (r.kind === 'patent') ? 'patents' : 'ideas';
      if (!seen[bucket].has(r.ref)) { next.submissions[bucket].unshift(r); seen[bucket].add(r.ref); }
    });
    save(next);
    toast(t('saved'));
    return res;
  };

  const blankCourse = (term = 'upcoming') => window.blankCourse(term);

  const saveCourse = (c) => {
    setDraft(d => {
      const next = structuredClone(d);
      const idx = next.courses.findIndex(x => x.id === c.id);
      if (idx >= 0) next.courses[idx] = c; else next.courses.push(c);
      return next;
    });
    setEditCourse(null);
  };
  const delCourse = (id) => setDraft(d => ({ ...d, courses: d.courses.filter(c => c.id !== id) }));

  return (
    <div>
      <PageHeader go={go} t={t} eyebrow={t('nav_admin')} title={t('admin_title')} sub={t('admin_sub')} icon="sliders" />
      <section className="section tight">
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr)', gap: 24 }}>
          <div className="card card-pad" style={{ background: 'color-mix(in srgb, var(--purple) 9%, transparent)', borderColor: 'color-mix(in srgb, var(--purple) 26%, transparent)', display: 'flex', gap: 12, alignItems: 'center' }}>
            <Icon.spark s={20} /><p style={{ fontSize: 14, lineHeight: 1.6 }}>{t('admin_hint')}</p>
          </div>

          {/* sticky save bar */}
          <div style={{ position: 'sticky', top: 84, zIndex: 20, display: 'flex', gap: 12, justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', background: 'color-mix(in srgb, var(--bg) 80%, transparent)', backdropFilter: 'blur(8px)', padding: '6px 0', borderRadius: 12 }}>
            <div className="chip on" style={{ gap: 9 }}>
              <span className="av" style={{ width: 26, height: 26, fontSize: 12, background: 'var(--accent)' }}>{auth && auth.user ? (L(auth.user.name)[0]) : '•'}</span>
              <span style={{ fontWeight: 700 }}>{t('signed_as')} {auth && auth.user ? L(auth.user.name) : ''}</span>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              {auth && auth.logout && <button className="btn btn-dark" onClick={auth.logout}><Icon.arrowL s={16} /> {t('logout')}</button>}
              <button className="btn btn-dark" onClick={doReset}><Icon.trash s={16} /> {t('reset')}</button>
              <button className="btn btn-primary" onClick={doSave}><Icon.check s={16} /> {t('save')}</button>
            </div>
          </div>

          {/* VAULT — incoming submissions */}
          <VaultSection t={t} L={L} data={data} onView={setViewSub} onExport={exportVault} />

          {/* INNOVATION VAULT — sealed patent registry, owners only */}
          <InnovationVault t={t} L={L} data={data} save={save} auth={auth} />

          {/* PoAS ENGINE — evaluate an idea, prior-art audit, Solana anchoring (owners only) */}
          <EvaluatePage embedded go={go} t={t} L={L} store={store} auth={auth} />

          {/* GALLERY — owners only (confidential innovations) */}          <div className="card card-pad">
            <div className="eyebrow"><Icon.grid s={15} /> {t('gallery_title')}</div>
            <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.6 }}>{t('patents_private')}</p>
            <div className="grid g3" style={{ marginTop: 18 }}>
              {GALLERY.map(g => <GalleryCard key={g.id} g={g} t={t} L={L} />)}
            </div>
          </div>

          {/* CLOUD — Supabase */}
          <CloudSection t={t} L={L} onPull={pullCloud} />

          {/* HERO */}
          <div className="card card-pad">
            <div className="eyebrow"><Icon.pen s={15} /> {t('admin_hero')}</div>
            <div className="grid g2" style={{ marginTop: 18 }}>
              <Field label={`${L({ar:'العنوان',en:'Headline'})} — ${t('field_ar')}`}><textarea className="textarea" style={{ minHeight: 70 }} value={draft.hero.headline.ar} onChange={e => set(['hero', 'headline', 'ar'], e.target.value)} /></Field>
              <Field label={`${L({ar:'العنوان',en:'Headline'})} — ${t('field_en')}`}><textarea className="textarea" style={{ minHeight: 70 }} value={draft.hero.headline.en} onChange={e => set(['hero', 'headline', 'en'], e.target.value)} /></Field>
              <Field label={`${L({ar:'الوصف',en:'Subtitle'})} — ${t('field_ar')}`}><textarea className="textarea" value={draft.hero.sub.ar} onChange={e => set(['hero', 'sub', 'ar'], e.target.value)} /></Field>
              <Field label={`${L({ar:'الوصف',en:'Subtitle'})} — ${t('field_en')}`}><textarea className="textarea" value={draft.hero.sub.en} onChange={e => set(['hero', 'sub', 'en'], e.target.value)} /></Field>
            </div>
          </div>

          {/* STATS */}
          <div className="card card-pad">
            <div className="eyebrow"><Icon.chart s={15} /> {L({ ar: 'أرقام الواجهة', en: 'Hero numbers' })}</div>
            <div className="grid g4" style={{ marginTop: 18 }}>
              <Field label={t('hero_stat_ideas')}><input className="input" type="number" value={draft.stats.ideas} onChange={e => set(['stats', 'ideas'], +e.target.value)} /></Field>
              <Field label={t('hero_stat_courses')}><input className="input" type="number" value={draft.stats.courses} onChange={e => set(['stats', 'courses'], +e.target.value)} /></Field>
              <Field label={t('hero_stat_patents')}><input className="input" type="number" value={draft.stats.patents} onChange={e => set(['stats', 'patents'], +e.target.value)} /></Field>
              <Field label={t('hero_stat_emp')}><input className="input" type="number" value={draft.stats.employees} onChange={e => set(['stats', 'employees'], +e.target.value)} /></Field>
            </div>
          </div>

          {/* REGISTRATIONS · ATTENDANCE · CERTIFICATES */}
          <div className="card card-pad">
            <div className="eyebrow"><Icon.users s={15} /> {t('admin_regs')}</div>
            <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.6 }}>{t('admin_regs_sub')}</p>
            <div style={{ display: 'grid', gap: 12, marginTop: 18 }}>
              {(data.courses || []).length === 0 && <p className="muted" style={{ fontSize: 14 }}>{L({ ar: 'لا توجد دورات بعد.', en: 'No courses yet.' })}</p>}
              {(data.courses || []).map(c => <CourseRegPanel key={c.id} course={c} data={data} store={store} t={t} L={L} />)}
            </div>
          </div>

          {/* COURSES — upcoming & past */}
          {['upcoming', 'past'].map(term => {
            const items = draft.courses.filter(c => ((c.term || 'upcoming') === 'past' ? 'past' : 'upcoming') === term);
            return (
              <div className="card card-pad" key={term}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
                  <div className="eyebrow">{term === 'past' ? <Icon.clock s={15} /> : <Icon.rocket s={15} />} {term === 'past' ? t('courses_past') : t('courses_upcoming')} · {items.length}</div>
                  <button className="btn btn-ghost btn-sm" onClick={() => setEditCourse(blankCourse(term))}><Icon.plus s={15} /> {term === 'past' ? t('add_past_course') : t('add_upcoming')}</button>
                </div>
                <div style={{ display: 'grid', gap: 10, marginTop: 18 }}>
                  {items.length === 0 && <p className="muted" style={{ fontSize: 14 }}>{L({ ar: 'لا توجد دورات بعد.', en: 'No courses yet.' })}</p>}
                  {items.map(c => (
                    <div key={c.id} className="card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 14, background: 'rgba(255,255,255,.02)' }}>
                      <span className={`badge ${c.accent}`} style={{ flex: 'none' }}>{L(COURSE_CATS.find(x => x.id === c.cat)?.label) || c.cat}</span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <b style={{ fontSize: 15 }}>{L(c.title) || L({ ar: '(بدون عنوان)', en: '(untitled)' })}</b>
                        <div className="muted" style={{ fontSize: 13 }}>{L(c.presenter) || L(c.instructor)} · {L(c.date)}{c.target !== '' && c.target != null ? ` · ${t('target_emp')}: ${c.target}` : ''}</div>
                      </div>
                      <button className="btn btn-dark btn-sm" style={{ padding: 8 }} onClick={() => setEditCourse(structuredClone(c))}><Icon.pen s={15} /></button>
                      <button className="btn btn-dark btn-sm" style={{ padding: 8 }} onClick={() => delCourse(c.id)}><Icon.trash s={15} /></button>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}

          {/* CONTACT */}
          <div className="card card-pad">
            <div className="eyebrow"><Icon.mail s={15} /> {t('admin_contact')}</div>
            <div className="grid g2" style={{ marginTop: 18 }}>
              <Field label={t('ch_email')}><input className="input" value={draft.contact.email} onChange={e => set(['contact', 'email'], e.target.value)} /></Field>
              <Field label="WhatsApp"><input className="input" value={draft.contact.whatsapp} onChange={e => set(['contact', 'whatsapp'], e.target.value)} /></Field>
              <Field label={t('ch_phone')}><input className="input" value={draft.contact.phone} onChange={e => set(['contact', 'phone'], e.target.value)} /></Field>
              <Field label={t('ch_office')}><input className="input" value={draft.contact.office.ar} onChange={e => set(['contact', 'office', 'ar'], e.target.value)} /></Field>
              <Field label={L({ ar: 'قائد/ة الابتكار (يظهر أسفل الصفحة)', en: 'Innovation lead (shown in footer)' })}><input className="input" value={(draft.contact.lead || {}).ar || ''} onChange={e => set(['contact', 'lead', 'ar'], e.target.value)} /></Field>
              <Field label={L({ ar: 'سفير الابتكار (يظهر أسفل الصفحة)', en: 'Innovation ambassador (shown in footer)' })}><input className="input" value={(draft.contact.ambassador || {}).ar || ''} onChange={e => set(['contact', 'ambassador', 'ar'], e.target.value)} /></Field>
              <Field label={L({ ar: 'واتساب سفير الابتكار', en: 'Ambassador WhatsApp' })}><input className="input" value={draft.contact.ambassadorPhone || ''} onChange={e => set(['contact', 'ambassadorPhone'], e.target.value)} /></Field>
              <Field label={L({ ar: 'سفير ابتكار ثانٍ', en: 'Second ambassador' })}><input className="input" value={(draft.contact.ambassador2 || {}).ar || ''} onChange={e => set(['contact', 'ambassador2', 'ar'], e.target.value)} /></Field>
              <Field label={L({ ar: 'واتساب السفير الثاني', en: 'Second ambassador WhatsApp' })}><input className="input" value={draft.contact.ambassador2Phone || ''} onChange={e => set(['contact', 'ambassador2Phone'], e.target.value)} /></Field>
              <Field label={L({ ar: 'بريد المالك (للإشعارات)', en: 'Owner email (notifications)' })}><input className="input" value={draft.contact.ownerEmail || ''} onChange={e => set(['contact', 'ownerEmail'], e.target.value)} dir="ltr" style={{ textAlign: 'start' }} /></Field>
            </div>
          </div>
        </div>
      </section>

      {/* course editor modal */}
      <Modal open={!!editCourse} onClose={() => setEditCourse(null)} max={600}>
        {editCourse && <CourseForm t={t} L={L} course={editCourse} onSave={saveCourse} onCancel={() => setEditCourse(null)} />}
      </Modal>

      {/* submission detail modal */}
      <Modal open={!!viewSub} onClose={() => setViewSub(null)} max={620}>
        {viewSub && <SubmissionDetails t={t} L={L} sub={viewSub} seal={(data.vault || {})[viewSub.ref]} onSeal={() => sealSub(viewSub)} onClose={() => setViewSub(null)} onDelete={() => delSub(viewSub.kind === 'patent' ? 'patents' : 'ideas', viewSub.id)} />}
      </Modal>
    </div>
  );
}

/* ===== Vault: incoming ideas + patents ===== */
function VaultSection({ t, L, data, onView, onExport }) {
  const subs = data.submissions || { ideas: [], patents: [] };
  const [tab, setTab] = React.useState('ideas');
  const list = subs[tab] || [];
  const fmt = (iso) => { try { return new Date(iso).toLocaleString(); } catch (e) { return ''; } };

  return (
    <div className="card card-pad" style={{ borderColor: 'color-mix(in srgb, var(--accent) 30%, transparent)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
        <div className="eyebrow" style={{ color: 'var(--accent)' }}><Icon.shield s={15} /> {t('vault')}</div>
        <button className="btn btn-ghost btn-sm" onClick={onExport}><Icon.layers s={15} /> {t('vault_export')}</button>
      </div>

      <div className="tabs" style={{ marginTop: 16 }}>
        <button className={`tab ${tab === 'ideas' ? 'on' : ''}`} onClick={() => setTab('ideas')}><Icon.bulb s={15} style={{ verticalAlign: 'middle', marginInlineEnd: 6 }} />{t('vault_ideas')} · {subs.ideas.length}</button>
        <button className={`tab ${tab === 'patents' ? 'on' : ''}`} onClick={() => setTab('patents')}><Icon.award s={15} style={{ verticalAlign: 'middle', marginInlineEnd: 6 }} />{t('vault_patents')} · {subs.patents.length}</button>
      </div>

      {list.length === 0 ? (
        <p className="muted center" style={{ padding: '28px 0', fontSize: 14.5 }}>{t('vault_empty')}</p>
      ) : (
        <div style={{ display: 'grid', gap: 10, marginTop: 16 }}>
          {list.map((s) => (
            <button key={s.id} className="card vault-row" onClick={() => onView(s)}>
              <span className={`badge ${s.kind === 'patent' ? 'gold' : 'mint'}`} style={{ flex: 'none' }}><Icon.hash s={12} /> {s.ref}</span>
              <div style={{ flex: 1, minWidth: 0, textAlign: 'start' }}>
                <b style={{ fontSize: 15 }}>{s.title || '—'}</b>
                <div className="muted" style={{ fontSize: 12.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {(s.name || s.inventors || '')}{s.dept ? ` · ${s.dept}` : ''} · {t('received_at')} {fmt(s.submittedAt)}
                </div>
              </div>
              <span style={{ color: 'var(--accent)', flex: 'none' }}><Icon.chevR s={18} /></span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function SubmissionDetails({ t, L, sub, onClose, onDelete, seal, onSeal }) {
  const isPatent = sub.kind === 'patent';
  const rows = isPatent
    ? [
        [t('pf_inventors'), sub.inventors],
        [t('pf_field'), sub.field],
        [t('pf_abstract'), sub.abstract],
        [t('pf_novel'), sub.novelty],
        [t('pf_stage'), sub.stage ? L(sub.stage) : ''],
      ]
    : [
        [t('f_name'), sub.name],
        [t('f_id'), sub.empId],
        [t('f_dept'), sub.dept],
        [t('f_email'), sub.email],
        [t('f_category'), sub.category ? L(sub.category) : ''],
        [t('f_challenge'), sub.challenge],
        [t('f_solution'), sub.solution],
        [t('f_impact'), sub.impact],
      ];
  const fmt = (iso) => { try { return new Date(iso).toLocaleString(); } catch (e) { return ''; } };

  return (
    <div className="card-pad" style={{ padding: 30 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div>
          <div className={`badge ${isPatent ? 'gold' : 'mint'}`} style={{ marginBottom: 8 }}>
            {isPatent ? <Icon.award s={13} /> : <Icon.bulb s={13} />} {sub.ref}
          </div>
          <h3 style={{ fontSize: 22 }}>{sub.title || '—'}</h3>
          <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>{t('received_at')} {fmt(sub.submittedAt)}</div>
        </div>
        <button className="btn btn-dark btn-sm" onClick={onClose} style={{ padding: 8 }}><Icon.x s={16} /></button>
      </div>

      <SealStrip t={t} L={L} sub={sub} seal={seal} onSeal={onSeal} />

      <div style={{ display: 'grid', gap: 0, marginTop: 18 }}>
        {rows.filter(([, v]) => v != null && v !== '').map(([k, v], i) => (
          <div key={i} style={{ padding: '12px 0', borderBottom: '1px solid var(--line)' }}>
            <div className="muted" style={{ fontSize: 12.5, marginBottom: 3 }}>{k}</div>
            <div style={{ fontSize: 14.5, lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{v}</div>
          </div>
        ))}
      </div>

      {(sub.files || []).length > 0 && (
        <div style={{ marginTop: 18 }}>
          <div className="eyebrow"><Icon.layers s={14} /> {t('attachments')} · {sub.files.length}</div>
          <div style={{ marginTop: 10 }}><AttachList items={sub.files} L={L} /></div>
        </div>
      )}

      <div style={{ display: 'flex', gap: 10, marginTop: 22, justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <a className="btn btn-ghost" href={sub.email ? `mailto:${sub.email}` : '#'} style={{ pointerEvents: sub.email ? 'auto' : 'none', opacity: sub.email ? 1 : .5 }}><Icon.mail s={16} /> {L({ ar: 'مراسلة المقدّم', en: 'Email submitter' })}</a>
        <button className="btn btn-dark" onClick={onDelete} style={{ color: 'var(--rose)' }}><Icon.trash s={16} /> {t('delete')}</button>
      </div>
    </div>
  );
}

/* ===== one-click: submission → digital fingerprint ===== */
function SealStrip({ t, L, sub, seal, onSeal }) {
  const [busy, setBusy] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  if (!onSeal) return null;
  const run = async () => { setBusy(true); await onSeal(sub); setBusy(false); };
  if (!seal) return (
    <button className="btn btn-primary" style={{ marginTop: 18 }} onClick={run} disabled={busy}>
      {busy ? <><span className="spin" /> …</> : <><Icon.lock s={16} /> {t('vlt_convert')}</>}
    </button>
  );
  return (
    <div className="seal-hero" style={{ marginTop: 18 }}>
      <FingerprintGlyph code={seal.fingerprint} size={64} />
      <div style={{ minWidth: 0, flex: 1 }}>
        <div className="muted" style={{ fontSize: 12 }}>{t('vlt_f_fp')}</div>
        <div className="seal-code big" dir="ltr">{seal.fingerprint}</div>
        <div className="muted" style={{ fontSize: 11.5, marginTop: 4 }} dir="ltr">{new Date(seal.sealedAt).toISOString().replace('T', ' ').slice(0, 19)} UTC · v{seal.version.toFixed(1)}</div>
        <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
          <button className="btn btn-dark btn-sm" onClick={() => { copyText(seal.fingerprint); setCopied(true); setTimeout(() => setCopied(false), 1600); }}>{copied ? <><Icon.check s={14} /> {t('copied')}</> : <><Icon.layers s={14} /> {t('copy')}</>}</button>
          <button className="btn btn-ghost btn-sm" onClick={run} disabled={busy}><Icon.shield s={14} /> {t('vlt_reseal')}</button>
          <button className="btn btn-primary btn-sm" onClick={() => window.printSealCertificate(sub, seal, L)}><Icon.book s={14} /> {t('vlt_pdf')}</button>
        </div>
      </div>
    </div>
  );
}

/* ===== Cloud (Supabase) settings ===== */
const CLOUD_SQL = `create table submissions (
  id uuid primary key default gen_random_uuid(),
  kind text, ref text, title text,
  payload jsonb,
  created_at timestamptz default now()
);
alter table submissions enable row level security;
create policy "public insert" on submissions for insert to anon with check (true);
create policy "public read"   on submissions for select to anon using (true);
create policy "public delete" on submissions for delete to anon using (true);`;

function CloudSection({ t, L, onPull }) {
  const toast = useToast();
  const cfg = (window.cloudCfg && window.cloudCfg()) || { url: '', key: '' };
  const [url, setUrl] = React.useState(cfg.url || '');
  const [key, setKey] = React.useState(cfg.key || '');
  const [status, setStatus] = React.useState(window.cloudReady && window.cloudReady() ? 'on' : 'off');
  const [testing, setTesting] = React.useState(false);
  const [msg, setMsg] = React.useState(null);
  const [copied, setCopied] = React.useState(false);

  const saveCfg = () => {
    window.setCloudCfg({ url, key });
    setStatus(window.cloudReady() ? 'on' : 'off');
    toast(t('cloud_save'));
  };
  const test = async () => {
    window.setCloudCfg({ url, key });
    setTesting(true); setMsg(null);
    const r = await window.cloudTest();
    setTesting(false);
    if (r.ok) { setMsg({ ok: true, text: t('cloud_ok') }); setStatus('on'); }
    else if (r.error === 'table-missing') setMsg({ ok: false, text: t('cloud_err_table') });
    else if (r.error === 'bad-key') setMsg({ ok: false, text: t('cloud_err_key') });
    else setMsg({ ok: false, text: t('cloud_err_net') });
  };
  const copySql = () => {
    copyText(CLOUD_SQL);
    setCopied(true); setTimeout(() => setCopied(false), 1600);
  };

  return (
    <div className="card card-pad">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
        <div className="eyebrow"><Icon.layers s={15} /> {t('cloud')}</div>
        <span className={`badge ${status === 'on' ? 'mint' : 'rose'}`}>
          <span style={{ width: 8, height: 8, borderRadius: 9, background: 'currentColor', display: 'inline-block' }} />
          {status === 'on' ? t('cloud_on') : t('cloud_off')}
        </span>
      </div>
      <p className="muted" style={{ fontSize: 14, marginTop: 10, lineHeight: 1.6 }}>{t('cloud_sub')}</p>

      <div className="grid g2" style={{ marginTop: 18 }}>
        <Field label={t('cloud_url')} required><input className="input" value={url} onChange={e => setUrl(e.target.value)} placeholder="https://xxxx.supabase.co" dir="ltr" style={{ textAlign: 'start' }} /></Field>
        <Field label={t('cloud_key')} required><input className="input" value={key} onChange={e => setKey(e.target.value)} placeholder="eyJhbGciOi..." dir="ltr" style={{ textAlign: 'start' }} /></Field>
      </div>

      {msg && (
        <div className={msg.ok ? 'cloud-msg ok' : 'cloud-msg err'} style={{ marginTop: 14 }}>
          {msg.ok ? <Icon.check s={15} /> : <Icon.shield s={15} />} {msg.text}
        </div>
      )}

      <div style={{ display: 'flex', gap: 10, marginTop: 16, flexWrap: 'wrap' }}>
        <button className="btn btn-ghost" onClick={test} disabled={testing || !url || !key}>
          {testing ? <><span className="spin" /> …</> : <><Icon.target s={16} /> {t('cloud_test')}</>}
        </button>
        <button className="btn btn-primary" onClick={saveCfg} disabled={!url || !key}><Icon.check s={16} /> {t('cloud_save')}</button>
        <button className="btn btn-dark" onClick={onPull} disabled={status !== 'on'}><Icon.arrow s={16} /> {t('cloud_pull')}</button>
      </div>

      {/* setup help */}
      <details className="cloud-help" style={{ marginTop: 20 }}>
        <summary><Icon.book s={15} /> {t('cloud_steps')}</summary>
        <ol style={{ margin: '14px 0 0', paddingInlineStart: 20, display: 'grid', gap: 8, fontSize: 14, lineHeight: 1.65 }}>
          <li>{L({ ar: 'أنشئ مشروعاً مجانياً على supabase.com', en: 'Create a free project on supabase.com' })}</li>
          <li>{L({ ar: 'من Project Settings → API انسخ الـ Project URL والـ anon public key والصقهما أعلاه.', en: 'From Project Settings → API copy the Project URL and anon public key, paste above.' })}</li>
          <li>{L({ ar: 'من SQL Editor نفّذ الكود التالي مرة واحدة لإنشاء جدول الطلبات:', en: 'In the SQL Editor run the code below once to create the submissions table:' })}</li>
        </ol>
        <div style={{ marginTop: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <span className="muted" style={{ fontSize: 12.5 }}>{t('cloud_sql')}</span>
            <button className="btn btn-dark btn-sm" onClick={copySql}>{copied ? <><Icon.check s={14} /> {t('copied')}</> : <><Icon.layers s={14} /> {t('copy')}</>}</button>
          </div>
          <pre className="cloud-sql" dir="ltr">{CLOUD_SQL}</pre>
        </div>
      </details>
    </div>
  );
}

Object.assign(window, { AdminPage, VaultSection, SubmissionDetails, SealStrip, CloudSection });

