// ChairShare — practitioner dashboard cluster part 3 (12-13)

// ── 12 · Discounts ──────────────────────────────
const PracDiscounts = () => {
  const rules = [
    { id: "lm", title: "Last-Minute", on: true, lead: "Fill empty slots within hours.",
      params: ["–15% off", "if booked within 12 hrs", "of the slot"], example: "11:00 today → $272 instead of $320" },
    { id: "eb", title: "Early-Bird", on: true, lead: "Reward planners. Lock in the calendar.",
      params: ["–10% off", "if booked", "7+ days ahead"], example: "Booked May 15 for May 22 → $288 instead of $320" },
    { id: "rg", title: "Regular Customer", on: false, lead: "Loyalty without a punch card.",
      params: ["–10% off", "after", "5 visits"] },
  ];
  return (
    <PracShell active={12} subtitle="3 rules · 2 active" title="Discount rules"
      action={<button className="btn btn-ghost btn-sm">+ Custom rule</button>}>
      <div style={{ padding: "26px 36px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {rules.map(r => (
            <div key={r.id} className="card" style={{ padding: 24, opacity: r.on ? 1 : 0.78, position: "relative", overflow: "hidden" }}>
              {r.on && <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "var(--cs-gold)" }} />}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
                <div className="eyebrow">{r.on ? "Active" : "Off"}</div>
                <span style={{ width: 32, height: 18, background: r.on ? "var(--cs-gold)" : "var(--cs-ink-4)", borderRadius: 999, position: "relative", display: "inline-block" }}>
                  <span style={{ position: "absolute", right: r.on ? 2 : null, left: r.on ? null : 2, top: 2, width: 14, height: 14, borderRadius: 999, background: "var(--cs-bone)" }} />
                </span>
              </div>
              <h3 className="serif" style={{ fontSize: 28, margin: "0 0 8px", fontWeight: 400 }}>{r.title}</h3>
              <p style={{ fontSize: 13, color: "var(--cs-ink-3)", margin: "0 0 22px", lineHeight: 1.5 }}>{r.lead}</p>
              <div style={{ background: "var(--cs-cream-2)", padding: 16, borderRadius: "var(--cs-r)", marginBottom: 16 }}>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {r.params.map((p, i) => (
                    <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13 }}>
                      <span className="mono" style={{ fontSize: 10, color: "var(--cs-ink-3)", minWidth: 14 }}>0{i+1}</span>
                      <span className={i === 0 ? "serif-it" : ""} style={i === 0 ? { fontSize: 18, color: "var(--cs-gold-deep)" } : {}}>{p}</span>
                    </div>
                  ))}
                </div>
              </div>
              {r.example && r.on && (
                <div style={{ fontSize: 11, color: "var(--cs-ink-3)", lineHeight: 1.5, paddingTop: 12, borderTop: "1px solid var(--cs-line)" }}>
                  <strong style={{ color: "var(--cs-ink-2)" }}>Example.</strong> {r.example}
                </div>
              )}
              {!r.on && (
                <button className="btn btn-ghost btn-sm btn-block">Configure</button>
              )}
            </div>
          ))}
        </div>

        <div className="card" style={{ marginTop: 28, padding: 24 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 16 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Customer view · preview</div>
              <h3 className="serif" style={{ fontSize: 22, margin: 0, fontWeight: 400 }}>How discounts appear when booking</h3>
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {[
              { t: "10:00", b: null },
              { t: "11:00", b: "early-bird –10%" },
              { t: "13:30", b: null },
              { t: "15:00", b: "last-minute –15%" },
              { t: "16:30", b: null },
            ].map(s => (
              <div key={s.t} style={{ padding: "12px 18px", background: s.b ? "var(--cs-gold)" : "var(--cs-bone)", color: s.b ? "var(--cs-bone)" : "var(--cs-ink)", border: "1px solid var(--cs-line-2)", borderRadius: 10, display: "flex", flexDirection: "column", alignItems: "center", gap: 3, minWidth: 110 }}>
                <span className="serif" style={{ fontSize: 18 }}>{s.t}</span>
                {s.b && <span className="mono" style={{ fontSize: 9, opacity: 0.85 }}>{s.b}</span>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </PracShell>
  );
};

// ── 13 · Earnings ──────────────────────────────
const PracEarnings = () => {
  const rows = [
    { date: "May 5", customer: "Sophie L.", svc: "Cut", gross: 95, fees: 3.05, net: 91.95 },
    { date: "May 5", customer: "Hannah G.", svc: "Balayage", gross: 288, fees: 8.95, net: 279.05 },
    { date: "May 5", customer: "Mei R.", svc: "Root", gross: 145, fees: 4.50, net: 140.50 },
    { date: "May 4", customer: "Olivia P.", svc: "Trim", gross: 55, fees: 1.95, net: 53.05 },
    { date: "May 4", customer: "Lara K.", svc: "Cut", gross: 95, fees: 3.05, net: 91.95 },
    { date: "May 3", customer: "Iris T.", svc: "Cut", gross: 95, fees: 3.05, net: 91.95 },
    { date: "May 2", customer: "Rachel V.", svc: "Bridal trial", gross: 180, fees: 5.62, net: 174.38 },
  ];
  const payouts = [
    { date: "Mon May 4", to: "ANZ ····2841", amount: 1540.20, status: "arrived" },
    { date: "Mon Apr 27", to: "ANZ ····2841", amount: 1820.40, status: "arrived" },
    { date: "Mon Apr 20", to: "ANZ ····2841", amount: 1325.60, status: "arrived" },
  ];
  return (
    <PracShell active={13} subtitle="May 2 — May 8" title="Earnings"
      action={<>
        <div className="card" style={{ padding: 3, display: "inline-flex", borderRadius: 999 }}>
          {["This week", "Last week", "Month", "Custom"].map((v, i) => (
            <button key={v} className="btn btn-sm" style={{ padding: "6px 12px", background: i === 0 ? "var(--cs-ink)" : "transparent", color: i === 0 ? "var(--cs-cream)" : "var(--cs-ink-2)" }}>{v}</button>
          ))}
        </div>
        <button className="btn btn-ghost btn-sm">Download PDF</button>
      </>}>
      <div style={{ padding: "26px 36px" }}>
        {/* Big number row */}
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1.4fr", gap: 0, marginBottom: 28, padding: "26px 0", borderTop: "1px solid var(--cs-line)", borderBottom: "1px solid var(--cs-line)" }}>
          {[
            { l: "Gross", v: "$2,898", sub: "13 bookings", main: false },
            { l: "Stripe fees", v: "−$92.40", sub: "≈ 3.2%" },
            { l: "Marketing fee", v: "−$0", sub: "opted out" },
            { l: "Chair rent", v: "−$285", sub: "weekly" },
            { l: "Net to your bank", v: "$2,520.60", sub: "Paid out Mon May 11", main: true },
          ].map((s, i) => (
            <div key={s.l} style={{ padding: "0 24px", borderRight: i < 4 ? "1px solid var(--cs-line)" : "none" }}>
              <div className="eyebrow" style={{ marginBottom: 10, color: s.main ? "var(--cs-gold-deep)" : undefined }}>{s.l}</div>
              <div className="serif" style={{ fontSize: s.main ? 44 : 32, lineHeight: 1, color: s.main ? "var(--cs-ink)" : (s.v.startsWith("−") ? "var(--cs-ink-2)" : "var(--cs-ink)"), marginBottom: 6, fontWeight: 400 }}>{s.v}</div>
              <div style={{ fontSize: 11, color: "var(--cs-ink-3)" }}>{s.sub}</div>
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 24 }}>
          <div className="card" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--cs-line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <h3 className="serif" style={{ fontSize: 18, margin: 0, fontWeight: 400 }}>Bookings</h3>
              <span style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>{rows.length} of 13</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "70px 1.2fr 1fr 80px 80px 80px", padding: "10px 22px", background: "var(--cs-bone)", borderBottom: "1px solid var(--cs-line)", fontSize: 11, color: "var(--cs-ink-3)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
              <span>Date</span><span>Customer</span><span>Service</span><span style={{textAlign:"right"}}>Gross</span><span style={{textAlign:"right"}}>Fees</span><span style={{textAlign:"right"}}>Net</span>
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "70px 1.2fr 1fr 80px 80px 80px", padding: "12px 22px", alignItems: "center", borderBottom: i < rows.length - 1 ? "1px solid var(--cs-line)" : "none", fontSize: 13 }}>
                <span style={{ color: "var(--cs-ink-3)", fontFamily: "var(--cs-mono)", fontSize: 11 }}>{r.date}</span>
                <span>{r.customer}</span>
                <span style={{ color: "var(--cs-ink-2)" }}>{r.svc}</span>
                <span className="mono" style={{ textAlign: "right" }}>${r.gross.toFixed(2)}</span>
                <span className="mono" style={{ textAlign: "right", color: "var(--cs-ink-3)" }}>−${r.fees.toFixed(2)}</span>
                <span className="mono" style={{ textAlign: "right", fontWeight: 500 }}>${r.net.toFixed(2)}</span>
              </div>
            ))}
          </div>

          <div className="card" style={{ padding: 0 }}>
            <div style={{ padding: "16px 22px", borderBottom: "1px solid var(--cs-line)" }}>
              <h3 className="serif" style={{ fontSize: 18, margin: 0, fontWeight: 400 }}>Payouts</h3>
            </div>
            {payouts.map((p, i) => (
              <div key={i} style={{ padding: "16px 22px", borderBottom: i < payouts.length - 1 ? "1px solid var(--cs-line)" : "none", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>${p.amount.toFixed(2)}</div>
                  <div style={{ fontSize: 11, color: "var(--cs-ink-3)", marginTop: 2 }}>{p.date} → {p.to}</div>
                </div>
                <span className="pill" style={{ background: "rgba(107,126,90,0.15)", color: "var(--cs-ok)" }}><span className="dot dot-ok" /> arrived</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </PracShell>
  );
};

window.PracDiscounts = PracDiscounts;
window.PracEarnings = PracEarnings;