import Link from "next/link";
import type { ProjectListItem } from "../../lib/db";
import { projectStatusBadgeClass, projectStatusLabel } from "../../lib/projectStatus";

export function ProjectTable({ projects, isFiltered }: { projects: ProjectListItem[]; isFiltered: boolean }) {
  if (projects.length === 0) {
    return (
      <p className="text-sm text-zinc-500">
        {isFiltered ? "Geen projecten gevonden met deze filters." : "Nog geen projecten toegevoegd."}
      </p>
    );
  }

  return (
    <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-x-auto">
      <table className="w-full text-sm">
        <thead className="bg-zinc-50 dark:bg-zinc-900 text-zinc-500 dark:text-zinc-400">
          <tr>
            <th className="text-left px-4 py-3 font-medium">Projectnaam</th>
            <th className="text-left px-4 py-3 font-medium">Status</th>
            <th className="text-left px-4 py-3 font-medium">Rikx Ronde</th>
            <th className="text-left px-4 py-3 font-medium">Aangemaakt</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
          {projects.map((p) => (
            <tr key={p.id} className="bg-white dark:bg-zinc-950 hover:bg-orange-50/60 dark:hover:bg-zinc-900 transition-colors">
              <td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">
                <Link href={`/projecten/${p.id}`} className="hover:text-rikx-orange-dark hover:underline">
                  {p.name}
                </Link>
              </td>
              <td className="px-4 py-3">
                <span
                  className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap ${projectStatusBadgeClass(p.status)}`}
                >
                  {projectStatusLabel(p.status)}
                </span>
              </td>
              <td className="px-4 py-3 text-zinc-700 dark:text-zinc-300 whitespace-nowrap">{p.ronde_label ?? "—"}</td>
              <td className="px-4 py-3 text-zinc-500 text-xs whitespace-nowrap">
                {new Date(p.created_at).toLocaleDateString("nl-NL")}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}