// Deal Fee Calculator — enter an Enterprise Value, get the Harvey standard fee.
// Uses lib-fees.js (window.VaultFees), the same formula as the Closed Deals sheet.
(function () {
  const { useState, useMemo } = React;
  const BLUE = "#196EA7", INK = "#1A2733", INK2 = "#5A6B7B", MUTE = "#93A1B0", LINE = "#E4E9F0";

  function fmtUSD(n) {
    if (n == null || isNaN(n)) return "—";
    return "$" + Math.round(n).toLocaleString("en-US");
  }

  function DealFeeCalcScreen() {
    const [evText, setEvText] = useState("");
    const [type, setType] = useState("Add-on");

    const evM = useMemo(() => {
      const cleaned = String(evText).replace(/[^0-9.]/g, "");
      const v = parseFloat(cleaned);
      return isNaN(v) ? null : v;
    }, [evText]);

    const fee = useMemo(() => {
      if (evM == null || evM <= 0 || !window.VaultFees) return null;
      return window.VaultFees.standardFee(evM * 1e6, type);
    }, [evM, type]);

    // show the tier that applied, for transparency
    const tier = useMemo(() => {
      if (evM == null || evM <= 0) return null;
      const tev = evM * 1e6;
      const floorBreak = type === "Platform" ? 9.5 : 4.5;
      if (evM <= floorBreak) return `Floor (EV ≤ $${floorBreak}M)`;
      if (tev >= 25e6) return "(EV − $25M) × 1% + $560K";
      if (tev > 3e6) return "(EV − $3M) × 2% + $120K";
      return "Floor";
    }, [evM, type]);

    return (
      <div style={{ maxWidth: 620, margin: "0 auto", padding: "24px 30px 64px" }}>
        <div style={{ marginBottom: 6 }}>
          <div style={{ fontSize: 25, fontWeight: 600, letterSpacing: "-.3px", color: INK }}>Deal Fee Calculator</div>
          <div style={{ fontSize: 13, color: INK2, marginTop: 4 }}>Enter an enterprise value to get the Harvey standard fee.</div>
        </div>

        <div style={{ marginTop: 24, border: `1px solid ${LINE}`, borderRadius: 14, background: "#fff", padding: 24 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: MUTE, textTransform: "uppercase", letterSpacing: ".04em", marginBottom: 8 }}>Enterprise Value</div>
          <div style={{ position: "relative", marginBottom: 18 }}>
            <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: INK2, fontSize: 18, fontWeight: 600 }}>$</span>
            <input value={evText} onChange={e => setEvText(e.target.value)} inputMode="decimal" placeholder="e.g. 25"
              style={{ width: "100%", padding: "13px 56px 13px 30px", borderRadius: 10, border: `1px solid ${LINE}`, fontSize: 20, fontWeight: 600, color: INK, boxSizing: "border-box" }} />
            <span style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", color: MUTE, fontSize: 14, fontWeight: 600 }}>million</span>
          </div>

          <div style={{ display: "inline-flex", gap: 2, background: "#EEF2F6", borderRadius: 10, padding: 3, marginBottom: 8 }}>
            {["Add-on", "Platform"].map(t => (
              <button key={t} onClick={() => setType(t)} style={{
                padding: "8px 20px", borderRadius: 8, border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600,
                background: type === t ? "#fff" : "transparent", color: type === t ? BLUE : INK2,
                boxShadow: type === t ? "0 1px 2px rgba(0,0,0,.06)" : "none",
              }}>{t}</button>
            ))}
          </div>
          <div style={{ fontSize: 11.5, color: MUTE }}>
            {type === "Platform" ? "Platform floor: $250K (EV ≤ $9.5M)" : "Add-on floor: $150K (EV ≤ $4.5M)"}
          </div>
        </div>

        {/* result */}
        <div style={{ marginTop: 18, borderRadius: 14, background: BLUE, color: "#fff", padding: "26px 28px" }}>
          <div style={{ fontSize: 12, fontWeight: 600, opacity: 0.8, textTransform: "uppercase", letterSpacing: ".06em" }}>Estimated Deal Fee</div>
          <div style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-1px", marginTop: 4 }}>{fee == null ? "—" : fmtUSD(fee)}</div>
          {tier && <div style={{ fontSize: 12.5, opacity: 0.85, marginTop: 6 }}>{tier}</div>}
        </div>

        <p style={{ fontSize: 11.5, color: MUTE, marginTop: 16, lineHeight: 1.5 }}>
          Standard formula only. Bespoke agreements or negotiated minimums aren't reflected — for closed deals, always use the actual booked fee. This is an estimate for not-yet-booked deals.
        </p>

        {/* quick reference table */}
        <div style={{ marginTop: 20 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: MUTE, textTransform: "uppercase", letterSpacing: ".04em", marginBottom: 8 }}>Fee Tiers ({type})</div>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <tbody>
              {(type === "Platform"
                ? [["EV ≤ $9.5M", "$250,000 (floor)"], ["$9.5M – $25M", "(EV − $3M) × 2% + $120K"], ["EV ≥ $25M", "(EV − $25M) × 1% + $560K"]]
                : [["EV ≤ $4.5M", "$150,000 (floor)"], ["$4.5M – $25M", "(EV − $3M) × 2% + $120K"], ["EV ≥ $25M", "(EV − $25M) × 1% + $560K"]]
              ).map((r, i) => (
                <tr key={i} style={{ borderTop: `1px solid ${LINE}` }}>
                  <td style={{ padding: "8px 12px", color: INK, fontWeight: 500 }}>{r[0]}</td>
                  <td style={{ padding: "8px 12px", color: INK2, textAlign: "right" }}>{r[1]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  window.DealFeeCalcScreen = DealFeeCalcScreen;
})();