/* KitRate — rate recommendation dashboard */

function RateRow({ item, max }) {
  const [open, setOpen] = useState(false);
  const E = KitRateEngine;
  return (
    <div style={{ borderBottom: "1px solid var(--line)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(150px,1.4fr) minmax(120px,1fr) minmax(0,1.2fr) auto", gap: 16, alignItems: "center", padding: "14px 0" }} className="kr-rate-row">
        <div>
          <div style={{ fontWeight: 600, fontSize: 14 }}>{item.label}</div>
          <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 2 }}>{item.platform}{item.status === "experimental" ? " · experimental benchmark" : ""}</div>
        </div>
        <div style={{ whiteSpace: "nowrap" }}>
          <div className="kr-serif" style={{ fontSize: 20, color: "var(--ink)" }}>{E.fmtMoney(item.target)}</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.05em", color: "var(--muted)", textTransform: "uppercase" }}>
            {E.fmtMoney(item.floor)} floor · {E.fmtMoney(item.anchorPrice)} anchor
          </div>
        </div>
        <div className="kr-rate-bar"><RangeBar low={item.low} high={item.high} max={max} /></div>
        <button className="kr-btn kr-btn-ghost kr-btn-sm" onClick={() => setOpen(!open)} style={{ color: "var(--accent)" }}>
          {open ? "Hide" : "Why?"}
        </button>
      </div>
      {open && (
        <div className="kr-fade-in" style={{ margin: "0 0 16px", padding: "14px 18px", background: "var(--accent-soft)", borderRadius: 10, fontSize: 13.5, lineHeight: 1.6, color: "var(--ink-2)" }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 8 }}>
            How we got here · base {E.fmtRange(item.base[0], item.base[1])} ({item.tier.label} tier) × {item.mult.toFixed(2)}
          </div>
          {item.reasons.length === 0 && <p>This range sits at the benchmark baseline for your follower tier — no adjustments applied.</p>}
          <ul style={{ margin: 0, paddingLeft: 18 }}>
            {item.reasons.map((r, i) => <li key={i} style={{ marginBottom: 4 }}>{r}</li>)}
          </ul>
          <EvidenceRail evidence={item.evidence} confidence={item.confidence} />
        </div>
      )}
    </div>
  );
}

function ResearchPanel({ bm, onClose }) {
  return (
    <Modal title="Current research" onClose={onClose} width={640}>
      <p style={{ fontSize: 13.5, color: "var(--ink-2)", marginBottom: 16 }}>
        Rate recommendations draw on these benchmark inputs. Each is dated, categorized, and marked active, outdated or experimental. Benchmarks last reviewed <strong>{bm.updatedAt}</strong> (version {bm.version}).
      </p>
      <table className="kr-table">
        <thead><tr><th>Source</th><th>Category</th><th>Checked</th><th>Status</th></tr></thead>
        <tbody>
          {bm.sources.map(s => (
            <tr key={s.id}>
              <td style={{ fontWeight: 500 }}>{s.name}</td>
              <td style={{ color: "var(--muted)" }}>{s.category}</td>
              <td className="kr-num">{s.checked}</td>
              <td><StatusChip status={s.status} /></td>
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{ marginTop: 18, fontSize: 12.5, color: "var(--muted)", lineHeight: 1.6 }}>
        <strong style={{ color: "var(--ink-2)" }}>Data points used:</strong> platform base-rate ranges by follower tier · average-view performance vs. audience size · engagement-rate tiers · niche demand multipliers · regional adjustments · usage-rights and amplification fees · exclusivity and rush premiums.
      </div>
    </Modal>
  );
}

function BrandSafetyCard() {
  return (
    <div className="kr-card" style={{ padding: 20 }}>
      <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 10 }}>
        <KrIcon d={ICONS.shield} size={16} style={{ color: "var(--accent)" }} />
        <div style={{ fontWeight: 600, fontSize: 14.5 }}>Brand safety & disclosure</div>
      </div>
      <p style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6 }}>
        Sponsored posts, gifted products, affiliate links and paid partnerships may require clear disclosure — “ad,” “sponsored,” or your platform's paid-partnership label. KitRate adds a disclosure reminder to every package description so both sides stay covered. It's a professionalism signal brands notice, not legal advice.
      </p>
    </div>
  );
}

