// Homepage: photo hero, real totals, programs, where the money went, how it works, stories.

const KIND_LABEL = { masuk: 'Donasi', barang: 'Donasi barang', keluar: 'Pembelian' };

function Hero() {
  const [s, setS] = React.useState(null);
  React.useEffect(() => { getSettings().then(setS); }, []);
  const wa = s && waLink(s.whatsapp);
  const img = s && (s.hero_image || s.story_image1);

  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <h1>Dua Tangan, <em>Satu Perubahan.</em></h1>
          <p>Organisasi sosial di Pekanbaru. Kami menyalurkan bantuan langsung ke yang membutuhkan, dan mencatat setiap donasi serta setiap pembelian secara terbuka.</p>
          <div className="actions">
            <a href="causes.html" className="btn btn-primary">Lihat program<Icon name="arrow-right" size={16}/></a>
            {wa
              ? <a href={wa} className="btn btn-outline" target="_blank" rel="noopener"><Icon name="whatsapp" size={18}/>WhatsApp kami</a>
              : <a href="contact.html" className="btn btn-outline">Hubungi kami</a>}
          </div>
        </div>
        <div className="hero-media">
          {img
            ? <img className="hero-img" src={img} alt="Kegiatan Dua Tangan bersama anak-anak panti" />
            : <img className="hero-logo-solo" src="/assets/logo-circle.png" alt="Logo Dua Tangan" />}
          {img && <img className="hero-badge" src="/assets/logo-circle.png" alt="Logo Dua Tangan" width="140" height="140" />}
        </div>
      </div>
    </section>
  );
}

function Totals() {
  const [t, setT] = React.useState(null);
  React.useEffect(() => { getJSON('/api/stats.php').then(setT).catch(() => {}); }, []);
  if (!t) return null;
  const stats = [
    { label: 'Donasi terkumpul', value: t.total_raised, format: formatRpFull, note: `dari ${t.total_donors} donasi uang` },
    { label: 'Sudah dibelanjakan', value: t.total_spent, format: formatRpFull, note: `${t.purchase_count} pembelian tercatat` },
    { label: 'Program', value: t.causes_active + t.causes_done, format: n => n, note: `${t.causes_active} berjalan, ${t.causes_done} selesai` },
  ];

  return (
    <section className="section section-dark" aria-label="Ringkasan dana">
      <div className="container">
        <div className="stat-grid">
          {stats.map(st => (
            <div key={st.label} className="stat card">
              <div className="stat-label">{st.label}</div>
              <div className="stat-value"><CountUp value={st.value} format={st.format} /></div>
              <div className="stat-note">{st.note}</div>
            </div>
          ))}
        </div>
        <p className="totals-note">
          Dihitung langsung dari catatan donasi dan pembelian{t.total_items > 0 ? `, belum termasuk donasi barang senilai sekitar ${formatRpFull(t.total_items)}` : ''}.
        </p>
      </div>
    </section>
  );
}

function Programs() {
  const [causes, setCauses] = React.useState(null);
  const [cat, setCat] = React.useState('all');
  React.useEffect(() => {
    getJSON('/api/causes.php').then(d => setCauses(sortPrograms(Array.isArray(d) ? d : []))).catch(() => setCauses([]));
  }, []);
  if (causes && causes.length === 0) return null;

  const cats = [...new Set((causes || []).map(c => c.category))];
  const shown = (causes || []).filter(c => cat === 'all' || c.category === cat);

  return (
    <section className="section section-alt" aria-labelledby="programs-title">
      <div className="container">
        <div className="section-head">
          <div>
            <h2 id="programs-title">Program <em>kami</em></h2>
            <p>Setiap program punya halaman sendiri berisi donatur, pembelian, dan kabar terbaru.</p>
          </div>
          <a href="causes.html" className="text-link">Semua program<Icon name="arrow-right" size={16}/></a>
        </div>
        {cats.length > 1 && (
          <Pills label="Kategori program" value={cat} onChange={setCat}
            options={[{ value: 'all', label: 'Semua', count: causes.length }, ...cats.map(c => ({ value: c, label: CATEGORY_ID[c] || c, count: causes.filter(x => x.category === c).length }))]} />
        )}
        {causes === null
          ? <p className="empty">Memuat program…</p>
          : <div className="program-grid" key={cat}>{shown.slice(0, 3).map(c => <ProgramCard key={c.id} c={c} />)}</div>}
      </div>
    </section>
  );
}

