ims/components/capa/capa-form.tsx

'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'

interface User {
  id: string
  name: string
  department: string
}

interface Props {
  incidentId: string
}

export function CapaForm({ incidentId }: Props) {
  const router = useRouter()
  const [users, setUsers] = useState<User[]>([])
  const [description, setDescription] = useState('')
  const [ownerId, setOwnerId] = useState('')
  const [department, setDepartment] = useState('')
  const [dueDate, setDueDate] = useState('')
  const [priority, setPriority] = useState<'low' | 'med' | 'high'>('med')
  const [rootCauseRef, setRootCauseRef] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    fetch('/ims/api/users')
      .then(r => r.json())
      .then(data => { if (Array.isArray(data)) setUsers(data) })
      .catch(() => {})
  }, [])

  function handleOwnerChange(id: string) {
    setOwnerId(id)
    const u = users.find(u => u.id === id)
    if (u) setDepartment(u.department)
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!ownerId || !description || !dueDate) {
      setError('Description, owner, and due date are required')
      return
    }
    setSaving(true)
    setError(null)
    const res = await fetch('/ims/api/capa', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        incident_id: incidentId,
        description,
        owner_user_id: ownerId,
        department,
        due_date: dueDate,
        priority,
        root_cause_ref: rootCauseRef || null,
      }),
    })
    if (!res.ok) {
      const data = await res.json()
      setError(data.error ?? 'Create failed')
      setSaving(false)
      return
    }
    router.push(`/hse/incidents/${incidentId}`)
    router.refresh()
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Action Description *</label>
        <textarea
          value={description}
          onChange={e => setDescription(e.target.value)}
          rows={3} required
          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
          placeholder="What corrective action will be taken?"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Root Cause Reference</label>
        <input type="text" value={rootCauseRef}
          onChange={e => setRootCauseRef(e.target.value)}
          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
          placeholder="e.g. Why #3 — inadequate training" />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Assigned To *</label>
        <select value={ownerId} onChange={e => handleOwnerChange(e.target.value)} required
          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
          <option value="">Select owner…</option>
          {users.map(u => (
            <option key={u.id} value={u.id}>{u.name} ({u.department})</option>
          ))}
        </select>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Due Date *</label>
          <input type="date" value={dueDate} onChange={e => setDueDate(e.target.value)} required
            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm" />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Priority</label>
          <select value={priority} onChange={e => setPriority(e.target.value as 'low' | 'med' | 'high')}
            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
            <option value="low">Low</option>
            <option value="med">Medium</option>
            <option value="high">High</option>
          </select>
        </div>
      </div>

      {error && <p className="text-sm text-red-600">{error}</p>}

      <button type="submit" disabled={saving}
        className="w-full bg-amber-600 text-white rounded-lg py-2 text-sm font-semibold disabled:opacity-50">
        {saving ? 'Creating…' : 'Create CAPA Action'}
      </button>
    </form>
  )
}