"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export default function NewVehicleForm() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({ registrationNumber: "", model: "", speedLimitKmh: "60" });
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    try {
      const res = await fetch("/api/vehicles", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          registrationNumber: form.registrationNumber,
          model: form.model || undefined,
          speedLimitKmh: parseInt(form.speedLimitKmh, 10),
        }),
      });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        setError(d.error || "Failed to create vehicle");
        return;
      }
      setOpen(false);
      setForm({ registrationNumber: "", model: "", speedLimitKmh: "60" });
      router.refresh();
    } finally {
      setSaving(false);
    }
  }

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        className="rounded-md bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium px-4 py-2"
      >
        + Add vehicle
      </button>
    );
  }

  return (
    <form onSubmit={onSubmit} className="rounded-xl border border-slate-800 bg-slate-900 p-5 grid grid-cols-3 gap-3 mb-4">
      <div>
        <label className="block text-xs text-slate-400 mb-1">Registration number</label>
        <input
          required
          value={form.registrationNumber}
          onChange={(e) => setForm((f) => ({ ...f, registrationNumber: e.target.value }))}
          className="w-full rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-slate-100"
        />
      </div>
      <div>
        <label className="block text-xs text-slate-400 mb-1">Model</label>
        <input
          value={form.model}
          onChange={(e) => setForm((f) => ({ ...f, model: e.target.value }))}
          className="w-full rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-slate-100"
        />
      </div>
      <div>
        <label className="block text-xs text-slate-400 mb-1">Speed limit (km/h)</label>
        <input
          required
          type="number"
          value={form.speedLimitKmh}
          onChange={(e) => setForm((f) => ({ ...f, speedLimitKmh: e.target.value }))}
          className="w-full rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-slate-100"
        />
      </div>
      {error && <p className="col-span-3 text-sm text-red-400">{error}</p>}
      <div className="col-span-3 flex gap-2">
        <button
          type="submit"
          disabled={saving}
          className="rounded-md bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-medium px-4 py-2"
        >
          {saving ? "Creating..." : "Create vehicle"}
        </button>
        <button type="button" onClick={() => setOpen(false)} className="rounded-md bg-slate-800 text-slate-300 text-sm px-4 py-2">
          Cancel
        </button>
      </div>
    </form>
  );
}