"use client";

import * as React from "react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { InsightCards, InsightNarrative, MonthlyComparison, type MonthFigures, type Narrative } from "@/components/medora/insights";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const MONTHS: MonthFigures[] = [
  { month: "Oct 2026 (to 20th)", gross: 1284600, vat: 31560, transactions: 3412, partial: true },
  { month: "Sep 2026", gross: 1742300, vat: 41900, transactions: 4630 },
  { month: "Aug 2026", gross: 1693800, vat: 40210, transactions: 4511 },
  { month: "Jul 2026", gross: 1610450, vat: 39800, transactions: 4402 },
];
const LAST_YEAR: Record<string, MonthFigures> = {
  Sep: { month: "Sep 2025", gross: 1505000, vat: 36400, transactions: 4210 },
  Aug: { month: "Aug 2025", gross: 1720100, vat: 41100, transactions: 4655 },
  Jul: { month: "Jul 2025", gross: 1480300, vat: 35050, transactions: 4120 },
};

const NARRATIVE = "Amoxil 500 mg and Panadol strips will run out within two weeks at Westlands at the current rate; Kilimani holds enough Panadol to cover a transfer. Augmentin has sold out at every branch while still in demand. About KES 84,000 is tied up in overstocked creams and vitamins that would take over a year to sell, and three batches of Brufen expire before they are likely to sell.";

export function InsightsSection() {
  const [mode, setMode] = React.useState<"ready" | "loading" | "unavailable">("ready");
  const narrative: Narrative = mode === "ready" ? { state: "ready", text: NARRATIVE, at: "today 14:05" } : mode === "loading" ? { state: "loading" } : { state: "unavailable", reason: "No AI provider configured" };
  return (
    <Section
      id="insights"
      title="Monthly comparison and Stock Insights"
      description="Two report views moved from the dashboard. The monthly comparison sets each month against the one before and the same month last year, on net sales so it agrees with the P&L. Stock Insights groups products by days of stock (worked out, not predicted) and an optional AI-written paragraph summarises them; without it the cards stand alone."
    >
      <Example title="Sales by month" description="October isn't over, so it isn't compared. Changes are a word and arrow, not colour alone" bare>
        <div className="p-4">
          <MonthlyComparison months={MONTHS} lastYear={LAST_YEAR} />
        </div>
      </Example>
      <Example title="Stock Insights" description="Last 30 days, all branches. Switch the summary to Loading or Unavailable: the cards don't change" bare>
        <div className="space-y-3 p-4">
          <ToggleGroup variant="outline" size="sm" spacing={0} aria-label="Summary" value={[mode]} onValueChange={(v: string[]) => v[0] && setMode(v[0] as typeof mode)}>
            <ToggleGroupItem value="ready">Summary ready</ToggleGroupItem>
            <ToggleGroupItem value="loading">Loading</ToggleGroupItem>
            <ToggleGroupItem value="unavailable">Unavailable</ToggleGroupItem>
          </ToggleGroup>
          <InsightNarrative narrative={narrative} onRefresh={() => setMode("loading")} />
          <InsightCards
            buckets={{
              critical: {
                count: 6,
                items: [
                  { name: "Amoxil 500 mg", detail: "9 days left · order about 160", figure: "9 d" },
                  { name: "Panadol 500 mg, strips", detail: "12 days left · order about 540", figure: "12 d" },
                  { name: "Metformin 500 mg", detail: "21 days left · order about 70", figure: "21 d" },
                ],
              },
              stockouts: { count: 1, items: [{ name: "Augmentin 625 mg", detail: "0 in stock · sold 14 in 30 days" }] },
              revenueStars: { count: 4, items: [{ name: "Ensure vanilla 850 g", detail: "KES 96,400 revenue · 210 days of stock" }] },
              overstocked: {
                count: 5,
                cash: 84300,
                items: [
                  { name: "Nivea Soft cream 200 ml", detail: "2 years of stock", figure: "KES 31,200" },
                  { name: "Vitamin C 1000 mg", detail: "1.6 years of stock", figure: "KES 22,800" },
                ],
              },
              deadStock: { count: 3, cash: 12400, items: [{ name: "Calamine lotion 100 ml", detail: "No sales in 30 days", figure: "KES 5,600" }] },
              expiryRisk: { count: 3, items: [{ name: "Brufen 400 mg", detail: "3 batches expire within 60 days; 140 units won't sell in time" }] },
            }}
          />
        </div>
      </Example>
    </Section>
  );
}