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

export default async function OperatorPage() {
  const session = await auth()
  const worker = await prisma.worker.findFirst({
    where: { email: session?.user?.email || "" }
  })

  if (!worker) return <div>Worker not found</div>

  const today = new Date()
  today.setHours(0, 0, 0, 0)

  const activeShifts = await prisma.shiftTeamMember.findMany({
    where: {
      workerId: worker.id,
      shift: {
        shiftDate: { gte: today },
        status: "active"
      }
    },
    include: {
      shift: true,
      team: true,
      machine: true,
    }
  })

  return (
    <DashboardLayout requiredRole="operator">
      <div>
        <h1 className="text-3xl font-bold text-gray-800 mb-6">Active Shifts</h1>

        {activeShifts.length === 0 ? (
          <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200 text-center">
            <p className="text-gray-600">No active shifts assigned</p>
          </div>
        ) : (
          <div className="grid gap-6">
            {activeShifts.map((member) => (
              <div key={member.id} className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
                <div className="flex justify-between items-start mb-4">
                  <div>
                    <h3 className="text-xl font-bold text-gray-800">
                      {member.shift.name} - {new Date(member.shift.shiftDate).toLocaleDateString()}
                    </h3>
                    <p className="text-gray-600 mt-1">Team: {member.team.name}</p>
                  </div>
                  <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
                    Active
                  </span>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                  <div>
                    <p className="text-sm text-gray-500">Machine</p>
                    <p className="font-medium text-gray-800">{member.machine?.name || "N/A"}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">Role</p>
                    <p className="font-medium text-gray-800">{member.shiftRole}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">Start Time</p>
                    <p className="font-medium text-gray-800">
                      {new Date(member.shift.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">End Time</p>
                    <p className="font-medium text-gray-800">
                      {new Date(member.shift.endTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                    </p>
                  </div>
                </div>

                <Link
                  href={`/operator/report/${member.shiftId}/${member.machineId}`}
                  className="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
                >
                  Open Report
                </Link>
              </div>
            ))}
          </div>
        )}
      </div>
    </DashboardLayout>
  )
}