import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData, useSearchParams } from "@remix-run/react";
import { requireAuthLevel } from "~/utils/auth.server";
import DashboardLayout from "~/components/DashboardLayout";
import ReportSheetViewModal from "~/components/ReportSheetViewModal";
import { useState } from "react";
import { prisma } from "~/utils/db.server";

export const meta: MetaFunction = () => [{ title: "Report Sheets - Alhaffer Report System" }];

interface ReportSheet {
  id: string;
  date: string;
  area: string;
  dredgerLocation: string;
  reclamationLocation: string;
  status: string;
  dayReport?: any;
  nightReport?: any;
}

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const user = await requireAuthLevel(request, 1);

  // Parse URL search parameters for filters
  const url = new URL(request.url);
  const dateFrom = url.searchParams.get('dateFrom');
  const dateTo = url.searchParams.get('dateTo');
  const status = url.searchParams.get('status');
  const areaId = url.searchParams.get('areaId');
  const employeeId = url.searchParams.get('employeeId');
  const dredgerLocationId = url.searchParams.get('dredgerLocationId');

  // Build where clause based on filters
  const whereClause: any = {};

  // Date range filter
  if (dateFrom || dateTo) {
    if (dateFrom) {
      whereClause.date = { gte: dateFrom };
    }
    if (dateTo) {
      whereClause.date = { ...whereClause.date, lte: dateTo };
    }
  }

  // Status filter
  if (status && status !== 'all') {
    whereClause.status = status;
  }

  // Area filter
  if (areaId && areaId !== 'all') {
    whereClause.areaId = parseInt(areaId);
  }

  // Dredger location filter
  if (dredgerLocationId && dredgerLocationId !== 'all') {
    whereClause.dredgerLocationId = parseInt(dredgerLocationId);
  }

  // Get filtered sheets with related data
  let sheets = await prisma.sheet.findMany({
    where: whereClause,
    orderBy: { createdAt: 'desc' },
    include: {
      area: { select: { name: true } },
      dredgerLocation: { select: { name: true, class: true } },
      reclamationLocation: { select: { name: true } },
      dayShift: {
        include: {
          employee: { select: { name: true } },
          area: { select: { name: true } },
          dredgerLocation: { select: { name: true, class: true } },
          reclamationLocation: { select: { name: true } },
          shiftWorkers: {
            include: {
              worker: { select: { id: true, name: true, status: true } }
            }
          }
        }
      },
      nightShift: {
        include: {
          employee: { select: { name: true } },
          area: { select: { name: true } },
          dredgerLocation: { select: { name: true, class: true } },
          reclamationLocation: { select: { name: true } },
          shiftWorkers: {
            include: {
              worker: { select: { id: true, name: true, status: true } }
            }
          }
        }
      }
    }
  });

  // Apply employee filter if specified
  if (employeeId && employeeId !== 'all') {
    sheets = sheets.filter((sheet: any) =>
      (sheet.dayShift && sheet.dayShift.employeeId === parseInt(employeeId)) ||
      (sheet.nightShift && sheet.nightShift.employeeId === parseInt(employeeId))
    );
  }

  // Filter sheets for level 1 users (only show sheets where user has at least one shift)
  if (user.authLevel === 1) {
    sheets = sheets.filter((sheet: any) =>
      (sheet.dayShift && sheet.dayShift.employeeId === user.id) ||
      (sheet.nightShift && sheet.nightShift.employeeId === user.id)
    );
  }

  // Get dropdown data for filters
  const [areas, dredgerLocations, employees] = await Promise.all([
    prisma.area.findMany({ orderBy: { name: 'asc' } }),
    prisma.dredgerLocation.findMany({ orderBy: { name: 'asc' } }),
    prisma.employee.findMany({
      where: { status: 'active' },
      select: { id: true, name: true },
      orderBy: { name: 'asc' }
    })
  ]);

  // Transform sheets to match the expected interface
  const transformedSheets = sheets.map((sheet: any) => ({
    id: sheet.id.toString(),
    date: sheet.date,
    area: sheet.area.name,
    dredgerLocation: sheet.dredgerLocation.name,
    reclamationLocation: sheet.reclamationLocation.name,
    status: sheet.status,
    dayReport: sheet.dayShift,
    nightReport: sheet.nightShift
  }));

  return json({
    user,
    sheets: transformedSheets,
    areas,
    dredgerLocations,
    employees,
    filters: {
      dateFrom,
      dateTo,
      status,
      areaId,
      employeeId,
      dredgerLocationId
    }
  });
};

