"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Button } from "../ui/button";
import { Badge } from "../ui/badge";
import { Alert, AlertDescription } from "../ui/alert";
import {
  Edit,
  Trash2,
  Calendar,
  Clock,
  Copy
} from "lucide-react";
import { deleteEntityData } from "../../lib/api/entities";
import { format } from "date-fns";
import { es } from "date-fns/locale";
import { EntityPageHeader } from "./EntityPageHeader";
function EntityDetailPage({
  entityConfig,
  data,
  isLoading,
  error,
  className
}) {
  const router = useRouter();
  const [isDeleting, setIsDeleting] = useState(false);
  const handleDelete = async () => {
    if (!confirm(`\xBFEst\xE1s seguro de que quieres eliminar este ${entityConfig.names.singular.toLowerCase()}?`)) {
      return;
    }
    try {
      setIsDeleting(true);
      await deleteEntityData(entityConfig.slug, data.id);
      router.push(`/dashboard/${entityConfig.slug}`);
    } catch (error2) {
      console.error("Error deleting entity:", error2);
      alert("Error al eliminar. Por favor, intenta nuevamente.");
    } finally {
      setIsDeleting(false);
    }
  };
  const handleCopyId = () => {
    navigator.clipboard.writeText(data.id);
  };
  if (isLoading) {
    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gradient-to-b from-background to-muted/20 py-12 px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto space-y-6", children: /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: "Cargando datos..." }) }) }) });
  }
  if (error) {
    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gradient-to-b from-background to-muted/20 py-12 px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto space-y-6", children: /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) }) });
  }
  const headerActions = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleCopyId, children: [
      /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2" }),
      "Copiar ID"
    ] }),
    /* @__PURE__ */ jsx(Link, { href: `/dashboard/${entityConfig.slug}/${data.id}/edit`, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
      /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4 mr-2" }),
      "Editar"
    ] }) }),
    /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "destructive",
        size: "sm",
        onClick: handleDelete,
        disabled: isDeleting,
        children: [
          /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
          isDeleting ? "Eliminando..." : "Eliminar"
        ]
      }
    )
  ] });
  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gradient-to-b from-background to-muted/20 py-12 px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: `max-w-7xl mx-auto space-y-6 ${className || ""}`, children: [
    /* @__PURE__ */ jsx(
      EntityPageHeader,
      {
        entityConfig,
        mode: "view",
        data,
        actions: headerActions
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [
      /* @__PURE__ */ jsx("div", { className: "lg:col-span-2 space-y-6", children: /* @__PURE__ */ jsxs(Card, { children: [
        /* @__PURE__ */ jsxs(CardHeader, { children: [
          /* @__PURE__ */ jsx(CardTitle, { children: "Detalles" }),
          /* @__PURE__ */ jsxs(CardDescription, { children: [
            "Informaci\xF3n principal del ",
            entityConfig.names.singular.toLowerCase()
          ] })
        ] }),
        /* @__PURE__ */ jsx(CardContent, { className: "space-y-6", children: entityConfig.fields.filter((field) => field.display.showInDetail && field.name !== "id").map((field) => {
          const value = data[field.name];
          if (value === null || value === void 0) return null;
          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
            /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: field.display.label }),
            /* @__PURE__ */ jsx("dd", { className: "text-sm", children: field.type === "date" || field.type === "datetime" ? value ? format(new Date(value), "PPp", { locale: es }) : "No especificado" : field.type === "boolean" ? /* @__PURE__ */ jsx(Badge, { variant: value ? "default" : "secondary", children: value ? "S\xED" : "No" }) : field.type === "number" && field.name === "price" ? `$${value}` : String(value) || "No especificado" })
          ] }, field.name);
        }) })
      ] }) }),
      /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs(Card, { children: [
        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Metadata" }) }),
        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
            /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Creado" }),
              /* @__PURE__ */ jsx("div", { children: data.createdAt && typeof data.createdAt === "string" ? format(new Date(data.createdAt), "PPp", { locale: es }) : "No disponible" })
            ] })
          ] }),
          data.updatedAt && typeof data.updatedAt === "string" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("div", { className: "font-medium", children: "\xDAltima actualizaci\xF3n" }),
              /* @__PURE__ */ jsx("div", { children: format(new Date(data.updatedAt), "PPp", { locale: es }) })
            ] })
          ] }) : null
        ] })
      ] }) })
    ] })
  ] }) });
}
export {
  EntityDetailPage
};
