import React, { useEffect, useMemo, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  MoreHorizontal,
  Copy,
  Plus,
  Trash2,
  RotateCcw,
  Download,
  Settings,
  Info,
  Pin,
  PinOff,
  Printer,
  ArrowRight,
  Wand2,
} from "lucide-react";
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as ReTooltip,
  BarChart,
  Bar,
  Legend,
} from "recharts";

// =====================
// Accelerate 3.0 — Scenario Calculator (Team Tool)
// =====================
// Key rules enforced per Ken:
// - Pricing tiers are ONLY Silver / Gold / Platinum (based on annual spend minimums).
// - “+” levels are NOT pricing tiers; they only increase the dividend rate.
// - Dividend “+” levels are fixed spend bands:
//   Silver+ = 15,000–19,999
//   Gold+   = 30,000–34,999
//   Plat+   = 50,000–74,999
// - Free goods earned quarterly by family (Silver/Gold/Platinum) with cumulative threshold gates.
// - 90-day activation target = 25% of the annual minimum for the enrolled tier.
// - Dividend earned on growth above PY baseline AND annual minimum.

// ---------- Helpers ----------
const fmtMoney = (n) =>
  new Intl.NumberFormat(undefined, {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
  }).format(Number.isFinite(n) ? n : 0);

const fmtPct = (n) => `${(Number.isFinite(n) ? n : 0).toFixed(1)}%`;

const STORAGE_KEY = "accelerate3_scenarios_v2";
const SETTINGS_KEY = "accelerate3_settings_v2";

const DEFAULT_SETTINGS = {
  // Annual minimum spend for pricing eligibility (and enrollment tier minimum)
  mins: {
    Silver: 10000,
    Gold: 20000,
    Platinum: 35000,
  },

  // Free goods: family rate by pricing tier family
  freeGoodsRate: {
    Silver: 0.12,
    Gold: 0.07,
    Platinum: 0.03,
  },

  // Quarterly gates: cumulative % of annual min required by end of each quarter
  quarterGates: {
    Q1: 0.25,
    Q2: 0.5,
    Q3: 0.75,
    Q4: 1.0,
  },

  // Activation: 90-day target is 25% of annual minimum
  activation: {
    targetPct: 0.25,
    bonusAmount: 500,
    // thresholds are % of target
    bonusThreshold: 1.0,
    noBonusFloor: 0.9,
  },

  // Dividend rates (growth dividend)
  dividendRate: {
    Silver: 0.1,
    "Silver+": 0.14,
    Gold: 0.16,
    "Gold+": 0.18,
    Platinum: 0.19,
    "Platinum+": 0.2,
  },

  // Dividend “+” qualification spend bands (editable)
  plusBands: {
    // inclusive lower, inclusive upper
    SilverPlus: { min: 15000, max: 19999 },
    GoldPlus: { min: 30000, max: 34999 },
    PlatinumPlus: { min: 50000, max: 74999 },
  },

  // Royalty milestone % by consecutive years and family
  royalty: {
    years: [3, 5, 7, 10],
    rate: {
      3: { Silver: 0.04, Gold: 0.05, Platinum: 0.06 },
      5: { Silver: 0.05, Gold: 0.06, Platinum: 0.07 },
      7: { Silver: 0.06, Gold: 0.07, Platinum: 0.08 },
      10: { Silver: 0.07, Gold: 0.08, Platinum: 0.09 },
    },
  },

  pricingReview: {
    bufferDays: 30,
  },
};

function loadJSON(key, fallback) {
  try {
    const raw = localStorage.getItem(key);
    if (!raw) return fallback;
    const parsed = JSON.parse(raw);
    return parsed ?? fallback;
  } catch {
    return fallback;
  }
}

function saveJSON(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch {
    // ignore
  }
}

function uuid() {
  return Math.random().toString(16).slice(2) + Date.now().toString(16);
}

function inBand(x, band) {
  const n = Number(x || 0);
  return n >= band.min && n <= band.max;
}

function pricingTierFromAnnual(total, mins) {
  if (total >= mins.Platinum) return "Platinum";
  if (total >= mins.Gold) return "Gold";
  if (total >= mins.Silver) return "Silver";
  return "Not Qualified";
}

function dividendLevelFromSpend(pricingFamily, annualTotal, settings) {
  // “+” levels are spend bands; they boost the dividend rate only.
  if (pricingFamily === "Not Qualified") return "Not Qualified";

  if (pricingFamily === "Silver") {
    return inBand(annualTotal, settings.plusBands.SilverPlus) ? "Silver+" : "Silver";
  }
  if (pricingFamily === "Gold") {
    return inBand(annualTotal, settings.plusBands.GoldPlus) ? "Gold+" : "Gold";
  }
  if (pricingFamily === "Platinum") {
    return inBand(annualTotal, settings.plusBands.PlatinumPlus) ? "Platinum+" : "Platinum";
  }
  return "Not Qualified";
}

function activationStatus(memberType, enrolledTier, spend90d, settings) {
  // 90-day activation is ONLY evaluated for NEW members.
  if (memberType !== "New") {
    return {
      status: "N/A (Existing member)",
      pct: 0,
      target: 0,
      bonus: 0,
      qualified: true,
      disqualified: false,
      na: true,
    };
  }

  const min = settings.mins[enrolledTier];
  const target = min * settings.activation.targetPct;
  const pct = target > 0 ? spend90d / target : 0;

  if (pct >= settings.activation.bonusThreshold) {
    return {
      status: "Qualified + $500 Bonus",
      pct,
      target,
      bonus: settings.activation.bonusAmount,
      qualified: true,
      disqualified: false,
      na: false,
    };
  }
  if (pct >= settings.activation.noBonusFloor) {
    return {
      status: "Qualified (No Bonus)",
      pct,
      target,
      bonus: 0,
      qualified: true,
      disqualified: false,
      na: false,
    };
  }
  return {
    status: "Disqualified (<90%)",
    pct,
    target,
    bonus: 0,
    qualified: false,
    disqualified: true,
    na: false,
  };
}

function quarterlyFreeGoods(quarters, pricingFamily, settings) {
  const min = pricingFamily === "Not Qualified" ? 0 : settings.mins[pricingFamily];
  const rate = settings.freeGoodsRate[pricingFamily] ?? 0;

  const qOrder = ["Q1", "Q2", "Q3", "Q4"];
  let cumulative = 0;
  const out = {};

  for (const q of qOrder) {
    const spendQ = Number(quarters[q] ?? 0);
    cumulative += spendQ;
    const gate = settings.quarterGates[q] ?? 0;
    const required = min * gate;
    const passed = cumulative >= required && min > 0;
    out[q] = {
      spendQ,
      cumulative,
      required,
      passed,
      earned: passed ? spendQ * rate : 0,
    };
  }

  const totalEarned = qOrder.reduce((s, q) => s + out[q].earned, 0);
  return { byQuarter: out, totalEarned, rate, min };
}

