import { jsxs, jsx } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { ArrowLeft, Hash, MessageCircle, ShieldCheck, Clock, ImageUp, X } from "lucide-react";
import { useState } from "react";
import { N as Navbar, F as Footer } from "./Navbar-CehhuAQz.js";
import { R as Route, r as resolveApiAssetUrl } from "./router-Cfwp3IG7.js";
import "./useSiteSettings-7O51JHh5.js";
import "./client-Dz5aErML.js";
import "@supabase/supabase-js";
import "./logo-DIdLvJAL.js";
import "./ThemeToggle-FQS9vN6L.js";
function ReportDetailPage() {
  const report = Route.useLoaderData();
  const images = (report.evidence_images ?? []).map(resolveApiAssetUrl).filter(Boolean);
  const [activeImage, setActiveImage] = useState(null);
  return /* @__PURE__ */ jsxs("div", { className: "page-shell", children: [
    /* @__PURE__ */ jsx(Navbar, {}),
    /* @__PURE__ */ jsx("main", { className: "section-shell pt-28 md:pt-36", children: /* @__PURE__ */ jsxs("div", { className: "section-container", children: [
      /* @__PURE__ */ jsxs(Link, { to: "/lapor", className: "mb-6 inline-flex items-center gap-2 text-sm font-bold text-muted-foreground transition hover:text-foreground", children: [
        /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
        "Kembali ke laporan"
      ] }),
      /* @__PURE__ */ jsxs("section", { className: "grid gap-6 lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1fr)]", children: [
        /* @__PURE__ */ jsx("aside", { className: "grid gap-4", children: /* @__PURE__ */ jsxs("div", { className: "card-surface rounded-[1.75rem] p-5", children: [
          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: `status-pill status-pill--${report.status}`, children: statusLabel(report.status) }) }),
          /* @__PURE__ */ jsxs("h1", { className: "mt-4 font-display text-3xl font-bold leading-tight text-foreground", children: [
            "#",
            report.id,
            " ",
            report.title
          ] }),
          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm font-semibold text-primary", children: report.category }),
          /* @__PURE__ */ jsxs("div", { className: "mt-5 grid gap-3", children: [
            /* @__PURE__ */ jsx(DetailBox, { icon: /* @__PURE__ */ jsx(Hash, { className: "h-4 w-4" }), label: "ID Game Bermasalah", value: report.game_id || "-" }),
            /* @__PURE__ */ jsx(DetailBox, { icon: /* @__PURE__ */ jsx(MessageCircle, { className: "h-4 w-4" }), label: "No WA Pelaku", value: report.reported_whatsapp || "-" }),
            /* @__PURE__ */ jsx(DetailBox, { icon: /* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4" }), label: "Kredibilitas Pelapor", value: report.reporter?.credibility ?? "Pelapor Baru" }),
            /* @__PURE__ */ jsx(DetailBox, { icon: /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }), label: "Tanggal Laporan", value: report.created_at ? new Date(report.created_at).toLocaleString("id-ID") : "Baru" })
          ] })
        ] }) }),
        /* @__PURE__ */ jsxs("article", { className: "card-surface rounded-[1.75rem] p-5 sm:p-7", children: [
          /* @__PURE__ */ jsx("h2", { className: "font-display text-xl font-bold text-foreground", children: "Keterangan" }),
          /* @__PURE__ */ jsx("p", { className: "mt-3 whitespace-pre-wrap text-sm leading-7 text-muted-foreground", children: report.description }),
          /* @__PURE__ */ jsxs("div", { className: "mt-7", children: [
            /* @__PURE__ */ jsxs("h2", { className: "flex items-center gap-2 font-display text-xl font-bold text-foreground", children: [
              /* @__PURE__ */ jsx(ImageUp, { className: "h-5 w-5 text-primary" }),
              "Foto Bukti"
            ] }),
            images.length === 0 ? /* @__PURE__ */ jsx("div", { className: "mt-3 rounded-2xl border border-border bg-card/45 p-6 text-center text-sm font-semibold text-muted-foreground", children: "Belum ada foto bukti publik." }) : /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3", children: images.slice(0, 10).map((src, index) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setActiveImage({
              src,
              alt: `Bukti laporan ${index + 1}`
            }), className: "group overflow-hidden rounded-2xl border border-border bg-muted text-left", children: /* @__PURE__ */ jsx("img", { src, alt: `Bukti laporan ${index + 1}`, className: "aspect-square h-full w-full object-cover transition group-hover:scale-105", loading: "lazy" }) }, `${src}-${index}`)) })
          ] })
        ] })
      ] })
    ] }) }),
    activeImage && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[90] grid place-items-center bg-background/86 p-4 backdrop-blur-xl animate-fade-up", onClick: () => setActiveImage(null), role: "dialog", "aria-modal": "true", "aria-label": "Pratinjau foto bukti", children: [
      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setActiveImage(null), className: "group absolute right-4 top-4 z-10 grid h-11 w-11 place-items-center rounded-full border border-border bg-card shadow-card transition hover:bg-primary/15", "aria-label": "Tutup foto bukti", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5 opacity-80 transition-transform group-hover:rotate-90" }) }),
      /* @__PURE__ */ jsx("div", { className: "max-h-[90vh] max-w-4xl overflow-auto rounded-3xl shadow-card", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx("img", { src: activeImage.src, alt: activeImage.alt, className: "block h-auto w-full" }) })
    ] }),
    /* @__PURE__ */ jsx(Footer, {})
  ] });
}
function DetailBox({
  icon,
  label,
  value
}) {
  return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-background/35 p-4", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-bold uppercase text-muted-foreground", children: [
      /* @__PURE__ */ jsx("span", { className: "text-primary", children: icon }),
      label
    ] }),
    /* @__PURE__ */ jsx("div", { className: "mt-1 break-words font-display text-lg font-bold text-foreground", children: value })
  ] });
}
function statusLabel(status) {
  if (status === "approved") return "Disetujui";
  if (status === "rejected") return "Ditolak";
  return "Pending";
}
export {
  ReportDetailPage as component
};
