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

export default async function ManagersPage() {
  const managers = await prisma.shiftManager.findMany({
    include: {
      teams: true
    },
    orderBy: { empNo: "asc" }
  })

  return (
    <DashboardLayout requiredRole="admin">
      <div>
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-3xl font-bold text-gray-800">Shift Managers</h1>
          <Link
            href="/admin/managers/create"
            className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
          >
            + Add Manager
          </Link>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Emp No</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Phone</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Team(s)</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {managers.map((manager) => (
                <tr key={manager.id}>
                  <td className="px-6 py-4 text-sm text-gray-900">{manager.empNo}</td>
                  <td className="px-6 py-4 text-sm text-gray-900">
                    {manager.firstName} {manager.surname}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-600">{manager.email}</td>
                  <td className="px-6 py-4 text-sm text-gray-600">{manager.phone}</td>
                  <td className="px-6 py-4 text-sm text-gray-600">
                    {manager.teams.length > 0 ? (
                      <div className="flex flex-wrap gap-1">
                        {manager.teams.map((team) => (
                          <span key={team.id} className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                            {team.name}
                          </span>
                        ))}
                      </div>
                    ) : (
                      <span className="text-gray-400 italic">No team assigned</span>
                    )}
                  </td>
                  <td className="px-6 py-4 text-sm">
                    <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                      manager.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                    }`}>
                      {manager.status}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm">
                    <Link href={`/admin/managers/${manager.id}`} className="text-blue-600 hover:underline">
                      Edit
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </DashboardLayout>
  )
}