"use client";

import { SimpleCrud, type CrudColumn, type CrudField } from "@/components/admin/simple-crud";
import { Badge } from "@/components/ui/badge";

const FIELDS: CrudField[] = [
  { name: "label", label: "Judul", required: true },
  { name: "url", label: "URL", required: true },
  { name: "ikon", label: "Ikon", placeholder: "nama ikon lucide" },
  { name: "warna", label: "Warna", placeholder: "#0f766e", defaultValue: "#0f766e" },
  { name: "urut", label: "Urutan", type: "number", defaultValue: "0" },
  { name: "aktif", label: "Status", type: "checkbox" },
];

const COLUMNS: CrudColumn[] = [
  { name: "label", label: "Judul" },
  { name: "ikon", label: "Icon" },
  {
    name: "warna",
    label: "Warna",
    render: (row) => (
      <span className="inline-flex items-center gap-2 text-xs">
        <span
          className="inline-block h-4 w-4 rounded-full border"
          style={{ backgroundColor: String(row.warna || "#0f766e") }}
        />
        {String(row.warna ?? "-")}
      </span>
    ),
  },
  {
    name: "aktif",
    label: "Status",
    render: (row) => (
      <Badge variant={row.aktif ? "success" : "secondary"}>
        {row.aktif ? "Aktif" : "Tidak Aktif"}
      </Badge>
    ),
  },
  { name: "urut", label: "Urutan", hideOnMobile: true },
];

export default function ShortcutPage() {
  return (
    <SimpleCrud
      title="Shortcut"
      description="Pintasan menu yang tampil pada dasbor admin."
      entity="shortcut"
      fields={FIELDS}
      columns={COLUMNS}
      searchPlaceholder="Cari shortcut…"
      createLabel="Tambah Shortcut"
      showNo
      actionOnLeft
      ekspor={{
        fileName: "shortcut",
        header: ["No", "Judul", "Icon", "Warna", "Status"],
        values: (row) => [
          "",
          String(row.label ?? ""),
          String(row.ikon ?? ""),
          String(row.warna ?? ""),
          row.aktif ? "Aktif" : "Tidak Aktif",
        ],
      }}
    />
  );
}