"use client";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { ExpandableSales, MonthlyTrend, PeakHeatmap, RxOtcSplit, type MonthSales, type SaleDetail } from "@/components/medora/sales-reports";
import { toast } from "@/components/ui/toast";

const SALES: SaleDetail[] = [
  {
    receipt: "RCP-005214",
    time: "20 Oct, 17:42",
    cashier: "Kevin Mutua",
    customer: "Mary Wambui",
    items: [
      { name: "Augmentin 625 mg, 14s", qty: 1, price: 1260 },
      { name: "Panadol 500 mg, strip", qty: 2, price: 58, discount: 3 },
    ],
    vat: 219.2,
    payments: [{ method: "M-Pesa", ref: "SJK4L8P2QX", amount: 1589.2 }],
    returns: [],
  },
  {
    receipt: "RCP-005209",
    time: "20 Oct, 15:10",
    cashier: "Faith Njeri",
    items: [
      { name: "Nivea Soft cream 200 ml", qty: 2, price: 610 },
      { name: "Calamine lotion 100 ml", qty: 1, price: 240 },
    ],
    vat: 233.6,
    payments: [
      { method: "Cash", amount: 1000 },
      { method: "M-Pesa", ref: "SJK4L1A9ZT", amount: 693.6 },
    ],
    returns: [{ ref: "CN-2026-0094", item: "Nivea Soft cream 200 ml", qty: 1, amount: 707.6, reason: "Wrong variant; customer wanted the 100 ml" }],
  },
  {
    receipt: "RCP-005201",
    time: "20 Oct, 11:05",
    cashier: "Kevin Mutua",
    customer: "Aga Khan Hospital",
    items: [{ name: "Metformin 500 mg, 100s", qty: 4, price: 450 }],
    vat: 288,
    payments: [{ method: "Credit", amount: 2088 }],
    returns: [{ ref: "CN-2026-0091", item: "Metformin 500 mg, 100s", qty: 4, amount: 2088, reason: "Duplicate order; whole sale reversed" }],
  },
];

const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const HOURS = Array.from({ length: 15 }, (_, i) => i + 7); // 07:00 to 21:00
// Deterministic mock: a lunchtime bump, an evening peak, a busier Saturday and a quiet Sunday morning.
const COUNTS = DAYS.map((_, d) =>
  HOURS.map((h) => {
    if (d === 6 && h < 10) return 0;
    const base = 6 + (h >= 12 && h <= 13 ? 8 : 0) + (h >= 17 && h <= 19 ? 14 : 0) - (h >= 20 ? 4 : 0);
    const day = d === 5 ? 1.5 : d === 6 ? 0.6 : 1 + (d % 3) * 0.1;
    return Math.max(0, Math.round(base * day + ((d * 7 + h * 3) % 5) - 2));
  }),
);

const MONTHS: MonthSales[] = [
  { label: "May", net: 1402300, byMethod: { "M-Pesa": 902100, Cash: 472600, Card: 136400, Credit: 115600 } },
  { label: "Jun", net: 1388900, byMethod: { "M-Pesa": 893500, Cash: 461900, Card: 140100, Credit: 115600 } },
  { label: "Jul", net: 1511200, byMethod: { "M-Pesa": 978300, Cash: 489700, Card: 153800, Credit: 131200 } },
  { label: "Aug", net: 1460200, byMethod: { "M-Pesa": 951200, Cash: 466300, Card: 148900, Credit: 127400 } },
  { label: "Sep", net: 1502000, byMethod: { "M-Pesa": 989600, Cash: 471000, Card: 151100, Credit: 130600 } },
  { label: "Oct", net: 1107400, partial: true, byMethod: { "M-Pesa": 741200, Cash: 398500, Card: 96400, Credit: 48500 } },
];

export function SalesReportsSection() {
  return (
    <Section
      id="sales-reports"
      title="Sales: expandable list, peak times, Rx vs OTC and monthly trend"
      description="RP-08, RP-11 and RP-12. Each chart states its period and basis, has a Table view with the same figures, and uses a palette checked for colour-blind separation. Colour never carries meaning on its own."
    >
      <Example title="Expandable sales report" description="20 Oct 2026, Westlands Main. Open a sale to see its items, payments and returns; one was part returned, one fully reversed">
        <ExpandableSales sales={SALES} onOpenSale={(r) => toast.add({ title: `Opens ${r}` })} />
      </Example>
      <Example title="Peak trading times" description="Sales by weekday and hour, last 4 weeks, Westlands Main. One teal scale: darker is busier, blank is none">
        <PeakHeatmap days={DAYS} hours={HOURS} counts={COUNTS} />
      </Example>
      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Prescription vs over the counter" description="1–20 Oct 2026, all branches">
          <RxOtcSplit rx={412300} otc={695100} rxProducts={38} products={214} />
        </Example>
        <Example title="Prescription vs over the counter: nothing marked Rx" description="The empty state when no product has the Rx box ticked">
          <RxOtcSplit rx={0} otc={1107400} rxProducts={0} products={214} />
        </Example>
      </div>
      <Example title="Monthly trend" description="May to October 2026, all branches. Net sales and takings by payment method on separate axes; October is still in progress">
        <MonthlyTrend months={MONTHS} />
      </Example>
    </Section>
  );
}