function growthDividend({ annualTotal, baselinePY, pricingFamily, dividendLevel, settings }) {
  if (pricingFamily === "Not Qualified")
    return { eligible: false, reason: "Below annual minimum", growth: 0, rate: 0, payout: 0 };

  const min = settings.mins[pricingFamily];
  if (annualTotal < min)
    return { eligible: false, reason: "Below annual minimum", growth: 0, rate: 0, payout: 0 };

  const growth = Math.max(0, annualTotal - baselinePY);
  if (growth <= 0)
    return { eligible: false, reason: "No growth vs PY baseline", growth, rate: 0, payout: 0 };

  const rate = settings.dividendRate[dividendLevel] ?? 0;
  return { eligible: true, reason: "Eligible", growth, rate, payout: growth * rate };
}

function royaltyPayout({ annualTotal, pricingFamily, consecutiveYears, settings }) {
  const yearsList = settings.royalty.years;
  const milestone = yearsList.includes(consecutiveYears) ? consecutiveYears : null;
  if (!milestone) return { eligible: false, milestone: null, rate: 0, payout: 0 };
  if (pricingFamily === "Not Qualified") return { eligible: false, milestone, rate: 0, payout: 0 };
  const rate = settings.royalty.rate[milestone]?.[pricingFamily] ?? 0;
  return { eligible: rate > 0, milestone, rate, payout: annualTotal * rate };
}

function tierAccent(tier) {
  if (tier === "Silver") return "from-sky-500/15 to-sky-500/5";
  if (tier === "Gold") return "from-amber-500/15 to-amber-500/5";
  if (tier === "Platinum") return "from-violet-500/15 to-violet-500/5";
  return "from-slate-500/10 to-slate-500/5";
}

function tierBadgeVariant(tier) {
  if (tier === "Not Qualified") return "secondary";
  return "default";
}

function computeGaps(annualTotal, pricingFamily, dividendLevel, settings) {
  // Next pricing tier gap
  const mins = settings.mins;
  let nextTier = null;
  let nextTierTarget = null;
  if (pricingFamily === "Not Qualified") {
    nextTier = "Silver";
    nextTierTarget = mins.Silver;
  } else if (pricingFamily === "Silver") {
    nextTier = "Gold";
    nextTierTarget = mins.Gold;
  } else if (pricingFamily === "Gold") {
    nextTier = "Platinum";
    nextTierTarget = mins.Platinum;
  } else {
    nextTier = null;
    nextTierTarget = null;
  }

  const gapToNextTier = nextTierTarget ? Math.max(0, nextTierTarget - annualTotal) : 0;

  // Next dividend “+” gap (inside pricing family)
  let nextPlusLabel = null;
  let nextPlusTarget = null;

  if (pricingFamily === "Silver") {
    const band = settings.plusBands.SilverPlus;
    if (annualTotal < band.min) {
      nextPlusLabel = "Silver+";
      nextPlusTarget = band.min;
    } else {
      nextPlusLabel = null;
      nextPlusTarget = null;
    }
  }

  if (pricingFamily === "Gold") {
    const band = settings.plusBands.GoldPlus;
    if (annualTotal < band.min) {
      nextPlusLabel = "Gold+";
      nextPlusTarget = band.min;
    } else {
      nextPlusLabel = null;
      nextPlusTarget = null;
    }
  }

  if (pricingFamily === "Platinum") {
    const band = settings.plusBands.PlatinumPlus;
    if (annualTotal < band.min) {
      nextPlusLabel = "Platinum+";
      nextPlusTarget = band.min;
    } else {
      nextPlusLabel = null;
      nextPlusTarget = null;
    }
  }

  const gapToNextPlus = nextPlusTarget ? Math.max(0, nextPlusTarget - annualTotal) : 0;

  return { nextTier, gapToNextTier, nextPlusLabel, gapToNextPlus };
}

// ---------- Defaults ----------
function makeScenario(overrides = {}) {
  return {
    id: overrides.id ?? uuid(),
    name: overrides.name ?? "Scenario",
    memberType: overrides.memberType ?? "Existing",
    enrolledTier: overrides.enrolledTier ?? "Silver", // impacts 90-day target

    spend: {
      Q1: overrides.spend?.Q1 ?? 0,
      Q2: overrides.spend?.Q2 ?? 0,
      Q3: overrides.spend?.Q3 ?? 0,
      Q4: overrides.spend?.Q4 ?? 0,
    },
    spend90d: overrides.spend90d ?? 0,
    baselinePY: overrides.baselinePY ?? 0,
    consecutiveYears: overrides.consecutiveYears ?? 0,
    notes: overrides.notes ?? "",

    // Compare
    pinned: overrides.pinned ?? false,
  };
}

const EXAMPLES = [
  makeScenario({
    name: "Example — Silver office",
    memberType: "New",
    enrolledTier: "Silver",
    spend90d: 2600,
    spend: { Q1: 3200, Q2: 2800, Q3: 2500, Q4: 2200 },
    baselinePY: 9000,
    consecutiveYears: 3,
  }),
  makeScenario({
    name: "Example — Gold growth push",
    memberType: "Existing",
    enrolledTier: "Gold",
    spend90d: 5200,
    spend: { Q1: 7000, Q2: 6500, Q3: 7200, Q4: 7600 },
    baselinePY: 22000,
    consecutiveYears: 5,
  }),
  makeScenario({
    name: "Example — Platinum heavy",
    memberType: "Existing",
    enrolledTier: "Platinum",
    spend90d: 9500,
    spend: { Q1: 13000, Q2: 12000, Q3: 15000, Q4: 14000 },
    baselinePY: 41000,
    consecutiveYears: 7,
  }),
];

