'use client'

import { useState } from 'react'
import { Regulation } from './types'

interface CreateSessionData {
  name: string
  description?: string
  auditor_name: string
  auditor_email?: string
  regulation_codes?: string[]
}

export default function CreateSessionModal({
  regulations,
  onClose,
  onCreate,
}: {
  regulations: Regulation[]
  onClose: () => void
  onCreate: (data: CreateSessionData) => void
}) {
  const [name, setName] = useState('')
  const [description, setDescription] = useState('')
  const [auditorName, setAuditorName] = useState('')
  const [auditorEmail, setAuditorEmail] = useState('')
  const [selectedRegs, setSelectedRegs] = useState<string[]>([])
  const [submitting, setSubmitting] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!name || !auditorName) return

    setSubmitting(true)
    await onCreate({
      name,
      description: description || undefined,
      auditor_name: auditorName,
      auditor_email: auditorEmail || undefined,
      regulation_codes: selectedRegs.length > 0 ? selectedRegs : undefined,
    })
    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 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-slate-900">Neue Audit-Session</h2>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-600">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Name der Pruefung *
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="z.B. Q1 2026 Compliance Audit"
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
              required
            />
          </div>

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

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Auditor Name *
              </label>
              <input
                type="text"
                value={auditorName}
                onChange={(e) => setAuditorName(e.target.value)}
                placeholder="Dr. Max Mustermann"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
                required
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                E-Mail
              </label>
              <input
                type="email"
                value={auditorEmail}
                onChange={(e) => setAuditorEmail(e.target.value)}
                placeholder="auditor@example.com"
                className="w-full px-3 py-2 border border-slate-300 rounded-lg"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Verordnungen (optional - leer = alle)
            </label>
            <div className="flex flex-wrap gap-2 p-2 border border-slate-300 rounded-lg max-h-32 overflow-y-auto">
              {regulations.map(reg => (
                <label key={reg.code} className="flex items-center gap-1.5">
                  <input
                    type="checkbox"
                    checked={selectedRegs.includes(reg.code)}
                    onChange={(e) => {
                      if (e.target.checked) {
                        setSelectedRegs([...selectedRegs, reg.code])
                      } else {
                        setSelectedRegs(selectedRegs.filter(r => r !== reg.code))
                      }
                    }}
                    className="rounded"
                  />
                  <span className="text-sm text-slate-700">{reg.code}</span>
                </label>
              ))}
            </div>
          </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={!name || !auditorName || submitting}
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
            >
              {submitting ? 'Erstelle...' : 'Session erstellen'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}
