"use client"

import { useState } from "react"

const items = [
  "Emergency stops accessible",
  "Safety guards in place",
  "PPE compliance",
  "Walkways clear",
  "Fire extinguisher accessible",
  "First aid kit available"
]

export default function SafetyChecklistSection({ reportId, data }: { reportId: string; data: any }) {
  const [checklist, setChecklist] = useState(data || {})
  const [saving, setSaving] = useState(false)

  const handleToggle = (item: string) => {
    setChecklist({ ...checklist, [item]: !checklist[item] })
  }

  const handleSave = async () => {
    setSaving(true)
    await fetch(`/api/reports/${reportId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ safetyChecklist: checklist })
    })
    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">Safety Checklist</h2>
      <div className="space-y-3">
        {items.map((item) => (
          <label key={item} className="flex items-center gap-3 cursor-pointer">
            <input
              type="checkbox"
              checked={checklist[item] || false}
              onChange={() => handleToggle(item)}
              className="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
            />
            <span className="text-gray-700">{item}</span>
          </label>
        ))}
      </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>
  )
}