"use client"

import { useState } from "react"
import Modal from "../Modal"

export default function ProductionParametersSection({ reportId, data, shiftName }: any) {
  const [parameters, setParameters] = useState(data || [])
  const [showModal, setShowModal] = useState(false)
  const [formData, setFormData] = useState({ time: new Date().toISOString(), meltTemp: "", reg: "35.5", headPSI: "" })

  const handleAdd = async () => {
    const updated = [...parameters, formData]
    setParameters(updated)
    await fetch(`/api/reports/${reportId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ productionParameters: updated })
    })
    setShowModal(false)
    setFormData({ time: new Date().toISOString(), meltTemp: "", reg: "35.5", headPSI: "" })
  }

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold text-gray-800">Production Parameters</h2>
        <button onClick={() => setShowModal(true)} className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
          + Add Hourly Temperature Parameters
        </button>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-2 text-left text-sm font-medium text-gray-500">Time</th>
              <th className="px-4 py-2 text-left text-sm font-medium text-gray-500">Melt Temp (°C)</th>
              <th className="px-4 py-2 text-left text-sm font-medium text-gray-500">Reg (%)</th>
              <th className="px-4 py-2 text-left text-sm font-medium text-gray-500">Head PSI</th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {parameters.map((p: any, i: number) => (
              <tr key={i}>
                <td className="px-4 py-2 text-sm">{new Date(p.time).toLocaleTimeString()}</td>
                <td className="px-4 py-2 text-sm">{p.meltTemp}</td>
                <td className="px-4 py-2 text-sm">{p.reg}</td>
                <td className="px-4 py-2 text-sm">{p.headPSI}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {showModal && (
        <Modal onClose={() => setShowModal(false)}>
          <h3 className="text-lg font-bold mb-4">Add Temperature Parameters</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-1">Time</label>
              <input
                type="time"
                value={new Date(formData.time).toTimeString().slice(0, 5)}
                onChange={(e) => {
                  const [hours, minutes] = e.target.value.split(':')
                  const newDate = new Date()
                  newDate.setHours(parseInt(hours), parseInt(minutes), 0, 0)
                  setFormData({...formData, time: newDate.toISOString()})
                }}
                className="w-full px-3 py-2 border rounded-lg"
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Melt Temp (°C)</label>
              <input type="number" value={formData.meltTemp} onChange={(e) => setFormData({...formData, meltTemp: e.target.value})} className="w-full px-3 py-2 border rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Reg (%)</label>
              <input type="number" value={formData.reg} onChange={(e) => setFormData({...formData, reg: e.target.value})} className="w-full px-3 py-2 border rounded-lg" />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Head PSI</label>
              <input type="number" value={formData.headPSI} onChange={(e) => setFormData({...formData, headPSI: e.target.value})} className="w-full px-3 py-2 border rounded-lg" />
            </div>
            <button onClick={handleAdd} className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700">Add</button>
          </div>
        </Modal>
      )}
    </div>
  )
}