// =================================================================
// pw-screens-support.jsx — Publisher Admin · Support plans (PKG-13)
//
//   PRD §6. Support is the only thing a publisher pays DropCap for, and
//   it is graded by the commission they generate — not by traffic, and
//   never by anything that changes their rate.
//
//   Three rules this screen exists to hold:
//
//     1. It RECOMMENDS a band. It never charges one. Nothing here
//        auto-upgrades, and the API it reads is advisory by design.
//     2. Commission is identical on every plan. A plan buys service and
//        payout speed. If this screen ever implies otherwise it is
//        selling something DropCap does not offer.
//     3. The publisher sees the number that put them in their band, and
//        the next threshold. "Nobody should be surprised by a bill."
// =================================================================

// PRD §6's ladder. Prices are published figures and live here as copy — but the *recommended*
// band's price is taken from the API response below, so the one number a publisher might act on
// cannot drift from what the platform would actually charge.
//
// Pageview equivalents assume the §5 planning eCPM of $0.75 gross and are labelled as illustration.
// The PRD is explicit that they "should be restated whenever that is revised", which is exactly why
// they are not presented as a second threshold.
const SUPPORT_BANDS = [
  {
    code: "self_serve",
    name: "Self-serve",
    price: 0,
    band: "Under $750/mo commission",
    pageviews: "~under 900k",
    response: "72 hours",
    hold: "60 days",
  },
  {
    code: "priority",
    name: "Priority",
    price: 30,
    band: "$750 – $4,000",
    pageviews: "~900k – 4.5M",
    response: "Priority queue",
    hold: "30 days",
  },
  {
    code: "managed",
    name: "Managed",
    price: 149,
    band: "$4,000 – $20,000",
    pageviews: "~4.5M – 22M",
    response: "Named contact, same-day",
    hold: "30 days",
  },
  {
    code: "dedicated",
    name: "Dedicated",
    price: 499,
    band: "$20,000 – $75,000",
    pageviews: "~22M – 85M",
    response: "Account manager, campaign support",
    hold: "30 days",
  },
  {
    code: "enterprise",
    name: "Enterprise",
    price: null,
    band: "Over $75,000",
    pageviews: "~over 85M",
    response: "Contractual SLA",
    hold: "Negotiated",
  },
];

const money = (n, currency) =>
  n === null || n === undefined
    ? "Negotiated"
    : Number(n) === 0
      ? "Free"
      : `${currency === "INR" ? "₹" : "$"}${Number(n).toLocaleString()}`;

/**
 * Which argument leads.
 *
 * PRD §6: "The dashboard leads with the cash-flow argument above ~$3,000/month of earnings and with
 * priority support below it — same price, different pitch, chosen from the publisher's own numbers."
 *
 * Above the line the 30-day payout hold is worth real money — a publisher earning $4,000/month is
 * waiting on roughly $4,000 less of working capital by moving from 60 days to 30. Below it, thirty
 * days earlier on a small balance is not persuasive and the honest pitch is the support itself.
 */
const CASHFLOW_THRESHOLD = 3000;

const SupportBandCard = ({ band, trailing, currency }) => {
  const leadWithCashFlow = Number(trailing || 0) >= CASHFLOW_THRESHOLD;
  // Roughly what moving 60 → 30 days frees up: one month of earnings no longer in the hold.
  const freed = Math.round(Number(trailing || 0));

  return (
    <Card
      title="What we would recommend"
      subtitle="A recommendation, not a charge. Nothing here changes on its own."
    >
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div>
          <div style={{ fontSize: 13, opacity: 0.7 }}>Your trailing three-month commission</div>
          <div style={{ fontSize: 30, fontWeight: 600 }}>
            {money(Number(trailing || 0), currency)}
            <span style={{ fontSize: 14, opacity: 0.6, fontWeight: 400 }}> / month</span>
          </div>
          <div style={{ fontSize: 12, opacity: 0.6, marginTop: 4 }}>
            Averaged over the three complete calendar months before this one. The current, partial
            month is excluded, so this figure does not drift day to day.
          </div>
        </div>

        <div style={{ padding: "12px 14px", borderRadius: 8, background: "rgba(127,127,127,0.08)" }}>
          <div style={{ fontSize: 13, opacity: 0.7 }}>That puts you in</div>
          <div style={{ fontSize: 20, fontWeight: 600 }}>{band?.name || "Self-serve"}</div>
          {leadWithCashFlow ? (
            <div style={{ fontSize: 13, marginTop: 8, lineHeight: 1.5 }}>
              The reason worth caring about is <strong>cash flow</strong>: it moves your payout hold
              from 60 days to 30. On your current earnings that is roughly{" "}
              <strong>{money(freed, currency)}</strong> that stops sitting in the hold and starts
              reaching your bank a month sooner.
            </div>
          ) : (
            <div style={{ fontSize: 13, marginTop: 8, lineHeight: 1.5 }}>
              What it buys you is <strong>a faster answer</strong> — a priority queue instead of a
              72-hour one. The shorter payout hold comes with it, though at your current earnings
              that matters less than being unblocked quickly.
            </div>
          )}
        </div>

        {/* The sentence that keeps the whole model defensible. It is not decoration. */}
        <div style={{ fontSize: 12, opacity: 0.75, lineHeight: 1.5 }}>
          <strong>Your commission rate is the same on every plan.</strong> A support plan buys
          service and payout speed — never a better rate. And verification is free: it is what sets
          your payout hold, and no plan can buy past it.
        </div>
      </div>
    </Card>
  );
};

