'use client'

import type { ImportedDocumentType } from '@/lib/sdk/types'

export interface UploadedFile {
  id: string
  file: File
  type: ImportedDocumentType
  status: 'pending' | 'uploading' | 'analyzing' | 'complete' | 'error'
  progress: number
  error?: string
}

export const DOCUMENT_TYPES: { value: ImportedDocumentType; label: string; icon: string }[] = [
  { value: 'DSFA', label: 'Datenschutz-Folgenabschaetzung (DSFA)', icon: '📄' },
  { value: 'TOM', label: 'Technisch-organisatorische Massnahmen (TOMs)', icon: '🔒' },
  { value: 'VVT', label: 'Verarbeitungsverzeichnis (VVT)', icon: '📊' },
  { value: 'AGB', label: 'Allgemeine Geschaeftsbedingungen (AGB)', icon: '📜' },
  { value: 'PRIVACY_POLICY', label: 'Datenschutzerklaerung', icon: '🔐' },
  { value: 'COOKIE_POLICY', label: 'Cookie-Richtlinie', icon: '🍪' },
  { value: 'RISK_ASSESSMENT', label: 'Risikobewertung', icon: '⚠️' },
  { value: 'AUDIT_REPORT', label: 'Audit-Bericht', icon: '✅' },
  { value: 'OTHER', label: 'Sonstiges Dokument', icon: '📎' },
]

export function FileItem({
  file,
  onTypeChange,
  onRemove,
}: {
  file: UploadedFile
  onTypeChange: (id: string, type: ImportedDocumentType) => void
  onRemove: (id: string) => void
}) {
  return (
    <div className="flex items-center gap-4 p-4 bg-white rounded-xl border border-gray-200">
      <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
        <svg className="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      </div>

      <div className="flex-1 min-w-0">
        <p className="font-medium text-gray-900 truncate">{file.file.name}</p>
        <p className="text-sm text-gray-500">{(file.file.size / 1024 / 1024).toFixed(2)} MB</p>
      </div>

      <select
        value={file.type}
        onChange={e => onTypeChange(file.id, e.target.value as ImportedDocumentType)}
        disabled={file.status !== 'pending'}
        className="px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 disabled:opacity-50"
      >
        {DOCUMENT_TYPES.map(dt => (
          <option key={dt.value} value={dt.value}>
            {dt.icon} {dt.label}
          </option>
        ))}
      </select>

      {file.status === 'pending' && (
        <button onClick={() => onRemove(file.id)} className="p-2 text-gray-400 hover:text-red-500 transition-colors">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      )}
      {file.status === 'uploading' && (
        <div className="flex items-center gap-2">
          <div className="w-20 h-2 bg-gray-200 rounded-full overflow-hidden">
            <div className="h-full bg-purple-600 rounded-full transition-all" style={{ width: `${file.progress}%` }} />
          </div>
          <span className="text-sm text-gray-500">{file.progress}%</span>
        </div>
      )}
      {file.status === 'analyzing' && (
        <div className="flex items-center gap-2 text-purple-600">
          <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
          <span className="text-sm">Analysiere...</span>
        </div>
      )}
      {file.status === 'complete' && file.error === 'offline' && (
        <div className="flex items-center gap-1 text-amber-600">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
          <span className="text-sm">Offline — nicht analysiert</span>
        </div>
      )}
      {file.status === 'complete' && file.error !== 'offline' && (
        <div className="flex items-center gap-1 text-green-600">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
          <span className="text-sm">Fertig</span>
        </div>
      )}
      {file.status === 'error' && (
        <div className="flex items-center gap-1 text-red-600">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
          <span className="text-sm">{file.error || 'Fehler'}</span>
        </div>
      )}
    </div>
  )
}