import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Form, useActionData, useLoaderData, useNavigation, Link, useSearchParams } from "@remix-run/react";
import { requireAuthLevel } from "~/utils/auth.server";
import DashboardLayout from "~/components/DashboardLayout";
import ReportViewModal from "~/components/ReportViewModal";
import ReportFormModal from "~/components/ReportFormModal";
import Toast from "~/components/Toast";
import { useState, useEffect } from "react";
import { manageSheet, removeFromSheet } from "~/utils/sheet.server";
import { prisma } from "~/utils/db.server";

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

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const user = await requireAuthLevel(request, 1); // All employees can access reports

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

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

  // Date range filter
  if (dateFrom || dateTo) {
    whereClause.createdDate = {};
    if (dateFrom) {
      whereClause.createdDate.gte = new Date(dateFrom + 'T00:00:00.000Z');
    }
    if (dateTo) {
      whereClause.createdDate.lte = new Date(dateTo + 'T23:59:59.999Z');
    }
  }

  // Shift filter
  if (shift && shift !== 'all') {
    whereClause.shift = shift;
  }

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

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

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

  // Search filter (search within notes)
  if (search && search.trim() !== '') {
    whereClause.notes = {
      contains: search.trim(),
      mode: 'insensitive' // Case-insensitive search
    };
  }

  // Get filtered reports with related data
  let reports = await prisma.report.findMany({
    where: whereClause,
    orderBy: { createdDate: 'desc' },
    include: {
      employee: { select: { name: true } },
      area: { select: { name: true } },
      dredgerLocation: { select: { name: true, class: true } },
      reclamationLocation: { select: { name: true } }
    }
  });

  // if (user.authLevel === 1){
  //   // filter report by user id
  //   reports = reports.filter((report: any) => report.employeeId === user.id);
  // }


  // if (user.authLevel === 1) {
  //   reports = await prisma.report.findMany({
  //     where: { employeeId: user.id },
  //     orderBy: { createdDate: 'desc' },
  //     include: {
  //       employee: { select: { name: true } },
  //       area: { select: { name: true } },
  //       dredgerLocation: { select: { name: true, class: true } },
  //       reclamationLocation: { select: { name: true } }
  //     }
  //   });
  // }


  // Calculate statistics for the stats section
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);

  const sevenDaysAgo = new Date(today);
  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);

  // Get dropdown data and statistics
  const [areas, dredgerLocations, reclamationLocations, foremen, equipment, employees, stats] = await Promise.all([
    prisma.area.findMany({ orderBy: { name: 'asc' } }),
    prisma.dredgerLocation.findMany({ orderBy: { name: 'asc' } }),
    prisma.reclamationLocation.findMany({ orderBy: { name: 'asc' } }),
    prisma.foreman.findMany({ orderBy: { name: 'asc' } }),
    prisma.equipment.findMany({ orderBy: [{ category: 'asc' }, { model: 'asc' }, { number: 'asc' }] }),
    prisma.employee.findMany({
      where: { status: 'active' },
      select: { id: true, name: true },
      orderBy: { name: 'asc' }
    }),
    // Calculate statistics
    Promise.all([
      // Total reports count
      prisma.report.count(),
      // Day shift count
      prisma.report.count({ where: { shift: 'day' } }),
      // Night shift count
      prisma.report.count({ where: { shift: 'night' } }),
      // Reports from today
      prisma.report.count({
        where: {
          createdDate: {
            gte: today,
            lt: new Date(today.getTime() + 24 * 60 * 60 * 1000)
          }
        }
      }),
      // Reports from yesterday
      prisma.report.count({
        where: {
          createdDate: {
            gte: yesterday,
            lt: today
          }
        }
      }),
      // Reports from last 7 days for average calculation
      prisma.report.count({
        where: {
          createdDate: {
            gte: sevenDaysAgo
          }
        }
      })
    ])
  ]);

  const [totalReports, dayShiftCount, nightShiftCount, todayCount, yesterdayCount, last7DaysCount] = stats;
  const averagePerDay = Math.round((last7DaysCount / 7) * 10) / 10; // Round to 1 decimal place

  return json({
    user,
    reports,
    areas,
    dredgerLocations,
    reclamationLocations,
    foremen,
    equipment,
    employees,
    stats: {
      totalReports,
      dayShiftCount,
      nightShiftCount,
      todayCount,
      yesterdayCount,
      averagePerDay
    },
    filters: {
      dateFrom,
      dateTo,
      shift,
      areaId,
      employeeId,
      dredgerLocationId,
      search
    }
  });
};

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

  const formData = await request.formData();
  const intent = formData.get("intent");
  const id = formData.get("id");

  if (intent === "update") {
    if (typeof id !== "string") {
      return json({ errors: { form: "Invalid report ID" } }, { status: 400 });
    }

    // Check if user owns this report or has admin privileges
    const existingReport = await prisma.report.findUnique({
      where: { id: parseInt(id) },
      select: {
        employeeId: true,
        createdDate: true,
        shift: true,
        areaId: true,
        dredgerLocationId: true,
        reclamationLocationId: true
      }
    });

    if (!existingReport) {
      return json({ errors: { form: "Report not found" } }, { status: 404 });
    }

    if (user.authLevel < 2) {
      // Regular users can only edit their own reports
      if (existingReport.employeeId !== user.id) {
        return json({ errors: { form: "You can only edit your own reports" } }, { status: 403 });
      }

      // Regular users can only edit their latest report
      const latestUserReport = await prisma.report.findFirst({
        where: { employeeId: user.id },
        orderBy: { createdDate: 'desc' },
        select: { id: true }
      });

      if (!latestUserReport || latestUserReport.id !== parseInt(id)) {
        return json({ errors: { form: "You can only edit your latest report" } }, { status: 403 });
      }
    }

    const shift = formData.get("shift");
    const areaId = formData.get("areaId");
    const dredgerLocationId = formData.get("dredgerLocationId");
    const dredgerLineLength = formData.get("dredgerLineLength");
    const reclamationLocationId = formData.get("reclamationLocationId");
    const shoreConnection = formData.get("shoreConnection");
    const notes = formData.get("notes");

    // Complex JSON fields
    const reclamationHeightBase = formData.get("reclamationHeightBase");
    const reclamationHeightExtra = formData.get("reclamationHeightExtra");
    const pipelineMain = formData.get("pipelineMain");
    const pipelineExt1 = formData.get("pipelineExt1");
    const pipelineReserve = formData.get("pipelineReserve");
    const pipelineExt2 = formData.get("pipelineExt2");
    const statsDozers = formData.get("statsDozers");
    const statsExc = formData.get("statsExc");
    const statsLoaders = formData.get("statsLoaders");
    const statsForeman = formData.get("statsForeman");
    const statsLaborer = formData.get("statsLaborer");
    const timeSheetData = formData.get("timeSheetData");
    const stoppagesData = formData.get("stoppagesData");

    // Validation (same as create)
    if (typeof shift !== "string" || !["day", "night"].includes(shift)) {
      return json({ errors: { shift: "Valid shift is required" } }, { status: 400 });
    }
    if (typeof areaId !== "string" || !areaId) {
      return json({ errors: { areaId: "Area is required" } }, { status: 400 });
    }
    if (typeof dredgerLocationId !== "string" || !dredgerLocationId) {
      return json({ errors: { dredgerLocationId: "Dredger location is required" } }, { status: 400 });
    }
    if (typeof dredgerLineLength !== "string" || isNaN(parseInt(dredgerLineLength))) {
      return json({ errors: { dredgerLineLength: "Valid dredger line length is required" } }, { status: 400 });
    }
    if (typeof reclamationLocationId !== "string" || !reclamationLocationId) {
      return json({ errors: { reclamationLocationId: "Reclamation location is required" } }, { status: 400 });
    }
    if (typeof shoreConnection !== "string" || isNaN(parseInt(shoreConnection))) {
      return json({ errors: { shoreConnection: "Valid shore connection is required" } }, { status: 400 });
    }

    try {
      // Parse JSON arrays
      let timeSheet = [];
      let stoppages = [];

      if (timeSheetData && typeof timeSheetData === "string") {
        try {
          timeSheet = JSON.parse(timeSheetData);
        } catch (e) {
          timeSheet = [];
        }
      }

      if (stoppagesData && typeof stoppagesData === "string") {
        try {
          stoppages = JSON.parse(stoppagesData);
        } catch (e) {
          stoppages = [];
        }
      }

      // First, remove from old sheet if location/date changed
      if (existingReport.areaId !== parseInt(areaId) ||
        existingReport.dredgerLocationId !== parseInt(dredgerLocationId) ||
        existingReport.reclamationLocationId !== parseInt(reclamationLocationId)) {
        await removeFromSheet(
          parseInt(id),
          existingReport.shift,
          existingReport.areaId,
          existingReport.dredgerLocationId,
          existingReport.reclamationLocationId,
          existingReport.createdDate
        );
      }

      const updatedReport = await prisma.report.update({
        where: { id: parseInt(id) },
        data: {
          shift,
          areaId: parseInt(areaId),
          dredgerLocationId: parseInt(dredgerLocationId),
          dredgerLineLength: parseInt(dredgerLineLength),
          reclamationLocationId: parseInt(reclamationLocationId),
          shoreConnection: parseInt(shoreConnection),
          reclamationHeight: {
            base: parseInt(reclamationHeightBase as string) || 0,
            extra: parseInt(reclamationHeightExtra as string) || 0
          },
          pipelineLength: {
            main: parseInt(pipelineMain as string) || 0,
            ext1: parseInt(pipelineExt1 as string) || 0,
            reserve: parseInt(pipelineReserve as string) || 0,
            ext2: parseInt(pipelineExt2 as string) || 0
          },
          stats: {
            Dozers: parseInt(statsDozers as string) || 0,
            Exc: parseInt(statsExc as string) || 0,
            Loaders: parseInt(statsLoaders as string) || 0,
            Foreman: statsForeman as string || "",
            Laborer: parseInt(statsLaborer as string) || 0
          },
          timeSheet,
          stoppages,
          notes: notes || null
        }
      });

      // Manage sheet for new location/date
      await manageSheet(
        parseInt(id),
        shift,
        parseInt(areaId),
        parseInt(dredgerLocationId),
        parseInt(reclamationLocationId),
        updatedReport.createdDate // Use original creation date, not update date
      );
      return json({ success: "Report updated successfully!" });
    } catch (error) {
      return json({ errors: { form: "Failed to update report" } }, { status: 400 });
    }
  }

  if (intent === "duplicate") {
    if (typeof id !== "string") {
      return json({ errors: { form: "Invalid report ID" } }, { status: 400 });
    }

    // Get the original report with all its data
    const originalReport = await prisma.report.findUnique({
      where: { id: parseInt(id) },
      include: {
        area: true,
        dredgerLocation: true,
        reclamationLocation: true
      }
    });

    if (!originalReport) {
      return json({ errors: { form: "Report not found" } }, { status: 404 });
    }

    // Check if report is too old (before the day before current date)
    const reportDate = new Date(originalReport.createdDate);
    const dayBeforeToday = new Date();
    dayBeforeToday.setDate(dayBeforeToday.getDate() - 1);
    dayBeforeToday.setHours(0, 0, 0, 0); // Set to start of day

    if (reportDate < dayBeforeToday) {
      return json({ errors: { form: "Cannot duplicate reports older than yesterday" } }, { status: 400 });
    }

    // Check if the report is part of a complete sheet (both day and night shifts exist)
    const dateString = originalReport.createdDate.toISOString().split('T')[0];
    const existingSheet = await prisma.sheet.findUnique({
      where: {
        areaId_dredgerLocationId_reclamationLocationId_date: {
          areaId: originalReport.areaId,
          dredgerLocationId: originalReport.dredgerLocationId,
          reclamationLocationId: originalReport.reclamationLocationId,
          date: dateString
        }
      }
    });

    // If sheet exists and has both shifts, don't allow duplication
    if (existingSheet && existingSheet.dayShiftId && existingSheet.nightShiftId) {
      return json({ errors: { form: "Cannot duplicate report - sheet is already complete with both day and night shifts" } }, { status: 400 });
    }

    // Determine the new shift (opposite of original)
    const newShift = originalReport.shift === 'day' ? 'night' : 'day';

    // Check if the opposite shift already exists
    if (existingSheet) {
      if ((newShift === 'day' && existingSheet.dayShiftId) ||
        (newShift === 'night' && existingSheet.nightShiftId)) {
        return json({ errors: { form: `Cannot duplicate report - ${newShift} shift already exists for this date and location` } }, { status: 400 });
      }
    }

    try {
      // Create the duplicate report with opposite shift and no stoppages
      const duplicateReport = await prisma.report.create({
        data: {
          employeeId: user.id, // Assign to current user
          shift: newShift,
          areaId: originalReport.areaId,
          dredgerLocationId: originalReport.dredgerLocationId,
          dredgerLineLength: originalReport.dredgerLineLength,
          reclamationLocationId: originalReport.reclamationLocationId,
          shoreConnection: originalReport.shoreConnection,
          reclamationHeight: originalReport.reclamationHeight,
          pipelineLength: originalReport.pipelineLength,
          stats: originalReport.stats,
          timeSheet: originalReport.timeSheet,
          stoppages: [], // Empty stoppages array
          notes: originalReport.notes
        }
      });

      // Manage sheet for the new report
      await manageSheet(
        duplicateReport.id,
        newShift,
        originalReport.areaId,
        originalReport.dredgerLocationId,
        originalReport.reclamationLocationId,
        duplicateReport.createdDate
      );

      return json({ success: `Report duplicated successfully as ${newShift} shift!` });
    } catch (error) {
      console.error('Duplicate error:', error);
      return json({ errors: { form: "Failed to duplicate report" } }, { status: 400 });
    }
  }

  if (intent === "carryTo") {
    if (typeof id !== "string") {
      return json({ errors: { form: "Invalid report ID" } }, { status: 400 });
    }

    // Get the original report with all its data
    const originalReport = await prisma.report.findUnique({
      where: { id: parseInt(id) },
      include: {
        area: true,
        dredgerLocation: true,
        reclamationLocation: true
      }
    });

    if (!originalReport) {
      return json({ errors: { form: "Report not found" } }, { status: 404 });
    }

    // Check if report is from today or future (cannot carry forward)
    const reportDate = new Date(originalReport.createdDate);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    reportDate.setHours(0, 0, 0, 0);
    
    if (reportDate >= today) {
      return json({ errors: { form: "Cannot carry forward reports from today or future dates" } }, { status: 400 });
    }

    // Check if a report with same shift, area, and locations already exists for today
    const todayString = today.toISOString().split('T')[0];
    const existingTodayReport = await prisma.report.findFirst({
      where: {
        createdDate: {
          gte: today,
          lt: new Date(today.getTime() + 24 * 60 * 60 * 1000)
        },
        shift: originalReport.shift,
        areaId: originalReport.areaId,
        dredgerLocationId: originalReport.dredgerLocationId,
        reclamationLocationId: originalReport.reclamationLocationId
      }
    });

    if (existingTodayReport) {
      return json({ errors: { form: `A ${originalReport.shift} shift report already exists for today with the same location configuration` } }, { status: 400 });
    }

    try {
      // Create the carried forward report with today's date
      const carriedReport = await prisma.report.create({
        data: {
          employeeId: user.id, // Assign to current user
          shift: originalReport.shift,
          areaId: originalReport.areaId,
          dredgerLocationId: originalReport.dredgerLocationId,
          dredgerLineLength: originalReport.dredgerLineLength,
          reclamationLocationId: originalReport.reclamationLocationId,
          shoreConnection: originalReport.shoreConnection,
          reclamationHeight: originalReport.reclamationHeight,
          pipelineLength: originalReport.pipelineLength,
          stats: originalReport.stats,
          timeSheet: originalReport.timeSheet,
          stoppages: [], // Empty stoppages array for new day
          notes: originalReport.notes,
          createdDate: new Date() // Set to current date/time
        }
      });

      // Manage sheet for the new report
      await manageSheet(
        carriedReport.id,
        originalReport.shift,
        originalReport.areaId,
        originalReport.dredgerLocationId,
        originalReport.reclamationLocationId,
        carriedReport.createdDate
      );

      // Check if the sheet should be marked as completed
      const todaySheet = await prisma.sheet.findUnique({
        where: {
          areaId_dredgerLocationId_reclamationLocationId_date: {
            areaId: originalReport.areaId,
            dredgerLocationId: originalReport.dredgerLocationId,
            reclamationLocationId: originalReport.reclamationLocationId,
            date: todayString
          }
        }
      });

      // If sheet has both day and night shifts, mark as completed
      if (todaySheet && todaySheet.dayShiftId && todaySheet.nightShiftId) {
        await prisma.sheet.update({
          where: { id: todaySheet.id },
          data: { status: 'completed' }
        });
      }

      return json({ success: `Report carried forward to today as ${originalReport.shift} shift!` });
    } catch (error) {
      console.error('CarryTo error:', error);
      return json({ errors: { form: "Failed to carry forward report" } }, { status: 400 });
    }
  }

  if (intent === "delete") {
    if (typeof id !== "string") {
      return json({ errors: { form: "Invalid report ID" } }, { status: 400 });
    }

    // Check if user owns this report or has admin privileges
    const existingReport = await prisma.report.findUnique({
      where: { id: parseInt(id) },
      select: {
        employeeId: true,
        createdDate: true,
        shift: true,
        areaId: true,
        dredgerLocationId: true,
        reclamationLocationId: true
      }
    });

    if (!existingReport) {
      return json({ errors: { form: "Report not found" } }, { status: 404 });
    }

    if (user.authLevel < 2) {
      // Regular users can only delete their own reports
      if (existingReport.employeeId !== user.id) {
        return json({ errors: { form: "You can only delete your own reports" } }, { status: 403 });
      }

      // Regular users can only delete their latest report
      const latestUserReport = await prisma.report.findFirst({
        where: { employeeId: user.id },
        orderBy: { createdDate: 'desc' },
        select: { id: true }
      });

      if (!latestUserReport || latestUserReport.id !== parseInt(id)) {
        return json({ errors: { form: "You can only delete your latest report" } }, { status: 403 });
      }
    }

    try {
      // Remove from sheet before deleting report
      await removeFromSheet(
        parseInt(id),
        existingReport.shift,
        existingReport.areaId,
        existingReport.dredgerLocationId,
        existingReport.reclamationLocationId,
        existingReport.createdDate
      );

      await prisma.report.delete({
        where: { id: parseInt(id) }
      });
      return json({ success: "Report deleted successfully!" });
    } catch (error) {
      return json({ errors: { form: "Failed to delete report" } }, { status: 400 });
    }
  }

  return json({ errors: { form: "Invalid action" } }, { status: 400 });
};

