"use client";

import * as React from "react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { BonusForm, BonusList, bonusProblems, type Bonus, type BonusDraft } from "@/components/medora/bonuses";
import { OnlineOrdersList, type OnlineOrderRow } from "@/components/medora/online-orders";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";

/* ------------------------------------ PS-11 ------------------------------------ */

const ORDERS: OnlineOrderRow[] = [
  { ref: "WEB-2026-0318", placedAt: "20 Oct, 13:42", branch: "Westlands Main", customer: "Mary Wambui", stage: "rx-review", fulfilment: "Delivery", tender: { method: "M-Pesa", status: "Paid" }, total: 1460, rx: true },
  { ref: "WEB-2026-0321", placedAt: "20 Oct, 14:10", branch: "Westlands Main", customer: "John Otieno", stage: "new", fulfilment: "Pickup", tender: { method: "Card", status: "Paid" }, total: 610 },
  { ref: "WEB-2026-0316", placedAt: "20 Oct, 11:05", branch: "Kilimani", customer: "Ali Hassan", stage: "packing", fulfilment: "Delivery", tender: { method: "Pay on delivery", status: "Unpaid" }, total: 2140 },
  { ref: "WEB-2026-0314", placedAt: "20 Oct, 10:20", branch: "Westlands Main", customer: "Faith Kamau", stage: "ready", fulfilment: "Pickup", tender: { method: "M-Pesa", status: "Paid" }, total: 900 },
  { ref: "WEB-2026-0311", placedAt: "20 Oct, 09:15", branch: "Westlands Main", customer: "Peter Mwangi", stage: "dispatched", fulfilment: "Delivery", tender: { method: "M-Pesa", status: "Paid" }, dispatchedBy: "Kevin Mutua", rider: "Sendy, Brian O.", total: 1789.2 },
  { ref: "WEB-2026-0307", placedAt: "19 Oct, 16:40", branch: "Kilimani", customer: "Nairobi West Clinic", stage: "delivered", fulfilment: "Delivery", tender: { method: "M-Pesa", status: "Paid" }, dispatchedBy: "Faith Njeri", rider: "Own rider, Musa K.", total: 5600 },
  { ref: "WEB-2026-0305", placedAt: "19 Oct, 12:00", branch: "Westlands Main", customer: "Grace Achieng", stage: "rx-rejected", fulfilment: "Delivery", tender: { method: "M-Pesa", status: "Refunded" }, total: 1260, rx: true },
];

export function OnlineOrdersSection() {
  return (
    <Section id="online-orders" title="Online orders" description="PS-11: every order from the online shop with its branch, stage, pickup or delivery, how it was paid and who dispatched it. Orders still to be packed or handed over open at the till; prescription orders go to review first.">
      <Example title="Online orders" description="19–20 Oct 2026, all branches. Filter to To fulfil, or one branch">
        <OnlineOrdersList rows={ORDERS} onFulfil={(ref) => toast.add({ title: `Opens ${ref} at the till`, description: "Items load into the basket with the order's prices; payment already taken is applied." })} />
      </Example>
    </Section>
  );
}

/* ------------------------------------ HR-17 ------------------------------------ */

const CLOSED = ["2026-09"];

export function BonusesSection() {
  const [bonuses, setBonuses] = React.useState<Bonus[]>([
    { id: "b1", employee: "Grace Wanjiru", month: "2026-09", type: "Performance", description: "Q3 stock-take accuracy", amount: 8000 },
    { id: "b2", employee: "Kevin Mutua", month: "2026-10", type: "Referral", description: "Referred Peter Kamau, completed probation", amount: 3000 },
  ]);
  const [d, setD] = React.useState<BonusDraft>({ employee: "Faith Njeri", month: "2026-09", type: "Festive", description: "", amount: "5000" });
  const [tried, setTried] = React.useState(false);
  const p = bonusProblems(d, CLOSED);
  return (
    <Section id="bonuses" title="Bonuses" description="HR-17: bonuses recorded per employee with month, type and description, paid in that month's payroll alongside commission. A month whose payroll is approved is closed; a late bonus goes in the next open month.">
      <Example title="Record a bonus" description="September's payroll is approved and there's no description yet: try Add">
        <BonusForm d={d} onChange={setD} employees={["Faith Njeri", "Grace Wanjiru", "Kevin Mutua", "Peter Kamau"]} months={["2026-09", "2026-10", "2026-11"]} closedMonths={CLOSED} problems={p} show={tried} />
        <div className="mt-3 flex justify-end">
          <Button
            onClick={() => {
              setTried(true);
              if (Object.keys(p).length) return;
              setBonuses((xs) => [...xs, { id: `b${Date.now()}`, employee: d.employee, month: d.month, type: d.type as Bonus["type"], description: d.description.trim(), amount: Number(d.amount.replace(/,/g, "")) }]);
              setD({ employee: "", month: "", type: "", description: "", amount: "" });
              setTried(false);
              toast.add({ title: "Bonus added", description: "It appears on the payslip and is taxed with salary." });
            }}
          >
            Add bonus
          </Button>
        </div>
      </Example>
      <Example title="Bonuses" description="Paid ones are in an approved run and can't be removed">
        <BonusList bonuses={bonuses} closedMonths={CLOSED} onRemove={(id) => setBonuses((xs) => xs.filter((b) => b.id !== id))} />
      </Example>
    </Section>
  );
}