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 { useState } from "react";
import { prisma } from "~/utils/db.server";

export const meta: MetaFunction = () => [{ title: "Stoppages Analysis - Phosphat Report" }];

interface StoppageEntry {
  id: string;
  from: string;
  to: string;
  total: string;
  reason: string;
  responsible: string;
  note: string;
}

interface StoppageData {
  sheetId: number;
  date: string;
  area: string;
  dredgerLocation: string;
  reclamationLocation: string;
  shift: string;
  employee: string;
  stoppages: StoppageEntry[];
  countedStoppages: StoppageEntry[];
  uncountedStoppages: StoppageEntry[];
  totalStoppageTime: number; // in minutes (all stoppages)
  countedStoppageTime: number; // in minutes (counted only)
  uncountedStoppageTime: number; // in minutes (uncounted only)
}

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

  // 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 areaId = url.searchParams.get('areaId');
  const employeeId = url.searchParams.get('employeeId');
  const dredgerLocationId = url.searchParams.get('dredgerLocationId');

  // Build where clause for sheets
  const whereClause: any = {};

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

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

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

  // Get sheets with their reports
  let sheets = await prisma.sheet.findMany({
    where: whereClause,
    orderBy: { date: 'desc' },
    include: {
      area: { select: { name: true } },
      dredgerLocation: { select: { name: true, class: true } },
      reclamationLocation: { select: { name: true } },
      dayShift: {
        include: {
          employee: { select: { name: true } }
        }
      },
      nightShift: {
        include: {
          employee: { select: { name: true } }
        }
      }
    }
  });

  // 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' }
    })
  ]);

  // Process stoppages data
  const stoppagesData: StoppageData[] = [];

  // Helper function to convert time string to minutes
  const timeToMinutes = (timeStr: string): number => {
    if (!timeStr || timeStr === '00:00') return 0;
    const [hours, minutes] = timeStr.split(':').map(Number);
    return (hours * 60) + minutes;
  };

  // Helper function to check if a stoppage should be counted
  const isStoppageCounted = (stoppage: StoppageEntry): boolean => {
    const reason = stoppage.reason?.toLowerCase() || '';
    const note = stoppage.note?.toLowerCase() || '';
    
    // Exclude stoppages with "Brine" or "Change Shift" in reason or notes
    return !(
      reason.includes('brine') || 
      reason.includes('change shift') ||
      note.includes('brine') || 
      note.includes('change shift')  ||
      reason.includes('shift change') ||
      note.includes('shift change')
    );
  };

  sheets.forEach(sheet => {
    // Process day shift stoppages
    if (sheet.dayShift && Array.isArray(sheet.dayShift.stoppages)) {
      const stoppages = sheet.dayShift.stoppages as StoppageEntry[];
      if (stoppages.length > 0) {
        const countedStoppages = stoppages.filter(isStoppageCounted);
        const uncountedStoppages = stoppages.filter(s => !isStoppageCounted(s));
        
        const totalTime = stoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
        const countedTime = countedStoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
        const uncountedTime = uncountedStoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
        
        stoppagesData.push({
          sheetId: sheet.id,
          date: sheet.date,
          area: sheet.area.name,
          dredgerLocation: sheet.dredgerLocation.name,
          reclamationLocation: sheet.reclamationLocation.name,
          shift: 'Day',
          employee: sheet.dayShift.employee.name,
          stoppages,
          countedStoppages,
          uncountedStoppages,
          totalStoppageTime: totalTime,
          countedStoppageTime: countedTime,
          uncountedStoppageTime: uncountedTime
        });
      }
    }

    // Process night shift stoppages
    if (sheet.nightShift && Array.isArray(sheet.nightShift.stoppages)) {
      const stoppages = sheet.nightShift.stoppages as StoppageEntry[];
      if (stoppages.length > 0) {
        const countedStoppages = stoppages.filter(isStoppageCounted);
        const uncountedStoppages = stoppages.filter(s => !isStoppageCounted(s));
        
        const totalTime = stoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
        const countedTime = countedStoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
        const uncountedTime = uncountedStoppages.reduce((sum, stoppage) => sum + timeToMinutes(stoppage.total), 0);
        
        stoppagesData.push({
          sheetId: sheet.id,
          date: sheet.date,
          area: sheet.area.name,
          dredgerLocation: sheet.dredgerLocation.name,
          reclamationLocation: sheet.reclamationLocation.name,
          shift: 'Night',
          employee: sheet.nightShift.employee.name,
          stoppages,
          countedStoppages,
          uncountedStoppages,
          totalStoppageTime: totalTime,
          countedStoppageTime: countedTime,
          uncountedStoppageTime: uncountedTime
        });
      }
    }
  });

  // Apply employee filter if specified (post-processing)
  let filteredStoppagesData = stoppagesData;
  if (employeeId && employeeId !== 'all') {
    const selectedEmployee = employees.find(emp => emp.id === parseInt(employeeId));
    if (selectedEmployee) {
      filteredStoppagesData = stoppagesData.filter(data => data.employee === selectedEmployee.name);
    }
  }

  // Calculate summary statistics
  const totalStoppages = filteredStoppagesData.reduce((sum, data) => sum + data.stoppages.length, 0);
  const countedStoppages = filteredStoppagesData.reduce((sum, data) => sum + data.countedStoppages.length, 0);
  const uncountedStoppages = filteredStoppagesData.reduce((sum, data) => sum + data.uncountedStoppages.length, 0);
  
  const totalStoppageTime = filteredStoppagesData.reduce((sum, data) => sum + data.totalStoppageTime, 0);
  const countedStoppageTime = filteredStoppagesData.reduce((sum, data) => sum + data.countedStoppageTime, 0);
  const uncountedStoppageTime = filteredStoppagesData.reduce((sum, data) => sum + data.uncountedStoppageTime, 0);
  
  const totalSheets = filteredStoppagesData.length;
  const averageStoppagesPerSheet = totalSheets > 0 ? Math.round((totalStoppages / totalSheets) * 10) / 10 : 0;
  const averageCountedStoppagesPerSheet = totalSheets > 0 ? Math.round((countedStoppages / totalSheets) * 10) / 10 : 0;
  const averageStoppageTimePerSheet = totalSheets > 0 ? Math.round((totalStoppageTime / totalSheets) * 10) / 10 : 0;
  const averageCountedTimePerSheet = totalSheets > 0 ? Math.round((countedStoppageTime / totalSheets) * 10) / 10 : 0;

  // Convert total time back to hours:minutes format
  const formatMinutesToTime = (minutes: number): string => {
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
  };

  return json({
    user,
    stoppagesData: filteredStoppagesData,
    areas,
    dredgerLocations,
    employees,
    filters: {
      dateFrom,
      dateTo,
      areaId,
      employeeId,
      dredgerLocationId
    },
    summary: {
      totalStoppages,
      countedStoppages,
      uncountedStoppages,
      totalStoppageTime: formatMinutesToTime(totalStoppageTime),
      countedStoppageTime: formatMinutesToTime(countedStoppageTime),
      uncountedStoppageTime: formatMinutesToTime(uncountedStoppageTime),
      totalStoppageTimeMinutes: totalStoppageTime,
      countedStoppageTimeMinutes: countedStoppageTime,
      uncountedStoppageTimeMinutes: uncountedStoppageTime,
      totalSheets,
      averageStoppagesPerSheet,
      averageCountedStoppagesPerSheet,
      averageStoppageTimePerSheet: formatMinutesToTime(Math.round(averageStoppageTimePerSheet)),
      averageCountedTimePerSheet: formatMinutesToTime(Math.round(averageCountedTimePerSheet))
    }
  });
};

