"use client"

import { formatPrice } from "@repo/utils"
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog"
import { Badge } from "../ui/badge"
import { ScrollArea } from "../ui/scroll-area"
import { Separator } from "../ui/separator"
import type { Variant } from "./VariantsTable"

function InfoRow({
  label,
  children,
}: {
  label: string
  children?: React.ReactNode
}) {
  if (children == null || children === "") return null
  return (
    <div className="grid grid-cols-[140px_1fr] gap-2 py-0.5">
      <span className="pt-0.5 text-xs text-muted-foreground">{label}</span>
      <span className="break-words text-sm">{children}</span>
    </div>
  )
}

interface VariantPreviewDialogProps {
  variant: Variant | null
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function VariantPreviewDialog({
  variant,
  open,
  onOpenChange,
}: VariantPreviewDialogProps) {
  if (!variant) return null

  const hasDimensions =
    variant.length != null || variant.width != null || variant.height != null

  const hasAttributes =
    variant.attributes?.size ||
    variant.attributes?.flavor ||
    variant.attributes?.color

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{variant.name}</DialogTitle>
        </DialogHeader>

        <ScrollArea className="max-h-[60vh]">
          <div className="space-y-3 py-1">
            {/* Core */}
            <div className="space-y-0.5">
              <InfoRow label="SKU">
                <span className="font-mono text-xs">{variant.sku}</span>
              </InfoRow>
              <InfoRow label="Status">
                <Badge variant={variant.isActive ? "default" : "secondary"}>
                  {variant.isActive ? "Active" : "Inactive"}
                </Badge>
              </InfoRow>
            </div>

            <Separator />

            {/* Pricing */}
            <div className="space-y-0.5">
              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                Pricing
              </p>
              <InfoRow label="Price">{formatPrice(variant.price)}</InfoRow>
              <InfoRow label="Compare at">
                {variant.compareAtPrice ? formatPrice(variant.compareAtPrice) : "—"}
              </InfoRow>
            </div>

            <Separator />

            {/* Inventory */}
            <div className="space-y-0.5">
              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                Inventory
              </p>
              <InfoRow label="Stock quantity">{variant.stockQuantity}</InfoRow>
            </div>

            <Separator />

            {/* Shipping */}
            <div className="space-y-0.5">
              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                Shipping
              </p>
              <InfoRow label="Weight">
                {variant.weight} {variant.weightUnit}
              </InfoRow>
              {hasDimensions && (
                <InfoRow label="Dimensions">
                  {[variant.length, variant.width, variant.height]
                    .map((d) => d ?? "?")
                    .join(" × ")}{" "}
                  {variant.dimensionUnit ?? "cm"}
                </InfoRow>
              )}
            </div>

            {hasAttributes && (
              <>
                <Separator />
                <div className="space-y-0.5">
                  <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                    Attributes
                  </p>
                  {variant.attributes?.size && (
                    <InfoRow label="Size">{variant.attributes.size}</InfoRow>
                  )}
                  {variant.attributes?.flavor && (
                    <InfoRow label="Flavor">{variant.attributes.flavor}</InfoRow>
                  )}
                  {variant.attributes?.color && (
                    <InfoRow label="Color">{variant.attributes.color}</InfoRow>
                  )}
                </div>
              </>
            )}
          </div>
        </ScrollArea>

        <DialogFooter showCloseButton />
      </DialogContent>
    </Dialog>
  )
}
