'use client'

import React, { useState } from 'react'

interface DocumentEntry {
  doc_type: string
  label: string
  url: string
}

interface Props {
  onStart: (vendorName: string, documents: DocumentEntry[]) => void
}

const DOC_TYPES = [
  { value: 'auto', label: 'Automatisch erkennen' },
  { value: 'avv', label: 'AVV / Auftragsverarbeitungsvertrag' },
  { value: 'scc', label: 'SCC / Standardvertragsklauseln' },
  { value: 'tom_annex', label: 'TOM-Anlage (Art. 32)' },
  { value: 'sub_processor_list', label: 'Sub-Processor-Liste' },
  { value: 'agb', label: 'AGB / Nutzungsbedingungen' },
]

export function DocumentUploader({ onStart }: Props) {
  const [vendorName, setVendorName] = useState('')
  const [entries, setEntries] = useState<DocumentEntry[]>([
    { doc_type: 'auto', label: '', url: '' },
  ])
  const [loading, setLoading] = useState(false)

  const updateEntry = (idx: number, field: keyof DocumentEntry, value: string) => {
    setEntries(prev => {
      const copy = [...prev]
      copy[idx] = { ...copy[idx], [field]: value }
      return copy
    })
  }

  const addEntry = () => {
    setEntries(prev => [...prev, { doc_type: 'auto', label: '', url: '' }])
  }

  const removeEntry = (idx: number) => {
    if (entries.length <= 1) return
    setEntries(prev => prev.filter((_, i) => i !== idx))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const valid = entries.filter(d => d.url.trim())
    if (!vendorName.trim() || valid.length === 0) return
    setLoading(true)
    onStart(vendorName.trim(), valid.map(d => ({
      ...d,
      label: d.label || `${DOC_TYPES.find(t => t.value === d.doc_type)?.label || d.doc_type}: ${vendorName}`,
    })))
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Vendor Name */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Auftragsverarbeiter / Provider *
        </label>
        <input
          type="text"
          value={vendorName}
          onChange={e => setVendorName(e.target.value)}
          placeholder="z.B. SysEleven GmbH, Amazon Web Services, Microsoft"
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
          required
        />
      </div>

      {/* Documents */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="text-lg font-semibold text-gray-800 mb-4">Dokumente</h2>
        <p className="text-sm text-gray-500 mb-4">
          Fuegen Sie die URLs der Vertragsdokumente hinzu. Das System erkennt den Dokumenttyp automatisch.
        </p>

        <div className="space-y-3">
          {entries.map((entry, idx) => (
            <div key={idx} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
              <div className="w-52 shrink-0">
                <select
                  value={entry.doc_type}
                  onChange={e => updateEntry(idx, 'doc_type', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white"
                >
                  {DOC_TYPES.map(t => (
                    <option key={t.value} value={t.value}>{t.label}</option>
                  ))}
                </select>
              </div>
              <div className="flex-1">
                <input
                  type="url"
                  value={entry.url}
                  onChange={e => updateEntry(idx, 'url', e.target.value)}
                  placeholder="https://example.com/avv.pdf"
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm"
                  required
                />
              </div>
              <div className="w-44 shrink-0">
                <input
                  type="text"
                  value={entry.label}
                  onChange={e => updateEntry(idx, 'label', e.target.value)}
                  placeholder="Bezeichnung (optional)"
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm"
                />
              </div>
              {entries.length > 1 && (
                <button
                  type="button"
                  onClick={() => removeEntry(idx)}
                  className="p-2 text-gray-400 hover:text-red-500"
                  title="Entfernen"
                >
                  &times;
                </button>
              )}
            </div>
          ))}
        </div>

        <button
          type="button"
          onClick={addEntry}
          className="mt-3 w-full py-2.5 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-400 hover:text-blue-600 text-sm"
        >
          + Weiteres Dokument hinzufuegen
        </button>
      </div>

      {/* Submit */}
      <div className="flex items-center gap-4">
        <button
          type="submit"
          disabled={loading || !vendorName.trim() || !entries.some(e => e.url.trim())}
          className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {loading ? 'Wird gestartet...' : 'Pruefung starten'}
        </button>
        <p className="text-xs text-gray-400">
          Dokumente werden automatisch gegen Art. 28 DSGVO, Art. 32, Art. 44-49 und weitere Anforderungen geprueft.
        </p>
      </div>
    </form>
  )
}