'use client'

import type { Export, Regulation } from './types'
import { EXPORT_TYPES, DOMAIN_OPTIONS, formatFileSize } from './types'

interface ExportWizardProps {
  wizardStep: number
  setWizardStep: (step: number) => void
  exportType: string
  setExportType: (type: string) => void
  regulations: Regulation[]
  selectedRegulations: string[]
  toggleRegulation: (code: string) => void
  selectedDomains: string[]
  toggleDomain: (domain: string) => void
  generating: boolean
  startExport: () => void
  currentExport: Export | null
  resetWizard: () => void
  downloadExport: (id: string) => void
}

export default function ExportWizard(props: ExportWizardProps) {
  return (
    <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border p-6">
      <WizardSteps current={props.wizardStep} />

      {props.wizardStep === 1 && <Step1 exportType={props.exportType} setExportType={props.setExportType} next={() => props.setWizardStep(2)} />}
      {props.wizardStep === 2 && <Step2 {...props} />}
      {props.wizardStep === 3 && <Step3 {...props} />}
      {props.wizardStep === 4 && <Step4 currentExport={props.currentExport} resetWizard={props.resetWizard} downloadExport={props.downloadExport} />}
    </div>
  )
}

function WizardSteps({ current }: { current: number }) {
  const steps = [
    { num: 1, label: 'Typ' },
    { num: 2, label: 'Scope' },
    { num: 3, label: 'Bestaetigen' },
    { num: 4, label: 'Download' },
  ]

  return (
    <div className="flex items-center justify-center mb-8">
      {steps.map((step, idx) => (
        <div key={step.num} className="flex items-center">
          <div className={`flex items-center justify-center w-10 h-10 rounded-full font-medium ${
            current >= step.num ? 'bg-primary-600 text-white' : 'bg-slate-200 text-slate-500'
          }`}>
            {current > step.num ? (
              <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>
            ) : (
              step.num
            )}
          </div>
          <span className={`ml-2 text-sm ${current >= step.num ? 'text-slate-900' : 'text-slate-500'}`}>
            {step.label}
          </span>
          {idx < 3 && (
            <div className={`w-16 h-0.5 mx-4 ${current > step.num ? 'bg-primary-600' : 'bg-slate-200'}`} />
          )}
        </div>
      ))}
    </div>
  )
}

