"use client"

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/src/components/ui/dialog"
import type { MenuItem } from "@/src/state/menu"
import { formatDate } from "../utils"

type Props = {
  open: boolean
  onOpenChange: (open: boolean) => void
  item: MenuItem | null
}

export function ItemPreviewDialog({ open, onOpenChange, item }: Props) {
  if (!item) return null

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[634px]">
        <DialogHeader>
          <DialogTitle>Aperçu de l&apos;article</DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          {item.thumbnailImage && (
            <div className="aspect-4/3 w-full overflow-hidden rounded-lg border">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={item.thumbnailImage}
                alt={item.name}
                className="h-full w-full object-cover"
              />
            </div>
          )}

          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Nom</span>
              <span className="font-medium">{item.name}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Catégorie</span>
              <span className="font-medium">{item.category.name}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Prix</span>
              <span className="font-medium">{item.price.toLocaleString("fr-FR")} FCFA</span>
            </div>
            {item.preparationTime && (
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Préparation</span>
                <span className="font-medium">{item.preparationTime} min</span>
              </div>
            )}
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Disponibilité</span>
              <span
                className={`font-medium ${item.isAvailable ? "text-emerald-600" : "text-muted-foreground"}`}
              >
                {item.isAvailable ? "Disponible" : "Indisponible"}
              </span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Ajouté le</span>
              <span className="font-medium">{formatDate(item.createdAt)}</span>
            </div>
          </div>

          {item.description && (
            <div className="space-y-1">
              <p className="text-sm text-muted-foreground">Description</p>
              <p className="text-sm">{item.description}</p>
            </div>
          )}

          {item.ingredients.length > 0 && (
            <div className="space-y-1.5">
              <p className="text-sm text-muted-foreground">Ingrédients</p>
              <div className="flex flex-wrap gap-1.5">
                {item.ingredients.map((ing, i) => (
                  <span
                    key={i}
                    className="inline-flex rounded-md bg-muted px-2 py-0.5 text-xs font-medium"
                  >
                    {ing}
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}