/* spočítAIto.cz — Admin page (affiliate payouts + affiliates overview)
   Only mounted for admins (gated in app.jsx). Money from API is in haléře → ÷100 = Kč. */

const { useState: useStateAdmin, useEffect: useEffectAdmin } = React;

// haléře (integer) → "1 234 Kč" via the global fmtCZK.
function fmtHalereAdmin(halere) {
  return fmtCZK(Math.round((halere || 0) / 100));
}

// Same credentials:'include' contract as api-client.js's internal call().
async function adminApi(path, options = {}) {
  const res = await fetch(window.API.BASE + path, {
    credentials: "include",
    headers: { "Content-Type": "application/json", ...(options.headers || {}) },
    ...options,
  });
  let data = null;
  try { data = await res.json(); } catch (e) {}
  return { ok: res.ok, status: res.status, data };
}

const ADMIN_PAYOUT_STATUS_CZ = {
  REQUESTED: "Požádáno",
  APPROVED: "Schváleno",
  PAID: "Vyplaceno",
  REJECTED: "Zamítnuto",
};

function adminPayoutTone(s) {
  if (s === "PAID" || s === "APPROVED") return "pos";
  if (s === "REJECTED") return "neg";
  return "";
}

function fmtAdminDate(value) {
  if (!value) return "—";
  const d = new Date(value);
  if (isNaN(d.getTime())) return "—";
  return `${d.getDate()}. ${d.getMonth() + 1}. ${d.getFullYear()}`;
}

