"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { SimpleCrud, type CrudColumn, type CrudField } from "@/components/admin/simple-crud";

const FIELDS: CrudField[] = [
  { name: "kode", label: "Kode", required: true },
  { name: "pertanyaan", label: "Pertanyaan", required: true, full: true },
  {
    name: "tipe",
    label: "Tipe",
    type: "select",
    options: [
      { value: "PILIHAN", label: "Pilihan" },
      { value: "ISIAN", label: "Isian" },
    ],
    defaultValue: "PILIHAN",
  },
  {
    name: "pilihan",
    label: "Pilihan Jawaban",
    type: "textarea",
    help: "Pisahkan setiap pilihan dengan baris baru.",
  },
  { name: "urut", label: "Urutan", type: "number", defaultValue: "0" },
];

const COLUMNS: CrudColumn[] = [
  { name: "kode", label: "Kode" },
  { name: "pertanyaan", label: "Pertanyaan" },
  { name: "tipe", label: "Tipe" },
  { name: "pilihan", label: "Pilihan", hideOnMobile: true },
  { name: "urut", label: "Urutan" },
];

export default function AnalisisPertanyaanPage() {
  const params = useParams<{ id: string }>();
  const analisisId = Number(params.id);
  return (
    <SimpleCrud
      title="Pertanyaan Analisis"
      description={`Pertanyaan untuk analisis #${analisisId}.`}
      entity="analisis-pertanyaan"
      query={{ analisisId }}
      fields={FIELDS}
      columns={COLUMNS}
      searchPlaceholder="Cari kode atau pertanyaan…"
      createLabel="Tambah Pertanyaan"
      headerExtra={
        <Link href="/admin/analisis">
          <Button variant="outline" size="sm">
            <ArrowLeft className="h-4 w-4" /> Kembali
          </Button>
        </Link>
      }
    />
  );
}