"use client";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { AgeingChart, ExpiryChart, PeriodTrend, PLWaterfall, StockValueChart, type TrendPoint } from "@/components/medora/report-charts";

// 1–20 Oct against 1–20 Sep, VAT-inclusive takings. Totals are pinned to the figures used across the
// design system: 1,284,600 this period (dashboard revenue) and 1,207,300 before (+6.4%).
const TREND: TrendPoint[] = (() => {
  const days = Array.from({ length: 20 }, (_, i) => i + 1);
  const shape = (d: number, seed: number) => 1 + 0.18 * Math.sin((d + seed) / 2.2) + ((d * 7 + seed) % 5) * 0.03 + ([6, 13, 20].includes(d) ? 0.22 : 0);
  const scale = (target: number, seed: number) => {
    const raw = days.map((d) => shape(d, seed));
    const sum = raw.reduce((s, v) => s + v, 0);
    const vals = raw.map((v) => Math.round((v / sum) * target));
    vals[vals.length - 1] += target - vals.reduce((s, v) => s + v, 0);
    return vals;
  };
  const cur = scale(1284600, 0);
  const prev = scale(1207300, 3);
  return days.map((d, i) => ({ label: `${d} Oct`, current: cur[i], previous: prev[i] }));
})();

export function SalesTrendSection() {
  return (
    <Section id="sales-trend" title="Sales trend against the previous period" description="RP-11 and DB-09: this period's daily takings against the same days last period. The comparison is grey and dashed, so this period reads first; the totals and change are written above the chart.">
      <Example title="Sales trend" description="1–20 Oct 2026 against 1–20 Sep 2026, all branches, VAT-inclusive">
        <PeriodTrend points={TREND} currentLabel="1–20 Oct" previousLabel="1–20 Sep" />
      </Example>
    </Section>
  );
}

export function AccountsChartsSection() {
  return (
    <Section id="accounts-charts" title="Profit and loss walk, and receivables and payables by age" description="AC-05 and AC-09/AC-11. The walk refuses to draw figures that don't reconcile. Age is ordered, so it uses the teal ramp: darker is older.">
      <Example title="Profit and loss" description="1–20 Oct 2026, all branches">
        <PLWaterfall
          steps={[
            { label: "Gross sales", amount: 1284600, kind: "total" },
            { label: "VAT", amount: 177200, kind: "less" },
            { label: "Net revenue", amount: 1107400, kind: "total" },
            { label: "Cost of goods", amount: 665100, kind: "less" },
            { label: "Gross profit", amount: 442300, kind: "total" },
            { label: "Expenses", amount: 194350, kind: "less" },
            { label: "Net profit", amount: 247950, kind: "total" },
          ]}
        />
      </Example>
      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Owed to us and we owe, by age" description="As at 20 Oct 2026, all branches">
          <AgeingChart
            rows={[
              { label: "Owed to us", buckets: [58200, 21300, 9800, 7120] },
              { label: "We owe", buckets: [92400, 31870, 14100, 7900] },
            ]}
          />
        </Example>
        <Example title="Profit and loss: figures that don't reconcile" description="Gross profit typed as 452,300: the walk says so instead of drawing it">
          <PLWaterfall
            steps={[
              { label: "Net revenue", amount: 1107400, kind: "total" },
              { label: "Cost of goods", amount: 665100, kind: "less" },
              { label: "Gross profit", amount: 452300, kind: "total" },
            ]}
          />
        </Example>
      </div>
    </Section>
  );
}

export function StockChartsSection() {
  return (
    <Section id="stock-charts" title="Stock value by branch and expiring stock" description="RP-03, DB-06 and RP-02. Values come from batches at their own cost. Expiry uses emphasis: what needs action now is coloured, later months are grey.">
      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Stock value by branch" description="Now, from batches">
          <StockValueChart
            rows={[
              { branch: "Westlands", cost: 298400, selling: 447200 },
              { branch: "Kilimani", cost: 162310, selling: 242800 },
              { branch: "Nyali", cost: 141900, selling: 212100 },
              { branch: "Milimani", cost: 81600, selling: 121800 },
            ]}
          />
        </Example>
        <Example title="Expiring stock by month" description="Value at cost, all branches, as at 20 Oct 2026">
          <ExpiryChart
            months={[
              { label: "Expired", value: 6300, batches: 3, expired: true },
              { label: "Oct", value: 12450, batches: 4 },
              { label: "Nov", value: 18900, batches: 5 },
              { label: "Dec", value: 9800, batches: 2 },
              { label: "Jan", value: 22400, batches: 6 },
              { label: "Feb", value: 14200, batches: 3 },
              { label: "Mar", value: 31600, batches: 7 },
            ]}
          />
        </Example>
      </div>
    </Section>
  );
}