function Step1({ exportType, setExportType, next }: { exportType: string; setExportType: (t: string) => void; next: () => void }) {
  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-slate-900 mb-4">Export-Typ waehlen</h3>
      <div className="grid gap-4">
        {EXPORT_TYPES.map((type) => (
          <button
            key={type.value}
            onClick={() => setExportType(type.value)}
            className={`p-4 rounded-lg border-2 text-left transition-colors ${
              exportType === type.value ? 'border-primary-600 bg-primary-50' : 'border-slate-200 hover:border-slate-300'
            }`}
          >
            <div className="flex items-center gap-3">
              <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                exportType === type.value ? 'border-primary-600' : 'border-slate-300'
              }`}>
                {exportType === type.value && <div className="w-3 h-3 rounded-full bg-primary-600" />}
              </div>
              <div>
                <p className="font-medium text-slate-900">{type.label}</p>
                <p className="text-sm text-slate-500">{type.description}</p>
              </div>
            </div>
          </button>
        ))}
      </div>
      <div className="flex justify-end pt-4">
        <button onClick={next} className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700">
          Weiter
        </button>
      </div>
    </div>
  )
}

function Step2(props: ExportWizardProps) {
  return (
    <div className="space-y-6">
      <h3 className="text-lg font-semibold text-slate-900">Scope definieren (optional)</h3>

      <div>
        <h4 className="text-sm font-medium text-slate-700 mb-3">Verordnungen filtern</h4>
        <p className="text-sm text-slate-500 mb-3">Leer lassen fuer alle Verordnungen</p>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
          {props.regulations.map((reg) => (
            <button
              key={reg.code}
              onClick={() => props.toggleRegulation(reg.code)}
              className={`px-3 py-2 text-sm rounded-lg border transition-colors ${
                props.selectedRegulations.includes(reg.code)
                  ? 'border-primary-600 bg-primary-50 text-primary-700'
                  : 'border-slate-200 text-slate-600 hover:border-slate-300'
              }`}
            >
              {reg.code}
            </button>
          ))}
        </div>
      </div>

      <div>
        <h4 className="text-sm font-medium text-slate-700 mb-3">Domains filtern</h4>
        <p className="text-sm text-slate-500 mb-3">Leer lassen fuer alle Domains</p>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
          {DOMAIN_OPTIONS.map((domain) => (
            <button
              key={domain.value}
              onClick={() => props.toggleDomain(domain.value)}
              className={`px-3 py-2 text-sm rounded-lg border transition-colors ${
                props.selectedDomains.includes(domain.value)
                  ? 'border-primary-600 bg-primary-50 text-primary-700'
                  : 'border-slate-200 text-slate-600 hover:border-slate-300'
              }`}
            >
              {domain.label}
            </button>
          ))}
        </div>
      </div>

      <div className="flex justify-between pt-4">
        <button onClick={() => props.setWizardStep(1)} className="px-6 py-2 text-slate-600 hover:text-slate-800">
          Zurueck
        </button>
        <button onClick={() => props.setWizardStep(3)} className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700">
          Weiter
        </button>
      </div>
    </div>
  )
}

function Step3(props: ExportWizardProps) {
  return (
    <div className="space-y-6">
      <h3 className="text-lg font-semibold text-slate-900">Export bestaetigen</h3>

      <div className="bg-slate-50 rounded-lg p-6 space-y-4">
        <div className="flex justify-between">
          <span className="text-slate-600">Export-Typ:</span>
          <span className="font-medium text-slate-900">
            {EXPORT_TYPES.find((t) => t.value === props.exportType)?.label}
          </span>
        </div>
        <div className="flex justify-between">
          <span className="text-slate-600">Verordnungen:</span>
          <span className="font-medium text-slate-900">
            {props.selectedRegulations.length > 0 ? props.selectedRegulations.join(', ') : 'Alle'}
          </span>
        </div>
        <div className="flex justify-between">
          <span className="text-slate-600">Domains:</span>
          <span className="font-medium text-slate-900">
            {props.selectedDomains.length > 0
              ? props.selectedDomains.map((d) => DOMAIN_OPTIONS.find((o) => o.value === d)?.label).join(', ')
              : 'Alle'}
          </span>
        </div>
      </div>

      <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
        <p className="text-sm text-yellow-800">
          Der Export kann je nach Datenmenge einige Sekunden dauern.
          Nach Abschluss koennen Sie die ZIP-Datei herunterladen.
        </p>
      </div>

      <div className="flex justify-between pt-4">
        <button onClick={() => props.setWizardStep(2)} className="px-6 py-2 text-slate-600 hover:text-slate-800">
          Zurueck
        </button>
        <button
          onClick={props.startExport}
          disabled={props.generating}
          className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 flex items-center gap-2"
        >
          {props.generating && (
            <svg className="animate-spin h-4 w-4" 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 12h4z" />
            </svg>
          )}
          {props.generating ? 'Generiere...' : 'Export starten'}
        </button>
      </div>
    </div>
  )
}

function Step4({ currentExport, resetWizard, downloadExport }: { currentExport: Export | null; resetWizard: () => void; downloadExport: (id: string) => void }) {
  if (currentExport?.status === 'completed') {
    return (
      <div className="space-y-6 text-center">
        <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
          <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <h3 className="text-lg font-semibold text-slate-900">Export erfolgreich!</h3>

        <div className="bg-slate-50 rounded-lg p-6 text-left space-y-3">
          <div className="flex justify-between">
            <span className="text-slate-600">Compliance Score:</span>
            <span className="font-medium text-slate-900">{currentExport.compliance_score?.toFixed(1)}%</span>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Controls:</span>
            <span className="font-medium text-slate-900">{currentExport.total_controls}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Nachweise:</span>
            <span className="font-medium text-slate-900">{currentExport.total_evidence}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">Dateigroesse:</span>
            <span className="font-medium text-slate-900">{formatFileSize(currentExport.file_size_bytes)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-slate-600">SHA-256:</span>
            <span className="font-mono text-xs text-slate-500 truncate max-w-xs">{currentExport.file_hash}</span>
          </div>
        </div>

        <div className="flex justify-center gap-4 pt-4">
          <button onClick={resetWizard} className="px-6 py-2 text-slate-600 hover:text-slate-800">
            Neuer Export
          </button>
          <button
            onClick={() => downloadExport(currentExport.id)}
            className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center gap-2"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
            ZIP herunterladen
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6 text-center">
      <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto">
        <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
        </svg>
      </div>
      <h3 className="text-lg font-semibold text-slate-900">Export fehlgeschlagen</h3>
      <p className="text-slate-500">{currentExport?.error_message || 'Unbekannter Fehler'}</p>
      <button onClick={resetWizard} className="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700">
        Erneut versuchen
      </button>
    </div>
  )
}
