/* Tab Billing — Plan, créditos y gestión de suscripción */

const PLAN_COLORS = {
  starter: { accent: "var(--accent)", bg: "var(--accent-softer)", border: "var(--accent-soft)" },
  creator: { accent: "var(--accent)", bg: "var(--accent-softer)", border: "var(--accent-soft)" },
  pro:     { accent: "var(--accent)", bg: "var(--accent-softer)", border: "var(--accent-soft)" },
};
const PLAN_ICONS_BILLING = { starter: "△", creator: "◆", pro: "★" };

const PLAN_LABELS = { starter: "Starter", creator: "Creator", pro: "Pro", admin: "Admin", none: "Sin plan" };

function CreditBar({ used, grant, color }) {
  const pct = grant > 0 ? Math.min(100, Math.round((used / grant) * 100)) : 0;
  const isUnlimited = grant >= 9999999;
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontSize: 13 }}>
        <span style={{ color: "var(--text-3)" }}>Uso mensual</span>
        <span style={{ color: "var(--text)", fontWeight: 600 }}>
          {isUnlimited ? "Ilimitado" : (used || 0).toLocaleString() + " / " + (grant || 0).toLocaleString()}
        </span>
      </div>
      {!isUnlimited && (
        <div style={{ height: 6, background: "var(--bg-card-2)", borderRadius: 3, overflow: "hidden" }}>
          <div style={{
            height: "100%", width: pct + "%", borderRadius: 3,
            background: pct >= 90 ? "#f87171" : (color || "var(--accent)"),
            transition: "width 0.4s ease",
          }}/>
        </div>
      )}
    </div>
  );
}

function PlanCard({ plan, isCurrent, onUpgrade }) {
  const colors = PLAN_COLORS[plan.id] || PLAN_COLORS.starter;
  const icon = PLAN_ICONS_BILLING[plan.id] || "";
  return (
    <div style={{
      border: "1px solid " + (isCurrent ? colors.border : "var(--border)"),
      borderRadius: "var(--radius-lg)",
      padding: 20,
      background: isCurrent ? colors.bg : "var(--bg-card-2)",
      position: "relative",
    }}>
      {isCurrent && (
        <div style={{
          position: "absolute", top: -10, right: 16,
          background: "var(--accent)", color: "#fff",
          fontSize: 11, fontWeight: 700, padding: "2px 10px",
          borderRadius: 20, letterSpacing: 0.5,
        }}>ACTUAL</div>
      )}
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }}>
        {icon && <span style={{ fontSize: 16, lineHeight: 1 }}>{icon}</span>}
        <span style={{ fontSize: 18, fontWeight: 700, color: isCurrent ? "var(--accent)" : "var(--text)" }}>
          {plan.name}
        </span>
        <span style={{ fontSize: 22, fontWeight: 800, color: "var(--text)" }}>${plan.price}</span>
        <span style={{ fontSize: 12, color: "var(--text-3)" }}>/mes</span>
      </div>
      <div style={{ marginTop: 10, marginBottom: 14 }}>
        {(plan.features || []).map(function(f, i) {
          return (
            <div key={i} style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 5, fontSize: 12.5, color: "var(--text-2)" }}>
              <span style={{ color: "var(--accent)", fontSize: 14 }}>✓</span>
              {f}
            </div>
          );
        })}
      </div>
      {isCurrent ? (
        <div style={{ textAlign: "center", fontSize: 12, color: "var(--text-3)", padding: "6px 0" }}>Plan actual</div>
      ) : (
        <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}
          onClick={function() { onUpgrade(plan.id); }}>
          {icon && <span style={{ marginRight: 4 }}>{icon}</span>}Elegir {plan.name}
        </button>
      )}
    </div>
  );
}

function CreditPackageCard({ pkg, onBuy }) {
  return (
    <div style={{
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-lg)",
      padding: 16,
      background: "var(--bg-card-2)",
      display: "flex", flexDirection: "column", gap: 8,
    }}>
      <div style={{ fontSize: 18, fontWeight: 700, color: "var(--accent-2)" }}>
        {(pkg.credits || 0).toLocaleString()}
      </div>
      <div style={{ fontSize: 12, color: "var(--text-3)" }}>créditos</div>
      <div style={{ fontSize: 20, fontWeight: 800, color: "var(--text)" }}>${pkg.price_usd}</div>
      <button className="btn" style={{ width: "100%", justifyContent: "center", marginTop: 4 }}
        onClick={function() { onBuy(pkg); }}>
        Comprar
      </button>
    </div>
  );
}

