/* global window, React */

window.Reports = function Reports({ ctx }) {
  const Icon = window.Icon;

  return (
    <window.Screen
      title="Laporan"
      back={true}
      onBack={() => ctx.go("profile")}
      right={<button className="icon-btn" onClick={() => ctx.notify("Cari laporan")}><Icon.Search size={18} /></button>}
    >
      <window.MSection title="Laporan tersedia" sub={`${window.REPORTS_LIST.length} template`}>
        {window.REPORTS_LIST.map(r => {
          const Ic = window.Icon[r.icon] || window.Icon.Report;
          return (
            <div key={r.id} className="report-card" onClick={() => ctx.notify(`Generate ${r.title}`)}>
              <div className="rh">
                <div className="ri"><Ic size={18} /></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="rt">{r.title}</div>
                  <div className="rs">{r.schedule}</div>
                </div>
              </div>
              <div className="rd">{r.desc}</div>
              <div className="rf">
                <span className="muted">{r.recipients} penerima</span>
                <window.StatusPill tone="primary">Generate</window.StatusPill>
              </div>
            </div>
          );
        })}
      </window.MSection>

      <window.MSection title="Laporan terbaru" sub="Auto-generated">
        <div className="m-list">
          {window.RECENT_REPORTS.map((r, i) => (
            <button key={i} className="m-list-item" onClick={() => ctx.notify(`Download ${r.name}`)}>
              <div className="li-icon"><Icon.FileText size={18} /></div>
              <div className="li-body">
                <div className="li-title">{r.name}</div>
                <div className="li-sub">{r.generatedAt} · {r.size}</div>
              </div>
              <div className="li-right">
                <span className="status-pill">{r.format}</span>
              </div>
            </button>
          ))}
        </div>
      </window.MSection>
    </window.Screen>
  );
};