function RatesDashboard({ profile, rates, bm, onEditMetrics, onOpenKit, onOpenIntelligence, onOpenAdmin }) {
  const [showResearch, setShowResearch] = useState(false);
  const E = KitRateEngine;
  const { items, addons, retainer, confidence } = rates;
  const max = Math.max(...items.map(i => i.high), 1);
  const organic = items.filter(i => i.platform !== "UGC");
  const ugc = items.filter(i => i.platform === "UGC");

  if (!items.length) {
    return (
      <div style={{ maxWidth: 760, margin: "0 auto", padding: "60px 32px" }}>
        <EmptyState icon="warn" title="No rates yet" desc="We couldn't generate rates — add at least one platform with a follower count to benchmark against."
          action={<button className="kr-btn kr-btn-primary" onClick={onEditMetrics}>Add metrics</button>} />
      </div>
    );
  }

  return (
    <div style={{ maxWidth: 1080, margin: "0 auto", padding: "44px 32px 80px" }} data-screen-label="Rate dashboard" className="kr-fade-in">
      <SectionHead eyebrow={"Benchmarks v" + bm.version + " · reviewed " + bm.updatedAt} title="Your suggested rates"
        desc="Ranges, not promises. Open “Why?” on any line to see the reasoning in plain English."
        right={<>
          <button className="kr-btn kr-btn-secondary" onClick={() => setShowResearch(true)}><KrIcon d={ICONS.eye} size={14} /> Current research</button>
          <button className="kr-btn kr-btn-secondary" onClick={onEditMetrics}><KrIcon d={ICONS.sliders} size={14} /> Edit metrics</button>
          <button className="kr-btn kr-btn-secondary" onClick={onOpenKit}>Open media kit</button>
          <button className="kr-btn kr-btn-primary" onClick={onOpenIntelligence}>Build campaign quote <KrIcon d={ICONS.arrowRight} size={14} /></button>
        </>} />

      {/* confidence banner */}
      <div className="kr-card" style={{ padding: "16px 22px", display: "flex", gap: 16, alignItems: "center", marginBottom: 28, flexWrap: "wrap" }}>
        <ConfidenceChip level={confidence.level} label={confidence.label} />
        <p style={{ fontSize: 13.5, color: "var(--ink-2)", flex: "1 1 320px" }}>{confidence.detail}</p>
        {confidence.level !== "high" && <button className="kr-btn kr-btn-secondary kr-btn-sm" onClick={onEditMetrics}>Add missing data</button>}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.7fr) minmax(280px,1fr)", gap: 28, alignItems: "start" }} className="kr-rates-grid">
        <div>
          {/* organic deliverables */}
          <div className="kr-card" style={{ padding: "8px 24px 4px" }}>
            <div className="kr-eyebrow" style={{ padding: "14px 0 6px" }}>Sponsored content</div>
            {organic.map(i => <RateRow key={i.id} item={i} max={max} />)}
          </div>

          {/* UGC */}
          <div className="kr-card" style={{ padding: "8px 24px 4px", marginTop: 20 }}>
            <div className="kr-eyebrow" style={{ padding: "14px 0 6px" }}>UGC — content brands run themselves</div>
            {ugc.map(i => <RateRow key={i.id} item={i} max={max} />)}
          </div>

          {/* add-ons */}
          <div className="kr-card" style={{ padding: "18px 24px", marginTop: 20 }}>
            <div className="kr-eyebrow" style={{ marginBottom: 4 }}>Add-ons & licensing</div>
            <p style={{ fontSize: 12.5, color: "var(--muted)", marginBottom: 10 }}>Calculated as a percentage of the deliverable they attach to — shown here against your {rates.anchor ? rates.anchor.label : "top deliverable"}.</p>
            <table className="kr-table">
              <thead><tr><th>Add-on</th><th style={{ textAlign: "right" }}>Uplift</th><th style={{ textAlign: "right" }}>On your anchor rate</th></tr></thead>
              <tbody>
                {addons.map(a => (
                  <tr key={a.id}>
                    <td style={{ fontWeight: 500 }}>{a.label}</td>
                    <td className="kr-num" style={{ textAlign: "right" }}>+{a.pct}%</td>
                    <td className="kr-num" style={{ textAlign: "right" }}>{a.low != null ? E.fmtRange(a.low, a.high) : "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* retainer */}
          {retainer && (
            <div className="kr-card" style={{ padding: "20px 24px", marginTop: 20, background: "var(--ink)", color: "var(--paper)", border: "none" }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
                <div style={{ flex: "1 1 300px" }}>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.6, marginBottom: 8 }}>Monthly retainer package</div>
                  <div style={{ fontSize: 13.5, opacity: 0.85, lineHeight: 1.6 }}>{retainer.items.join(" · ")} — priced {retainer.discountPct}% under à-la-carte for guaranteed monthly volume.</div>
                </div>
                <div className="kr-serif" style={{ fontSize: 27, whiteSpace: "nowrap" }}>{E.fmtRange(retainer.low, retainer.high)}<span style={{ fontSize: 14, opacity: 0.6 }}> /mo</span></div>
              </div>
            </div>
          )}
        </div>

        {/* sidebar */}
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div className="kr-card" style={{ padding: 20 }}>
            <div className="kr-eyebrow" style={{ marginBottom: 12 }}>Rate methodology</div>
            <p style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.65 }}>
              The base recommendation combines the benchmark for your follower tier with the performance metrics actually available for that platform, your niche, region, and documented work. Your production-cost floor prevents a benchmark from pricing the work below your time cost.
            </p>
            <hr className="kr-hr" style={{ margin: "14px 0" }} />
            <p style={{ fontSize: 12, color: "var(--muted)", lineHeight: 1.6 }}>
              Usage rights, paid amplification, exclusivity, revisions, and rush terms are added only after you define the campaign in the quote builder.
            </p>
          </div>

          <BrandSafetyCard />

          <div className="kr-card" style={{ padding: 20 }}>
            <div className="kr-eyebrow" style={{ marginBottom: 12 }}>Behind the numbers</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
              {organic.slice(0, 1).map(i => (
                <React.Fragment key={i.id}>
                  <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>Follower tier</span><strong>{i.tier.label}</strong></div>
                  {i.viewTier && <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>Reach performance</span><strong>{i.viewTier.label}</strong></div>}
                  {i.engTier && <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>Engagement</span><strong>{i.engTier.label}</strong></div>}
                </React.Fragment>
              ))}
              <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--muted)" }}>Niche</span><strong>{profile.nicheLabel || "—"}</strong></div>
            </div>
            <IntegrationNote>
              These factors map to the admin-managed benchmark database. Updating a multiplier in the admin rate engine recomputes every creator's ranges instantly — try it from the Admin tab.
            </IntegrationNote>
            <button className="kr-btn kr-btn-secondary kr-btn-sm" style={{ width: "100%" }} onClick={onOpenAdmin}>Open admin rate engine</button>
          </div>
        </div>
      </div>

      {showResearch && <ResearchPanel bm={bm} onClose={() => setShowResearch(false)} />}
    </div>
  );
}

window.RatesDashboard = RatesDashboard;