'use client'

import { useState } from 'react'
import { AuditChecklistItem, RESULT_STATUS } from './types'

export default function SignOffModal({
  item,
  auditorName,
  onClose,
  onSubmit,
}: {
  item: AuditChecklistItem
  auditorName: string
  onClose: () => void
  onSubmit: (result: AuditChecklistItem['current_result'], notes: string, sign: boolean) => void
}) {
  const [result, setResult] = useState<AuditChecklistItem['current_result']>(item.current_result)
  const [notes, setNotes] = useState(item.notes || '')
  const [sign, setSign] = useState(false)
  const [submitting, setSubmitting] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    await onSubmit(result, notes, sign)
    setSubmitting(false)
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full mx-4 overflow-hidden">
        <div className="px-6 py-4 border-b border-slate-200">
          <h2 className="text-lg font-semibold text-slate-900">Auditor Sign-off</h2>
          <p className="text-sm text-slate-500 mt-1">
            {item.regulation_code} {item.article} - {item.title}
          </p>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">
              Pruefungsergebnis
            </label>
            <div className="space-y-2">
              {Object.entries(RESULT_STATUS).map(([key, { label, color }]) => (
                <label key={key} className="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
                  <input
                    type="radio"
                    name="result"
                    value={key}
                    checked={result === key}
                    onChange={() => setResult(key as typeof result)}
                    className="w-4 h-4"
                  />
                  <span className={`px-2 py-0.5 text-sm font-medium rounded ${color}`}>
                    {label}
                  </span>
                </label>
              ))}
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Anmerkungen
            </label>
            <textarea
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Optionale Anmerkungen zur Pruefung..."
              className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              rows={3}
            />
          </div>

          <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
            <label className="flex items-start gap-3 cursor-pointer">
              <input
                type="checkbox"
                checked={sign}
                onChange={(e) => setSign(e.target.checked)}
                className="mt-1 rounded"
              />
              <div>
                <span className="font-medium text-amber-800">Digital signieren</span>
                <p className="text-sm text-amber-700 mt-0.5">
                  Erstellt eine SHA-256 Signatur des Ergebnisses. Diese Aktion kann nicht rueckgaengig gemacht werden.
                </p>
              </div>
            </label>
          </div>

          <div className="text-sm text-slate-500 pt-2 border-t border-slate-100">
            <p>Auditor: <span className="font-medium text-slate-700">{auditorName}</span></p>
            <p>Datum: <span className="font-medium text-slate-700">{new Date().toLocaleString('de-DE')}</span></p>
          </div>

          <div className="flex justify-end gap-3 pt-4">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-slate-600 hover:text-slate-800"
            >
              Abbrechen
            </button>
            <button
              type="submit"
              disabled={submitting}
              className={`px-4 py-2 rounded-lg disabled:opacity-50 ${
                sign
                  ? 'bg-amber-600 text-white hover:bg-amber-700'
                  : 'bg-primary-600 text-white hover:bg-primary-700'
              }`}
            >
              {submitting ? 'Speichere...' : sign ? 'Signieren & Speichern' : 'Speichern'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}
