"use client"

import { useState } from "react"

export default function ProductionPreChecksSection({ reportId, wallThickness, sectionWeights, station1Weights }: any) {
  const [wt, setWt] = useState(wallThickness || { time: new Date().toISOString(), top: "", labelPanel: "", base: "", neck: "" })
  const [sw, setSw] = useState(sectionWeights || { time: new Date().toISOString(), top: "", labelPanel: "", base: "", neck: "" })
  const [s1w, setS1w] = useState(station1Weights || { time: new Date().toISOString(), log: "", topFlash: "", tailFlash: "", handleEye: "" })
  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({ wallThickness: wt, sectionWeights: sw, station1Weights: s1w })
    })
    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 Pre-Checks</h2>
      
      <div className="space-y-6">
        <div>
          <h3 className="font-semibold text-gray-700 mb-3">Wall Thickness</h3>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <input type="number" placeholder="Top" value={wt.top} onChange={(e) => setWt({...wt, top: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Label Panel" value={wt.labelPanel} onChange={(e) => setWt({...wt, labelPanel: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Base" value={wt.base} onChange={(e) => setWt({...wt, base: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Neck" value={wt.neck} onChange={(e) => setWt({...wt, neck: e.target.value})} className="px-3 py-2 border rounded-lg" />
          </div>
        </div>

        <div>
          <h3 className="font-semibold text-gray-700 mb-3">Section Weights</h3>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <input type="number" placeholder="Top" value={sw.top} onChange={(e) => setSw({...sw, top: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Label Panel" value={sw.labelPanel} onChange={(e) => setSw({...sw, labelPanel: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Base" value={sw.base} onChange={(e) => setSw({...sw, base: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Neck" value={sw.neck} onChange={(e) => setSw({...sw, neck: e.target.value})} className="px-3 py-2 border rounded-lg" />
          </div>
        </div>

        <div>
          <h3 className="font-semibold text-gray-700 mb-3">Station 1 Weights</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <input type="number" placeholder="Log" value={s1w.log} onChange={(e) => setS1w({...s1w, log: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Top Flash" value={s1w.topFlash} onChange={(e) => setS1w({...s1w, topFlash: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Tail Flash" value={s1w.tailFlash} onChange={(e) => setS1w({...s1w, tailFlash: e.target.value})} className="px-3 py-2 border rounded-lg" />
            <input type="number" placeholder="Handle Eye" value={s1w.handleEye} onChange={(e) => setS1w({...s1w, handleEye: e.target.value})} className="px-3 py-2 border rounded-lg" />
          </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>
  )
}