"use client"

import { useState } from "react"
import SafetyChecklistSection from "./report-sections/SafetyChecklistSection"
import ProductionPreChecksSection from "./report-sections/ProductionPreChecksSection"
import ProductionParametersSection from "./report-sections/ProductionParametersSection"
import BottleWeightTrackingSection from "./report-sections/BottleWeightTrackingSection"
import HourlyQualityChecksSection from "./report-sections/HourlyQualityChecksSection"
import ProductionTrackingSection from "./report-sections/ProductionTrackingSection"
import SeamLeakTestSection from "./report-sections/SeamLeakTestSection"
import FilmDetailsSection from "./report-sections/FilmDetailsSection"
import ProductionDataSection from "./report-sections/ProductionDataSection"

export default function ReportForm({ report }: { report: any }) {
  return (
    <div className="max-w-7xl mx-auto">
      <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 mb-6">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">Shift Report</h1>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div>
            <p className="text-sm text-gray-500">Date</p>
            <p className="font-medium text-gray-800">
              {new Date(report.shift.shiftDate).toLocaleDateString()}
            </p>
          </div>
          <div>
            <p className="text-sm text-gray-500">Operator</p>
            <p className="font-medium text-gray-800">
              {report.worker.firstName} {report.worker.surname} ({report.worker.empNo})
            </p>
          </div>
          <div>
            <p className="text-sm text-gray-500">Machine</p>
            <p className="font-medium text-gray-800">{report.machine.name}</p>
          </div>
          <div>
            <p className="text-sm text-gray-500">Shift</p>
            <p className="font-medium text-gray-800">{report.shift.name}</p>
          </div>
        </div>
      </div>

      <div className="space-y-6">
        <SafetyChecklistSection reportId={report.id} data={report.safetyChecklist} />
        <ProductionPreChecksSection reportId={report.id} wallThickness={report.wallThickness} sectionWeights={report.sectionWeights} station1Weights={report.station1Weights} />
        <ProductionParametersSection reportId={report.id} data={report.productionParameters} shiftName={report.shift.name} />
        <BottleWeightTrackingSection reportId={report.id} data={report.bottleWeightTracking} shiftName={report.shift.name} />
        <HourlyQualityChecksSection reportId={report.id} data={report.hourlyQualityChecks} shiftName={report.shift.name} />
        <ProductionTrackingSection reportId={report.id} data={report.productionTracking} shiftName={report.shift.name} />
        <SeamLeakTestSection reportId={report.id} data={report.seamLeakTest} />
        <FilmDetailsSection reportId={report.id} data={report.filmDetails} />
        <ProductionDataSection reportId={report.id} averageWeight={report.averageWeight} totalBagsMade={report.totalBagsMade} qualityMetrics={report.qualityMetrics} outputMetrics={report.outputMetrics} />
      </div>
    </div>
  )
}