"use client";

import { AlertTriangleIcon, InfoIcon, PackageIcon, PackageSearchIcon, PillIcon, SearchXIcon, ShieldCheckIcon } from "lucide-react";

import { Example } from "@/components/design-system/example";
import { Section } from "@/components/design-system/section";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle } from "@/components/ui/item";
import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import { formatKES, initials, products, recentActivity, staff, stockStatus, suppliers, topProducts } from "@/lib/mock-data";
import { StatusBadge, stockTone } from "../status";

const alertTone = {
  warning: "border-status-warning-border bg-status-warning-bg text-status-warning-text *:data-[slot=alert-description]:text-status-warning-text",
  success: "border-status-success-border bg-status-success-bg text-status-success-text *:data-[slot=alert-description]:text-status-success-text",
  info: "border-status-info-border bg-status-info-bg text-status-info-text *:data-[slot=alert-description]:text-status-info-text",
} as const;

const hoverProduct = products.find((p) => p.type === "Product" && p.requiresRx) ?? products[0];
const covers = products
  .filter((p) => p.type === "Product")
  .slice(0, 4)
  .map((p) => ({ name: p.name, cover: Math.min(100, Math.round((p.stock / (p.minStock * 3 || 1)) * 100)), stock: p.stock }));
const carouselProducts = topProducts.slice(0, 6);