function RecentLedger() {
  const [rows, setRows] = React.useState(null);
  const [kind, setKind] = React.useState('all');
  React.useEffect(() => { getJSON('/api/ledger.php?limit=40').then(setRows).catch(() => setRows([])); }, []);
  if (!rows || rows.length === 0) return null;

  const isIn = r => r.kind !== 'keluar';
  const shown = rows.filter(r => kind === 'all' || (kind === 'in' ? isIn(r) : !isIn(r)));

  return (
    <section className="section" aria-labelledby="ledger-title">
      <div className="container">
        <div className="section-head">
          <div>
            <h2 id="ledger-title">Ke mana <em>uangnya</em> pergi</h2>
            <p>Catatan terbaru dari semua program: donasi yang masuk dan barang yang kami beli.</p>
          </div>
        </div>
        <Pills label="Jenis catatan" value={kind} onChange={setKind} options={[
          { value: 'all', label: 'Semua' },
          { value: 'in', label: 'Donasi masuk', count: rows.filter(isIn).length },
          { value: 'out', label: 'Pembelian', count: rows.filter(r => !isIn(r)).length },
        ]} />
        <div className="card table-card">
          <div className="ledger-scroll" tabIndex="0" role="region" aria-label="Catatan donasi dan pembelian terbaru">
          <table className="ledger">
            <thead>
              <tr><th>Tanggal</th><th>Keterangan</th><th className="amt">Masuk</th><th className="amt">Keluar</th></tr>
            </thead>
            <tbody key={kind} className="rows-in">
              {shown.map((r, i) => {
                const out = r.kind === 'keluar';
                return (
                  <tr key={i} style={{ '--i': i }}>
                    <td className="date">{fmtDate(r.at)}</td>
                    <td className="main">
                      <div className="item"><span className={'kind ' + (out ? 'kind-out' : 'kind-in')}>{KIND_LABEL[r.kind]}</span>{r.label || 'Hamba Allah (anonim)'}</div>
                      <div className="sub">
                        {out && r.vendor && <>{r.vendor}{r.receipt_id && <> · <span className="num">nota {r.receipt_id}</span></>} · </>}
                        {r.cause_id ? <a href={`cause.html?id=${r.cause_id}`}>{r.cause_title}</a> : 'Kas umum'}
                      </div>
                    </td>
                    <td className="amt in">{!out ? (r.kind === 'barang' ? '≈ ' : '') + formatRpFull(r.amount) : ''}</td>
                    <td className="amt">{out ? formatRpFull(r.amount) : ''}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          </div>
        </div>
        <p className="ledger-note">{shown.length} catatan terbaru.{shown.length > 6 && ' Geser tabel ke bawah untuk melihat semuanya.'}</p>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { title: 'Anda menghubungi kami', body: 'Lewat WhatsApp, Instagram, atau formulir kontak. Pilih program yang ingin dibantu, dengan uang atau barang.' },
    { title: 'Kami catat dan belanjakan', body: 'Setiap donasi dicatat per program. Setiap pembelian ditulis lengkap dengan toko, harga, dan nomor nota.' },
    { title: 'Anda lihat hasilnya', body: 'Foto, penerima manfaat, dan kabar terbaru ditambahkan ke halaman program sampai program selesai.' },
  ];
  return (
    <section className="section section-warm" aria-labelledby="how-title">
      <div className="container">
        <div className="section-head"><h2 id="how-title">Cara <em>kerja</em></h2></div>
        <ol className="steps">
          {steps.map((st, i) => (
            <li key={i} className="card step">
              <span className="step-n" aria-hidden="true">{i + 1}</span>
              <h3>{st.title}</h3>
              <p>{st.body}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function Stories() {
  const [posts, setPosts] = React.useState([]);
  React.useEffect(() => { getJSON('/api/blog.php').then(d => setPosts(d.posts || [])).catch(() => {}); }, []);
  if (!posts.length) return null;
  const list = posts.slice(0, 3);
  return (
    <section className="section section-sky" aria-labelledby="stories-title">
      <div className="container">
        <div className="section-head">
          <h2 id="stories-title">Cerita dari <em>lapangan</em></h2>
          <a href="blog.html" className="text-link">Semua cerita<Icon name="arrow-right" size={16}/></a>
        </div>
        <div className="story-grid" data-n={list.length}>
          {list.map(p => <StoryCard key={p.id} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Header active="home" />
      <main>
        <Hero />
        <Totals />
        <Programs />
        <RecentLedger />
        <HowItWorks />
        <Stories />
        <CallToAction />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);