"use client";

import { useState } from "react";
import { supabaseBrowser } from "@/lib/supabaseClient";
import { useRouter } from "next/navigation";

export default function NewModelPage() {
  const [form, setForm] = useState({
    name: "",
    brand: "",
    scale: "",
    chassis_type: "",
    notes: "",
  });

  const router = useRouter();

  async function save() {
    const { error } = await supabaseBrowser.from("models").insert(form);
    if (!error) router.push("/admin/models");
  }

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">Add New Model</h1>

      <div className="space-y-4 max-w-lg">
        {Object.entries(form).map(([key, value]) => (
          <div key={key}>
            <label className="block mb-1 capitalize">{key.replace("_", " ")}</label>
            <input
              className="w-full p-2 border rounded"
              value={value}
              onChange={(e) => setForm({ ...form, [key]: e.target.value })}
            />
          </div>
        ))}

        <button
          onClick={save}
          className="px-4 py-2 bg-black text-white rounded"
        >
          Save
        </button>
      </div>
    </div>
  );
}