export function OtherSection() {
  return (
    <Section id="other" title="Avatars, progress, feedback and lists" description="Smaller display parts: identity, measures, loading and empty states, grouped content and previews.">
      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Avatar and avatar group" description="Initials fallback; sm, default, lg">
          <div className="flex flex-wrap items-center gap-6">
            <div className="flex items-center gap-2">
              {(["sm", "default", "lg"] as const).map((s) => (
                <Avatar key={s} size={s}>
                  <AvatarFallback>{initials(staff[0].name)}</AvatarFallback>
                </Avatar>
              ))}
            </div>
            <AvatarGroup>
              {staff.slice(0, 4).map((u) => (
                <Avatar key={u.id}>
                  <AvatarFallback>{initials(u.name)}</AvatarFallback>
                </Avatar>
              ))}
              <AvatarGroupCount>+{staff.length - 4}</AvatarGroupCount>
            </AvatarGroup>
          </div>
        </Example>

        <Example title="Progress" description="Stock cover against three times the reorder level">
          <div className="space-y-4">
            {covers.map((c) => (
              <Progress key={c.name} value={c.cover}>
                <ProgressLabel>{c.name}</ProgressLabel>
                <ProgressValue>{() => `${c.stock} units`}</ProgressValue>
              </Progress>
            ))}
          </div>
        </Example>
      </div>

      <Example title="Skeleton" description="Loading placeholders for a card, a list row and a text block">
        <div className="grid gap-6 md:grid-cols-3">
          <div className="space-y-3 rounded-lg border border-border p-4">
            <Skeleton className="h-3 w-24" />
            <Skeleton className="h-7 w-32" />
            <Skeleton className="h-10 w-full" />
          </div>
          <div className="flex items-center gap-3">
            <Skeleton className="size-10 rounded-full" />
            <div className="flex-1 space-y-2">
              <Skeleton className="h-4 w-3/4" />
              <Skeleton className="h-3 w-1/2" />
            </div>
          </div>
          <div className="space-y-2">
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-2/3" />
          </div>
        </div>
      </Example>

      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Empty: no products" description="First-run state with a primary action">
          <Empty className="border border-dashed border-border">
            <EmptyHeader>
              <EmptyMedia variant="icon">
                <PackageIcon />
              </EmptyMedia>
              <EmptyTitle>No products yet</EmptyTitle>
              <EmptyDescription>Add your first product or import a list to start tracking stock.</EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
              <div className="flex gap-2">
                <Button size="sm">Add product</Button>
                <Button size="sm" variant="outline">
                  Import CSV
                </Button>
              </div>
            </EmptyContent>
          </Empty>
        </Example>
        <Example title="Empty: no results" description="Search with nothing found">
          <Empty className="border border-dashed border-border">
            <EmptyHeader>
              <EmptyMedia variant="icon">
                <SearchXIcon />
              </EmptyMedia>
              <EmptyTitle>No results for &quot;amoxcillin&quot;</EmptyTitle>
              <EmptyDescription>Check the spelling or search by generic name or barcode.</EmptyDescription>
            </EmptyHeader>
            <EmptyContent>
              <Button size="sm" variant="outline">
                Clear search
              </Button>
            </EmptyContent>
          </Empty>
        </Example>
      </div>

      <Example title="Alert" description="Default, destructive and status-coloured">
        <div className="space-y-3">
          <Alert>
            <InfoIcon />
            <AlertTitle>Shift closes at 20:00</AlertTitle>
            <AlertDescription>Count the till and submit your Z-report before leaving.</AlertDescription>
          </Alert>
          <Alert className={alertTone.warning}>
            <AlertTriangleIcon />
            <AlertTitle>5 batches expire within 30 days</AlertTitle>
            <AlertDescription>Review them in Inventory and consider discounting or returning to the supplier.</AlertDescription>
          </Alert>
          <Alert className={alertTone.success}>
            <ShieldCheckIcon />
            <AlertTitle>Purchase order PO-0412 received</AlertTitle>
            <AlertDescription>Stock levels have been updated.</AlertDescription>
          </Alert>
          <Alert variant="destructive">
            <AlertTriangleIcon />
            <AlertTitle>Sync failed</AlertTitle>
            <AlertDescription>3 sales are waiting to upload. Check the connection and retry.</AlertDescription>
          </Alert>
        </div>
      </Example>

      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Accordion" description="Single open item">
          <Accordion defaultValue={["a"]}>
            <AccordionItem value="a">
              <AccordionTrigger>How is stock valued?</AccordionTrigger>
              <AccordionContent>From open batches at the cost each batch was bought at, not the latest price.</AccordionContent>
            </AccordionItem>
            <AccordionItem value="b">
              <AccordionTrigger>Which batch is sold first?</AccordionTrigger>
              <AccordionContent>Earliest expiry first (FEFO); batches with no expiry go last.</AccordionContent>
            </AccordionItem>
            <AccordionItem value="c">
              <AccordionTrigger>Can a sale be put on hold?</AccordionTrigger>
              <AccordionContent>Yes. Held sales do not deduct stock and are not counted as revenue.</AccordionContent>
            </AccordionItem>
          </Accordion>
        </Example>

        <Example title="Collapsible and separator" description="Disclosure with a divider">
          <Collapsible>
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">Supplier lead times</span>
              <CollapsibleTrigger render={<Button variant="outline" size="sm" />}>Toggle</CollapsibleTrigger>
            </div>
            <Separator className="my-3" />
            <div className="text-sm">{suppliers[0].name}: {suppliers[0].leadDays} days</div>
            <CollapsibleContent>
              <ul className="mt-2 space-y-1 text-sm">
                {suppliers.slice(1).map((s) => (
                  <li key={s.id}>
                    {s.name}: <span className="tabular-nums">{s.leadDays} days</span>
                  </li>
                ))}
              </ul>
            </CollapsibleContent>
          </Collapsible>
        </Example>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Scroll area: recent activity" description="Fixed height, scrolls">
          <ScrollArea className="h-56 rounded-lg border border-border">
            <ul className="divide-y divide-border">
              {recentActivity.map((a) => {
                const u = staff.find((s) => s.id === a.userId);
                return (
                  <li key={a.id} className="px-3 py-2">
                    <div className="flex items-baseline justify-between gap-2">
                      <span className="text-sm font-medium">{a.action}</span>
                      <span className="text-xs tabular-nums text-muted-foreground">{a.at.slice(11)}</span>
                    </div>
                    <div className="text-xs text-muted-foreground">
                      {u?.name}, {a.detail}
                    </div>
                  </li>
                );
              })}
            </ul>
          </ScrollArea>
        </Example>

        <Example title="Item list" description="Icon, title, description, trailing figure">
          <ItemGroup>
            {topProducts.slice(0, 4).map((t, i) => {
              const p = products.find((x) => x.id === t.productId)!;
              return (
                <div key={t.productId}>
                  {i > 0 ? <ItemSeparator className="my-0" /> : null}
                  <Item size="sm">
                    <ItemMedia variant="icon">
                      <PillIcon />
                    </ItemMedia>
                    <ItemContent>
                      <ItemTitle>{t.name}</ItemTitle>
                      <ItemDescription>{p.category}, {t.units.toLocaleString("en-US")} units sold</ItemDescription>
                    </ItemContent>
                    <ItemActions className="tabular-nums">{formatKES(t.revenue)}</ItemActions>
                  </Item>
                </div>
              );
            })}
          </ItemGroup>
        </Example>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Example title="Carousel" description="Top sellers; arrows and drag">
          <div className="px-10">
            <Carousel opts={{ align: "start" }}>
              <CarouselContent>
                {carouselProducts.map((t) => (
                  <CarouselItem key={t.productId} className="basis-1/2">
                    <div className="rounded-lg border border-border p-3">
                      <div className="text-sm font-medium">{t.name}</div>
                      <div className="text-xs text-muted-foreground tabular-nums">{t.units.toLocaleString("en-US")} units</div>
                      <div className="mt-2 text-base font-semibold tabular-nums">{formatKES(t.revenue)}</div>
                    </div>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious />
              <CarouselNext />
            </Carousel>
          </div>
        </Example>

        <div className="space-y-4">
          <Example title="Aspect ratio" description="16:9 product image placeholder">
            <div className="max-w-xs">
              <AspectRatio ratio={16 / 9} className="flex items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground">
                <PackageSearchIcon className="size-8" aria-hidden />
              </AspectRatio>
            </div>
          </Example>
          <Example title="Hover card" description="Hover or focus the product name">
            <HoverCard>
              <HoverCardTrigger
                href="#"
                onClick={(e) => e.preventDefault()}
                className="text-sm font-medium text-primary underline underline-offset-4"
              >
                {hoverProduct.name}
              </HoverCardTrigger>
              <HoverCardContent className="w-72">
                <div className="space-y-2">
                  <div>
                    <div className="text-sm font-medium">{hoverProduct.name}</div>
                    <div className="text-xs text-muted-foreground">
                      {hoverProduct.generic} {hoverProduct.strength}, {hoverProduct.form}
                    </div>
                  </div>
                  <div className="flex items-center justify-between text-xs">
                    <span className="tabular-nums">{formatKES(hoverProduct.price, { decimals: true })}</span>
                    <StatusBadge tone={stockTone(stockStatus(hoverProduct))}>{stockStatus(hoverProduct)}</StatusBadge>
                  </div>
                  <div className="text-xs text-muted-foreground tabular-nums">
                    {hoverProduct.stock} in stock, shelf {hoverProduct.shelf}
                  </div>
                </div>
              </HoverCardContent>
            </HoverCard>
          </Example>
        </div>
      </div>
    </Section>
  );
}