'use client'

import type { DSRType, DSRStatus } from '@/lib/sdk/dsr/types'

export function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center py-12">
      <svg className="animate-spin w-8 h-8 text-purple-600" 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>
    </div>
  )
}

export { PublicFormConfig as SettingsTabContent } from './PublicFormConfig'

export function SettingsTab() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <SettingsTabContent />
      </div>
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-base font-semibold text-slate-900 mb-2">Workflow-Konfiguration</h3>
        <p className="text-sm text-slate-500">
          SLA-Fristen, automatische Zuweisungen und Eskalationsregeln
          werden in Production ueber den Core-Service konfiguriert.
        </p>
      </div>
    </div>
  )
}

export function OverdueAlert({
  overdueCount,
  onShowOverdue,
}: {
  overdueCount: number
  onShowOverdue: () => void
}) {
  return (
    <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-4">
      <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
        <svg className="w-5 h-5 text-red-600" 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>
      </div>
      <div className="flex-1">
        <h4 className="font-medium text-red-800">
          Achtung: {overdueCount} ueberfaellige Anfrage(n)
        </h4>
        <p className="text-sm text-red-600">
          Die gesetzliche Frist ist abgelaufen. Handeln Sie umgehend, um Bussgelder zu vermeiden.
        </p>
      </div>
      <button
        onClick={onShowOverdue}
        className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium"
      >
        Anzeigen
      </button>
    </div>
  )
}

export function DeadlineInfoBox() {
  return (
    <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
      <div className="flex items-start gap-3">
        <svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div>
          <h4 className="font-medium text-blue-800">Fristen beachten</h4>
          <p className="text-sm text-blue-600 mt-1">
            Nach Art. 12 DSGVO muessen Anfragen innerhalb von einem Monat beantwortet werden.
            Eine Verlaengerung um zwei weitere Monate ist bei komplexen Anfragen moeglich,
            sofern der Betroffene innerhalb eines Monats darueber informiert wird.
          </p>
        </div>
      </div>
    </div>
  )
}

export function EmptyState({
  selectedType,
  selectedStatus,
  selectedPriority,
  onClearFilters,
  onOpenCreate,
}: {
  selectedType: DSRType | 'all'
  selectedStatus: DSRStatus | 'all'
  selectedPriority: string
  onClearFilters: () => void
  onOpenCreate: () => void
}) {
  const hasFilters =
    selectedType !== 'all' || selectedStatus !== 'all' || selectedPriority !== 'all'

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
      <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
        <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
      </div>
      <h3 className="text-lg font-semibold text-gray-900">Keine Anfragen gefunden</h3>
      <p className="mt-2 text-gray-500">
        {hasFilters
          ? 'Passen Sie die Filter an oder'
          : 'Es sind noch keine Anfragen vorhanden.'
        }
      </p>
      {hasFilters ? (
        <button
          onClick={onClearFilters}
          className="mt-4 px-4 py-2 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
        >
          Filter zuruecksetzen
        </button>
      ) : (
        <button
          onClick={onOpenCreate}
          className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Erste Anfrage erfassen
        </button>
      )}
    </div>
  )
}