export default function Stoppages() {
  const { user, stoppagesData, areas, dredgerLocations, employees, filters, summary } = useLoaderData<typeof loader>();
  const [searchParams, setSearchParams] = useSearchParams();
  const [showFilters, setShowFilters] = useState(false);

  // 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.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";
  };

  return (
    <DashboardLayout user={user}>
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
          <div>
            <h1 className="text-xl sm:text-2xl font-bold text-gray-900">Stoppages Analysis</h1>
            <p className="mt-1 text-sm text-gray-600">Analyze operational stoppages across all report sheets</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>

                {/* 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">{stoppagesData.length}</span> sheet{stoppagesData.length !== 1 ? 's' : ''} with stoppages
                  {hasActiveFilters() && ' matching your filters'}
                </p>
              </div>
            </div>
          )}
        </div>

        {/* Legend */}
        <div className="bg-white shadow-sm rounded-lg overflow-hidden">
          <div className="px-4 sm:px-6 py-4">
            <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-4">
                <div className="flex items-center space-x-2">
                  <div className="w-4 h-4 bg-red-100 border-l-2 border-red-300 rounded"></div>
                  <span className="text-sm text-gray-700">Counted Stoppages</span>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="w-4 h-4 bg-green-100 border-l-2 border-green-300 rounded"></div>
                  <span className="text-sm text-gray-700">Uncounted Stoppages</span>
                </div>
              </div>
              <div className="text-xs text-gray-500">
                Uncounted: Brine operations & shift changes (planned activities)
              </div>
            </div>
          </div>
        </div>

        {/* Summary Statistics */}
        <div className="bg-white shadow-sm rounded-lg overflow-hidden">
          <div className="px-4 sm:px-6 py-4 border-b border-gray-200">
            <h3 className="text-lg font-medium text-gray-900">Stoppages Summary</h3>
            <p className="mt-1 text-sm text-gray-600">Overall statistics for the selected period</p>
          </div>
          <div className="p-4 sm:p-6">
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 gap-4">
              {/* Total Stoppages */}
              <div className="bg-gray-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-gray-800">{summary.totalStoppages}</div>
                <div className="text-xs text-gray-700 mt-1">Total Stoppages</div>
              </div>

              {/* Counted Stoppages */}
              <div className="bg-red-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-red-800">{summary.countedStoppages}</div>
                <div className="text-xs text-red-700 mt-1">Counted</div>
              </div>

              {/* Uncounted Stoppages */}
              <div className="bg-green-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-green-800">{summary.uncountedStoppages}</div>
                <div className="text-xs text-green-700 mt-1">Uncounted</div>
              </div>

              {/* Total Time */}
              <div className="bg-orange-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-orange-800">{summary.totalStoppageTime}</div>
                <div className="text-xs text-orange-700 mt-1">Total Time</div>
              </div>

              {/* Counted Time */}
              <div className="bg-red-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-red-800">{summary.countedStoppageTime}</div>
                <div className="text-xs text-red-700 mt-1">Counted Time</div>
              </div>

              {/* Uncounted Time */}
              <div className="bg-green-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-green-800">{summary.uncountedStoppageTime}</div>
                <div className="text-xs text-green-700 mt-1">Uncounted Time</div>
              </div>

              {/* Sheets with Stoppages */}
              <div className="bg-blue-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-blue-800">{summary.totalSheets}</div>
                <div className="text-xs text-blue-700 mt-1">Sheets w/ Stops</div>
              </div>

              {/* Average Counted per Sheet */}
              <div className="bg-indigo-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-indigo-800">{summary.averageCountedStoppagesPerSheet}</div>
                <div className="text-xs text-indigo-700 mt-1">Avg Counted/Sheet</div>
              </div>
            </div>

            {/* Additional Insights */}
            <div className="mt-4 pt-4 border-t border-gray-200">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Counted vs Total:</span>
                  <span className="font-medium text-gray-900">
                    {summary.totalStoppages > 0 ? Math.round((summary.countedStoppages / summary.totalStoppages) * 100) : 0}% counted
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Avg Total/Sheet:</span>
                  <span className="font-medium text-gray-900">
                    {summary.averageStoppagesPerSheet}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Avg Total Time/Sheet:</span>
                  <span className="font-medium text-gray-900">
                    {summary.averageStoppageTimePerSheet}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Avg Counted Time/Sheet:</span>
                  <span className="font-medium text-gray-900">
                    {summary.averageCountedTimePerSheet}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Stoppages 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 & Shift
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Location
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Employee
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Stoppages
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Total Time
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {stoppagesData.map((data, index) => (
                    <tr key={`${data.sheetId}-${data.shift}`} className="hover:bg-gray-50 transition-colors duration-150">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex flex-col space-y-1">
                          <div className="text-sm font-medium text-gray-900">
                            {new Date(data.date).toLocaleDateString('en-GB')}
                          </div>
                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge(data.shift)}`}>
                            {data.shift} Shift
                          </span>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">
                          <div className="font-medium">{data.area}</div>
                          <div className="text-gray-500">{data.dredgerLocation} - {data.reclamationLocation}</div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{data.employee}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="space-y-2">
                          {data.stoppages.map((stoppage, idx) => {
                            const isCounted = data.countedStoppages.some(cs => cs.id === stoppage.id);
                            return (
                              <div key={stoppage.id} className={`text-xs rounded p-2 ${isCounted ? 'bg-red-50 border-l-2 border-red-300' : 'bg-green-50 border-l-2 border-green-300'}`}>
                                <div className="flex justify-between items-start mb-1">
                                  <div className="flex items-center space-x-2">
                                    <span className="font-medium text-gray-900">{stoppage.reason}</span>
                                    <span className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${isCounted ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`}>
                                      {isCounted ? 'Counted' : 'Uncounted'}
                                    </span>
                                  </div>
                                  <span className="text-gray-600">{stoppage.total}</span>
                                </div>
                                <div className="text-gray-600">
                                  {stoppage.from} - {stoppage.to}
                                </div>
                                {stoppage.responsible && (
                                  <div className="text-gray-500 mt-1">
                                    Responsible: {stoppage.responsible}
                                  </div>
                                )}
                                {stoppage.note && (
                                  <div className="text-gray-500 mt-1 italic">
                                    {stoppage.note}
                                  </div>
                                )}
                              </div>
                            );
                          })}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium text-gray-900">
                          Total: {Math.floor(data.totalStoppageTime / 60).toString().padStart(2, '0')}:
                          {(data.totalStoppageTime % 60).toString().padStart(2, '0')}
                        </div>
                        <div className="text-sm font-medium text-red-800">
                          Counted: {Math.floor(data.countedStoppageTime / 60).toString().padStart(2, '0')}:
                          {(data.countedStoppageTime % 60).toString().padStart(2, '0')}
                        </div>
                        <div className="text-xs text-gray-500 mt-1">
                          {data.countedStoppages.length} counted, {data.uncountedStoppages.length} uncounted
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Stoppages Cards - Mobile */}
          <div className="lg:hidden">
            <div className="space-y-4 p-4">
              {stoppagesData.map((data, index) => (
                <div key={`${data.sheetId}-${data.shift}`} 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(data.date).toLocaleDateString('en-GB')}
                      </div>
                      <div className="text-xs text-gray-500">{data.area}</div>
                    </div>
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge(data.shift)}`}>
                      {data.shift}
                    </span>
                  </div>
                  
                  <div className="space-y-2 mb-4">
                    <div className="flex justify-between">
                      <span className="text-xs font-medium text-gray-500">Employee:</span>
                      <span className="text-xs text-gray-900">{data.employee}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs font-medium text-gray-500">Location:</span>
                      <span className="text-xs text-gray-900">{data.dredgerLocation} - {data.reclamationLocation}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs font-medium text-gray-500">Total Time:</span>
                      <span className="text-xs font-medium text-gray-900">
                        {Math.floor(data.totalStoppageTime / 60).toString().padStart(2, '0')}:
                        {(data.totalStoppageTime % 60).toString().padStart(2, '0')}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs font-medium text-gray-500">Counted Time:</span>
                      <span className="text-xs font-medium text-red-800">
                        {Math.floor(data.countedStoppageTime / 60).toString().padStart(2, '0')}:
                        {(data.countedStoppageTime % 60).toString().padStart(2, '0')}
                      </span>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <div className="text-xs font-medium text-gray-700 mb-2">
                      Stoppages ({data.countedStoppages.length} counted, {data.uncountedStoppages.length} uncounted):
                    </div>
                    {data.stoppages.map((stoppage) => {
                      const isCounted = data.countedStoppages.some(cs => cs.id === stoppage.id);
                      return (
                        <div key={stoppage.id} className={`text-xs rounded p-2 ${isCounted ? 'bg-red-50 border-l-2 border-red-300' : 'bg-green-50 border-l-2 border-green-300'}`}>
                          <div className="flex justify-between items-start mb-1">
                            <div className="flex items-center space-x-2">
                              <span className="font-medium text-gray-900">{stoppage.reason}</span>
                              <span className={`inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium ${isCounted ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`}>
                                {isCounted ? 'C' : 'U'}
                              </span>
                            </div>
                            <span className="text-gray-600">{stoppage.total}</span>
                          </div>
                          <div className="text-gray-600">
                            {stoppage.from} - {stoppage.to}
                          </div>
                          {stoppage.responsible && (
                            <div className="text-gray-500 mt-1">
                              Responsible: {stoppage.responsible}
                            </div>
                          )}
                          {stoppage.note && (
                            <div className="text-gray-500 mt-1 italic">
                              {stoppage.note}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {stoppagesData.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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <h3 className="mt-2 text-sm font-medium text-gray-900">No stoppages found</h3>
              <p className="mt-1 text-sm text-gray-500">
                {hasActiveFilters() 
                  ? "No stoppages match your current filters. Try adjusting the filters."
                  : "No stoppages have been recorded yet."
                }
              </p>
            </div>
          )}
        </div>
      </div>
    </DashboardLayout>
  );
}