import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { ArrowLeft, RefreshCw, Plus, Search, Eye, X, Check, ShieldAlert, FileSearch, ImageUp } from "lucide-react";
import { useState, useEffect, useMemo } from "react";
import { a as apiGet, r as resolveApiAssetUrl, c as apiPost, b as apiPostForm } from "./router-Cfwp3IG7.js";
const REPORT_CATEGORIES = ["Pengguna Bermasalah", "ID Game Bermasalah", "Transaksi", "Partner", "Promosi", "Sengketa", "Umum"];
const emptyReport = {
  reporter_name: "",
  reporter_email: "",
  reporter_whatsapp: "",
  title: "",
  category: "Pengguna Bermasalah",
  game_id: "",
  reported_whatsapp: "",
  description: "",
  status: "pending",
  source: "manual",
  admin_notes: "",
  evidence_images: []
};
function AdminReportsPage() {
  const [reports, setReports] = useState([]);
  const [loading, setLoading] = useState(false);
  const [notice, setNotice] = useState("");
  const [error, setError] = useState("");
  const [editingReport, setEditingReport] = useState(null);
  const [creatingReport, setCreatingReport] = useState(false);
  const [selectedReport, setSelectedReport] = useState(null);
  const [sourceFilter, setSourceFilter] = useState("all");
  const [statusFilter, setStatusFilter] = useState("all");
  const [query, setQuery] = useState("");
  const notifySuccess = (message) => {
    setError("");
    setNotice(message);
  };
  const notifyError = (message) => {
    setNotice("");
    setError(message);
  };
  const loadReports = async (withNotice = false) => {
    setLoading(true);
    setError("");
    try {
      const response = await apiGet("/reports");
      setReports(response.data ?? []);
      if (withNotice) notifySuccess("Data laporan berhasil dimuat ulang.");
    } catch (err) {
      notifyError(err instanceof Error ? err.message : "Gagal memuat laporan.");
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    void loadReports();
  }, []);
  useEffect(() => {
    if (!notice) return void 0;
    const timer = window.setTimeout(() => setNotice(""), 3500);
    return () => window.clearTimeout(timer);
  }, [notice]);
  const filteredReports = useMemo(() => {
    const keyword = query.trim().toLowerCase();
    return reports.filter((report) => {
      const source = report.source ?? "user";
      const values = [report.title, report.category, report.game_id, report.reported_whatsapp, report.status, report.source, report.reporter?.name, report.reporter?.email, report.reporter?.whatsapp];
      return (sourceFilter === "all" || source === sourceFilter) && (statusFilter === "all" || report.status === statusFilter) && (!keyword || values.filter(Boolean).join(" ").toLowerCase().includes(keyword));
    }).sort((a, b) => Number(b.status === "pending") - Number(a.status === "pending") || new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
  }, [reports, sourceFilter, statusFilter, query]);
  const updateReportStatus = async (report, status) => {
    setLoading(true);
    setError("");
    try {
      const response = await apiPost(`/reports/${report.id}/status`, {
        status,
        admin_notes: report.admin_notes ?? ""
      });
      setReports((items) => items.map((item) => item.id === response.data.id ? response.data : item));
      setSelectedReport(null);
      notifySuccess(status === "approved" ? "Laporan berhasil disetujui." : status === "rejected" ? "Laporan berhasil ditolak." : "Status laporan berhasil diperbarui.");
    } catch (err) {
      notifyError(err instanceof Error ? err.message : "Status laporan gagal diperbarui.");
    } finally {
      setLoading(false);
    }
  };
  const saveReport = async (draft) => {
    setLoading(true);
    setError("");
    try {
      const form = new FormData();
      form.append("reporter_name", draft.reporter_name);
      form.append("reporter_email", draft.reporter_email);
      form.append("reporter_whatsapp", normalizeWhatsapp(draft.reporter_whatsapp));
      form.append("title", draft.title);
      form.append("category", draft.category || "Umum");
      form.append("description", draft.description);
      form.append("status", draft.status || "pending");
      form.append("source", draft.id ? draft.source || "manual" : "manual");
      form.append("admin_notes", draft.admin_notes ?? "");
      if (draft.category === "Pengguna Bermasalah") {
        form.append("game_id", "");
      } else if (draft.game_id) {
        form.append("game_id", draft.game_id);
      }
      const reportedWhatsapp = normalizeWhatsapp(draft.reported_whatsapp);
      if (reportedWhatsapp) form.append("reported_whatsapp", reportedWhatsapp);
      for (const file of draft.evidence_images ?? []) {
        form.append("evidence_images[]", file);
      }
      const path = draft.id ? `/reports/${draft.id}` : "/reports/admin";
      const response = await apiPostForm(path, form);
      setReports((items) => {
        if (!draft.id) return [response.data, ...items];
        return items.map((item) => item.id === response.data.id ? response.data : item);
      });
      setCreatingReport(false);
      setEditingReport(null);
      notifySuccess(draft.id ? "Laporan berhasil diperbarui." : "Laporan berhasil ditambahkan.");
    } catch (err) {
      notifyError(err instanceof Error ? err.message : "Laporan gagal disimpan.");
    } finally {
      setLoading(false);
    }
  };
  const counts = {
    total: reports.length,
    pending: reports.filter((item) => item.status === "pending").length,
    approved: reports.filter((item) => item.status === "approved").length,
    rejected: reports.filter((item) => item.status === "rejected").length,
    manual: reports.filter((item) => (item.source ?? "user") === "manual").length,
    user: reports.filter((item) => (item.source ?? "user") === "user").length
  };
  return /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-col gap-4 md:flex-row md:items-end md:justify-between", children: [
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsxs(Link, { to: "/adminpergam", className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground", children: [
          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3.5 w-3.5" }),
          "Kembali"
        ] }),
        /* @__PURE__ */ jsx("h1", { className: "mt-2 font-display text-3xl font-bold", children: "Kelola Laporan" }),
        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Review laporan user, tambah laporan manual, dan kelola data bermasalah publik." })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
        /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => loadReports(true), disabled: loading, className: "inline-flex items-center gap-2 rounded-full border border-border bg-card/40 px-4 py-2.5 text-sm font-semibold transition hover:border-primary/50 disabled:opacity-60", children: [
          /* @__PURE__ */ jsx(RefreshCw, { className: `h-4 w-4 ${loading ? "animate-spin" : ""}` }),
          "Refresh"
        ] }),
        /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setCreatingReport(true), className: "inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-glow-sm transition hover:-translate-y-0.5", children: [
          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
          "Tambah Laporan"
        ] })
      ] })
    ] }),
    (notice || error) && /* @__PURE__ */ jsx("div", { className: `mb-5 rounded-2xl border px-4 py-3 text-sm font-semibold ${notice ? "border-primary/30 bg-primary/10 text-primary" : "border-destructive/30 bg-destructive/10 text-destructive"}`, children: notice || error }),
    /* @__PURE__ */ jsxs("div", { className: "mb-5 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6", children: [
      /* @__PURE__ */ jsx(StatPill, { label: "Total", value: counts.total }),
      /* @__PURE__ */ jsx(StatPill, { label: "Pending", value: counts.pending, tone: "pending" }),
      /* @__PURE__ */ jsx(StatPill, { label: "Disetujui", value: counts.approved, tone: "approved" }),
      /* @__PURE__ */ jsx(StatPill, { label: "Ditolak", value: counts.rejected, tone: "rejected" }),
      /* @__PURE__ */ jsx(StatPill, { label: "Manual", value: counts.manual }),
      /* @__PURE__ */ jsx(StatPill, { label: "Dari User", value: counts.user })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "card-surface mb-5 rounded-2xl p-4", children: [
      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto_auto] lg:items-end", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Pencarian" }),
          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
            /* @__PURE__ */ jsx(Search, { className: "absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
            /* @__PURE__ */ jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Cari laporan, ID game, no WA, atau pelapor...", className: "input pl-11" })
          ] })
        ] }),
        /* @__PURE__ */ jsx(FilterGroup, { label: "Sumber", value: sourceFilter, options: [["all", "Semua"], ["user", "Dari User"], ["manual", "Manual Admin"]], onChange: (value) => setSourceFilter(value) }),
        /* @__PURE__ */ jsx(FilterGroup, { label: "Status", value: statusFilter, options: [["all", "Semua"], ["pending", "Pending"], ["approved", "Disetujui"], ["rejected", "Ditolak"]], onChange: (value) => setStatusFilter(value) })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "mt-3 text-xs font-semibold text-muted-foreground", children: [
        filteredReports.length,
        " dari ",
        reports.length,
        " laporan ditampilkan"
      ] })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "card-surface overflow-hidden rounded-2xl border border-border", children: /* @__PURE__ */ jsx("div", { className: "max-h-[34rem] overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[760px]", children: [
      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-muted/95 text-left text-[10px] font-bold uppercase tracking-widest text-muted-foreground backdrop-blur", children: /* @__PURE__ */ jsxs("tr", { children: [
        /* @__PURE__ */ jsx("th", { className: "px-4 py-4", children: "Gambar" }),
        /* @__PURE__ */ jsx("th", { className: "px-4 py-4", children: "Judul Laporan" }),
        /* @__PURE__ */ jsx("th", { className: "px-4 py-4", children: "Pelapor" }),
        /* @__PURE__ */ jsx("th", { className: "px-4 py-4", children: "Status" }),
        /* @__PURE__ */ jsx("th", { className: "px-4 py-4 text-right", children: "Aksi" })
      ] }) }),
      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border/50", children: loading && reports.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 5, className: "px-4 py-12 text-center text-sm text-muted-foreground", children: "Memuat laporan..." }) }) : filteredReports.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 5, className: "px-4 py-12 text-center text-sm text-muted-foreground", children: "Belum ada laporan sesuai filter." }) }) : filteredReports.map((report) => /* @__PURE__ */ jsxs("tr", { onClick: () => setSelectedReport(report), className: "cursor-pointer transition hover:bg-primary/5", children: [
        /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx(ReportThumb, { report }) }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "min-w-[220px]", children: [
          /* @__PURE__ */ jsx("strong", { className: "block text-sm text-foreground", children: report.title }),
          /* @__PURE__ */ jsxs("span", { className: "mt-1 block text-xs text-muted-foreground", children: [
            report.category,
            " - ",
            sourceLabel(report.source)
          ] })
        ] }) }),
        /* @__PURE__ */ jsxs("td", { className: "px-4 py-4", children: [
          /* @__PURE__ */ jsx("strong", { className: "block text-sm text-foreground", children: report.reporter?.name || "Pelapor" }),
          /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: report.reporter?.email || "-" })
        ] }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx(StatusBadge, { status: report.status }) }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
          /* @__PURE__ */ jsx("button", { type: "button", title: "Detail", onClick: (event) => {
            event.stopPropagation();
            setSelectedReport(report);
          }, className: "grid h-9 w-9 place-items-center rounded-xl border border-border bg-card text-muted-foreground transition hover:border-primary/50 hover:text-primary", children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }) }),
          report.status === "pending" && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx("button", { type: "button", title: "Tolak", disabled: loading, onClick: (event) => {
              event.stopPropagation();
              void updateReportStatus(report, "rejected");
            }, className: "grid h-9 w-9 place-items-center rounded-xl border border-destructive/30 bg-destructive/10 text-destructive transition hover:border-destructive disabled:opacity-40", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }),
            /* @__PURE__ */ jsx("button", { type: "button", title: "Setujui", disabled: loading, onClick: (event) => {
              event.stopPropagation();
              void updateReportStatus(report, "approved");
            }, className: "grid h-9 w-9 place-items-center rounded-xl border border-success/30 bg-success/10 text-success transition hover:border-success disabled:opacity-40", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
          ] })
        ] }) })
      ] }, report.id)) })
    ] }) }) }),
    (creatingReport || editingReport) && /* @__PURE__ */ jsx(ReportFormModal, { report: editingReport, loading, onClose: () => {
      setCreatingReport(false);
      setEditingReport(null);
    }, onSave: saveReport }),
    selectedReport && /* @__PURE__ */ jsx(ReportDetailModal, { report: selectedReport, loading, onClose: () => setSelectedReport(null), onEdit: (report) => {
      setEditingReport(report);
      setSelectedReport(null);
    }, onStatus: updateReportStatus })
  ] });
}
function ReportFormModal({
  report,
  loading,
  onClose,
  onSave
}) {
  const [draft, setDraft] = useState(() => reportToDraft(report));
  const isUserProblem = draft.category === "Pengguna Bermasalah";
  const update = (key, value) => {
    setDraft((current) => ({
      ...current,
      [key]: value
    }));
  };
  const updateCategory = (value) => {
    setDraft((current) => ({
      ...current,
      category: value,
      game_id: value === "Pengguna Bermasalah" ? "" : current.game_id
    }));
  };
  const submit = (event) => {
    event.preventDefault();
    onSave(draft);
  };
  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[80] grid place-items-center overflow-auto bg-black/65 p-4 backdrop-blur-sm max-sm:items-start max-sm:p-3", children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "card-surface relative w-full max-w-3xl rounded-[1.75rem] p-5 sm:p-7", children: [
    /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: "absolute right-4 top-4 grid h-10 w-10 place-items-center rounded-full border border-border bg-background/70 text-foreground", "aria-label": "Tutup form laporan", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) }),
    /* @__PURE__ */ jsxs("div", { className: "pr-12", children: [
      /* @__PURE__ */ jsxs("p", { className: "section-kicker", children: [
        /* @__PURE__ */ jsx(ShieldAlert, { className: "h-4 w-4" }),
        draft.id ? "Edit Laporan" : "Laporan Baru"
      ] }),
      /* @__PURE__ */ jsx("h2", { className: "mt-4 font-display text-2xl font-bold", children: draft.id ? draft.title : "Tambah Laporan" })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "mt-5 grid gap-4 sm:grid-cols-2", children: [
      /* @__PURE__ */ jsx(AdminField, { label: "Nama Pelapor", children: /* @__PURE__ */ jsx("input", { value: draft.reporter_name, onChange: (event) => update("reporter_name", event.target.value), className: "input", required: true }) }),
      /* @__PURE__ */ jsx(AdminField, { label: "Email Pelapor", children: /* @__PURE__ */ jsx("input", { type: "email", value: draft.reporter_email, onChange: (event) => update("reporter_email", event.target.value), className: "input", required: true }) }),
      /* @__PURE__ */ jsx(AdminField, { label: "WhatsApp Pelapor", children: /* @__PURE__ */ jsx("input", { value: draft.reporter_whatsapp, onChange: (event) => update("reporter_whatsapp", event.target.value), className: "input", required: true }) }),
      /* @__PURE__ */ jsx(AdminField, { label: "Kategori", children: /* @__PURE__ */ jsxs("select", { value: draft.category, onChange: (event) => updateCategory(event.target.value), className: "input", required: true, children: [
        !REPORT_CATEGORIES.includes(draft.category) && /* @__PURE__ */ jsx("option", { value: draft.category, children: draft.category }),
        REPORT_CATEGORIES.map((category) => /* @__PURE__ */ jsx("option", { value: category, children: category }, category))
      ] }) }),
      /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsx(AdminField, { label: "Judul", children: /* @__PURE__ */ jsx("input", { value: draft.title, onChange: (event) => update("title", event.target.value), className: "input", required: true }) }) }),
      !isUserProblem && /* @__PURE__ */ jsx(AdminField, { label: "ID Game Bermasalah", children: /* @__PURE__ */ jsx("input", { value: draft.game_id, onChange: (event) => update("game_id", event.target.value), className: "input", required: draft.category === "ID Game Bermasalah" }) }),
      /* @__PURE__ */ jsx(AdminField, { label: "Pengguna Bermasalah (No WA)", children: /* @__PURE__ */ jsx("input", { value: draft.reported_whatsapp, onChange: (event) => update("reported_whatsapp", event.target.value), className: "input", required: isUserProblem }) }),
      /* @__PURE__ */ jsx(AdminField, { label: "Status", children: /* @__PURE__ */ jsxs("select", { value: draft.status, onChange: (event) => update("status", event.target.value), className: "input", children: [
        /* @__PURE__ */ jsx("option", { value: "pending", children: "Pending" }),
        /* @__PURE__ */ jsx("option", { value: "approved", children: "Disetujui" }),
        /* @__PURE__ */ jsx("option", { value: "rejected", children: "Ditolak" })
      ] }) }),
      /* @__PURE__ */ jsx(AdminField, { label: "Sumber", children: draft.id ? /* @__PURE__ */ jsxs("select", { value: draft.source, onChange: (event) => update("source", event.target.value), className: "input", children: [
        /* @__PURE__ */ jsx("option", { value: "manual", children: "Manual Admin" }),
        /* @__PURE__ */ jsx("option", { value: "user", children: "Dari User/Pelapor" })
      ] }) : /* @__PURE__ */ jsx("input", { value: "Manual Admin", className: "input", readOnly: true }) }),
      /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsx(AdminField, { label: "Detail Laporan", children: /* @__PURE__ */ jsx("textarea", { value: draft.description, onChange: (event) => update("description", event.target.value), className: "input min-h-32 resize-y", required: true }) }) }),
      /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsx(AdminField, { label: "Catatan Admin", children: /* @__PURE__ */ jsx("textarea", { value: draft.admin_notes, onChange: (event) => update("admin_notes", event.target.value), className: "input min-h-24 resize-y" }) }) }),
      /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsx(AdminField, { label: "Upload / Ganti Foto Bukti", children: /* @__PURE__ */ jsx("input", { type: "file", accept: "image/*", multiple: true, onChange: (event) => update("evidence_images", Array.from(event.target.files ?? [])), className: "input" }) }) })
    ] }),
    draft.evidence_images.length > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs font-semibold text-primary", children: [
      draft.evidence_images.length,
      " foto baru dipilih."
    ] }),
    report?.evidence_images?.length ? /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-3 gap-2 sm:grid-cols-6", children: report.evidence_images.map((url, index) => /* @__PURE__ */ jsx("a", { href: resolveApiAssetUrl(url), target: "_blank", rel: "noreferrer", className: "aspect-square overflow-hidden rounded-xl border border-border bg-muted", children: /* @__PURE__ */ jsx("img", { src: resolveApiAssetUrl(url), alt: `Bukti ${index + 1}`, className: "h-full w-full object-cover" }) }, `${url}-${index}`)) }) : null,
    /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: "rounded-full border border-border px-5 py-2.5 text-sm font-semibold", children: "Batal" }),
      /* @__PURE__ */ jsx("button", { type: "submit", disabled: loading, className: "btn-primary", children: loading ? "Menyimpan..." : "Simpan Laporan" })
    ] })
  ] }) });
}
function ReportDetailModal({
  report,
  loading,
  onClose,
  onEdit,
  onStatus
}) {
  const images = report.evidence_images ?? [];
  const createdAt = report.created_at ? new Date(report.created_at).toLocaleString("id-ID") : "-";
  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[90] grid place-items-center overflow-auto bg-black/65 p-4 backdrop-blur-sm max-sm:items-start max-sm:p-3", children: /* @__PURE__ */ jsxs("div", { className: "card-surface w-full max-w-5xl rounded-[1.75rem] p-5 sm:p-7", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border pb-4", children: [
      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
        /* @__PURE__ */ jsxs("p", { className: "section-kicker", children: [
          /* @__PURE__ */ jsx(FileSearch, { className: "h-4 w-4" }),
          "Detail Laporan"
        ] }),
        /* @__PURE__ */ jsx("h2", { className: "mt-4 break-words font-display text-2xl font-bold", children: report.title })
      ] }),
      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: "grid h-10 w-10 shrink-0 place-items-center rounded-full border border-border", "aria-label": "Tutup detail laporan", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "mt-5 grid gap-4 rounded-2xl border border-primary/20 bg-primary/10 p-4 lg:grid-cols-[minmax(0,1fr)_220px]", children: [
      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
        /* @__PURE__ */ jsx(StatusBadge, { status: report.status }),
        /* @__PURE__ */ jsx("h3", { className: "mt-3 font-display text-xl font-bold", children: report.category || "Umum" }),
        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
          sourceLabel(report.source),
          " - ID Laporan #",
          report.id
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-background/35 p-3 text-sm", children: [
        /* @__PURE__ */ jsx("span", { className: "block text-xs font-bold uppercase text-muted-foreground", children: "Tanggal Masuk" }),
        /* @__PURE__ */ jsx("strong", { className: "mt-1 block", children: createdAt })
      ] })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "mt-4 grid gap-4 lg:grid-cols-3", children: [
      /* @__PURE__ */ jsx(DetailItem, { label: "Nama Pelapor", value: report.reporter?.name || "-" }),
      /* @__PURE__ */ jsx(DetailItem, { label: "Email Pelapor", value: report.reporter?.email || "-" }),
      /* @__PURE__ */ jsx(DetailItem, { label: "WhatsApp Pelapor", value: report.reporter?.whatsapp || "-" })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "mt-4 grid gap-4 lg:grid-cols-2", children: [
      /* @__PURE__ */ jsx(DetailItem, { label: "No WA Pelaku", value: report.reported_whatsapp || "-" }),
      /* @__PURE__ */ jsx(DetailItem, { label: "ID Game Bermasalah", value: report.game_id || "-" })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "mt-4 grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]", children: [
      /* @__PURE__ */ jsx(DetailNote, { label: "Detail Laporan", value: report.description || "-" }),
      /* @__PURE__ */ jsx(DetailNote, { label: "Catatan Admin", value: report.admin_notes || "-" })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "mt-4 rounded-2xl border border-border bg-background/25 p-4", children: [
      /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-4", children: /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-2 font-display text-lg font-bold", children: [
          /* @__PURE__ */ jsx(ImageUp, { className: "h-5 w-5 text-primary" }),
          "Foto Bukti"
        ] }),
        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: images.length > 0 ? `${images.length} gambar bukti terlampir.` : "Belum ada gambar bukti." })
      ] }) }),
      images.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6", children: images.map((url, index) => /* @__PURE__ */ jsx("a", { href: resolveApiAssetUrl(url), target: "_blank", rel: "noreferrer", className: "aspect-square overflow-hidden rounded-2xl border border-border bg-muted", children: /* @__PURE__ */ jsx("img", { src: resolveApiAssetUrl(url), alt: `Bukti ${index + 1}`, className: "h-full w-full object-cover transition hover:scale-105" }) }, `${url}-${index}`)) }) : /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-2xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground", children: "Tidak ada foto bukti." })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-col gap-3 border-t border-border pt-5 lg:flex-row lg:items-stretch lg:justify-between", children: [
      report.status === "pending" && /* @__PURE__ */ jsxs("div", { className: "grid gap-2 sm:grid-cols-2 lg:min-w-[24rem]", children: [
        /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onStatus(report, "rejected"), disabled: loading, className: "rounded-2xl border border-destructive/40 bg-destructive/10 px-4 py-3 text-left text-sm font-bold text-destructive disabled:opacity-50", children: [
          /* @__PURE__ */ jsx("span", { className: "block", children: "Tolak" }),
          /* @__PURE__ */ jsx("small", { className: "text-xs font-semibold opacity-80", children: "Laporan tidak ditampilkan" })
        ] }),
        /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onStatus(report, "approved"), disabled: loading, className: "rounded-2xl border border-success/40 bg-success/10 px-4 py-3 text-left text-sm font-bold text-success disabled:opacity-50", children: [
          /* @__PURE__ */ jsx("span", { className: "block", children: "Setujui" }),
          /* @__PURE__ */ jsx("small", { className: "text-xs font-semibold opacity-80", children: "Laporan tampil publik" })
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onEdit(report), disabled: loading, className: "inline-flex flex-1 items-center justify-center gap-2 rounded-full border border-border px-5 py-2.5 text-sm font-semibold lg:flex-none", children: [
        /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
        "Edit"
      ] }) })
    ] })
  ] }) });
}
function FilterGroup({
  label,
  value,
  options,
  onChange
}) {
  return /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: options.map(([optionValue, optionLabel]) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange(optionValue), className: `rounded-full border px-3 py-2 text-xs font-bold transition ${value === optionValue ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background/35 text-muted-foreground hover:text-foreground"}`, children: optionLabel }, optionValue)) })
  ] });
}
function ReportThumb({
  report
}) {
  const image = resolveApiAssetUrl(report.evidence_images?.[0]);
  return /* @__PURE__ */ jsx("div", { className: "grid h-14 w-20 place-items-center overflow-hidden rounded-xl border border-border bg-muted text-xs font-bold text-muted-foreground", children: image ? /* @__PURE__ */ jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx("span", { children: "PG" }) });
}
function AdminField({
  label,
  children
}) {
  return /* @__PURE__ */ jsxs("label", { className: "block", children: [
    /* @__PURE__ */ jsx("span", { className: "mb-2 block text-xs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
    children
  ] });
}
function DetailItem({
  label,
  value
}) {
  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 rounded-2xl border border-border bg-background/25 p-4", children: [
    /* @__PURE__ */ jsx("span", { className: "block text-xs font-bold uppercase text-muted-foreground", children: label }),
    /* @__PURE__ */ jsx("strong", { className: "mt-1 block break-words text-sm", children: value })
  ] });
}
function DetailNote({
  label,
  value
}) {
  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 rounded-2xl border border-border bg-background/25 p-4", children: [
    /* @__PURE__ */ jsx("span", { className: "block text-xs font-bold uppercase text-muted-foreground", children: label }),
    /* @__PURE__ */ jsx("p", { className: "mt-2 whitespace-pre-wrap break-words text-sm leading-7 text-muted-foreground", children: value })
  ] });
}
function StatPill({
  label,
  value,
  tone
}) {
  const toneClass = tone === "approved" ? "border-success/30 bg-success/10 text-success" : tone === "rejected" ? "border-destructive/30 bg-destructive/10 text-destructive" : tone === "pending" ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-card/45 text-muted-foreground";
  return /* @__PURE__ */ jsxs("div", { className: `rounded-xl border px-3 py-2.5 sm:rounded-2xl sm:px-4 sm:py-3 ${toneClass}`, children: [
    /* @__PURE__ */ jsx("span", { className: "block text-[9px] font-bold uppercase tracking-wider sm:text-[10px]", children: label }),
    /* @__PURE__ */ jsx("strong", { className: "mt-1 block font-display text-xl sm:text-2xl", children: value })
  ] });
}
function StatusBadge({
  status
}) {
  return /* @__PURE__ */ jsx("span", { className: `status-pill status-pill--${status}`, children: status === "approved" ? "Disetujui" : status === "rejected" ? "Ditolak" : "Pending" });
}
function reportToDraft(report) {
  if (!report) return {
    ...emptyReport,
    evidence_images: []
  };
  return {
    ...emptyReport,
    id: report.id,
    reporter_name: report.reporter?.name ?? "",
    reporter_email: report.reporter?.email ?? "",
    reporter_whatsapp: report.reporter?.whatsapp ?? "",
    title: report.title ?? "",
    category: report.category ?? "Pengguna Bermasalah",
    game_id: report.game_id ?? "",
    reported_whatsapp: report.reported_whatsapp ?? "",
    description: report.description ?? "",
    status: report.status ?? "pending",
    source: report.source ?? "user",
    admin_notes: report.admin_notes ?? "",
    evidence_images: []
  };
}
function normalizeWhatsapp(value) {
  const digits = String(value ?? "").replace(/\D/g, "");
  if (digits.startsWith("0")) {
    return `62${digits.slice(1)}`;
  }
  if (digits.startsWith("8")) {
    return `62${digits}`;
  }
  return digits;
}
function sourceLabel(source) {
  return (source ?? "user") === "manual" ? "Manual Admin" : "Dari User/Pelapor";
}
export {
  AdminReportsPage as component
};
