'use client'

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

interface Props {
  capaId: string
}

export function VerifyForm({ capaId }: Props) {
  const router = useRouter()
  const [verdict, setVerdict] = useState<'verified' | 'reopened' | null>(null)
  const [reopenReason, setReopenReason] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!verdict) return
    if (verdict === 'reopened' && !reopenReason.trim()) {
      setError('Reopen reason is required')
      return
    }
    setSaving(true)
    setError(null)
    const res = await fetch(`/ims/api/capa/${capaId}/verify`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ verdict, reopen_reason: reopenReason || null }),
    })
    if (!res.ok) {
      const data = await res.json()
      setError(data.error ?? 'Verification failed')
      setSaving(false)
      return
    }
    router.push('/hse/capa')
    router.refresh()
  }

  return (
    <form onSubmit={handleSubmit} className="border border-gray-200 rounded-xl p-5 space-y-4 bg-purple-50">
      <h3 className="text-sm font-semibold text-gray-800">HSE Verification</h3>
      <div className="flex gap-3">
        <button
          type="button"
          onClick={() => setVerdict('verified')}
          className={`flex-1 py-2 rounded-lg text-sm font-medium border ${
            verdict === 'verified'
              ? 'bg-green-600 text-white border-green-600'
              : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'
          }`}
        >
          Verified — Effective
        </button>
        <button
          type="button"
          onClick={() => setVerdict('reopened')}
          className={`flex-1 py-2 rounded-lg text-sm font-medium border ${
            verdict === 'reopened'
              ? 'bg-orange-600 text-white border-orange-600'
              : 'bg-white text-gray-700 border-gray-300 hover:border-orange-500'
          }`}
        >
          Reopen — Ineffective
        </button>
      </div>
      {verdict === 'reopened' && (
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Why is the action ineffective? *</label>
          <textarea
            value={reopenReason}
            onChange={e => setReopenReason(e.target.value)}
            rows={2} required
            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
            placeholder="Describe why the corrective action did not resolve the root cause…"
          />
        </div>
      )}
      {error && <p className="text-sm text-red-600">{error}</p>}
      {verdict && (
        <button type="submit" disabled={saving}
          className="w-full bg-gray-900 text-white rounded-lg py-2 text-sm font-semibold disabled:opacity-50">
          {saving ? 'Saving…' : 'Submit Verification'}
        </button>
      )}
    </form>
  )
}