// Magnalia admin views: overview, church approval queue, light moderation.

const AdminShell = ({ tweaks, navigate, active, children }) => {
  const { Nav, Footer } = window;
  return (
    <div>
      <Nav tweaks={tweaks} navigate={navigate} active={active} />
      <main style={{ minHeight: 'calc(100vh - 220px)' }}>{children}</main>
      <Footer tweaks={tweaks} navigate={navigate} />
    </div>
  );
};

const AdminHeader = ({ eyebrow, title, sub, right }) => (
  <div style={{ borderBottom: '1px solid var(--line)' }}>
    <div style={{ maxWidth: 1240, margin: '0 auto', padding: '56px 56px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
      <div style={{ maxWidth: 720 }}>
        {eyebrow && <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 14 }}>{eyebrow}</div>}
        <h1 className="serif" style={{ fontSize: 52, fontWeight: 500, lineHeight: 1.05, margin: 0, letterSpacing: '-0.01em' }}>{title}</h1>
        {sub && <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)', marginTop: 16, marginBottom: 0 }}>{sub}</p>}
      </div>
      {right}
    </div>
  </div>
);

const PENDING_CHURCHES = [
  { id: 1, name: "Trinity Reformed Church", city: "Asheville, NC", denom: "OPC · Presbytery of the Southeast", primary: "Rev. Eli J. Whittaker", submitted: "Mar 6, 2026", note: "Existing connection: Daniel Carrick (Second Pres.) recommended." },
  { id: 2, name: "Christ Reformed", city: "Phoenix, AZ", denom: "URCNA · Classis Southwest", primary: "Pastor Hendrik J. de Bruyn", submitted: "Mar 5, 2026", note: "" },
  { id: 3, name: "All Souls Anglican", city: "Wheaton, IL", denom: "ACNA · ADOM", primary: "Rev. Canon Mark Holloway", submitted: "Mar 3, 2026", note: "Doctrinal review needed — first ACNA application." },
];

const APPROVED_CHURCHES = [
  { name: "Second Presbyterian", city: "Greenville, SC", members: 6, marriages: 1, since: "Apr 2025" },
  { name: "Briarwood Presbyterian", city: "Birmingham, AL", members: 4, marriages: 0, since: "May 2025" },
  { name: "Hope Presbyterian Church", city: "St. Louis, MO", members: 3, marriages: 0, since: "Jun 2025" },
  { name: "Park Cities Presbyterian", city: "Dallas, TX", members: 5, marriages: 1, since: "Jul 2025" },
  { name: "Providence Presbyterian", city: "Pittsburgh, PA", members: 3, marriages: 0, since: "Aug 2025" },
  { name: "All Saints Presbyterian", city: "Boise, ID", members: 4, marriages: 1, since: "Oct 2025" },
];

const MODERATION_QUEUE = [
  { id: 1, kind: 'profile', who: 'Joel V. (Second Pres.)', issue: 'Profile mentions a specific income figure', flagged: 'Hannah K.', when: '4 hours ago', severity: 'low' },
  { id: 2, kind: 'message', who: 'Anonymous (Briarwood)', issue: 'Auto-flagged language: pressuring tone', flagged: 'system', when: '1 day ago', severity: 'med' },
  { id: 3, kind: 'profile', who: 'Reuben K. (Tenth Pres.)', issue: 'Photo does not match face-only requirement', flagged: 'system', when: '3 days ago', severity: 'low' },
];

// ─── ADMIN HOME ────────────────────────────────────────────────────────
const AdminHome = ({ tweaks, navigate }) => {
  const { Btn } = window;
  const stats = [
    { label: 'Approved churches', value: '38', note: '+ 3 this month' },
    { label: 'Pending applications', value: '3', note: '1 needs doctrinal review' },
    { label: 'Commended members', value: '147', note: '94 active' },
    { label: 'Marriages, all-time', value: '9', note: 'Most recent: Oct 2026' },
  ];

  return (
    <AdminShell tweaks={tweaks} navigate={navigate} active="admin-home">
      <AdminHeader
        eyebrow="Magnalia Foundation · Help Meet Network"
        title="The state of the network."
        sub="A daily-check view for stewards of the ministry."
      />
      <section style={{ background: 'var(--paper)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 56px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {stats.map((s, i) => (
            <div key={s.label} style={{ padding: '8px 32px', borderLeft: i > 0 ? '1px solid var(--line)' : 'none' }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>{s.label}</div>
              <div className="serif" style={{ fontSize: 38, fontWeight: 500, color: 'var(--ink)', lineHeight: 1 }}>{s.value}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 8 }}>{s.note}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: 'var(--bg)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '48px 56px 96px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <Card title="Church approval queue" cta="Open queue →" onCta={() => navigate('admin-churches')}
            empty={PENDING_CHURCHES.length === 0}>
            {PENDING_CHURCHES.slice(0, 3).map(c => (
              <div key={c.id} style={{ padding: '14px 0', borderTop: '1px solid var(--line)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                  <div>
                    <div className="serif" style={{ fontSize: 17, fontWeight: 500 }}>{c.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--mono)', marginTop: 2 }}>{c.city} · {c.denom}</div>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>{c.submitted}</div>
                </div>
              </div>
            ))}
          </Card>
          <Card title="Moderation" cta="Open queue →" onCta={() => navigate('admin-moderation')}>
            {MODERATION_QUEUE.slice(0, 3).map(m => (
              <div key={m.id} style={{ padding: '14px 0', borderTop: '1px solid var(--line)' }}>
                <div className="serif" style={{ fontSize: 17, fontWeight: 500 }}>{m.who}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 4 }}>{m.issue}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--mono)', marginTop: 6, letterSpacing: '0.04em' }}>
                  Flagged by {m.flagged} · {m.when}
                </div>
              </div>
            ))}
          </Card>
        </div>
      </section>
    </AdminShell>
  );
};

