// Charts — Waterfall (per-unit breakdown), Donut (cost composition), CalendarHeatmap, MiniBar
const { useMemo: chUseMemo } = React;

// ---------- Per-unit waterfall / stacked breakdown ----------
// Shows: Revenue bar at top; series of deduction bars; final Profit bar
function WaterfallBreakdown({ result, fmtMoney }) {
  const items = [
    { label: "Revenue",       value: result.revenue,  tone: "revenue" },
    { label: "Referral fee",  value: -result.referral, tone: "fee" },
    { label: "FBA fulfillment", value: -result.fba,    tone: "fee" },
    { label: "Storage",       value: -(result.storage + result.longTerm), tone: "fee" },
    { label: "PPC ads",       value: -result.ppc,     tone: "marketing" },
    { label: "Returns",       value: -result.returnFee, tone: "fee" },
    { label: "VAT",           value: -result.vat,     tone: "fee", hideIfZero: true },
    { label: "Landed cost",   value: -result.landed,  tone: "cogs" },
    { label: "Net profit",    value: result.profit,   tone: result.profit >= 0 ? "profit" : "loss", final: true },
  ].filter(x => !x.hideIfZero || Math.abs(x.value) > 0.001);

  const maxAbs = Math.max(result.revenue, 0.01);

  return (
    <div className="waterfall">
      {items.map((it, i) => {
        const pct = Math.min(100, (Math.abs(it.value) / maxAbs) * 100);
        return (
          <div key={it.label} className={"wf-row wf-" + it.tone + (it.final ? " wf-final" : "")}>
            <div className="wf-label">{it.label}</div>
            <div className="wf-bar-wrap">
              <div className="wf-bar" style={{ width: pct + "%" }} />
            </div>
            <div className="wf-value mono">
              {it.value < 0 ? "−" : (it.final ? "" : "")}{fmtMoney(Math.abs(it.value))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---------- Donut: cost composition (no inner labels, legend below) ----------
function CostDonut({ result, fmtMoney }) {
  const slices = [
    { label: "COGS",        value: result.cogs + result.shipping + result.prep + result.duty, color: "#0F1B2D" },
    { label: "Referral",    value: result.referral, color: "#FF9900" },
    { label: "FBA fee",     value: result.fba,      color: "#232F3E" },
    { label: "Storage",     value: result.storage + result.longTerm, color: "#8B96A8" },
    { label: "PPC",         value: result.ppc,      color: "#067D62" },
    { label: "Returns + VAT", value: result.returnFee + result.vat, color: "#C7511F" },
  ].filter(s => s.value > 0.001);

  const total = slices.reduce((s, x) => s + x.value, 0) || 1;
  const R = 38, r = 26, C = 50;
  let acc = 0;
  const arcs = slices.map(s => {
    const start = acc / total * 2 * Math.PI - Math.PI / 2;
    acc += s.value;
    const end   = acc / total * 2 * Math.PI - Math.PI / 2;
    const large = (end - start) > Math.PI ? 1 : 0;
    const x1 = C + R * Math.cos(start), y1 = C + R * Math.sin(start);
    const x2 = C + R * Math.cos(end),   y2 = C + R * Math.sin(end);
    const xi1 = C + r * Math.cos(end),  yi1 = C + r * Math.sin(end);
    const xi2 = C + r * Math.cos(start),yi2 = C + r * Math.sin(start);
    const d = `M${x1} ${y1} A${R} ${R} 0 ${large} 1 ${x2} ${y2} L${xi1} ${yi1} A${r} ${r} 0 ${large} 0 ${xi2} ${yi2} Z`;
    return { d, color: s.color, label: s.label, value: s.value };
  });

  return (
    <div className="donut-wrap">
      <svg className="donut" viewBox="0 0 100 100" width="120" height="120">
        {arcs.map((a, i) => <path key={i} d={a.d} fill={a.color} />)}
        <circle cx={C} cy={C} r={r - 0.5} fill="#fff" />
        <text x={C} y={C - 2} textAnchor="middle" className="donut-num">{fmtMoney(total)}</text>
        <text x={C} y={C + 9} textAnchor="middle" className="donut-sub">total cost</text>
      </svg>
      <div className="donut-legend">
        {slices.map(s => (
          <div className="donut-leg-row" key={s.label}>
            <span className="donut-dot" style={{ background: s.color }} />
            <span className="donut-leg-label">{s.label}</span>
            <span className="donut-leg-val mono">{fmtMoney(s.value)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- 30-day profit calendar ----------
// Seeded variability per day so the calendar feels alive
function dayMul(i) {
  const dow = (i + 2) % 7; // 0=Mon
  const weekend = dow >= 5 ? 1.18 : 0.96;
  const wave = 1 + 0.15 * Math.sin(i * 0.9);
  const noise = 1 + (((i * 9301 + 49297) % 233280) / 233280 - 0.5) * 0.22;
  return weekend * wave * noise;
}
function CalendarHeatmap({ result, fmtMoney }) {
  const dpd = result.dailyProfit || 0;
  const days = Array.from({ length: 30 }, (_, i) => ({
    i, value: dpd * dayMul(i),
  }));
  const maxV = Math.max(...days.map(d => Math.abs(d.value)), 0.01);
  const total = days.reduce((s, d) => s + d.value, 0);

  return (
    <div className="calendar">
      <div className="calendar-grid">
        {["M","T","W","T","F","S","S"].map((d, i) => <div key={i} className="cal-dow">{d}</div>)}
        {days.map(d => {
          const intensity = Math.min(1, Math.abs(d.value) / maxV);
          const neg = d.value < 0;
          const bg = neg
            ? `rgba(199, 81, 31, ${0.15 + intensity * 0.6})`
            : `rgba(255, 153, 0, ${0.12 + intensity * 0.78})`;
          const fg = intensity > 0.55 ? "#0F1B2D" : "#0F1B2D";
          return (
            <div className="cal-cell" key={d.i} style={{ background: bg, color: fg }}>
              <div className="cal-day">{d.i + 1}</div>
              <div className="cal-val mono">{fmtMoney(d.value, undefined, undefined, 0)}</div>
            </div>
          );
        })}
      </div>
      <div className="calendar-foot">
        <span>30-day total</span>
        <span className="mono">{fmtMoney(total)}</span>
      </div>
    </div>
  );
}

// ---------- Mini bar chart: monthly profit projection over 12 months ----------
function ProjectionChart({ result, fmtMoney }) {
  const months = Array.from({ length: 12 }, (_, i) => {
    // seasonality bump in Q4
    const season = i >= 9 ? 1.35 - (i - 9) * 0.05 : 1 + Math.sin(i / 3) * 0.08;
    return result.monthlyProfit * season;
  });
  const max = Math.max(...months.map(Math.abs), 0.01);
  const labels = ["J","F","M","A","M","J","J","A","S","O","N","D"];

  return (
    <div className="projection">
      <div className="proj-bars">
        {months.map((v, i) => {
          const h = Math.max(2, (Math.abs(v) / max) * 100);
          const neg = v < 0;
          return (
            <div className="proj-col" key={i}>
              <div className="proj-bar-wrap">
                <div className={"proj-bar " + (neg ? "neg" : "pos")} style={{ height: h + "%" }}>
                  <div className="proj-tip mono">{fmtMoney(v, undefined, undefined, 0)}</div>
                </div>
              </div>
              <div className="proj-lab">{labels[i]}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.Charts = { WaterfallBreakdown, CostDonut, CalendarHeatmap, ProjectionChart };