function AdminPage(props) {
  const [loading, setLoading] = useStateAdmin(true);
  const [error, setError] = useStateAdmin(null);
  const [payouts, setPayouts] = useStateAdmin([]);
  const [affiliates, setAffiliates] = useStateAdmin([]);
  const [busyId, setBusyId] = useStateAdmin(null); // payout id being acted on
  const [actionError, setActionError] = useStateAdmin(null);

  const load = async () => {
    const [pRes, aRes] = await Promise.all([
      adminApi("/api/admin/payouts"),
      adminApi("/api/admin/affiliates"),
    ]);
    if (!pRes.ok || !aRes.ok) throw new Error("admin_load_failed");
    const pData = pRes.data || {};
    const aData = aRes.data || {};
    setPayouts(Array.isArray(pData) ? pData : (pData.payouts || []));
    setAffiliates(Array.isArray(aData) ? aData : (aData.affiliates || []));
  };

  useEffectAdmin(() => {
    let alive = true;
    (async () => {
      setLoading(true);
      setError(null);
      try {
        await load();
      } catch (e) {
        if (alive) setError("Admin data se nepodařilo načíst. Zkuste to prosím znovu.");
      } finally {
        if (alive) setLoading(false);
      }
    })();
    return () => { alive = false; };
  }, []);

  const act = async (id, action) => {
    setBusyId(id);
    setActionError(null);
    try {
      const { ok, data } = await adminApi(`/api/admin/payouts/${id}`, {
        method: "POST",
        body: JSON.stringify({ action }),
      });
      if (!ok) throw new Error((data && (data.message || data.error)) || "action_failed");
      await load();
    } catch (e) {
      setActionError("Akce se nezdařila. Zkuste to prosím znovu.");
    } finally {
      setBusyId(null);
    }
  };

  if (loading) {
    return (
      <div className="page">
        <div className="page-toolbar">
          <div className="toolbar-left">
            <h1 className="page-title">Admin</h1>
            <span className="page-sub">Načítám…</span>
          </div>
        </div>
        <div className="card" style={{ padding: 24, color: "var(--text-secondary)" }}>Načítám admin přehled…</div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="page">
        <div className="page-toolbar">
          <div className="toolbar-left">
            <h1 className="page-title">Admin</h1>
            <span className="page-sub">Správa affiliate výplat a partnerů.</span>
          </div>
        </div>
        <div className="card" style={{ padding: 24, color: "var(--red-500)" }} role="alert">{error}</div>
      </div>
    );
  }

  const pending = payouts.filter((p) => p.status === "REQUESTED" || p.status === "APPROVED");

  return (
    <div className="page">
      <div className="page-toolbar">
        <div className="toolbar-left">
          <h1 className="page-title">Admin</h1>
          <span className="page-sub">Správa affiliate výplat a partnerů.</span>
        </div>
      </div>

      {actionError && <div className="card" style={{ padding: 14, marginTop: 16, color: "var(--red-500)" }} role="alert">{actionError}</div>}

      {/* Payout queue */}
      <div className="card table-card" style={{ marginTop: 16 }}>
        <div className="table-head"><h2 className="card-title">Fronta výplat ({pending.length})</h2></div>
        {payouts.length === 0 ? (
          <div className="stat-sub">Žádné žádosti o výplatu.</div>
        ) : (
          <div className="history-table">
            <div className="ht-row ht-head" style={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1.6fr" }}>
              <span>Affiliate</span>
              <span className="ht-num">Částka</span>
              <span>Stav</span>
              <span className="ht-num">Datum</span>
              <span style={{ textAlign: "right" }}>Akce</span>
            </div>
            {payouts.map((p, i) => {
              const acting = busyId === (p.id);
              const done = p.status === "PAID" || p.status === "REJECTED";
              return (
                <div className="ht-row" key={p.id || i} style={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1.6fr", alignItems: "center" }}>
                  <span className="ht-month">{p.affiliateEmail || p.email || (p.affiliate && p.affiliate.email) || "—"}</span>
                  <span className="ht-num num">{fmtHalereAdmin(p.amount ?? 0)}</span>
                  <span className={`num ${adminPayoutTone(p.status)}`}>{ADMIN_PAYOUT_STATUS_CZ[p.status] || p.status || "—"}</span>
                  <span className="ht-num">{fmtAdminDate(p.createdAt || p.date)}</span>
                  <span style={{ display: "flex", gap: 6, justifyContent: "flex-end", flexWrap: "wrap" }}>
                    {!done && (
                      <>
                        {p.status === "REQUESTED" && (
                          <button className="btn btn-ghost" type="button" disabled={acting} onClick={() => act(p.id, "approve")}>Schválit</button>
                        )}
                        <button className="btn btn-primary" type="button" disabled={acting} onClick={() => act(p.id, "mark_paid")}>Vyplaceno</button>
                        <button className="btn btn-ghost" type="button" disabled={acting} onClick={() => act(p.id, "reject")}>Zamítnout</button>
                      </>
                    )}
                    {done && <span className="stat-sub">—</span>}
                  </span>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Affiliates list */}
      <div className="card table-card" style={{ marginTop: 16 }}>
        <div className="table-head"><h2 className="card-title">Affiliate partneři ({affiliates.length})</h2></div>
        {affiliates.length === 0 ? (
          <div className="stat-sub">Žádní affiliate partneři.</div>
        ) : (
          <div className="history-table">
            <div className="ht-row ht-head" style={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
              <span>E-mail</span>
              <span>Kód</span>
              <span className="ht-num">Doporučení</span>
              <span className="ht-num">Celkem vyděláno</span>
              <span className="ht-num">K výplatě</span>
            </div>
            {affiliates.map((a, i) => (
              <div className="ht-row" key={a.id || a.email || i} style={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr" }}>
                <span className="ht-month">{a.email || "—"}</span>
                <span className="num">{a.code || a.affiliateCode || "—"}</span>
                <span className="ht-num num">{fmtInt(a.referralsCount ?? a.referrals ?? a.referralCount ?? a.signups ?? 0)}</span>
                <span className="ht-num num">{fmtHalereAdmin(a.commissionsTotalHalere ?? a.totalEarnedHalere ?? a.totalEarned ?? 0)}</span>
                <span className="ht-num num pos">{fmtHalereAdmin(a.approvedBalanceHalere ?? a.withdrawableHalere ?? a.withdrawable ?? 0)}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

window.AdminPage = AdminPage;