import { PillIcon, TriangleAlertIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { daysBetween, localToday, stockStatus } from "@/lib/format";
import type { Product } from "@/lib/mock-data";
import { cn } from "@/lib/utils";

import { BatchChip, StockLevel } from "./stock";
import { Money } from "./money";
import { TONE_BOX, type Tone } from "./tones";

type ProductLike = Pick<Product, "name" | "strength" | "form" | "price" | "stock" | "minStock" | "requiresRx" | "type">;

function RxFlag() {
  return (
    <Badge variant="outline" className="rounded-md border-status-info-border bg-status-info-bg px-1 text-status-info-text" title="Prescription required">
      Rx
    </Badge>
  );
}

function StockBadge({ product }: { product: ProductLike }) {
  const status = stockStatus(product);
  const tone: Tone = status === "Out of stock" ? "error" : status === "Low stock" ? "warning" : "success";
  return (
    <Badge variant="outline" className={cn("rounded-md tabular-nums", TONE_BOX[tone])}>
      {status === "Out of stock" ? "Out of stock" : `${product.stock} in stock`}
    </Badge>
  );
}

/**
 * POS grid tile. A native button so it is keyboard reachable; out of stock products (not services) are disabled.
 * `expiryDate` shows a chip when the next batch is inside 90 days.
 */
export function ProductTile({
  product,
  expiryDate,
  today = localToday(),
  loading = false,
  selected = false,
}: {
  product: ProductLike;
  expiryDate?: string | null;
  today?: string;
  loading?: boolean;
  selected?: boolean;
}) {
  if (loading) {
    return (
      <div className="h-32 animate-pulse rounded-lg border border-border bg-card p-3" aria-hidden>
        <div className="h-3 w-3/4 rounded-sm bg-muted" />
        <div className="mt-2 h-3 w-1/3 rounded-sm bg-muted" />
        <div className="mt-8 h-4 w-1/2 rounded-sm bg-muted" />
      </div>
    );
  }
  const isService = product.type === "Service";
  const out = !isService && product.stock === 0;
  const showExpiry = !isService && expiryDate && daysBetween(today, expiryDate) < 90;
  return (
    <button
      type="button"
      disabled={out}
      aria-pressed={selected}
      className={cn(
        "flex h-32 w-full cursor-pointer flex-col justify-between rounded-lg border border-border bg-card p-3 text-left outline-none transition-colors hover:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted/50 disabled:opacity-60 disabled:hover:border-border",
        selected && "border-primary ring-1 ring-primary",
      )}
    >
      <span className="space-y-0.5">
        <span className="flex items-start justify-between gap-2">
          <span className="text-sm leading-tight font-medium text-foreground">{product.name}</span>
          {product.requiresRx ? <RxFlag /> : null}
        </span>
        <span className="block text-xs text-muted-foreground">
          {product.strength}
          {isService ? "" : `, ${product.form}`}
        </span>
      </span>
      <span className="space-y-1.5">
        <span className="flex flex-wrap gap-1">
          {isService ? (
            <Badge variant="outline" className={cn("rounded-md", TONE_BOX.neutral)}>
              SERVICE
            </Badge>
          ) : (
            <StockBadge product={product} />
          )}
          {showExpiry ? <BatchChip expiryDate={expiryDate} today={today} /> : null}
        </span>
        <Money amount={product.price} size="md" className="font-semibold" />
      </span>
    </button>
  );
}

/** Dense list row for search results and the inventory list. */
export function ProductRow({
  product,
  expiryDate,
  today = localToday(),
  disabled = false,
}: {
  product: ProductLike;
  expiryDate?: string | null;
  today?: string;
  disabled?: boolean;
}) {
  const isService = product.type === "Service";
  const out = !isService && product.stock === 0;
  const dim = disabled || out;
  return (
    <div className={cn("flex items-center gap-3 border-b border-border px-3 py-2 last:border-b-0", dim && "opacity-60")}>
      <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground">
        <PillIcon className="size-4" />
      </span>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className="truncate text-sm font-medium">{product.name}</span>
          {product.requiresRx ? <RxFlag /> : null}
          {isService ? (
            <Badge variant="outline" className={cn("rounded-md", TONE_BOX.neutral)}>
              SERVICE
            </Badge>
          ) : null}
        </div>
        <p className="text-xs text-muted-foreground">
          {product.strength}
          {isService ? "" : `, ${product.form}`}
        </p>
      </div>
      {!isService ? (
        <div className="hidden w-44 shrink-0 sm:block">
          <StockLevel stock={product.stock} minStock={product.minStock} />
        </div>
      ) : null}
      {!isService && expiryDate ? <BatchChip expiryDate={expiryDate} today={today} className="hidden md:inline-flex" /> : null}
      <Money amount={product.price} size="md" className="w-28 shrink-0 justify-end font-semibold" />
      {out ? <TriangleAlertIcon className="size-4 text-status-error-text" aria-label="Out of stock" /> : null}
    </div>
  );
}