const SupportLadder = ({ currentCode, currency }) => (
  <Card title="The ladder" subtitle="Graded by the commission you generate, not by your traffic.">
    <div style={{ overflowX: "auto" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
        <thead>
          <tr style={{ textAlign: "left", opacity: 0.7 }}>
            <th style={{ padding: "8px 10px" }}>Plan</th>
            <th style={{ padding: "8px 10px" }}>Trailing monthly commission</th>
            <th style={{ padding: "8px 10px" }}>Pageview equivalent</th>
            <th style={{ padding: "8px 10px" }}>Response</th>
            <th style={{ padding: "8px 10px" }}>Payout hold</th>
            <th style={{ padding: "8px 10px" }}>Price</th>
          </tr>
        </thead>
        <tbody>
          {SUPPORT_BANDS.map((b) => {
            const here = b.code === currentCode;
            return (
              <tr
                key={b.code}
                style={{
                  borderTop: "1px solid rgba(127,127,127,0.2)",
                  background: here ? "rgba(80,140,255,0.10)" : "transparent",
                  fontWeight: here ? 600 : 400,
                }}
              >
                <td style={{ padding: "10px" }}>
                  {b.name}
                  {here && <span style={{ marginLeft: 8, fontSize: 11, opacity: 0.7 }}>you are here</span>}
                </td>
                <td style={{ padding: "10px" }}>{b.band}</td>
                {/* Illustration, not a threshold. The number that moves a publisher between bands
                    is the commission they generated — see PRD §6. */}
                <td style={{ padding: "10px", opacity: 0.6 }}>{b.pageviews}</td>
                <td style={{ padding: "10px" }}>{b.response}</td>
                <td style={{ padding: "10px" }}>{b.hold}</td>
                <td style={{ padding: "10px" }}>
                  {b.price === null ? "Negotiated" : b.price === 0 ? "Free" : `${money(b.price, currency)}/mo`}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
    <div style={{ fontSize: 12, opacity: 0.65, marginTop: 12, lineHeight: 1.5 }}>
      Pageview equivalents are an illustration at a $0.75 gross eCPM, published so the ladder reads
      intuitively. The number that actually moves you between bands is the commission you generated.
      Crossing a band gives 60 days' notice, and a fall in earnings moves you down automatically.
      <br />
      <strong>Unverified accounts wait 90 days for a payout whatever their plan.</strong> Verifying
      is free.
    </div>
  </Card>
);

const OnboardingCard = ({ currency }) => (
  <Card title="One-time onboarding" subtitle="Available on any plan, including the free one.">
    <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
      <div style={{ fontSize: 26, fontWeight: 600 }}>{money(200, currency)}</div>
      <div style={{ fontSize: 13, opacity: 0.7 }}>one-time</div>
    </div>
    <div style={{ fontSize: 13, opacity: 0.8, marginTop: 10, lineHeight: 1.5 }}>
      A guided setup to a US service standard — integration, first campaigns, and getting your
      placements right. It is a single charge, not a subscription, and it does not change your
      commission or your payout hold.
    </div>
    <div style={{ fontSize: 12, opacity: 0.6, marginTop: 10 }}>
      An unusually complex integration — a bespoke CMS, an unusual ad stack, a migration from another
      provider — may be quoted higher. Support will say so before anything is charged.
    </div>
  </Card>
);

const SupportPlansScreen = ({ data }) => {
  const band = data?.supportBand?.band || null;
  const currency = band?.currency || "USD";
  const trailing = band?.trailing_commission ?? 0;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <SupportBandCard band={band} trailing={trailing} currency={currency} />
      <SupportLadder currentCode={band?.band_code || "self_serve"} currency={currency} />
      <OnboardingCard currency={currency} />
      <div style={{ fontSize: 12, opacity: 0.6, lineHeight: 1.5 }}>
        Want to move? Talk to support — moving between plans is a conversation and a normal checkout,
        never something that happens to you automatically.
      </div>
    </div>
  );
};