function MyCostsSection() {
  const now = new Date();
  const [year, setYear] = React.useState(now.getFullYear());
  const [selMonth, setSelMonth] = React.useState(
    now.getFullYear() + "-" + String(now.getMonth() + 1).padStart(2, "0")
  );
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let alive = true;
    setLoading(true);
    fetch(`/api/me/costs/breakdown?year=${year}&month=${selMonth}`, { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => { if (alive) setData(d); })
      .catch(() => {})
      .finally(() => { if (alive) setLoading(false); });
    return () => { alive = false; };
  }, [year, selMonth]);

  const fmt = window.costFmtUSD || ((n) => "$" + (Number(n) || 0).toFixed(2));
  const mLabel = window.costMonthLabel || ((ym) => ym);
  const AnnualChart = window.AnnualCostChart;
  const MonthPick = window.MonthPicker;
  const Calendar = window.SpendCalendar;
  const Legend = window.ProviderLegend;
  const PC = window.COST_PROVIDER_COLORS || {};
  const PL = window.COST_PROVIDER_LABELS || {};

  const hasAny = data && (data.by_month || []).some((m) => m.total > 0);

  return (
    <div className="card card-pad">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, flexWrap: "wrap", marginBottom: 4 }}>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: "var(--text)" }}>Consumo de APIs</h3>
        <span style={{ fontSize: 11.5, color: "var(--text-4)" }}>Estimación en USD · solo tu cuenta</span>
      </div>

      {loading && !data ? (
        <div style={{ fontSize: 13, color: "var(--text-3)", padding: "16px 0" }}>Cargando…</div>
      ) : !hasAny ? (
        <div style={{ fontSize: 13, color: "var(--text-3)", padding: "12px 0" }}>
          Aún no hay gasto registrado en tu cuenta.
        </div>
      ) : (
        <div className="col" style={{ gap: 20, marginTop: 12 }}>
          {/* Total del mes */}
          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span style={{ fontSize: 30, fontWeight: 800, color: "var(--accent)", lineHeight: 1 }}>
              {fmt(data.month_total)}
            </span>
            <span style={{ fontSize: 13, color: "var(--text-3)" }}>en {mLabel(selMonth)}</span>
          </div>

          {/* Gráfica anual */}
          <div>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
              <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-2)" }}>Resumen anual {year}</span>
              <span className="row" style={{ gap: 4 }}>
                <button className="btn" style={{ padding: "2px 8px", fontSize: 13 }} onClick={() => setYear((y) => y - 1)}>‹</button>
                <button className="btn" style={{ padding: "2px 8px", fontSize: 13 }}
                  disabled={year >= now.getFullYear()} onClick={() => setYear((y) => y + 1)}>›</button>
              </span>
            </div>
            {AnnualChart && (
              <AnnualChart byMonth={data.by_month} providers={data.providers}
                selectedMonth={selMonth}
                onSelectMonth={(ym) => { setYear(Number(ym.split("-")[0])); setSelMonth(ym); }}/>
            )}
            {Legend && <div style={{ marginTop: 8 }}><Legend providers={data.providers}/></div>}
          </div>

          {/* Selector de mes + calendario */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16 }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text-2)", marginBottom: 8 }}>Seleccionar mes</div>
              {MonthPick && <MonthPick year={year} byMonth={data.by_month} selectedMonth={selMonth} onSelect={setSelMonth}/>}
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text-2)", marginBottom: 8 }}>
                Calendario · {mLabel(selMonth)}
              </div>
              {Calendar && <Calendar ym={selMonth} byDay={data.by_day}/>}
            </div>
          </div>

          {/* Por API */}
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text-2)", marginBottom: 8 }}>
              Por API · {mLabel(selMonth)}
            </div>
            {(data.month_by_provider || []).length === 0 ? (
              <div style={{ fontSize: 12.5, color: "var(--text-4)" }}>Sin gasto este mes.</div>
            ) : data.month_by_provider.map((p) => (
              <div key={p.provider} className="row" style={{ justifyContent: "space-between", padding: "7px 0", borderTop: "1px solid var(--border)" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--text-2)" }}>
                  <span style={{ width: 9, height: 9, borderRadius: 3, background: PC[p.provider] || "var(--text-4)" }}/>
                  {PL[p.provider] || p.provider}
                </span>
                <span style={{ fontSize: 12.5, fontFamily: "var(--font-mono)", color: "var(--text-2)" }}>{fmt(p.total)}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function BillingTab({ currentUser, onUserRefresh }) {
  var [plans, setPlans] = React.useState([]);
  var [packages, setPackages] = React.useState([]);
  var [loading, setLoading] = React.useState(false);
  var [portalLoading, setPortalLoading] = React.useState(false);
  var [msg, setMsg] = React.useState(null);

  React.useEffect(function() {
    fetch("/api/billing/plans", { credentials: "same-origin" })
      .then(function(r) { return r.json(); })
      .then(function(d) { setPlans(d.plans || []); })
      .catch(function() {});
    fetch("/api/billing/credit-packages", { credentials: "same-origin" })
      .then(function(r) { return r.json(); })
      .then(function(d) { setPackages(d.packages || []); })
      .catch(function() {});
  }, []);

  // Check for Stripe redirect result
  React.useEffect(function() {
    var params = new URLSearchParams(window.location.search);
    var sess = params.get("session");
    if (sess === "success") {
      setMsg({ type: "success", text: "¡Suscripción activada correctamente! Puede tardar unos segundos en actualizarse." });
      if (onUserRefresh) onUserRefresh();
      window.history.replaceState({}, "", window.location.pathname);
    } else if (sess === "cancel") {
      setMsg({ type: "info", text: "Checkout cancelado." });
      window.history.replaceState({}, "", window.location.pathname);
    }
  }, []);

  var user = currentUser || {};
  var plan = user.plan || null;
  var status = user.subscription_status || "inactive";
  var isAdmin = user.is_admin;

  var creditsAvailable = user.credits_available != null ? user.credits_available : 0;
  var creditsMonthlyGrant = user.credits_monthly_grant != null ? user.credits_monthly_grant : 0;
  var creditsUsedMonth = user.credits_used_month != null ? user.credits_used_month : 0;
  var creditsPurchased = user.credits_purchased != null ? user.credits_purchased : 0;
  var channelCount = user.channel_count != null ? user.channel_count : 0;
  var channelLimit = user.channel_limit != null ? user.channel_limit : 0;
  var voiceCloneSlots = user.voice_clone_slots != null ? user.voice_clone_slots : 0;

  var accentColor = "var(--accent)";

  async function handleUpgrade(planId) {
    setLoading(true);
    setMsg(null);
    try {
      var r = await fetch("/api/billing/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ plan_id: planId }),
      });
      var d = await r.json();
      if (d.url) {
        window.location.href = d.url;
      } else {
        setMsg({ type: "error", text: d.detail || "Error al crear sesión de pago" });
      }
    } catch (e) {
      setMsg({ type: "error", text: "Error de conexión" });
    } finally {
      setLoading(false);
    }
  }

  async function handlePortal() {
    setPortalLoading(true);
    setMsg(null);
    try {
      var r = await fetch("/api/billing/portal", {
        method: "POST",
        credentials: "same-origin",
      });
      var d = await r.json();
      if (d.url) {
        window.location.href = d.url;
      } else {
        setMsg({ type: "error", text: d.detail || "Error al abrir portal" });
      }
    } catch (e) {
      setMsg({ type: "error", text: "Error de conexión" });
    } finally {
      setPortalLoading(false);
    }
  }

  function handleBuyPackage(pkg) {
    setMsg({ type: "info", text: "Próximamente — configura Stripe para habilitar la compra de créditos." });
  }

  return (
    <div className="col" style={{ gap: 24, maxWidth: 900, margin: "0 auto" }}>

      {msg && (
        <div style={{
          padding: "12px 16px", borderRadius: "var(--radius)", fontSize: 13,
          background: msg.type === "success" ? "rgba(74,222,128,0.1)" : msg.type === "error" ? "rgba(248,113,113,0.1)" : "rgba(96,165,250,0.1)",
          border: "1px solid " + (msg.type === "success" ? "rgba(74,222,128,0.3)" : msg.type === "error" ? "rgba(248,113,113,0.3)" : "rgba(96,165,250,0.3)"),
          color: msg.type === "success" ? "#4ade80" : msg.type === "error" ? "#fca5a5" : "#93c5fd",
        }}>{msg.text}</div>
      )}

      {/* ─── Current plan & credit balance ─── */}
      <div className="card card-pad">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
              <span style={{ fontSize: 22, fontWeight: 700, color: "var(--text)" }}>
                {PLAN_LABELS[plan] || "Sin plan"}
              </span>
              <span style={{
                fontSize: 11, fontWeight: 700, padding: "2px 8px", borderRadius: 20,
                background: status === "active" ? "rgba(74,222,128,0.15)" : "rgba(248,113,113,0.15)",
                color: status === "active" ? "#4ade80" : "#fca5a5",
                textTransform: "uppercase", letterSpacing: 0.5,
              }}>
                {isAdmin ? "Admin" : status === "active" ? "Activo" : status === "trialing" ? "Trial" : "Inactivo"}
              </span>
            </div>
            <p style={{ margin: 0, fontSize: 13, color: "var(--text-3)" }}>
              {isAdmin
                ? "Acceso completo sin límites"
                : plan
                ? "Suscripción " + PLAN_LABELS[plan] + " · $" + (plan === "starter" ? "99" : plan === "creator" ? "199" : "299") + "/mes"
                : "No tienes una suscripción activa"}
            </p>
          </div>
          {!isAdmin && plan && status === "active" && (
            <button className="btn" onClick={handlePortal} disabled={portalLoading}
              style={{ whiteSpace: "nowrap" }}>
              {portalLoading ? "Abriendo…" : "Gestionar suscripción"}
            </button>
          )}
        </div>

        {/* Credit balance */}
        {!plan && !isAdmin ? (
          <div style={{
            marginTop: 20, padding: 16, borderRadius: 10,
            background: "rgba(248,113,113,0.06)", border: "1px solid rgba(248,113,113,0.2)",
            textAlign: "center",
          }}>
            <div style={{ fontSize: 14, color: "#fca5a5", fontWeight: 600, marginBottom: 4 }}>Sin suscripción activa</div>
            <div style={{ fontSize: 12.5, color: "var(--text-3)" }}>Elige un plan para empezar a generar vídeos.</div>
          </div>
        ) : (
          <div style={{ marginTop: 24 }}>
            {/* Big credit number */}
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 16 }}>
              <span style={{ fontSize: 42, fontWeight: 800, color: accentColor, lineHeight: 1 }}>
                {isAdmin ? "∞" : creditsAvailable.toLocaleString()}
              </span>
              <span style={{ fontSize: 15, color: "var(--text-3)", fontWeight: 500 }}>créditos disponibles</span>
            </div>

            {!isAdmin && (
              <CreditBar used={creditsUsedMonth} grant={creditsMonthlyGrant} color={accentColor}/>
            )}

            {/* Sub-stats */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 10, marginTop: 16 }}>
              {!isAdmin && (
                <div style={{ padding: 12, background: "var(--bg-card-2)", borderRadius: 10, border: "1px solid var(--border)" }}>
                  <div style={{ fontSize: 11, color: "var(--text-4)", textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 4 }}>Concedidos/mes</div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: "var(--text)" }}>{creditsMonthlyGrant.toLocaleString()}</div>
                </div>
              )}
              {!isAdmin && creditsPurchased > 0 && (
                <div style={{ padding: 12, background: "var(--bg-card-2)", borderRadius: 10, border: "1px solid var(--border)" }}>
                  <div style={{ fontSize: 11, color: "var(--text-4)", textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 4 }}>Comprados</div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: "var(--text)" }}>+{creditsPurchased.toLocaleString()}</div>
                </div>
              )}
              <div style={{ padding: 12, background: "var(--bg-card-2)", borderRadius: 10, border: "1px solid var(--border)" }}>
                <div style={{ fontSize: 11, color: "var(--text-4)", textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 4 }}>Canales</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: "var(--text)" }}>
                  {isAdmin ? "∞" : channelCount + " / " + channelLimit}
                </div>
              </div>
              <div style={{ padding: 12, background: "var(--bg-card-2)", borderRadius: 10, border: "1px solid var(--border)" }}>
                <div style={{ fontSize: 11, color: "var(--text-4)", textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 4 }}>Voice Slots</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: "var(--text)" }}>
                  {isAdmin ? "∞" : voiceCloneSlots}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* ─── Consumo de APIs (solo el gasto propio del usuario) ─── */}
      <MyCostsSection/>

      {/* ─── Plan cards — hide for admin ─── */}
      {!isAdmin && (
        <div>
          <h3 style={{ margin: "0 0 16px", fontSize: 15, fontWeight: 600, color: "var(--text)" }}>
            {plan ? "Cambiar de plan" : "Elige tu plan"}
          </h3>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }}>
            {plans.map(function(p) {
              return (
                <PlanCard key={p.id} plan={p} isCurrent={p.id === plan}
                  onUpgrade={loading ? function() {} : handleUpgrade}/>
              );
            })}
          </div>
          {loading && (
            <div style={{ textAlign: "center", marginTop: 16, fontSize: 13, color: "var(--text-3)" }}>
              Redirigiendo a Stripe…
            </div>
          )}
        </div>
      )}

      {/* ─── Buy extra credits — hide for admin ─── */}
      {!isAdmin && (
        <div>
          <h3 style={{ margin: "0 0 4px", fontSize: 15, fontWeight: 600, color: "var(--text)" }}>
            Comprar créditos adicionales
          </h3>
          <p style={{ margin: "0 0 16px", fontSize: 13, color: "var(--text-3)" }}>
            Los créditos comprados no caducan y se suman a tu saldo mensual.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 14 }}>
            {packages.map(function(pkg) {
              return (
                <CreditPackageCard key={pkg.id} pkg={pkg} onBuy={handleBuyPackage}/>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { BillingTab });