export default function ReportSheet() {
  const { user, sheets, areas, dredgerLocations, employees, filters } = useLoaderData<typeof loader>();
  const [viewingSheet, setViewingSheet] = useState<ReportSheet | null>(null);
  const [showViewModal, setShowViewModal] = useState(false);
  const [searchParams, setSearchParams] = useSearchParams();
  const [showFilters, setShowFilters] = useState(false);
  const [showWorkersModal, setShowWorkersModal] = useState(false);
  const [selectedShiftWorkers, setSelectedShiftWorkers] = useState<{ shift: string; workers: any[]; sheet: any } | null>(null);

  const handleView = (sheet: ReportSheet) => {
    setViewingSheet(sheet);
    setShowViewModal(true);
  };

  const handleCloseViewModal = () => {
    setShowViewModal(false);
    setViewingSheet(null);
  };

  const handleViewWorkers = (sheet: any, shift: 'day' | 'night') => {
    const shiftReport = shift === 'day' ? sheet.dayReport : sheet.nightReport;
    setSelectedShiftWorkers({
      shift,
      workers: shiftReport?.shiftWorkers || [],
      sheet
    });
    setShowWorkersModal(true);
  };

  const handleCloseWorkersModal = () => {
    setShowWorkersModal(false);
    setSelectedShiftWorkers(null);
  };

  // Filter functions
  const handleFilterChange = (filterName: string, value: string) => {
    const newSearchParams = new URLSearchParams(searchParams);
    if (value === '' || value === 'all') {
      newSearchParams.delete(filterName);
    } else {
      newSearchParams.set(filterName, value);
    }
    setSearchParams(newSearchParams);
  };

  const clearAllFilters = () => {
    setSearchParams(new URLSearchParams());
  };

  const hasActiveFilters = () => {
    return filters.dateFrom || filters.dateTo || filters.status || filters.areaId || filters.employeeId || filters.dredgerLocationId;
  };

  // Get today's date for date input max values
  const today = new Date().toISOString().split('T')[0];

  const getShiftBadge = (shift: string) => {
    return shift === "day"
      ? "bg-yellow-100 text-yellow-800"
      : "bg-blue-100 text-blue-800";
  };

  const getShiftIcon = (shift: string) => {
    return shift === "day" ? (
      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
      </svg>
    ) : (
      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
      </svg>
    );
  };

  return (
    <DashboardLayout user={user}>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-xl sm:text-2xl font-bold text-gray-900">Report Sheets</h1>
            <p className="mt-1 text-sm text-gray-600">View grouped reports by location and date</p>
          </div>
        </div>

        {/* Filter Section */}
        <div className="bg-white shadow-sm rounded-lg overflow-hidden">
          <div className="px-4 sm:px-6 py-4 border-b border-gray-200">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-2 sm:space-y-0">
              <div className="flex items-center space-x-2">
                <button
                  onClick={() => setShowFilters(!showFilters)}
                  className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                  </svg>
                  {showFilters ? 'Hide Filters' : 'Show Filters'}
                </button>
                {hasActiveFilters() && (
                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                    {Object.values(filters).filter(Boolean).length} active
                  </span>
                )}
              </div>
              {hasActiveFilters() && (
                <button
                  onClick={clearAllFilters}
                  className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-600 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Clear All Filters
                </button>
              )}
            </div>
          </div>

          {showFilters && (
            <div className="px-4 sm:px-6 py-4 bg-gray-50 border-b border-gray-200">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
                {/* Date From */}
                <div>
                  <label htmlFor="dateFrom" className="block text-xs font-medium text-gray-700 mb-1">
                    Date From
                  </label>
                  <input
                    type="date"
                    id="dateFrom"
                    value={filters.dateFrom || ''}
                    max={today}
                    onChange={(e) => handleFilterChange('dateFrom', e.target.value)}
                    className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                  />
                </div>

                {/* Date To */}
                <div>
                  <label htmlFor="dateTo" className="block text-xs font-medium text-gray-700 mb-1">
                    Date To
                  </label>
                  <input
                    type="date"
                    id="dateTo"
                    value={filters.dateTo || ''}
                    max={today}
                    onChange={(e) => handleFilterChange('dateTo', e.target.value)}
                    className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                  />
                </div>

                {/* Status */}
                <div>
                  <label htmlFor="status" className="block text-xs font-medium text-gray-700 mb-1">
                    Status
                  </label>
                  <select
                    id="status"
                    value={filters.status || 'all'}
                    onChange={(e) => handleFilterChange('status', e.target.value)}
                    className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                  >
                    <option value="all">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="completed">Completed</option>
                  </select>
                </div>

                {/* Area */}
                <div>
                  <label htmlFor="areaId" className="block text-xs font-medium text-gray-700 mb-1">
                    Area
                  </label>
                  <select
                    id="areaId"
                    value={filters.areaId || 'all'}
                    onChange={(e) => handleFilterChange('areaId', e.target.value)}
                    className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                  >
                    <option value="all">All Areas</option>
                    {areas.map((area) => (
                      <option key={area.id} value={area.id}>
                        {area.name}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Employee */}
                <div>
                  <label htmlFor="employeeId" className="block text-xs font-medium text-gray-700 mb-1">
                    Employee
                  </label>
                  <select
                    id="employeeId"
                    value={filters.employeeId || 'all'}
                    onChange={(e) => handleFilterChange('employeeId', e.target.value)}
                    className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                  >
                    <option value="all">All Employees</option>
                    {employees.map((employee) => (
                      <option key={employee.id} value={employee.id}>
                        {employee.name}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Dredger Location */}
                <div>
                  <label htmlFor="dredgerLocationId" className="block text-xs font-medium text-gray-700 mb-1">
                    Dredger Location
                  </label>
                  <select
                    id="dredgerLocationId"
                    value={filters.dredgerLocationId || 'all'}
                    onChange={(e) => handleFilterChange('dredgerLocationId', e.target.value)}
                    className="block w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                  >
                    <option value="all">All Dredger Locations</option>
                    {dredgerLocations.map((location) => (
                      <option key={location.id} value={location.id}>
                        {location.name} ({location.class.toUpperCase()})
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Results Summary */}
              <div className="mt-4 pt-4 border-t border-gray-200">
                <p className="text-sm text-gray-600">
                  Showing <span className="font-medium">{sheets.length}</span> sheet{sheets.length !== 1 ? 's' : ''}
                  {hasActiveFilters() && ' matching your filters'}
                </p>
              </div>
            </div>
          )}
        </div>

        {/* Report Sheets Table - Desktop */}
        <div className="bg-white shadow-sm rounded-lg overflow-hidden">
          <div className="hidden lg:block">
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Date
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Area
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Locations
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Available Shifts
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Employees
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {sheets.map((sheet) => (
                    <tr key={sheet.id} className="hover:bg-gray-50 transition-colors duration-150">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium text-gray-900">
                          {new Date(sheet.date).toLocaleDateString('en-GB')}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{sheet.area}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">
                          <div>Dredger: {sheet.dredgerLocation}</div>
                          <div className="text-gray-500">Reclamation: {sheet.reclamationLocation}</div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex space-x-2">
                          {sheet.dayReport && (
                            <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge('day')}`}>
                              {getShiftIcon('day')}
                              <span className="ml-1">Day</span>
                            </span>
                          )}
                          {sheet.nightReport && (
                            <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge('night')}`}>
                              {getShiftIcon('night')}
                              <span className="ml-1">Night</span>
                            </span>
                          )}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${sheet.status === 'completed'
                          ? 'bg-green-100 text-green-800'
                          : 'bg-yellow-100 text-yellow-800'
                          }`}>
                          {sheet.status === 'completed' ? (
                            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                          ) : (
                            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                          )}
                          {sheet.status.charAt(0).toUpperCase() + sheet.status.slice(1)}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900 space-y-1">
                          {sheet.dayReport && (
                            <div className="flex items-center justify-between">
                              <span>Day: {sheet.dayReport.employee.name}</span>
                              <button
                                onClick={() => handleViewWorkers(sheet, 'day')}
                                className="ml-2 text-xs text-teal-600 hover:text-teal-900"
                                title="View day shift workers"
                              >
                                ({sheet.dayReport.shiftWorkers?.length || 0} workers)
                              </button>
                            </div>
                          )}
                          {sheet.nightReport && (
                            <div className="flex items-center justify-between">
                              <span>Night: {sheet.nightReport.employee.name}</span>
                              <button
                                onClick={() => handleViewWorkers(sheet, 'night')}
                                className="ml-2 text-xs text-teal-600 hover:text-teal-900"
                                title="View night shift workers"
                              >
                                ({sheet.nightReport.shiftWorkers?.length || 0} workers)
                              </button>
                            </div>
                          )}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button
                          onClick={() => handleView(sheet)}
                          className="text-blue-600 hover:text-blue-900 transition-colors duration-150"
                        >
                          View Sheet
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Report Sheets Cards - Mobile */}
          <div className="lg:hidden">
            <div className="space-y-4 p-4">
              {sheets.map((sheet) => (
                <div key={sheet.id} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                  <div className="flex items-start justify-between mb-3">
                    <div>
                      <div className="text-sm font-medium text-gray-900">
                        {new Date(sheet.date).toLocaleDateString('en-GB')}
                      </div>
                      <div className="text-xs text-gray-500">{sheet.area}</div>
                    </div>
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${sheet.status === 'completed'
                      ? 'bg-green-100 text-green-800'
                      : 'bg-yellow-100 text-yellow-800'
                      }`}>
                      {sheet.status === 'completed' ? (
                        <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      ) : (
                        <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      )}
                      {sheet.status.charAt(0).toUpperCase() + sheet.status.slice(1)}
                    </span>
                  </div>

                  <div className="space-y-2 mb-4">
                    <div className="flex justify-between">
                      <span className="text-xs font-medium text-gray-500">Dredger:</span>
                      <span className="text-xs text-gray-900">{sheet.dredgerLocation}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs font-medium text-gray-500">Reclamation:</span>
                      <span className="text-xs text-gray-900">{sheet.reclamationLocation}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-xs font-medium text-gray-500">Shifts:</span>
                      <div className="flex space-x-1">
                        {sheet.dayReport && (
                          <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getShiftBadge('day')}`}>
                            {getShiftIcon('day')}
                            <span className="ml-1">Day</span>
                          </span>
                        )}
                        {sheet.nightReport && (
                          <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getShiftBadge('night')}`}>
                            {getShiftIcon('night')}
                            <span className="ml-1">Night</span>
                          </span>
                        )}
                      </div>
                    </div>
                    <div className="space-y-1">
                      {sheet.dayReport && (
                        <div className="flex justify-between">
                          <span className="text-xs font-medium text-gray-500">Day Employee:</span>
                          <span className="text-xs text-gray-900">{sheet.dayReport.employee.name}</span>
                        </div>
                      )}
                      {sheet.nightReport && (
                        <div className="flex justify-between">
                          <span className="text-xs font-medium text-gray-500">Night Employee:</span>
                          <span className="text-xs text-gray-900">{sheet.nightReport.employee.name}</span>
                        </div>
                      )}
                    </div>
                  </div>

                  <div className="flex flex-col space-y-2">
                    <button
                      onClick={() => handleView(sheet)}
                      className="w-full text-center px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors duration-150"
                    >
                      View Sheet Details
                    </button>
                    {sheet.dayReport && (
                      <button
                        onClick={() => handleViewWorkers(sheet, 'day')}
                        className="w-full text-center px-3 py-2 text-sm text-teal-600 bg-teal-50 rounded-md hover:bg-teal-100 transition-colors duration-150"
                      >
                        Day Workers ({sheet.dayReport.shiftWorkers?.length || 0})
                      </button>
                    )}
                    {sheet.nightReport && (
                      <button
                        onClick={() => handleViewWorkers(sheet, 'night')}
                        className="w-full text-center px-3 py-2 text-sm text-teal-600 bg-teal-50 rounded-md hover:bg-teal-100 transition-colors duration-150"
                      >
                        Night Workers ({sheet.nightReport.shiftWorkers?.length || 0})
                      </button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {sheets.length === 0 && (
            <div className="text-center py-12">
              <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              <h3 className="mt-2 text-sm font-medium text-gray-900">No report sheets</h3>
              <p className="mt-1 text-sm text-gray-500">Report sheets will appear here when reports are created.</p>
            </div>
          )}
        </div>

        {/* View Modal */}
        <ReportSheetViewModal
          isOpen={showViewModal}
          onClose={handleCloseViewModal}
          sheet={viewingSheet}
        />

        {/* Workers Modal */}
        {showWorkersModal && selectedShiftWorkers && (
          <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
            <div className="relative top-20 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-medium text-gray-900">
                  {selectedShiftWorkers.shift.charAt(0).toUpperCase() + selectedShiftWorkers.shift.slice(1)} Shift Workers
                </h3>
                <button
                  onClick={handleCloseWorkersModal}
                  className="text-gray-400 hover:text-gray-600"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              <div className="space-y-4">
                <div className="bg-gray-50 p-4 rounded-lg">
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="font-medium text-gray-700">Shift:</span>
                      <span className={`ml-2 px-2 py-1 rounded-full text-xs font-medium ${getShiftBadge(selectedShiftWorkers.shift)}`}>
                        {selectedShiftWorkers.shift.charAt(0).toUpperCase() + selectedShiftWorkers.shift.slice(1)}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium text-gray-700">Date:</span>
                      <span className="ml-2 text-gray-900">
                        {new Date(selectedShiftWorkers.sheet.date).toLocaleDateString('en-GB')}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium text-gray-700">Area:</span>
                      <span className="ml-2 text-gray-900">{selectedShiftWorkers.sheet.area}</span>
                    </div>
                    <div>
                      <span className="font-medium text-gray-700">Employee:</span>
                      <span className="ml-2 text-gray-900">
                        {selectedShiftWorkers.shift === 'day'
                          ? selectedShiftWorkers.sheet.dayReport?.employee.name
                          : selectedShiftWorkers.sheet.nightReport?.employee.name}
                      </span>
                    </div>
                  </div>
                </div>

                <div>
                  <h4 className="text-sm font-medium text-gray-700 mb-3">
                    Assigned Workers ({selectedShiftWorkers.workers.length})
                  </h4>
                  {selectedShiftWorkers.workers.length > 0 ? (
                    <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
                      <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50">
                          <tr>
                            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              #
                            </th>
                            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Worker Name
                            </th>
                            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Status
                            </th>
                          </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                          {selectedShiftWorkers.workers.map((sw: any, index: number) => (
                            <tr key={sw.id} className="hover:bg-gray-50">
                              <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                                {index + 1}
                              </td>
                              <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                {sw.worker.name}
                              </td>
                              <td className="px-4 py-3 whitespace-nowrap">
                                <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${sw.worker.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                                  {sw.worker.status}
                                </span>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <div className="text-center py-8 bg-gray-50 rounded-lg">
                      <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                      </svg>
                      <p className="mt-2 text-sm text-gray-500">No workers assigned to this shift</p>
                    </div>
                  )}
                </div>

                <div className="flex justify-end pt-4">
                  <button
                    onClick={handleCloseWorkersModal}
                    className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                  >
                    Close
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </DashboardLayout>
  );
}