"use client";

import { ArrowDownRightIcon, ArrowUpRightIcon, CalendarClockIcon, MoreHorizontalIcon, PhoneIcon, TruckIcon } from "lucide-react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import {
  customers,
  formatDate,
  formatKES,
  initials,
  kpis,
  prescriptions,
  products,
  salesByDay,
  staff,
  stockStatus,
  suppliers,
} from "@/lib/mock-data";
import { cn } from "@/lib/utils";
import { Sparkline } from "./charts";
import { StatusBadge, rxTone, stockTone, toneText } from "../status";

function Delta({ value, goodWhen = "up", suffix = "vs yesterday" }: { value: number; goodWhen?: "up" | "down"; suffix?: string }) {
  const up = value >= 0;
  const good = (goodWhen === "up") === up;
  const Icon = up ? ArrowUpRightIcon : ArrowDownRightIcon;
  return (
    <span className="inline-flex items-center gap-1 text-xs tabular-nums">
      <span className={cn("inline-flex items-center gap-0.5 font-medium", good ? toneText.success : toneText.error)}>
        <Icon className="size-3.5" />
        {Math.abs(value * 100).toFixed(1)}%
      </span>
      <span className="text-muted-foreground">{suffix}</span>
    </span>
  );
}

function StatTile({ label, value, children, spark }: { label: string; value: string; children?: React.ReactNode; spark?: number[] }) {
  return (
    <Card size="sm">
      <CardContent className="space-y-1">
        <div className="text-xs font-medium text-muted-foreground">{label}</div>
        <div className="text-2xl font-semibold tracking-tight tabular-nums">{value}</div>
        {children}
        {spark ? <Sparkline data={spark} className="mt-2 aspect-auto h-10 w-full" /> : null}
      </CardContent>
    </Card>
  );
}

const product = products.find((p) => p.type === "Product" && p.requiresRx) ?? products[0];
const customer = customers.find((c) => c.balance > 0) ?? customers[0];
const supplier = suppliers.find((s) => s.balanceOwed > 0) ?? suppliers[0];
const rx = prescriptions[5];