const Card = ({ title, children, cta, onCta }) => {
  const { Btn } = window;
  return (
    <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 28 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
        <h2 className="serif" style={{ fontSize: 22, fontWeight: 500, margin: 0 }}>{title}</h2>
        {cta && <Btn kind="ghost" size="sm" onClick={onCta}>{cta}</Btn>}
      </div>
      <div>{children}</div>
    </div>
  );
};

// ─── CHURCH APPROVAL QUEUE ─────────────────────────────────────────────
const AdminChurches = ({ tweaks, navigate }) => {
  const { Btn } = window;
  return (
    <AdminShell tweaks={tweaks} navigate={navigate} active="admin-churches">
      <AdminHeader title="Churches." sub="Approve churches before approving members. Take pains here." />
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 56px 96px' }}>

        <h2 className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 0, marginBottom: 16 }}>Pending applications</h2>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', marginBottom: 56 }}>
          {PENDING_CHURCHES.map((c, i) => (
            <div key={c.id} style={{ padding: '24px 28px', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap' }}>
                <div style={{ flex: '1 1 320px' }}>
                  <h3 className="serif" style={{ fontSize: 22, fontWeight: 500, margin: '0 0 4px' }}>{c.name}</h3>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>{c.city} · {c.denom}</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 12, lineHeight: 1.55 }}>
                    Primary contact: <strong>{c.primary}</strong>
                  </div>
                  {c.note && <div style={{ marginTop: 12, padding: '10px 14px', background: 'var(--bg-2)', fontSize: 13, color: 'var(--ink-2)', fontStyle: 'italic', lineHeight: 1.5 }}>{c.note}</div>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em', marginBottom: 12 }}>SUBMITTED {c.submitted.toUpperCase()}</div>
                  <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                    <Btn kind="primary" size="sm">Schedule call</Btn>
                    <Btn kind="ghost" size="sm">Open application</Btn>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <h2 className="serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 16 }}>Approved churches · 38</h2>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2.5fr 1.5fr 1fr 1fr 1fr', padding: '14px 28px', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
            <div>Church</div><div>City</div><div>Members</div><div>Marriages</div><div>Since</div>
          </div>
          {APPROVED_CHURCHES.map((c, i) => (
            <div key={c.name} style={{ display: 'grid', gridTemplateColumns: '2.5fr 1.5fr 1fr 1fr 1fr', padding: '16px 28px', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
              <div className="serif" style={{ fontSize: 17 }}>{c.name}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{c.city}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{c.members}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{c.marriages}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>{c.since}</div>
            </div>
          ))}
        </div>
      </div>
    </AdminShell>
  );
};

// ─── MODERATION ────────────────────────────────────────────────────────
const AdminModeration = ({ tweaks, navigate }) => {
  const { Btn } = window;
  const colorFor = sev => sev === 'high' ? '#7a2727' : sev === 'med' ? 'var(--taupe)' : 'var(--ink-3)';
  return (
    <AdminShell tweaks={tweaks} navigate={navigate} active="admin-moderation">
      <AdminHeader title="Moderation." sub="Commendation does most of the work. This queue handles the rest with a light touch." />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 56px 96px' }}>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)' }}>
          {MODERATION_QUEUE.map((m, i) => (
            <div key={m.id} style={{ padding: '24px 28px', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 20, flexWrap: 'wrap' }}>
                <div style={{ flex: '1 1 360px' }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                    <h3 className="serif" style={{ fontSize: 19, fontWeight: 500, margin: 0 }}>{m.who}</h3>
                    <span className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: colorFor(m.severity), padding: '2px 8px', border: `1px solid ${colorFor(m.severity)}` }}>{m.kind}</span>
                  </div>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 8, lineHeight: 1.55 }}>{m.issue}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--mono)', marginTop: 8, letterSpacing: '0.04em' }}>
                    Flagged by {m.flagged} · {m.when}
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <Btn kind="primary" size="sm">Review</Btn>
                  <Btn kind="ghost" size="sm">Loop in elder</Btn>
                  <Btn kind="ghost" size="sm">Dismiss</Btn>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, padding: '20px 28px', background: 'var(--bg-2)', fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6 }}>
          Commendation is our front-line moderation. When it doesn't catch something, the rule is: <strong>contact the elder, not the member.</strong> Churches handle their own.
        </div>
      </div>
    </AdminShell>
  );
};

Object.assign(window, { AdminHome, AdminChurches, AdminModeration });