"use client"

import { useState } from "react"

export default function ProductionDataSection({ reportId, averageWeight, totalBagsMade, qualityMetrics, outputMetrics }: any) {
  const [data, setData] = useState({
    averageWeight: averageWeight || 0,
    totalBagsMade: totalBagsMade || 0,
    qualityMetrics: qualityMetrics || { heightFails: 0, topLoadFails: 0, bigLeaks: 0, smallLeaks: 0, checkFails: 0, missedBags: 0, otherLosses: 0 },
    outputMetrics: outputMetrics || { wheelOutput: 0, productionLeakDetectorInfeed: 0, leakDetectorRejects: 0, visOutput: 0, vmsOutput: 0, heldStockOtherLosses: 0, totalGoodBottles: 0 }
  })
  const [saving, setSaving] = useState(false)

  const handleSave = async () => {
    setSaving(true)
    await fetch(`/api/reports/${reportId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    })
    setSaving(false)
  }

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
      <h2 className="text-xl font-bold text-gray-800 mb-4">Production Data</h2>
      
      <div className="space-y-6">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium mb-1">Average Weight (auto-calculated)</label>
            <input type="number" value={data.averageWeight} readOnly className="w-full px-3 py-2 border rounded-lg bg-gray-50" />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">Total Bags Made</label>
            <input type="number" value={data.totalBagsMade} onChange={(e) => setData({...data, totalBagsMade: parseInt(e.target.value)})} className="w-full px-3 py-2 border rounded-lg" />
          </div>
        </div>

        <div>
          <h3 className="font-semibold text-gray-700 mb-3">Quality Metrics</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
              <label className="block text-sm mb-1">Height Fails (A)</label>
              <input type="number" value={data.qualityMetrics.heightFails} onChange={(e) => setData({...data, qualityMetrics: {...data.qualityMetrics, heightFails: parseInt(e.target.value)}})} className="w-full px-3 py-2 border rounded-lg" />
            </div>
            <div>
              <label className="block text-sm mb-1">Top Load Fails (B)</label>
              <input type="number" value={data.qualityMetrics.topLoadFails} onChange={(e) => setData({...data, qualityMetrics: {...data.qualityMetrics, topLoadFails: parseInt(e.target.value)}})} className="w-full px-3 py-2 border rounded-lg" />
            </div>
          </div>
        </div>

        <div>
          <h3 className="font-semibold text-gray-700 mb-3">Output Metrics</h3>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm mb-1">Wheel Output</label>
              <input type="number" value={data.outputMetrics.wheelOutput} onChange={(e) => setData({...data, outputMetrics: {...data.outputMetrics, wheelOutput: parseInt(e.target.value)}})} className="w-full px-3 py-2 border rounded-lg" />
            </div>
            <div>
              <label className="block text-sm mb-1">Total Good Bottles</label>
              <input type="number" value={data.outputMetrics.totalGoodBottles} onChange={(e) => setData({...data, outputMetrics: {...data.outputMetrics, totalGoodBottles: parseInt(e.target.value)}})} className="w-full px-3 py-2 border rounded-lg" />
            </div>
          </div>
        </div>
      </div>

      <button onClick={handleSave} disabled={saving} className="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50">
        {saving ? "Saving..." : "Save"}
      </button>
    </div>
  )
}