export function CardsSection() {
  const last14 = salesByDay.slice(-14).map((d) => d.revenue);
  const txns14 = salesByDay.slice(-14).map((d) => d.transactions);
  const pStatus = stockStatus(product);
  const cover = Math.min(100, Math.round((product.stock / (product.minStock * 3 || 1)) * 100));
  const pharmacist = staff.find((s) => s.id === rx.pharmacistId);

  return (
    <Section id="cards" title="Cards" description="Cards group a record or a measure. Hairline ring, no resting shadow, small radius.">
      <Example
        title="Basic card"
        description="Header, description, action, content, footer"
        code={`<Card>
  <CardHeader>
    <CardTitle>Branch stock value</CardTitle>
    <CardDescription>Valued at batch cost</CardDescription>
    <CardAction><Button variant="outline" size="sm">Export</Button></CardAction>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>...</CardFooter>
</Card>`}
      >
        <Card className="max-w-md">
          <CardHeader>
            <CardTitle>Westlands Main stock value</CardTitle>
            <CardDescription>Valued at batch cost, as of {formatDate("2026-10-20")}</CardDescription>
            <CardAction>
              <Button variant="outline" size="sm">
                Export
              </Button>
            </CardAction>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-semibold tabular-nums">{formatKES(kpis.monthRevenue * 0.42)}</div>
            <p className="mt-1 text-sm text-muted-foreground">Across {products.filter((p) => p.type === "Product").length} products and their open batches.</p>
          </CardContent>
          <CardFooter className="justify-between border-t border-border py-3 text-xs text-muted-foreground">
            <span>Updated 16:42</span>
            <Button variant="link" size="xs">
              View stock report
            </Button>
          </CardFooter>
        </Card>
      </Example>

      <Example title="Stat tiles" description="Label, figure, delta, optional sparkline">
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <StatTile label="Today's revenue" value={formatKES(kpis.todayRevenue)} spark={last14}>
            <Delta value={kpis.todayChange} />
          </StatTile>
          <StatTile label="Transactions" value={kpis.todayTransactions.toLocaleString("en-US")} spark={txns14}>
            <Delta value={kpis.weekChange} suffix="vs last week" />
          </StatTile>
          <StatTile label="Low stock" value={String(kpis.lowStockCount)}>
            <Delta value={0.125} goodWhen="down" suffix="vs last week" />
          </StatTile>
          <StatTile label="Expiring soon" value={String(kpis.expiringCount)}>
            <Delta value={-0.08} goodWhen="down" suffix="vs last week" />
          </StatTile>
        </div>
      </Example>

      <Example title="Entity cards" description="Product, customer, supplier, prescription">
        <div className="grid gap-4 md:grid-cols-2">
          <Card size="sm">
            <CardHeader>
              <CardTitle>{product.name}</CardTitle>
              <CardDescription>
                {product.generic} {product.strength}, {product.form}
              </CardDescription>
              <CardAction>
                <StatusBadge tone={stockTone(pStatus)}>{pStatus}</StatusBadge>
              </CardAction>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-baseline justify-between">
                <span className="text-lg font-semibold tabular-nums">{formatKES(product.price, { decimals: true })}</span>
                <span className="text-xs text-muted-foreground">Cost {formatKES(product.costPrice, { decimals: true })}</span>
              </div>
              <Progress value={cover}>
                <ProgressLabel>Stock cover</ProgressLabel>
                <ProgressValue>{() => `${product.stock} units`}</ProgressValue>
              </Progress>
              <div className="flex gap-1.5">
                <StatusBadge tone="info">{product.category}</StatusBadge>
                {product.requiresRx ? <StatusBadge tone="neutral">Rx only</StatusBadge> : null}
              </div>
            </CardContent>
            <CardFooter className="justify-between border-t border-border py-3 text-xs text-muted-foreground">
              <span>Shelf {product.shelf}</span>
              <span className="font-mono">{product.barcode}</span>
            </CardFooter>
          </Card>

          <Card size="sm">
            <CardHeader>
              <div className="flex items-center gap-3">
                <Avatar size="lg">
                  <AvatarFallback>{initials(customer.name)}</AvatarFallback>
                </Avatar>
                <div className="min-w-0">
                  <CardTitle>{customer.name}</CardTitle>
                  <CardDescription className="flex items-center gap-1">
                    <PhoneIcon className="size-3" />
                    {customer.phone}
                  </CardDescription>
                </div>
              </div>
              <CardAction>
                <Button variant="ghost" size="icon-sm" aria-label="Customer actions">
                  <MoreHorizontalIcon />
                </Button>
              </CardAction>
            </CardHeader>
            <CardContent>
              <dl className="grid grid-cols-3 gap-3 text-sm">
                <div>
                  <dt className="text-xs text-muted-foreground">Lifetime spend</dt>
                  <dd className="font-medium tabular-nums">{formatKES(customer.totalSpend)}</dd>
                </div>
                <div>
                  <dt className="text-xs text-muted-foreground">Visits</dt>
                  <dd className="font-medium tabular-nums">{customer.visits}</dd>
                </div>
                <div>
                  <dt className="text-xs text-muted-foreground">Balance owed</dt>
                  <dd className={cn("font-medium tabular-nums", customer.balance > 0 && toneText.warning)}>{formatKES(customer.balance)}</dd>
                </div>
              </dl>
            </CardContent>
            <CardFooter className="border-t border-border py-3 text-xs text-muted-foreground">
              Last visit {formatDate(customer.lastVisit)}. Credit limit {formatKES(customer.creditLimit)}.
            </CardFooter>
          </Card>

          <Card size="sm">
            <CardHeader>
              <CardTitle>{supplier.name}</CardTitle>
              <CardDescription>
                {supplier.contact}, {supplier.town}
              </CardDescription>
              <CardAction>
                <TruckIcon className="size-4 text-muted-foreground" aria-hidden />
              </CardAction>
            </CardHeader>
            <CardContent className="flex items-center gap-4 text-sm">
              <div>
                <div className="text-xs text-muted-foreground">Owed</div>
                <div className={cn("font-medium tabular-nums", supplier.balanceOwed > 0 && toneText.warning)}>{formatKES(supplier.balanceOwed)}</div>
              </div>
              <Separator orientation="vertical" className="h-8" />
              <div>
                <div className="text-xs text-muted-foreground">Lead time</div>
                <div className="font-medium tabular-nums">{supplier.leadDays} days</div>
              </div>
              <Separator orientation="vertical" className="h-8" />
              <div>
                <div className="text-xs text-muted-foreground">Phone</div>
                <div className="font-medium tabular-nums">{supplier.phone}</div>
              </div>
            </CardContent>
            <CardFooter className="gap-2 border-t border-border py-3">
              <Button size="sm">New order</Button>
              <Button size="sm" variant="outline">
                Record payment
              </Button>
            </CardFooter>
          </Card>

          <Card size="sm">
            <CardHeader>
              <CardTitle className="font-mono">{rx.ref}</CardTitle>
              <CardDescription>
                {rx.patient}, from {rx.prescriber}
              </CardDescription>
              <CardAction>
                <StatusBadge tone={rxTone(rx.status)}>{rx.status}</StatusBadge>
              </CardAction>
            </CardHeader>
            <CardContent>
              <ul className="divide-y divide-border text-sm">
                {rx.items.map((it, i) => {
                  const p = products.find((x) => x.id === it.productId);
                  return (
                    <li key={i} className="flex items-baseline justify-between gap-3 py-1.5 first:pt-0 last:pb-0">
                      <span>
                        <span className="font-medium">{p?.name}</span> <span className="text-muted-foreground">{it.dose}</span>
                      </span>
                      <span className="tabular-nums text-muted-foreground">x {it.quantity}</span>
                    </li>
                  );
                })}
              </ul>
            </CardContent>
            <CardFooter className="justify-between border-t border-border py-3 text-xs text-muted-foreground">
              <span className="inline-flex items-center gap-1">
                <CalendarClockIcon className="size-3.5" />
                {formatDate(rx.date)}
              </span>
              <span>{pharmacist ? `Pharmacist ${pharmacist.name}` : "Unassigned"}</span>
            </CardFooter>
          </Card>
        </div>
      </Example>
    </Section>
  );
}