export default function Reports() {
  const { user, reports, areas, dredgerLocations, reclamationLocations, foremen, equipment, employees, stats, filters } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();
  const [searchParams, setSearchParams] = useSearchParams();
  const [editingReport, setEditingReport] = useState<any>(null);
  const [viewingReport, setViewingReport] = useState<any>(null);
  const [showModal, setShowModal] = useState(false);
  const [showViewModal, setShowViewModal] = useState(false);
  const [showFilters, setShowFilters] = useState(false);
  const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);

  // Dynamic arrays state for editing only
  const [timeSheetEntries, setTimeSheetEntries] = useState<Array<{
    id: string,
    machine: string,
    from1: string,
    to1: string,
    from2: string,
    to2: string,
    total: string,
    reason: string
  }>>([]);
  const [stoppageEntries, setStoppageEntries] = useState<Array<{
    id: string,
    from: string,
    to: string,
    total: string,
    reason: string,
    responsible: string,
    note: string
  }>>([]);

  const isSubmitting = navigation.state === "submitting";
  const isEditing = editingReport !== null;

  // Handle success/error messages from URL params and action data
  useEffect(() => {
    const successMessage = searchParams.get("success");
    const errorMessage = searchParams.get("error");

    if (successMessage) {
      setToast({ message: successMessage, type: "success" });
      // Clear the URL parameter
      window.history.replaceState({}, '', '/reports');
    } else if (errorMessage) {
      setToast({ message: errorMessage, type: "error" });
      // Clear the URL parameter
      window.history.replaceState({}, '', '/reports');
    } else if (actionData?.success) {
      setToast({ message: actionData.success, type: "success" });
      setShowModal(false);
      setEditingReport(null);
    } else if (actionData?.errors?.form) {
      setToast({ message: actionData.errors.form, type: "error" });
    }
  }, [actionData, searchParams]);

  const handleView = (report: any) => {
    setViewingReport(report);
    setShowViewModal(true);
  };

  const handleEdit = (report: any) => {
    setEditingReport(report);
    // Load existing timesheet and stoppages data
    setTimeSheetEntries(Array.isArray(report.timeSheet) ? report.timeSheet : []);
    setStoppageEntries(Array.isArray(report.stoppages) ? report.stoppages : []);
    setShowModal(true);
  };

  // Remove handleAdd since we're using a separate page

  const handleCloseModal = () => {
    setShowModal(false);
    setEditingReport(null);
    setTimeSheetEntries([]);
    setStoppageEntries([]);
  };

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

  // Helper function to calculate time difference in hours:minutes format
  const calculateTimeDifference = (from1: string, to1: string, from2: string, to2: string) => {
    if (!from1 || !to1) return "00:00";

    const parseTime = (timeStr: string) => {
      const [hours, minutes] = timeStr.split(':').map(Number);
      return hours * 60 + minutes;
    };

    const formatTime = (minutes: number) => {
      const hours = Math.floor(minutes / 60);
      const mins = minutes % 60;
      return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
    };

    let totalMinutes = 0;

    // First period
    if (from1 && to1) {
      const start1 = parseTime(from1);
      let end1 = parseTime(to1);
      if (end1 < start1)
        end1 += 24 * 60;
      totalMinutes += end1 - start1;
    }

    // Second period
    if (from2 && to2) {
      const start2 = parseTime(from2);
      let end2 = parseTime(to2);
      if (end2 < start2)
        end2 += 24 * 60;
      totalMinutes += end2 - start2;
    }

    return formatTime(Math.max(0, totalMinutes));
  };



  const calculateStoppageTime = (from: string, to: string) => {
    if (!from || !to) return "00:00";

    const parseTime = (timeStr: string) => {
      const [hours, minutes] = timeStr.split(':').map(Number);
      return hours * 60 + minutes;
    };

    const formatTime = (minutes: number) => {
      const hours = Math.floor(minutes / 60);
      const mins = minutes % 60;
      return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
    };

    const startMinutes = parseTime(from);
    let endMinutes = parseTime(to);
    if (endMinutes < startMinutes)
      endMinutes += 24 * 60;

    const totalMinutes = Math.max(0, endMinutes - startMinutes);

    return formatTime(totalMinutes);
  };

  // TimeSheet management functions
  const addTimeSheetEntry = () => {
    const newEntry = {
      id: Date.now().toString(),
      machine: '',
      from1: '',
      to1: '',
      from2: '',
      to2: '',
      total: '00:00',
      reason: ''
    };
    setTimeSheetEntries([...timeSheetEntries, newEntry]);
  };

  const removeTimeSheetEntry = (id: string) => {
    setTimeSheetEntries(timeSheetEntries.filter(entry => entry.id !== id));
  };

  const updateTimeSheetEntry = (id: string, field: string, value: string) => {
    setTimeSheetEntries(timeSheetEntries.map(entry => {
      if (entry.id === id) {
        const updatedEntry = { ...entry, [field]: value };
        // Auto-calculate total when time fields change
        if (['from1', 'to1', 'from2', 'to2'].includes(field)) {
          updatedEntry.total = calculateTimeDifference(
            updatedEntry.from1,
            updatedEntry.to1,
            updatedEntry.from2,
            updatedEntry.to2
          );
        }
        return updatedEntry;
      }
      return entry;
    }));
  };

  // Stoppage management functions
  const addStoppageEntry = () => {
    const newEntry = {
      id: Date.now().toString(),
      from: '',
      to: '',
      total: '00:00',
      reason: '',
      responsible: '',
      note: ''
    };
    setStoppageEntries([...stoppageEntries, newEntry]);
  };

  const removeStoppageEntry = (id: string) => {
    setStoppageEntries(stoppageEntries.filter(entry => entry.id !== id));
  };

  const updateStoppageEntry = (id: string, field: string, value: string) => {
    setStoppageEntries(stoppageEntries.map(entry => {
      if (entry.id === id) {
        const updatedEntry = { ...entry, [field]: value };
        // Auto-calculate total when time fields change
        if (['from', 'to'].includes(field)) {
          updatedEntry.total = calculateStoppageTime(updatedEntry.from, updatedEntry.to);
        }
        return updatedEntry;
      }
      return entry;
    }));
  };

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

  const canEditReport = (report: any) => {
    // Admin users (auth level >= 2) can edit any report
    if (user.authLevel >= 2) {
      return true;
    }

    // Regular users (auth level 1) can only edit their own latest report
    if (report.employeeId === user.id) {
      // Find the latest report for this user
      const userReports = reports.filter(r => r.employeeId === user.id);
      const latestReport = userReports.reduce((latest, current) =>
        new Date(current.createdDate) > new Date(latest.createdDate) ? current : latest
      );
      return report.id === latestReport.id;
    }

    return false;
  };

  const canDuplicateReport = (report: any) => {
    // Check if report is too old (before the day before current date)
    const reportDate = new Date(report.createdDate);
    const dayBeforeToday = new Date();
    dayBeforeToday.setDate(dayBeforeToday.getDate() - 1);
    dayBeforeToday.setHours(0, 0, 0, 0); // Set to start of day

    // If report is before the day before today, don't allow duplication
    if (reportDate < dayBeforeToday) {
      return false;
    }

    // All users (auth level 1+) can duplicate reports, not just their own
    // The server will handle the final validation for sheet completeness
    return true;
  };

  const canCarryForwardReport = (report: any) => {
    // Check if report is from today or future (cannot carry forward)
    const reportDate = new Date(report.createdDate);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    reportDate.setHours(0, 0, 0, 0);
    
    // If report is from today or future, don't allow carry forward
    if (reportDate >= today) {
      return false;
    }

    // All users (auth level 1+) can carry forward reports
    return true;
  };

  const isReportTooOld = (report: any) => {
    const reportDate = new Date(report.createdDate);
    const dayBeforeToday = new Date();
    dayBeforeToday.setDate(dayBeforeToday.getDate() - 1);
    dayBeforeToday.setHours(0, 0, 0, 0);
    return reportDate < dayBeforeToday;
  };

  // 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.shift || filters.areaId || filters.employeeId || filters.dredgerLocationId || filters.search;
  };

  // Debounced search handler for better performance
  const [searchTerm, setSearchTerm] = useState(filters.search || '');
  const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);

  const handleSearchChange = (value: string) => {
    setSearchTerm(value);

    // Clear existing timeout
    if (searchTimeout) {
      clearTimeout(searchTimeout);
    }

    // Set new timeout for debounced search
    const newTimeout = setTimeout(() => {
      handleFilterChange('search', value);
    }, 500); // 500ms delay

    setSearchTimeout(newTimeout);
  };

  // Update search term when filters change (e.g., from URL or clear all)
  useEffect(() => {
    setSearchTerm(filters.search || '');
  }, [filters.search]);

  // Cleanup timeout on unmount
  useEffect(() => {
    return () => {
      if (searchTimeout) {
        clearTimeout(searchTimeout);
      }
    };
  }, [searchTimeout]);

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

  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">Shifts Management</h1>
            <p className="mt-1 text-sm text-gray-600">Create and manage operational shifts</p>
          </div>
          <Link
            to="/reports/new"
            className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
          >
            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Create New Shift
          </Link>
        </div>

        {/* Quick Stats 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">
            <h3 className="text-lg font-medium text-gray-900">Quick Statistics</h3>
            <p className="mt-1 text-sm text-gray-600">Overview of report activity</p>
          </div>
          <div className="p-4 sm:p-6">
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
              {/* Total Reports */}
              <div className="bg-gray-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-gray-900">{stats.totalReports}</div>
                <div className="text-xs text-gray-600 mt-1">Total Shifts</div>
              </div>

              {/* Day Shift Count */}
              <div className="bg-yellow-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-yellow-800">{stats.dayShiftCount}</div>
                <div className="text-xs text-yellow-700 mt-1">Day Shifts</div>
              </div>

              {/* Night Shift Count */}
              <div className="bg-blue-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-blue-800">{stats.nightShiftCount}</div>
                <div className="text-xs text-blue-700 mt-1">Night Shifts</div>
              </div>

              {/* Today's Reports */}
              <div className="bg-green-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-green-800">{stats.todayCount}</div>
                <div className="text-xs text-green-700 mt-1">Today</div>
              </div>

              {/* Yesterday's Reports */}
              <div className="bg-orange-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-orange-800">{stats.yesterdayCount}</div>
                <div className="text-xs text-orange-700 mt-1">Yesterday</div>
              </div>

              {/* Average Per Day */}
              <div className="bg-indigo-50 rounded-lg p-4 text-center">
                <div className="text-2xl font-bold text-indigo-800">{stats.averagePerDay}</div>
                <div className="text-xs text-indigo-700 mt-1">Avg/Day (7d)</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-3 gap-4 text-sm">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Shift Distribution:</span>
                  <span className="font-medium text-gray-900">
                    {stats.totalReports > 0 ? Math.round((stats.dayShiftCount / stats.totalReports) * 100) : 0}% Day, {stats.totalReports > 0 ? Math.round((stats.nightShiftCount / stats.totalReports) * 100) : 0}% Night
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Today vs Yesterday:</span>
                  <span className={`font-medium ${stats.todayCount >= stats.yesterdayCount ? 'text-green-600' : 'text-red-600'}`}>
                    {stats.todayCount >= stats.yesterdayCount ? '+' : ''}{stats.todayCount - stats.yesterdayCount}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Weekly Trend:</span>
                  <span className="font-medium text-gray-900">
                    {stats.averagePerDay} reports/day
                  </span>
                </div>
              </div>
            </div>
          </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">
              {/* Search Input - Full Width */}
              {/* <div className="mb-4">
                <label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-2">
                  Search in Report Notes
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                  </div>
                  <input
                    type="text"
                    id="search"
                    placeholder="Search for keywords in report notes..."
                    value={searchTerm}
                    onChange={(e) => handleSearchChange(e.target.value)}
                    className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                  />
                  {filters.search && (
                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
                      <button
                        onClick={() => {
                          setSearchTerm('');
                          handleFilterChange('search', '');
                        }}
                        className="text-gray-400 hover:text-gray-600"
                        title="Clear search"
                      >
                        <svg className="h-4 w-4" 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>
                {filters.search && (
                  <div className="mt-2 flex items-center justify-between">
                    <p className="text-xs text-gray-500">
                      Searching for: <span className="font-medium text-gray-700">"{filters.search}"</span>
                    </p>
                    {searchTerm !== filters.search && (
                      <span className="text-xs text-indigo-600 flex items-center">
                        <svg className="animate-spin -ml-1 mr-1 h-3 w-3 text-indigo-600" fill="none" viewBox="0 0 24 24">
                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Searching...
                      </span>
                    )}
                  </div>
                )}
              </div> */}

              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 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>

                {/* Shift Type */}
                <div>
                  <label htmlFor="shift" className="block text-xs font-medium text-gray-700 mb-1">
                    Shift Type
                  </label>
                  <select
                    id="shift"
                    value={filters.shift || 'all'}
                    onChange={(e) => handleFilterChange('shift', 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 Shifts</option>
                    <option value="day">Day Shift</option>
                    <option value="night">Night Shift</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">{reports.length}</span> report{reports.length !== 1 ? 's' : ''}
                  {hasActiveFilters() && (
                    <span>
                      {filters.search ? ' matching your search and filters' : ' matching your filters'}
                    </span>
                  )}
                </p>
                {filters.search && reports.length === 0 && (
                  <p className="text-sm text-gray-500 mt-1">
                    No reports found containing "{filters.search}" in their notes. Try a different search term.
                  </p>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Reports Table - Desktop */}
        <div className="bg-white shadow-sm rounded-lg overflow-hidden">
          <div className="hidden md: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">
                      Shift Details
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Shift & 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">
                      Created
                    </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">
                  {reports.map((report) => (
                    <tr key={report.id} className="hover:bg-gray-50 transition-colors duration-150">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="flex-shrink-0 h-10 w-10">
                            <div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
                              <svg className="h-5 w-5 text-indigo-600" 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>
                            </div>
                          </div>
                          <div className="ml-4">
                            <div className="text-sm font-medium text-gray-900">Shift #{report.id}</div>
                            <div className="text-sm text-gray-500">by {report.employee.name}</div>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex flex-col space-y-1">
                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge(report.shift)}`}>
                            {report.shift.charAt(0).toUpperCase() + report.shift.slice(1)} Shift
                          </span>
                          <span className="text-sm text-gray-900">{report.area.name}</span>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">
                          <div> {report.area.name} Dredger</div>
                          <div className="text-gray-500"> {report.dredgerLocation.name} - {report.reclamationLocation.name}</div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {new Date(report.createdDate).toLocaleDateString('en-GB')}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div className="flex justify-end space-x-2">
                          <button
                            onClick={() => handleView(report)}
                            className="text-blue-600 hover:text-blue-900 transition-colors duration-150"
                          >
                            View
                          </button>
                          {canDuplicateReport(report) ? (
                            <Form method="post" className="inline">
                              <input type="hidden" name="intent" value="duplicate" />
                              <input type="hidden" name="id" value={report.id} />
                              <button
                                type="submit"
                                onClick={(e) => {
                                  const oppositeShift = report.shift === 'day' ? 'night' : 'day';
                                  if (!confirm(`Are you sure you want to duplicate this ${report.shift} shift as a ${oppositeShift} shift? Stoppages will not be copied.`)) {
                                    e.preventDefault();
                                  }
                                }}
                                className="text-green-600 hover:text-green-900 transition-colors duration-150"
                                title={`Duplicate as ${report.shift === 'day' ? 'night' : 'day'} shift`}
                              >
                                Duplicate
                              </button>
                            </Form>
                          ) : isReportTooOld(report) ? (
                            <span
                              className="text-gray-400 cursor-not-allowed"
                              title="Cannot duplicate reports older than yesterday"
                            >
                              Duplicate
                            </span>
                          ) : null}
                          {canCarryForwardReport(report) && (
                            <Form method="post" className="inline">
                              <input type="hidden" name="intent" value="carryTo" />
                              <input type="hidden" name="id" value={report.id} />
                              <button
                                type="submit"
                                onClick={(e) => {
                                  if (!confirm(`Are you sure you want to carry forward this ${report.shift} shift to today? This will create a new report with today's date.`)) {
                                    e.preventDefault();
                                  }
                                }}
                                className="text-purple-600 hover:text-purple-900 transition-colors duration-150"
                                title="Carry forward to today"
                              >
                                CarryTo
                              </button>
                            </Form>
                          )}
                          {canEditReport(report) && (
                            <>
                              <button
                                onClick={() => handleEdit(report)}
                                className="text-indigo-600 hover:text-indigo-900 transition-colors duration-150"
                              >
                                Edit
                              </button>
                              <Form method="post" className="inline">
                                <input type="hidden" name="intent" value="delete" />
                                <input type="hidden" name="id" value={report.id} />
                                <button
                                  type="submit"
                                  onClick={(e) => {
                                    if (!confirm("Are you sure you want to delete this report?")) {
                                      e.preventDefault();
                                    }
                                  }}
                                  className="text-red-600 hover:text-red-900 transition-colors duration-150"
                                >
                                  Delete
                                </button>
                              </Form>
                            </>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Reports Cards - Mobile */}
          <div className="md:hidden">
            <div className="space-y-4 p-4">
              {reports.map((report) => (
                <div key={report.id} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex items-center">
                      <div className="flex-shrink-0 h-10 w-10">
                        <div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
                          <svg className="h-5 w-5 text-indigo-600" 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>
                        </div>
                      </div>
                      <div className="ml-3">
                        <div className="text-sm font-medium text-gray-900">Shift #{report.id}</div>
                        <div className="text-xs text-gray-500">by {report.employee.name}</div>
                      </div>
                    </div>
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getShiftBadge(report.shift)}`}>
                      {report.shift.charAt(0).toUpperCase() + report.shift.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">Area:</span>
                      <span className="text-xs text-gray-900">{report.area.name}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs font-medium text-gray-500">Dredger:</span>
                      <span className="text-xs text-gray-900">{report.dredgerLocation.name}</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">{report.reclamationLocation.name}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs font-medium text-gray-500">Created:</span>
                      <span className="text-xs text-gray-900">{new Date(report.createdDate).toLocaleDateString('en-GB')}</span>
                    </div>
                  </div>

                  <div className="flex flex-col space-y-2">
                    <button
                      onClick={() => handleView(report)}
                      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 Details
                    </button>
                    {canDuplicateReport(report) ? (
                      <Form method="post" className="w-full">
                        <input type="hidden" name="intent" value="duplicate" />
                        <input type="hidden" name="id" value={report.id} />
                        <button
                          type="submit"
                          onClick={(e) => {
                            const oppositeShift = report.shift === 'day' ? 'night' : 'day';
                            if (!confirm(`Are you sure you want to duplicate this ${report.shift} shift as a ${oppositeShift} shift? Stoppages will not be copied.`)) {
                              e.preventDefault();
                            }
                          }}
                          className="w-full text-center px-3 py-2 text-sm text-green-600 bg-green-50 rounded-md hover:bg-green-100 transition-colors duration-150"
                        >
                          Duplicate as {report.shift === 'day' ? 'Night' : 'Day'} Shift
                        </button>
                      </Form>
                    ) : isReportTooOld(report) ? (
                      <button
                        disabled
                        className="w-full text-center px-3 py-2 text-sm text-gray-400 bg-gray-100 rounded-md cursor-not-allowed"
                        title="Cannot duplicate reports older than yesterday"
                      >
                        Duplicate as {report.shift === 'day' ? 'Night' : 'Day'} Shift (Too Old)
                      </button>
                    ) : null}
                    {canCarryForwardReport(report) && (
                      <Form method="post" className="w-full">
                        <input type="hidden" name="intent" value="carryTo" />
                        <input type="hidden" name="id" value={report.id} />
                        <button
                          type="submit"
                          onClick={(e) => {
                            if (!confirm(`Are you sure you want to carry forward this ${report.shift} shift to today? This will create a new report with today's date.`)) {
                              e.preventDefault();
                            }
                          }}
                          className="w-full text-center px-3 py-2 text-sm text-purple-600 bg-purple-50 rounded-md hover:bg-purple-100 transition-colors duration-150"
                        >
                          Carry Forward to Today
                        </button>
                      </Form>
                    )}
                    {canEditReport(report) && (
                      <div className="flex space-x-2">
                        <button
                          onClick={() => handleEdit(report)}
                          className="flex-1 text-center px-3 py-2 text-sm text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-150"
                        >
                          Edit
                        </button>
                        <Form method="post" className="flex-1">
                          <input type="hidden" name="intent" value="delete" />
                          <input type="hidden" name="id" value={report.id} />
                          <button
                            type="submit"
                            onClick={(e) => {
                              if (!confirm("Are you sure you want to delete this report?")) {
                                e.preventDefault();
                              }
                            }}
                            className="w-full text-center px-3 py-2 text-sm text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors duration-150"
                          >
                            Delete
                          </button>
                        </Form>
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
          {reports.length === 0 && (
            <div className="text-center py-12 px-4">
              <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 reports</h3>
              <p className="mt-1 text-sm text-gray-500">Get started by creating your first report.</p>
              <div className="mt-6">
                <Link
                  to="/reports/new"
                  className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
                >
                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  Create Shifts
                </Link>
              </div>
            </div>
          )}
        </div>

        {/* Edit Form Modal - Only for editing existing reports */}
        {isEditing && (
          <ReportFormModal
            isOpen={showModal}
            onClose={handleCloseModal}
            isEditing={isEditing}
            isSubmitting={isSubmitting}
            editingReport={editingReport}
            actionData={actionData}
            areas={areas}
            dredgerLocations={dredgerLocations}
            reclamationLocations={reclamationLocations}
            foremen={foremen}
            equipment={equipment}
            timeSheetEntries={timeSheetEntries}
            stoppageEntries={stoppageEntries}
            addTimeSheetEntry={addTimeSheetEntry}
            removeTimeSheetEntry={removeTimeSheetEntry}
            updateTimeSheetEntry={updateTimeSheetEntry}
            addStoppageEntry={addStoppageEntry}
            removeStoppageEntry={removeStoppageEntry}
            updateStoppageEntry={updateStoppageEntry}
          />
        )}

        {/* View Modal */}
        <ReportViewModal
          isOpen={showViewModal}
          onClose={handleCloseViewModal}
          report={viewingReport}
        />

        {/* Toast Notifications */}
        {toast && (
          <Toast
            message={toast.message}
            type={toast.type}
            onClose={() => setToast(null)}
          />
        )}
      </div>
    </DashboardLayout>
  );
}