import { prisma } from "@/lib/prisma";
import NewEmployeeForm from "@/components/NewEmployeeForm";
import Link from "next/link";

export const dynamic = "force-dynamic";

export default async function EmployeesPage() {
  const employees = await prisma.employee.findMany({
    include: { user: { select: { name: true, email: true, status: true } } },
    orderBy: { createdAt: "desc" },
  });

  return (
    <div className="p-8">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-semibold">Employees</h1>
        <NewEmployeeForm />
      </div>
      <div className="rounded-xl border border-slate-800 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-slate-900 text-slate-400 text-left">
            <tr>
              <th className="px-4 py-3">Code</th>
              <th className="px-4 py-3">Name</th>
              <th className="px-4 py-3">Email</th>
              <th className="px-4 py-3">Department</th>
              <th className="px-4 py-3">Status</th>
              <th className="px-4 py-3"></th>
            </tr>
          </thead>
          <tbody>
            {employees.map((e) => (
              <tr key={e.id} className="border-t border-slate-800 hover:bg-slate-900/60">
                <td className="px-4 py-3">{e.employeeCode}</td>
                <td className="px-4 py-3">{e.user.name}</td>
                <td className="px-4 py-3 text-slate-400">{e.user.email}</td>
                <td className="px-4 py-3">{e.department ?? "—"}</td>
                <td className="px-4 py-3">
                  <span
                    className={
                      e.status === "ACTIVE"
                        ? "text-emerald-400"
                        : e.status === "TERMINATED"
                        ? "text-red-400"
                        : "text-amber-400"
                    }
                  >
                    {e.status}
                  </span>
                </td>
                <td className="px-4 py-3 text-right">
                  <Link href={`/employees/${e.id}`} className="text-indigo-400 hover:text-indigo-300 text-xs">
                    View
                  </Link>
                </td>
              </tr>
            ))}
            {employees.length === 0 && (
              <tr>
                <td colSpan={6} className="px-4 py-8 text-center text-slate-500">
                  No employees yet.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}