import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import LocationHistoryPanel from "@/components/LocationHistoryPanel";

export default async function EmployeeDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const employee = await prisma.employee.findUnique({
    where: { id },
    include: {
      user: true,
      devices: true,
      monitoringPolicy: true,
      vehicleAssign: { where: { active: true }, include: { vehicle: true } },
    },
  });

  if (!employee) notFound();

  return (
    <div className="p-8 space-y-6">
      <div>
        <h1 className="text-2xl font-semibold">{employee.user.name}</h1>
        <p className="text-slate-400 text-sm">
          {employee.employeeCode} · {employee.department ?? "No department"} · {employee.designation ?? ""}
        </p>
      </div>

      <div className="grid grid-cols-3 gap-4">
        <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
          <div className="text-xs text-slate-500 mb-2">Monitoring policy</div>
          <div className="text-sm">{employee.monitoringPolicy?.name ?? "None assigned"}</div>
        </div>
        <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
          <div className="text-xs text-slate-500 mb-2">Devices</div>
          <div className="text-sm">{employee.devices.length} registered</div>
        </div>
        <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
          <div className="text-xs text-slate-500 mb-2">Assigned vehicle</div>
          <div className="text-sm">
            {employee.vehicleAssign[0]?.vehicle.registrationNumber ?? "None"}
          </div>
        </div>
      </div>

      <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
        <div className="text-xs text-slate-500 mb-3">Devices</div>
        <table className="w-full text-sm">
          <thead className="text-slate-500 text-left">
            <tr>
              <th className="py-1">Device</th>
              <th className="py-1">Model</th>
              <th className="py-1">Auth</th>
              <th className="py-1">Tracking</th>
              <th className="py-1">Last seen</th>
              <th className="py-1">Battery</th>
            </tr>
          </thead>
          <tbody>
            {employee.devices.map((d) => (
              <tr key={d.id} className="border-t border-slate-800">
                <td className="py-2">{d.deviceUid.slice(0, 10)}…</td>
                <td className="py-2">{d.model ?? "—"}</td>
                <td className="py-2">{d.authorizationState}</td>
                <td className="py-2">{d.trackingState}</td>
                <td className="py-2">{d.lastSeenAt ? new Date(d.lastSeenAt).toLocaleString() : "Never"}</td>
                <td className="py-2">{d.batteryLevel != null ? `${d.batteryLevel}%` : "—"}</td>
              </tr>
            ))}
            {employee.devices.length === 0 && (
              <tr>
                <td colSpan={6} className="py-4 text-slate-500">
                  No device registered yet.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      <LocationHistoryPanel employeeId={employee.id} />
    </div>
  );
}