/* spočítAIto.cz — Affiliate page (in-app)
   Consumes GET /api/affiliate/me. Money from API is in haléře → ÷100 = Kč. */

const { useState: useStateAff, useEffect: useEffectAff } = React;

/* ---------- helpers ---------- */

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

// Same credentials:'include' contract as api-client.js's internal call().
async function affApi(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 COMMISSION_STATUS_CZ = {
  PENDING: "Čeká",
  APPROVED: "K výplatě",
  PAID: "Vyplaceno",
  VOID: "Zrušeno",
};
const PAYOUT_STATUS_CZ = {
  REQUESTED: "Požádáno",
  APPROVED: "Schváleno",
  PAID: "Vyplaceno",
  REJECTED: "Zamítnuto",
};

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

// 'YYYY-MM-DD' or ISO → '2. 6. 2026'
function fmtAffDate(value) {
  if (!value) return "—";
  const d = new Date(value);
  if (isNaN(d.getTime())) return "—";
  return `${d.getDate()}. ${d.getMonth() + 1}. ${d.getFullYear()}`;
}

/* ---------- page ---------- */

function AffiliatePage(props) {
  const [loading, setLoading] = useStateAff(true);
  const [error, setError] = useStateAff(null);
  const [data, setData] = useStateAff(null);

  const [copied, setCopied] = useStateAff(false);

  // payout profile form
  const [payoutName, setPayoutName] = useStateAff("");
  const [payoutIban, setPayoutIban] = useStateAff("");
  const [payoutIco, setPayoutIco] = useStateAff("");
  const [savingProfile, setSavingProfile] = useStateAff(false);
  const [profileSaved, setProfileSaved] = useStateAff(false);
  const [profileError, setProfileError] = useStateAff(null);

  const [requesting, setRequesting] = useStateAff(false);
  const [requestError, setRequestError] = useStateAff(null);

  const load = async () => {
    const { ok, data: d } = await affApi("/api/affiliate/me");
    if (!ok || !d) throw new Error("affiliate_load_failed");
    setData(d);
    const profile = d.payoutProfile || {};
    setPayoutName(profile.payoutName || "");
    setPayoutIban(profile.payoutIban || "");
    setPayoutIco(profile.payoutIco || "");
    return d;
  };

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

  const copyLink = async () => {
    const link = data && data.link;
    if (!link) return;
    try {
      await navigator.clipboard.writeText(link);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {
      // Fallback for browsers without clipboard API
      try {
        const ta = document.createElement("textarea");
        ta.value = link;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand("copy");
        ta.remove();
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      } catch (e2) { /* noop */ }
    }
  };

  const saveProfile = async () => {
    setSavingProfile(true);
    setProfileSaved(false);
    setProfileError(null);
    try {
      const { ok } = await affApi("/api/affiliate/payout-profile", {
        method: "PUT",
        body: JSON.stringify({ payoutName, payoutIban, payoutIco }),
      });
      if (!ok) throw new Error("save_failed");
      setProfileSaved(true);
      setTimeout(() => setProfileSaved(false), 2500);
      try { await load(); } catch (e) { /* keep current view */ }
    } catch (e) {
      setProfileError("Uložení se nezdařilo. Zkontrolujte prosím údaje a zkuste to znovu.");
    } finally {
      setSavingProfile(false);
    }
  };

  const requestPayout = async () => {
    setRequesting(true);
    setRequestError(null);
    try {
      const { ok, data: d } = await affApi("/api/affiliate/payout", { method: "POST" });
      if (!ok) throw new Error((d && (d.message || d.error)) || "payout_failed");
      try { await load(); } catch (e) { /* keep current view */ }
    } catch (e) {
      setRequestError("Žádost o výplatu se nezdařila. Zkuste to prosím znovu.");
    } finally {
      setRequesting(false);
    }
  };

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

  if (error || !data) {
    return (
      <div className="page">
        <div className="page-toolbar">
          <div className="toolbar-left">
            <h1 className="page-title">Affiliate</h1>
            <span className="page-sub">Vydělávejte 25 % z každé platby doporučených, po 12 měsíců.</span>
          </div>
        </div>
        <div className="card" style={{ padding: 24, color: "var(--red-500)" }} role="alert">
          {error || "Affiliate data nejsou k dispozici."}
        </div>
      </div>
    );
  }

  const stats = data.stats || {};
  const earnings = data.earnings || {};
  const commissions = Array.isArray(data.commissions) ? data.commissions : [];
  const payouts = Array.isArray(data.payouts) ? data.payouts : [];

  const pendingH = earnings.pendingHalere ?? earnings.pending ?? 0;
  const withdrawableH = earnings.withdrawableHalere ?? earnings.withdrawable ?? 0;
  const paidH = earnings.paidHalere ?? earnings.paid ?? 0;
  const approvedH = earnings.approvedHalere ?? earnings.approved ?? withdrawableH;
  const totalEarnedH = pendingH + withdrawableH + paidH;

  const thresholdH = data.thresholdHalere ?? data.threshold ?? 50000; // 500 Kč
  const canRequest = !!data.canRequestPayout;

  return (
    <div className="page">
      <div className="page-toolbar">
        <div className="toolbar-left">
          <h1 className="page-title">Affiliate</h1>
          <span className="page-sub">Vydělávejte 25 % z každé platby doporučených, po dobu 12 měsíců.</span>
        </div>
      </div>

      {/* Referral link */}
      <div className="card" style={{ padding: 20, marginTop: 16 }}>
        <span className="caption">Váš doporučující odkaz</span>
        <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 8, flexWrap: "wrap" }}>
          <input
            className="text-input"
            value={data.link || ""}
            readOnly
            onFocus={(e) => e.target.select()}
            style={{ flex: "1 1 280px", fontFamily: "var(--font-mono)" }}
            aria-label="Doporučující odkaz"
          />
          <button className="btn btn-primary" type="button" onClick={copyLink} disabled={!data.link}>
            {copied ? (
              <>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7l3 3 5-7" /></svg>
                Zkopírováno
              </>
            ) : "Kopírovat"}
          </button>
        </div>
        {data.code && <span className="stat-sub" style={{ marginTop: 8, display: "block" }}>Kód: <span className="num">{data.code}</span></span>}
      </div>

      {/* Stats */}
      <div className="stat-grid" style={{ marginTop: 16 }}>
        <AffStat label="Kliky" value={fmtInt(stats.clicks || 0)} sub="návštěvy přes odkaz" />
        <AffStat label="Registrace" value={fmtInt(stats.signups || 0)} sub="doporučení uživatelé" />
        <AffStat label="Platící" value={fmtInt(stats.payingConversions || 0)} sub="přešli na placený plán" tone="pos" />
        <AffStat label="Vydělané celkem" value={fmtHalere(totalEarnedH)} sub="za celou dobu" tone="pos" />
      </div>

      {/* Earnings breakdown */}
      <div className="stat-grid" style={{ marginTop: 16, gridTemplateColumns: "repeat(3, 1fr)" }}>
        <AffStat label="Čeká (v ochranné lhůtě)" value={fmtHalere(pendingH)} sub="zatím nelze vyplatit" />
        <AffStat label="Schváleno / k výplatě" value={fmtHalere(withdrawableH)} sub="připraveno k výplatě" tone="pos" />
        <AffStat label="Vyplaceno" value={fmtHalere(paidH)} sub="již odesláno" />
      </div>

      {/* Payout profile + request */}
      <div className="card" style={{ padding: 24, marginTop: 16 }}>
        <h2 className="card-title">Výplatní údaje</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
          <label style={{ display: "flex", flexDirection: "column", gap: 6, gridColumn: "1 / -1" }}>
            <span className="caption">Jméno / firma</span>
            <input className="text-input" value={payoutName} onChange={(e) => setPayoutName(e.target.value)} placeholder="Jan Novák / Firma s.r.o." />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span className="caption">IBAN</span>
            <input className="text-input" value={payoutIban} onChange={(e) => setPayoutIban(e.target.value)} placeholder="CZ65 0800 0000 1920 0014 5399" style={{ fontFamily: "var(--font-mono)" }} />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span className="caption">IČO (nepovinné)</span>
            <input className="text-input" value={payoutIco} onChange={(e) => setPayoutIco(e.target.value)} placeholder="12345678" style={{ fontFamily: "var(--font-mono)" }} />
          </label>
        </div>

        {profileError && <div style={{ marginTop: 12, color: "var(--red-500)", fontSize: 13 }} role="alert">{profileError}</div>}

        <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 16, flexWrap: "wrap" }}>
          <button className="btn btn-ghost" type="button" onClick={saveProfile} disabled={savingProfile}>
            {savingProfile ? "Ukládám…" : profileSaved ? "Uloženo ✓" : "Uložit údaje"}
          </button>
          <button className="btn btn-primary" type="button" onClick={requestPayout} disabled={!canRequest || requesting}>
            {requesting ? <><span className="spinner" /> Odesílám…</> : "Požádat o výplatu"}
          </button>
          {!canRequest && (
            <span className="stat-sub">O výplatu lze požádat od {fmtHalere(thresholdH)} k výplatě.</span>
          )}
        </div>
        {requestError && <div style={{ marginTop: 12, color: "var(--red-500)", fontSize: 13 }} role="alert">{requestError}</div>}
      </div>

      {/* Commissions table */}
      <div className="card table-card" style={{ marginTop: 16 }}>
        <div className="table-head"><h2 className="card-title">Poslední provize</h2></div>
        {commissions.length === 0 ? (
          <div className="stat-sub">Zatím žádné provize. Sdílejte svůj odkaz a začněte vydělávat.</div>
        ) : (
          <div className="history-table">
            <div className="ht-row ht-head" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
              <span className="ht-num">Částka</span>
              <span>Stav</span>
              <span className="ht-num">Datum</span>
            </div>
            {commissions.map((c, i) => (
              <div className="ht-row" key={c.id || i} style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
                <span className="ht-num num">{fmtHalere(c.commissionAmount ?? c.amount ?? 0)}</span>
                <span className={`num ${statusToneCommission(c.status)}`}>{COMMISSION_STATUS_CZ[c.status] || c.status || "—"}</span>
                <span className="ht-num">{fmtAffDate(c.createdAt || c.date)}</span>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Payouts table */}
      <div className="card table-card" style={{ marginTop: 16 }}>
        <div className="table-head"><h2 className="card-title">Historie výplat</h2></div>
        {payouts.length === 0 ? (
          <div className="stat-sub">Zatím žádné výplaty.</div>
        ) : (
          <div className="history-table">
            <div className="ht-row ht-head" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
              <span className="ht-num">Částka</span>
              <span>Stav</span>
              <span className="ht-num">Datum</span>
            </div>
            {payouts.map((p, i) => (
              <div className="ht-row" key={p.id || i} style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
                <span className="ht-num num">{fmtHalere(p.amount ?? 0)}</span>
                <span className={`num ${statusTonePayout(p.status)}`}>{PAYOUT_STATUS_CZ[p.status] || p.status || "—"}</span>
                <span className="ht-num">{fmtAffDate(p.createdAt || p.date)}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function AffStat({ label, value, sub, tone }) {
  return (
    <div className="card stat-card">
      <span className="caption">{label}</span>
      <span className={`stat-value num ${tone || ""}`}>{value}</span>
      <span className="stat-sub">{sub}</span>
    </div>
  );
}

window.AffiliatePage = AffiliatePage;