function PrintSheet({ payload }) {
  // Print-only markup
  return (
    <div className="p-8 text-slate-900 print:p-0">
      <div className="flex items-start justify-between">
        <div>
          <div className="text-2xl font-semibold">Accelerate 3.0 — Scenario Summary</div>
          <div className="text-sm text-slate-600 mt-1">Internal use • Generated from Scenario Calculator</div>
        </div>
        <div className="text-right">
          <div className="text-sm text-slate-600">Scenario</div>
          <div className="text-lg font-semibold">{payload.name}</div>
        </div>
      </div>

      <div className="mt-6 grid grid-cols-3 gap-3">
        {payload.tiles.map((t) => (
          <div key={t.label} className="rounded-xl border border-slate-200 p-4">
            <div className="text-xs text-slate-600">{t.label}</div>
            <div className="text-xl font-semibold mt-1">{t.value}</div>
            {t.sub ? <div className="text-xs text-slate-600 mt-1">{t.sub}</div> : null}
          </div>
        ))}
      </div>

      <div className="mt-6 grid grid-cols-2 gap-4">
        <div className="rounded-xl border border-slate-200 p-4">
          <div className="font-semibold">Inputs</div>
          <div className="text-sm mt-2 space-y-1">
            <div>Member type: <span className="font-medium">{payload.memberType}</span></div>
            <div>Enrolled tier (90-day): <span className="font-medium">{payload.enrolledTier}</span></div>
            <div>90-day spend: <span className="font-medium">{fmtMoney(payload.spend90d)}</span></div>
            <div>PY baseline: <span className="font-medium">{fmtMoney(payload.baselinePY)}</span></div>
            <div>Consecutive years: <span className="font-medium">{payload.consecutiveYears}</span></div>
            <div className="mt-2">Quarterly spend: <span className="font-medium">Q1 {fmtMoney(payload.spend.Q1)} • Q2 {fmtMoney(payload.spend.Q2)} • Q3 {fmtMoney(payload.spend.Q3)} • Q4 {fmtMoney(payload.spend.Q4)}</span></div>
          </div>
        </div>

        <div className="rounded-xl border border-slate-200 p-4">
          <div className="font-semibold">Earnings Summary</div>
          <div className="text-sm mt-2 space-y-2">
            <div>Free goods (YTD): <span className="font-medium">{fmtMoney(payload.freeGoodsYTD)}</span></div>
            <div>Growth dividend: <span className="font-medium">{fmtMoney(payload.dividendPayout)}</span> <span className="text-slate-600">({payload.dividendExplain})</span></div>
            <div>Royalty: <span className="font-medium">{fmtMoney(payload.royaltyPayout)}</span> <span className="text-slate-600">({payload.royaltyExplain})</span></div>
          </div>
          {payload.notes ? (
            <div className="mt-4">
              <div className="font-semibold">Notes</div>
              <div className="text-sm text-slate-700 mt-2">{payload.notes}</div>
            </div>
          ) : null}
        </div>
      </div>

      <div className="mt-6 rounded-xl border border-slate-200 p-4">
        <div className="font-semibold">Quarter gates & free goods</div>
        <div className="mt-3 w-full overflow-hidden">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-slate-600">
                <th className="py-2">Quarter</th>
                <th className="py-2">Spend</th>
                <th className="py-2">Cumulative</th>
                <th className="py-2">Required</th>
                <th className="py-2">Gate</th>
                <th className="py-2">Free goods</th>
              </tr>
            </thead>
            <tbody>
              {payload.qRows.map((r) => (
                <tr key={r.q} className="border-t border-slate-200">
                  <td className="py-2 font-medium">{r.q}</td>
                  <td className="py-2">{fmtMoney(r.spendQ)}</td>
                  <td className="py-2">{fmtMoney(r.cumulative)}</td>
                  <td className="py-2">{fmtMoney(r.required)}</td>
                  <td className="py-2">{r.passed ? "PASS" : "MISS"}</td>
                  <td className="py-2">{fmtMoney(r.earned)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="mt-6 text-xs text-slate-600">
        Pricing tiers: Silver/Gold/Platinum based on annual spend. “+” levels only apply to dividend rate within fixed spend bands.
      </div>
    </div>
  );
}

function ScenarioCard({
  scenario,
  settings,
  onChange,
  onDuplicate,
  onDelete,
  onRename,
  onReset,
  onPrint,
}) {
  const annualTotal = useMemo(() => Object.values(scenario.spend).reduce((s, v) => s + Number(v || 0), 0), [scenario.spend]);

  const pricingFamily = useMemo(() => pricingTierFromAnnual(annualTotal, settings.mins), [annualTotal, settings.mins]);

  const dividendLevel = useMemo(
    () => dividendLevelFromSpend(pricingFamily, annualTotal, settings),
    [pricingFamily, annualTotal, settings]
  );

  const activation = useMemo(
    () => activationStatus(scenario.memberType, scenario.enrolledTier, Number(scenario.spend90d || 0), settings),
    [scenario.memberType, scenario.enrolledTier, scenario.spend90d, settings]
  );

  const freeGoods = useMemo(
    () => quarterlyFreeGoods(scenario.spend, pricingFamily, settings),
    [scenario.spend, pricingFamily, settings]
  );

  const dividend = useMemo(
    () =>
      growthDividend({
        annualTotal,
        baselinePY: Number(scenario.baselinePY || 0),
        pricingFamily,
        dividendLevel,
        settings,
      }),
    [annualTotal, scenario.baselinePY, pricingFamily, dividendLevel, settings]
  );

  const royalty = useMemo(
    () =>
      royaltyPayout({
        annualTotal,
        pricingFamily,
        consecutiveYears: Number(scenario.consecutiveYears || 0),
        settings,
      }),
    [annualTotal, pricingFamily, scenario.consecutiveYears, settings]
  );

  const { nextTier, gapToNextTier, nextPlusLabel, gapToNextPlus } = useMemo(
    () => computeGaps(annualTotal, pricingFamily, dividendLevel, settings),
    [annualTotal, pricingFamily, dividendLevel, settings]
  );

  const qualificationBadge = useMemo(() => {
    if (pricingFamily === "Not Qualified") return { label: "Below Minimum", variant: "secondary" };
    return { label: `Pricing: ${pricingFamily}`, variant: "default" };
  }, [pricingFamily]);

  const dividendBadge = useMemo(() => {
    if (pricingFamily === "Not Qualified") return { label: "Dividend: N/A", variant: "secondary" };
    return {
      label: `Dividend: ${dividendLevel} (${fmtPct((settings.dividendRate[dividendLevel] ?? 0) * 100)})`,
      variant: "outline",
    };
  }, [pricingFamily, dividendLevel, settings]);

  const chartData = useMemo(() => {
    const qOrder = ["Q1", "Q2", "Q3", "Q4"];
    return qOrder.map((q) => {
      const d = freeGoods.byQuarter[q];
      return {
        quarter: q,
        spend: d?.spendQ ?? 0,
        cumulative: d?.cumulative ?? 0,
        required: d?.required ?? 0,
        freeGoods: d?.earned ?? 0,
      };
    });
  }, [freeGoods]);

  const setSpend = (q, value) => {
    const v = Number(value);
    onChange({ ...scenario, spend: { ...scenario.spend, [q]: Number.isFinite(v) ? v : 0 } });
  };

  const setField = (key, value) => onChange({ ...scenario, [key]: value });

  const riskNotes = useMemo(() => {
    const notes = [];

    if (scenario.memberType === "New") {
      if (activation.disqualified)
        notes.push("New-member activation: currently below 90% of the 90-day target (disqualified).");
      else if (!activation.qualified) notes.push("New-member activation: not yet qualified.");
      else if (activation.bonus === 0)
        notes.push("New-member activation: qualified, but below 100% (no $500 bonus).");
    }

    if (pricingFamily !== "Not Qualified") {
      const missed = Object.entries(freeGoods.byQuarter)
        .filter(([q, d]) => q !== "Q4" && d && !d.passed)
        .map(([q]) => q);
      if (missed.length) notes.push(`Free goods gates missed so far: ${missed.join(", ")}.`);
    }

    if (!dividend.eligible && pricingFamily !== "Not Qualified") notes.push(`Dividend not earned: ${dividend.reason}.`);

    // Plus-band note (important because Platinum+ is a fixed band)
    if (pricingFamily === "Platinum") {
      const b = settings.plusBands.PlatinumPlus;
      if (annualTotal > b.max) {
        notes.push(
          `Platinum+ is defined as ${fmtMoney(b.min)}–${fmtMoney(b.max)}. This scenario is above that band, so it uses Platinum (19%) dividend rate.`
        );
      }
    }

    return notes;
  }, [scenario.memberType, activation, pricingFamily, freeGoods, dividend, annualTotal, settings]);

  const tileClass = `rounded-2xl bg-gradient-to-b ${tierAccent(pricingFamily)} border border-slate-200/60`;

  return (
    <Card className="rounded-2xl shadow-sm border-slate-200/60">
      <CardContent className="p-4">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h3 className="text-lg font-semibold truncate">{scenario.name}</h3>
              <Badge variant={qualificationBadge.variant}>{qualificationBadge.label}</Badge>
              <Badge variant={dividendBadge.variant}>{dividendBadge.label}</Badge>
              {scenario.pinned ? (
                <Badge className="bg-sky-600 hover:bg-sky-600">Pinned</Badge>
              ) : null}
            </div>
            <div className="text-sm text-muted-foreground mt-1">
              Member: <span className="font-medium text-foreground">{scenario.memberType}</span> • Enrolled tier (90-day target):{" "}
              <span className="font-medium text-foreground">{scenario.enrolledTier}</span>
            </div>
          </div>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="rounded-xl">
                <MoreHorizontal className="h-5 w-5" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-64">
              <DropdownMenuLabel>Scenario</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => onDuplicate(scenario)}>
                <Copy className="h-4 w-4 mr-2" /> Duplicate
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => {
                  onChange({ ...scenario, pinned: !scenario.pinned });
                }}
              >
                {scenario.pinned ? (
                  <>
                    <PinOff className="h-4 w-4 mr-2" /> Unpin from compare
                  </>
                ) : (
                  <>
                    <Pin className="h-4 w-4 mr-2" /> Pin for compare
                  </>
                )}
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => onReset(scenario)}>
                <RotateCcw className="h-4 w-4 mr-2" /> Reset inputs
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => onPrint(scenario)}>
                <Printer className="h-4 w-4 mr-2" /> Print / Save PDF
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onClick={() => {
                  const newName = prompt("Rename scenario", scenario.name);
                  if (newName && newName.trim()) onRename({ ...scenario, name: newName.trim() });
                }}
              >
                Rename
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="text-destructive" onClick={() => onDelete(scenario)}>
                <Trash2 className="h-4 w-4 mr-2" /> Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

        <Separator className="my-4" />

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          {/* Inputs */}
          <div className="lg:col-span-1">
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <Label>Member type</Label>
                  <Select value={scenario.memberType} onValueChange={(v) => setField("memberType", v)}>
                    <SelectTrigger className="rounded-xl">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="New">New</SelectItem>
                      <SelectItem value="Existing">Existing</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label>Enrolled tier (90-day)</Label>
                  <Select value={scenario.enrolledTier} onValueChange={(v) => setField("enrolledTier", v)}>
                    <SelectTrigger className="rounded-xl">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Silver">Silver</SelectItem>
                      <SelectItem value="Gold">Gold</SelectItem>
                      <SelectItem value="Platinum">Platinum</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                {scenario.memberType === "New" ? (
                  <div>
                    <Label>90-day spend</Label>
                    <Input
                      className="rounded-xl"
                      type="number"
                      value={scenario.spend90d}
                      onChange={(e) => setField("spend90d", Number(e.target.value))}
                      min={0}
                    />
                  </div>
                ) : (
                  <div>
                    <Label>90-day spend</Label>
                    <Input
                      className="rounded-xl"
                      type="number"
                      value={scenario.spend90d}
                      onChange={(e) => setField("spend90d", Number(e.target.value))}
                      min={0}
                      disabled
                      placeholder="N/A for Existing"
                    />
                  </div>
                )}
                <div>
                  <Label>PY baseline</Label>
                  <Input
                    className="rounded-xl"
                    type="number"
                    value={scenario.baselinePY}
                    onChange={(e) => setField("baselinePY", Number(e.target.value))}
                    min={0}
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <Label>Consecutive years</Label>
                  <Input
                    className="rounded-xl"
                    type="number"
                    value={scenario.consecutiveYears}
                    onChange={(e) => setField("consecutiveYears", Number(e.target.value))}
                    min={0}
                  />
                </div>
                <div className="flex items-end">
                  <Button
                    variant="outline"
                    className="w-full rounded-xl"
                    onClick={() => {
                      const newName = prompt("Rename scenario", scenario.name);
                      if (newName && newName.trim()) onChange({ ...scenario, name: newName.trim() });
                    }}
                  >
                    Rename
                  </Button>
                </div>
              </div>

              <div>
                <Label>Quarterly qualified spend</Label>
                <div className="grid grid-cols-2 gap-3 mt-2">
                  {(["Q1", "Q2", "Q3", "Q4"]).map((q) => (
                    <div key={q}>
                      <Label className="text-xs text-muted-foreground">{q}</Label>
                      <Input
                        className="rounded-xl"
                        type="number"
                        value={scenario.spend[q]}
                        onChange={(e) => setSpend(q, e.target.value)}
                        min={0}
                      />
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <Label>Notes</Label>
                <Input
                  className="rounded-xl"
                  value={scenario.notes}
                  onChange={(e) => setField("notes", e.target.value)}
                  placeholder="Optional (internal only)"
                />
              </div>
            </div>
          </div>

          {/* KPI Tiles */}
          <div className="lg:col-span-2">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <Card className={tileClass}>
                <CardContent className="p-4">
                  <div className="text-xs text-muted-foreground">Annual qualified spend</div>
                  <div className="text-2xl font-semibold mt-1">{fmtMoney(annualTotal)}</div>
                  <div className="text-xs text-muted-foreground mt-1">
                    Pricing family: <span className="text-foreground font-medium">{pricingFamily}</span>
                  </div>
                </CardContent>
              </Card>

              <Card className={tileClass}>
                <CardContent className="p-4">
                  <div className="text-xs text-muted-foreground">Free goods (YTD earned)</div>
                  <div className="text-2xl font-semibold mt-1">{fmtMoney(freeGoods.totalEarned)}</div>
                  <div className="text-xs text-muted-foreground mt-1">
                    Rate: <span className="text-foreground font-medium">{fmtPct(freeGoods.rate * 100)}</span>
                  </div>
                </CardContent>
              </Card>

              <Card className={tileClass}>
                <CardContent className="p-4">
                  <div className="text-xs text-muted-foreground">Growth dividend (projected)</div>
                  <div className="text-2xl font-semibold mt-1">{fmtMoney(dividend.payout)}</div>
                  <div className="text-xs text-muted-foreground mt-1">
                    {dividend.eligible ? (
                      <span>
                        Growth: <span className="text-foreground font-medium">{fmtMoney(dividend.growth)}</span> • Rate:{" "}
                        <span className="text-foreground font-medium">{fmtPct(dividend.rate * 100)}</span>
                      </span>
                    ) : (
                      <span className="text-foreground">{dividend.reason}</span>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Gap tiles */}
              <Card className={tileClass}>
                <CardContent className="p-4">
                  <div className="text-xs text-muted-foreground">Gap to next pricing tier</div>
                  {nextTier ? (
                    <>
                      <div className="text-2xl font-semibold mt-1">{fmtMoney(gapToNextTier)}</div>
                      <div className="text-xs text-muted-foreground mt-1 flex items-center gap-2">
                        Next tier: <span className="text-foreground font-medium">{nextTier}</span> <ArrowRight className="h-3.5 w-3.5" />
                        {fmtMoney(settings.mins[nextTier])}
                      </div>
                    </>
                  ) : (
                    <>
                      <div className="text-2xl font-semibold mt-1">—</div>
                      <div className="text-xs text-muted-foreground mt-1">Already at top pricing tier</div>
                    </>
                  )}
                </CardContent>
              </Card>

              <Card className={tileClass}>
                <CardContent className="p-4">
                  <div className="text-xs text-muted-foreground">Gap to higher dividend (+)</div>
                  {nextPlusLabel ? (
                    <>
                      <div className="text-2xl font-semibold mt-1">{fmtMoney(gapToNextPlus)}</div>
                      <div className="text-xs text-muted-foreground mt-1 flex items-center gap-2">
                        Target: <span className="text-foreground font-medium">{nextPlusLabel}</span>
                        <ArrowRight className="h-3.5 w-3.5" />
                        {nextPlusLabel === "Silver+" ? fmtMoney(settings.plusBands.SilverPlus.min) : nextPlusLabel === "Gold+" ? fmtMoney(settings.plusBands.GoldPlus.min) : fmtMoney(settings.plusBands.PlatinumPlus.min)}
                      </div>
                    </>
                  ) : (
                    <>
                      <div className="text-2xl font-semibold mt-1">—</div>
                      <div className="text-xs text-muted-foreground mt-1">Already at highest dividend rate for this pricing tier</div>
                    </>
                  )}
                </CardContent>
              </Card>

              <Card className={tileClass}>
                <CardContent className="p-4">
                  <div className="text-xs text-muted-foreground">Royalty milestone</div>
                  <div className="text-lg font-semibold mt-1">{royalty.milestone ? `${royalty.milestone}-Year` : "—"}</div>
                  <div className="text-xs text-muted-foreground mt-1">
                    {royalty.eligible ? (
                      <span>
                        Rate: <span className="text-foreground font-medium">{fmtPct(royalty.rate * 100)}</span> • Payout:{" "}
                        <span className="text-foreground font-medium">{fmtMoney(royalty.payout)}</span>
                      </span>
                    ) : (
                      <span className="text-foreground">Not eligible</span>
                    )}
                  </div>
                </CardContent>
              </Card>

              <Card className={tileClass + " md:col-span-3"}>
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="text-xs text-muted-foreground">90-day activation</div>
                      <div className="text-lg font-semibold mt-1">{activation.status}</div>
                      {activation.na ? (
                        <div className="text-xs text-muted-foreground mt-1">Shown only for New members.</div>
                      ) : (
                        <div className="text-xs text-muted-foreground mt-1">
                          Target: {fmtMoney(activation.target)} • Progress: {fmtPct(activation.pct * 100)}
                        </div>
                      )}
                    </div>
                    <Badge
                      className={
                        activation.na
                          ? "bg-slate-500 hover:bg-slate-500"
                          : activation.disqualified
                          ? "bg-rose-600 hover:bg-rose-600"
                          : activation.bonus > 0
                          ? "bg-emerald-600 hover:bg-emerald-600"
                          : "bg-slate-600 hover:bg-slate-600"
                      }
                    >
                      {activation.na
                        ? "N/A"
                        : activation.bonus > 0
                        ? `Bonus ${fmtMoney(activation.bonus)}`
                        : activation.disqualified
                        ? "Disqualified"
                        : "Qualified"}
                    </Badge>
                  </div>
                </CardContent>
              </Card>
            </div>

            <div className="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-3">
              <Card className="rounded-2xl border-slate-200/60">
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div className="font-semibold">Quarter gates (cumulative)</div>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button variant="ghost" size="icon" className="rounded-xl">
                            <Info className="h-4 w-4" />
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                          Free goods are earned on the quarter’s spend only if the cumulative gate is met by end of that quarter.
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </div>
                  <div className="mt-3 space-y-2">
                    {(["Q1", "Q2", "Q3", "Q4"]).map((q) => {
                      const d = freeGoods.byQuarter[q];
                      if (!d) return null;
                      return (
                        <div key={q} className="flex items-center justify-between text-sm">
                          <div className="flex items-center gap-2">
                            <span className="font-medium w-8">{q}</span>
                            <span className="text-muted-foreground">Required</span>
                            <span className="font-medium">{fmtMoney(d.required)}</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <Badge className={d.passed ? "bg-emerald-600 hover:bg-emerald-600" : "bg-slate-600 hover:bg-slate-600"}>
                              {d.passed ? "Pass" : "Miss"}
                            </Badge>
                            <span className="text-muted-foreground">Earned</span>
                            <span className="font-medium">{fmtMoney(d.earned)}</span>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </CardContent>
              </Card>

              <Card className="rounded-2xl border-slate-200/60">
                <CardContent className="p-4">
                  <div className="font-semibold">Spend vs gates</div>
                  <div className="h-56 mt-2">
                    <ResponsiveContainer width="100%" height="100%">
                      <LineChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="quarter" />
                        <YAxis tickFormatter={(v) => (v >= 1000 ? `${Math.round(v / 1000)}k` : v)} />
                        <ReTooltip formatter={(v, n) => [fmtMoney(v), n]} />
                        <Legend />
                        <Line type="monotone" dataKey="cumulative" stroke="#2563EB" strokeWidth={2} dot={false} />
                        <Line type="monotone" dataKey="required" stroke="#F59E0B" strokeWidth={2} dot={false} />
                      </LineChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>

              <Card className="rounded-2xl lg:col-span-2 border-slate-200/60">
                <CardContent className="p-4">
                  <div className="font-semibold">Free goods earned by quarter</div>
                  <div className="h-56 mt-2">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="quarter" />
                        <YAxis tickFormatter={(v) => (v >= 1000 ? `${Math.round(v / 1000)}k` : v)} />
                        <ReTooltip formatter={(v, n) => [fmtMoney(v), n]} />
                        <Legend />
                        <Bar dataKey="spend" fill="#0EA5E9" />
                        <Bar dataKey="freeGoods" fill="#22C55E" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>
            </div>

            {riskNotes.length > 0 && (
              <div className="mt-4">
                <Alert className="rounded-2xl border-slate-200/60">
                  <AlertTitle>Flags / coaching points</AlertTitle>
                  <AlertDescription>
                    <ul className="list-disc pl-5 space-y-1">
                      {riskNotes.map((n, idx) => (
                        <li key={idx}>{n}</li>
                      ))}
                    </ul>
                  </AlertDescription>
                </Alert>
              </div>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function SettingsPanel({ settings, setSettings }) {
  const update = (path, value) => {
    const next = structuredClone(settings);
    const [a, b, c] = path;
    if (c !== undefined) next[a][b][c] = value;
    else next[a][b] = value;
    setSettings(next);
  };

  return (
    <Card className="rounded-2xl shadow-sm border-slate-200/60">
      <CardContent className="p-4">
        <div className="flex items-center justify-between">
          <div>
            <div className="text-lg font-semibold">Admin settings (editable)</div>
            <div className="text-sm text-muted-foreground">Tune rates, gates, and + bands during internal testing.</div>
          </div>
          <Badge className="bg-slate-700 hover:bg-slate-700 rounded-xl">Saved locally</Badge>
        </div>

        <Separator className="my-4" />

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <div className="space-y-3">
            <div className="font-semibold">Annual minimums</div>
            {(["Silver", "Gold", "Platinum"]).map((k) => (
              <div key={k} className="grid grid-cols-2 items-center gap-2">
                <Label>{k}</Label>
                <Input
                  className="rounded-xl"
                  type="number"
                  value={settings.mins[k]}
                  min={0}
                  onChange={(e) => update(["mins", k], Number(e.target.value))}
                />
              </div>
            ))}
          </div>

          <div className="space-y-3">
            <div className="font-semibold">Free goods rate</div>
            {(["Silver", "Gold", "Platinum"]).map((k) => (
              <div key={k} className="grid grid-cols-2 items-center gap-2">
                <Label>{k}</Label>
                <Input
                  className="rounded-xl"
                  type="number"
                  step="0.01"
                  value={settings.freeGoodsRate[k]}
                  onChange={(e) => update(["freeGoodsRate", k], Number(e.target.value))}
                />
              </div>
            ))}
            <div className="text-xs text-muted-foreground">Enter as decimals (0.12 = 12%).</div>
          </div>

          <div className="space-y-3">
            <div className="font-semibold">Dividend rates</div>
            {(["Silver", "Silver+", "Gold", "Gold+", "Platinum", "Platinum+"]).map((k) => (
              <div key={k} className="grid grid-cols-2 items-center gap-2">
                <Label>{k}</Label>
                <Input
                  className="rounded-xl"
                  type="number"
                  step="0.01"
                  value={settings.dividendRate[k]}
                  onChange={(e) => update(["dividendRate", k], Number(e.target.value))}
                />
              </div>
            ))}
            <div className="text-xs text-muted-foreground">Enter as decimals (0.18 = 18%).</div>
          </div>

          <div className="space-y-3">
            <div className="font-semibold">Quarter gates (cumulative)</div>
            {(["Q1", "Q2", "Q3", "Q4"]).map((k) => (
              <div key={k} className="grid grid-cols-2 items-center gap-2">
                <Label>{k}</Label>
                <Input
                  className="rounded-xl"
                  type="number"
                  step="0.01"
                  value={settings.quarterGates[k]}
                  onChange={(e) => update(["quarterGates", k], Number(e.target.value))}
                />
              </div>
            ))}
            <div className="text-xs text-muted-foreground">0.25 = 25% of annual minimum by end of Q1, etc.</div>
          </div>

          <div className="space-y-3">
            <div className="font-semibold">Dividend “+” spend bands</div>
            <div className="text-xs text-muted-foreground -mt-1">These bands only affect dividend rate — not pricing tier.</div>

            <div className="rounded-xl border border-slate-200/60 p-3">
              <div className="font-medium">Silver+ band</div>
              <div className="grid grid-cols-2 gap-2 mt-2">
                <div>
                  <Label className="text-xs">Min</Label>
                  <Input
                    className="rounded-xl"
                    type="number"
                    value={settings.plusBands.SilverPlus.min}
                    onChange={(e) => update(["plusBands", "SilverPlus", "min"], Number(e.target.value))}
                  />
                </div>
                <div>
                  <Label className="text-xs">Max</Label>
                  <Input
                    className="rounded-xl"
                    type="number"
                    value={settings.plusBands.SilverPlus.max}
                    onChange={(e) => update(["plusBands", "SilverPlus", "max"], Number(e.target.value))}
                  />
                </div>
              </div>
            </div>

            <div className="rounded-xl border border-slate-200/60 p-3">
              <div className="font-medium">Gold+ band</div>
              <div className="grid grid-cols-2 gap-2 mt-2">
                <div>
                  <Label className="text-xs">Min</Label>
                  <Input
                    className="rounded-xl"
                    type="number"
                    value={settings.plusBands.GoldPlus.min}
                    onChange={(e) => update(["plusBands", "GoldPlus", "min"], Number(e.target.value))}
                  />
                </div>
                <div>
                  <Label className="text-xs">Max</Label>
                  <Input
                    className="rounded-xl"
                    type="number"
                    value={settings.plusBands.GoldPlus.max}
                    onChange={(e) => update(["plusBands", "GoldPlus", "max"], Number(e.target.value))}
                  />
                </div>
              </div>
            </div>

            <div className="rounded-xl border border-slate-200/60 p-3">
              <div className="font-medium">Platinum+ band</div>
              <div className="grid grid-cols-2 gap-2 mt-2">
                <div>
                  <Label className="text-xs">Min</Label>
                  <Input
                    className="rounded-xl"
                    type="number"
                    value={settings.plusBands.PlatinumPlus.min}
                    onChange={(e) => update(["plusBands", "PlatinumPlus", "min"], Number(e.target.value))}
                  />
                </div>
                <div>
                  <Label className="text-xs">Max</Label>
                  <Input
                    className="rounded-xl"
                    type="number"
                    value={settings.plusBands.PlatinumPlus.max}
                    onChange={(e) => update(["plusBands", "PlatinumPlus", "max"], Number(e.target.value))}
                  />
                </div>
              </div>
            </div>
          </div>

          <div className="space-y-3">
            <div className="font-semibold">Activation rules</div>
            <div className="grid grid-cols-2 items-center gap-2">
              <Label>Target %</Label>
              <Input
                className="rounded-xl"
                type="number"
                step="0.05"
                value={settings.activation.targetPct}
                onChange={(e) => update(["activation", "targetPct"], Number(e.target.value))}
              />
            </div>
            <div className="grid grid-cols-2 items-center gap-2">
              <Label>Bonus $</Label>
              <Input
                className="rounded-xl"
                type="number"
                value={settings.activation.bonusAmount}
                onChange={(e) => update(["activation", "bonusAmount"], Number(e.target.value))}
              />
            </div>
            <div className="grid grid-cols-2 items-center gap-2">
              <Label>Bonus threshold</Label>
              <Input
                className="rounded-xl"
                type="number"
                step="0.05"
                value={settings.activation.bonusThreshold}
                onChange={(e) => update(["activation", "bonusThreshold"], Number(e.target.value))}
              />
            </div>
            <div className="grid grid-cols-2 items-center gap-2">
              <Label>Qualify floor</Label>
              <Input
                className="rounded-xl"
                type="number"
                step="0.05"
                value={settings.activation.noBonusFloor}
                onChange={(e) => update(["activation", "noBonusFloor"], Number(e.target.value))}
              />
            </div>
            <div className="text-xs text-muted-foreground">Example: 0.25 target, 1.0 bonus, 0.9 qualify floor.</div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function computeScenarioMetrics(s, settings) {
  const annualTotal = Object.values(s.spend).reduce((sum, v) => sum + Number(v || 0), 0);
  const pricingFamily = pricingTierFromAnnual(annualTotal, settings.mins);
  const dividendLevel = dividendLevelFromSpend(pricingFamily, annualTotal, settings);
  const activation = activationStatus(s.memberType, s.enrolledTier, Number(s.spend90d || 0), settings);
  const freeGoods = quarterlyFreeGoods(s.spend, pricingFamily, settings);
  const dividend = growthDividend({
    annualTotal,
    baselinePY: Number(s.baselinePY || 0),
    pricingFamily,
    dividendLevel,
    settings,
  });
  const royalty = royaltyPayout({
    annualTotal,
    pricingFamily,
    consecutiveYears: Number(s.consecutiveYears || 0),
    settings,
  });

  const gaps = computeGaps(annualTotal, pricingFamily, dividendLevel, settings);

  return { annualTotal, pricingFamily, dividendLevel, activation, freeGoods, dividend, royalty, gaps };
}

function CompareBar({ pinned, settings }) {
  const rows = useMemo(() => {
    return pinned.map((s) => {
      const m = computeScenarioMetrics(s, settings);
      return {
        id: s.id,
        name: s.name,
        pricing: m.pricingFamily,
        divLevel: m.dividendLevel,
        spend: m.annualTotal,
        freeGoods: m.freeGoods.totalEarned,
        dividend: m.dividend.payout,
        activation: m.activation.status,
      };
    });
  }, [pinned, settings]);

  if (pinned.length === 0) return null;

  return (
    <Card className="rounded-2xl border-slate-200/60 bg-white/70 backdrop-blur supports-[backdrop-filter]:bg-white/60">
      <CardContent className="p-4">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <div>
            <div className="text-sm font-semibold">Compare mode</div>
            <div className="text-xs text-muted-foreground">Pinned scenarios (up to 4 recommended)</div>
          </div>
          <Badge className="bg-sky-600 hover:bg-sky-600">{pinned.length} pinned</Badge>
        </div>

        <div className="mt-3 overflow-auto">
          <table className="min-w-[900px] w-full text-sm">
            <thead>
              <tr className="text-left text-muted-foreground">
                <th className="py-2">Scenario</th>
                <th className="py-2">Pricing</th>
                <th className="py-2">Dividend Level</th>
                <th className="py-2">Annual Spend</th>
                <th className="py-2">Free Goods (YTD)</th>
                <th className="py-2">Dividend</th>
                <th className="py-2">Activation</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.id} className="border-t border-slate-200/60">
                  <td className="py-2 font-medium">{r.name}</td>
                  <td className="py-2">{r.pricing}</td>
                  <td className="py-2">{r.divLevel}</td>
                  <td className="py-2">{fmtMoney(r.spend)}</td>
                  <td className="py-2">{fmtMoney(r.freeGoods)}</td>
                  <td className="py-2">{fmtMoney(r.dividend)}</td>
                  <td className="py-2">{r.activation}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  );
}

export default function App() {
  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
  const [scenarios, setScenarios] = useState([
    makeScenario({ name: "Silver Growth Example", enrolledTier: "Silver", memberType: "New" }),
    makeScenario({ name: "Gold Growth Example", enrolledTier: "Gold", memberType: "Existing" }),
    makeScenario({ name: "Platinum Growth Example", enrolledTier: "Platinum", memberType: "Existing" })
  ]);
  const [activeTab, setActiveTab] = useState("scenarios");

  // print mode
  const [printPayload, setPrintPayload] = useState(null);

  // Load persisted
  useEffect(() => {
    const loadedSettings = loadJSON(SETTINGS_KEY, DEFAULT_SETTINGS);
    // shallow merge with defaults
    const merged = {
      ...DEFAULT_SETTINGS,
      ...loadedSettings,
      mins: { ...DEFAULT_SETTINGS.mins, ...(loadedSettings?.mins || {}) },
      freeGoodsRate: { ...DEFAULT_SETTINGS.freeGoodsRate, ...(loadedSettings?.freeGoodsRate || {}) },
      quarterGates: { ...DEFAULT_SETTINGS.quarterGates, ...(loadedSettings?.quarterGates || {}) },
      activation: { ...DEFAULT_SETTINGS.activation, ...(loadedSettings?.activation || {}) },
      dividendRate: { ...DEFAULT_SETTINGS.dividendRate, ...(loadedSettings?.dividendRate || {}) },
      plusBands: { ...DEFAULT_SETTINGS.plusBands, ...(loadedSettings?.plusBands || {}) },
      royalty: { ...DEFAULT_SETTINGS.royalty, ...(loadedSettings?.royalty || {}) },
      pricingReview: { ...DEFAULT_SETTINGS.pricingReview, ...(loadedSettings?.pricingReview || {}) },
    };
    setSettings(merged);

    const loadedScenarios = loadJSON(STORAGE_KEY, null);
    if (Array.isArray(loadedScenarios) && loadedScenarios.length) {
      // backfill pinned flag
      setScenarios(loadedScenarios.map((s) => ({ ...makeScenario({ ...s, id: s.id ?? uuid() }), ...s }))); 
    }
  }, []);

  useEffect(() => {
    saveJSON(STORAGE_KEY, scenarios);
  }, [scenarios]);

  useEffect(() => {
    saveJSON(SETTINGS_KEY, settings);
  }, [settings]);

  const pinned = useMemo(() => scenarios.filter((s) => s.pinned), [scenarios]);

  const addScenario = () => {
    const n = scenarios.length + 1;
    setScenarios((prev) => [...prev, makeScenario({ name: `Scenario ${n}` })]);
  };

  const duplicateScenario = (s) => {
    const copy = makeScenario({
      name: `${s.name} (copy)`,
      memberType: s.memberType,
      enrolledTier: s.enrolledTier,
      spend: { ...s.spend },
      spend90d: s.spend90d,
      baselinePY: s.baselinePY,
      consecutiveYears: s.consecutiveYears,
      notes: s.notes,
      pinned: false,
    });
    setScenarios((prev) => [...prev, copy]);
  };

  const deleteScenario = (s) => setScenarios((prev) => prev.filter((x) => x.id !== s.id));

  const resetScenario = (s) => {
    setScenarios((prev) => prev.map((x) => (x.id === s.id ? makeScenario({ id: x.id, name: x.name }) : x)));
  };

  const updateScenario = (next) => setScenarios((prev) => prev.map((x) => (x.id === next.id ? next : x)));

  const renameScenario = (next) => updateScenario(next);

  function loadExamples() {
    setScenarios([
      makeScenario({ name: "Silver Growth Example", enrolledTier: "Silver", memberType: "New" }),
      makeScenario({ name: "Gold Growth Example", enrolledTier: "Gold", memberType: "Existing" }),
      makeScenario({ name: "Platinum Growth Example", enrolledTier: "Platinum", memberType: "Existing" }),
    ]);
  }

  const clearAll = () => {
    if (!confirm("Reset ALL scenarios to blank inputs?")) return;
    setScenarios((prev) => prev.map((s) => makeScenario({ id: s.id, name: s.name })));
  };

  const headerStats = useMemo(() => {
    const totals = scenarios.map((s) => Object.values(s.spend).reduce((sum, v) => sum + Number(v || 0), 0));
    const sum = totals.reduce((a, b) => a + b, 0);
    const avg = totals.length ? sum / totals.length : 0;
    const min = totals.length ? Math.min(...totals) : 0;
    const max = totals.length ? Math.max(...totals) : 0;
    return { avg, min, max };
  }, [scenarios]);

  const printScenario = (scenario) => {
    const m = computeScenarioMetrics(scenario, settings);
    const qOrder = ["Q1", "Q2", "Q3", "Q4"];
    const qRows = qOrder.map((q) => ({
      q,
      ...m.freeGoods.byQuarter[q],
    }));

    const tiles = [
      { label: "Annual Spend", value: fmtMoney(m.annualTotal), sub: `Pricing: ${m.pricingFamily}` },
      {
        label: "Dividend Level",
        value: m.pricingFamily === "Not Qualified" ? "N/A" : m.dividendLevel,
        sub: m.pricingFamily === "Not Qualified" ? "Below minimum" : `Rate ${fmtPct((settings.dividendRate[m.dividendLevel] || 0) * 100)}`,
      },
      { label: "Free Goods (YTD)", value: fmtMoney(m.freeGoods.totalEarned), sub: `Rate ${fmtPct(m.freeGoods.rate * 100)}` },
    ];

    setPrintPayload({
      name: scenario.name,
      memberType: scenario.memberType,
      enrolledTier: scenario.enrolledTier,
      spend90d: Number(scenario.spend90d || 0),
      baselinePY: Number(scenario.baselinePY || 0),
      consecutiveYears: Number(scenario.consecutiveYears || 0),
      spend: scenario.spend,
      freeGoodsYTD: m.freeGoods.totalEarned,
      dividendPayout: m.dividend.payout,
      dividendExplain: m.dividend.eligible ? `Growth ${fmtMoney(m.dividend.growth)} @ ${fmtPct(m.dividend.rate * 100)}` : m.dividend.reason,
      royaltyPayout: m.royalty.payout,
      royaltyExplain: m.royalty.eligible ? `${m.royalty.milestone}-year @ ${fmtPct(m.royalty.rate * 100)}` : "Not eligible",
      notes: scenario.notes,
      qRows,
      tiles,
    });

    // Delay to allow payload to render, then print
    setTimeout(() => window.print(), 50);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-sky-50">
      {/* Print Sheet */}
      <div className="hidden print:block">{printPayload ? <PrintSheet payload={printPayload} /> : null}</div>

      {/* App UI (hidden in print) */}
      <div className="print:hidden">
        <div className="mx-auto max-w-7xl p-4 md:p-8">
          {/* Header */}
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
            <div>
              <div className="flex items-center gap-2">
                <div className="h-10 w-10 rounded-2xl bg-sky-600/15 flex items-center justify-center border border-sky-200">
                  <Settings className="h-5 w-5 text-sky-700" />
                </div>
                <h1 className="text-2xl md:text-3xl font-semibold">Accelerate 3.0 — Scenario Calculator</h1>
                <Badge className="bg-sky-600 hover:bg-sky-600">Team Tool</Badge>
              </div>
              <p className="text-sm text-muted-foreground mt-2 max-w-2xl">
                Interactive multi-scenario testing. Pricing tiers are Silver/Gold/Platinum. “+” levels only increase dividend rate.
              </p>
              <div className="mt-2 text-xs text-muted-foreground">
                Dividend + bands: Silver+ {fmtMoney(settings.plusBands.SilverPlus.min)}–{fmtMoney(settings.plusBands.SilverPlus.max)} • Gold+{" "}
                {fmtMoney(settings.plusBands.GoldPlus.min)}–{fmtMoney(settings.plusBands.GoldPlus.max)} • Platinum+{" "}
                {fmtMoney(settings.plusBands.PlatinumPlus.min)}–{fmtMoney(settings.plusBands.PlatinumPlus.max)}
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <Button className="rounded-xl bg-sky-600 hover:bg-sky-700" onClick={addScenario}>
                <Plus className="h-4 w-4 mr-2" /> Add scenario
              </Button>
              <Button variant="outline" className="rounded-xl" onClick={loadExamples}>
                <Wand2 className="h-4 w-4 mr-2" /> Load examples
              </Button>
              <Button variant="outline" className="rounded-xl" onClick={clearAll}>
                <RotateCcw className="h-4 w-4 mr-2" /> Reset all
              </Button>
            </div>
          </div>

          {/* Overview */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-6">
            <Card className="rounded-2xl border-slate-200/60 bg-white/70 backdrop-blur">
              <CardContent className="p-4">
                <div className="text-xs text-muted-foreground">Scenarios</div>
                <div className="text-2xl font-semibold mt-1">{scenarios.length}</div>
              </CardContent>
            </Card>
            <Card className="rounded-2xl border-slate-200/60 bg-white/70 backdrop-blur">
              <CardContent className="p-4">
                <div className="text-xs text-muted-foreground">Avg annual spend</div>
                <div className="text-2xl font-semibold mt-1">{fmtMoney(headerStats.avg)}</div>
              </CardContent>
            </Card>
            <Card className="rounded-2xl border-slate-200/60 bg-white/70 backdrop-blur">
              <CardContent className="p-4">
                <div className="text-xs text-muted-foreground">Min / Max spend</div>
                <div className="text-lg font-semibold mt-2">
                  {fmtMoney(headerStats.min)} / {fmtMoney(headerStats.max)}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Compare Bar */}
          <div className="mt-4">
            <CompareBar pinned={pinned} settings={settings} />
          </div>

          <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-6">
            <TabsList className="rounded-2xl">
              <TabsTrigger value="scenarios" className="rounded-xl">
                Scenarios
              </TabsTrigger>
              <TabsTrigger value="settings" className="rounded-xl">
                Admin Settings
              </TabsTrigger>
            </TabsList>

            <TabsContent value="scenarios" className="mt-4">
              <div className="space-y-4">
                {scenarios.map((s) => (
                  <ScenarioCard
                    key={s.id}
                    scenario={s}
                    settings={settings}
                    onChange={updateScenario}
                    onDuplicate={duplicateScenario}
                    onDelete={deleteScenario}
                    onRename={renameScenario}
                    onReset={resetScenario}
                    onPrint={printScenario}
                  />
                ))}
              </div>
            </TabsContent>

            <TabsContent value="settings" className="mt-4">
              <SettingsPanel settings={settings} setSettings={setSettings} />
            </TabsContent>
          </Tabs>

          <div className="text-xs text-muted-foreground mt-8">
            Print/Save PDF: open a scenario menu → “Print / Save PDF”. In the print dialog, choose “Save as PDF”.
          </div>
        </div>
      </div>

      {/* Print CSS */}
      <style>{`
        @media print {
          .print\:hidden { display: none !important; }
          .print\:block { display: block !important; }
          @page { margin: 12mm; }
          body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
      `}</style>
    </div>
  );
}