import Link from "next/link";
import { supabaseServer } from "@/lib/supabaseServer";

export default async function ModelsPage() {
  const { data: models } = await supabaseServer
    .from("models")
    .select("*")
    .order("name");

  return (
    <div>
      <div className="flex justify-between mb-6">
        <h1 className="text-3xl font-bold">Models</h1>
        <Link
          href="/admin/models/new"
          className="px-4 py-2 bg-black text-white rounded"
        >
          + Add Model
        </Link>
      </div>

      {(!models || models.length === 0) && (
        <p className="text-gray-700">
          No models found yet. Click &ldquo;Add Model&rdquo; to create your
          first one.
        </p>
      )}

      <div className="bg-white shadow rounded-lg divide-y">
        {models?.map((m) => (
          <Link
            key={m.id}
            href={`/admin/models/${m.id}`}
            className="block p-4 hover:bg-gray-50"
          >
            <div className="font-semibold">{m.name}</div>
            <div className="text-sm text-gray-500">{m.brand}</div>
          </Link>
        ))}
      </div>
    </div>
  );
}