'use client'

import React, { useState, useEffect } from 'react'
import { useSDK } from '@/lib/sdk'
import {
  CompanyProfile,
  BusinessModel,
  OfferingType,
  TargetMarket,
  CompanySize,
  LegalForm,
  MachineBuilderProfile,
  MachineProductType,
  AIIntegrationType,
  HumanOversightLevel,
  CriticalSector,
  BUSINESS_MODEL_LABELS,
  OFFERING_TYPE_LABELS,
  TARGET_MARKET_LABELS,
  COMPANY_SIZE_LABELS,
  MACHINE_PRODUCT_TYPE_LABELS,
  AI_INTEGRATION_TYPE_LABELS,
  HUMAN_OVERSIGHT_LABELS,
  CRITICAL_SECTOR_LABELS,
  SDKCoverageAssessment,
} from '@/lib/sdk/types'

// =============================================================================
// WIZARD STEPS
// =============================================================================

const BASE_WIZARD_STEPS = [
  { id: 1, name: 'Basisinfos', description: 'Firmenname und Rechtsform' },
  { id: 2, name: 'Geschaeftsmodell', description: 'B2B, B2C und Angebote' },
  { id: 3, name: 'Firmengroesse', description: 'Mitarbeiter und Umsatz' },
  { id: 4, name: 'Standorte', description: 'Hauptsitz und Zielmaerkte' },
  { id: 5, name: 'Datenschutz', description: 'Rollen und KI-Nutzung' },
]

const MACHINE_BUILDER_STEP = { id: 6, name: 'Produkt & Maschine', description: 'Software, KI und CE in Ihrem Produkt' }

function getWizardSteps(industry: string) {
  if (isMachineBuilderIndustry(industry)) {
    return [...BASE_WIZARD_STEPS, MACHINE_BUILDER_STEP]
  }
  return BASE_WIZARD_STEPS
}

// Keep WIZARD_STEPS for backwards compat in static references
const WIZARD_STEPS = BASE_WIZARD_STEPS

// =============================================================================
// LEGAL FORMS
// =============================================================================

const LEGAL_FORM_LABELS: Record<LegalForm, string> = {
  einzelunternehmen: 'Einzelunternehmen',
  gbr: 'GbR',
  ohg: 'OHG',
  kg: 'KG',
  gmbh: 'GmbH',
  ug: 'UG (haftungsbeschränkt)',
  ag: 'AG',
  gmbh_co_kg: 'GmbH & Co. KG',
  ev: 'e.V. (Verein)',
  stiftung: 'Stiftung',
  other: 'Sonstige',
}

// =============================================================================
// INDUSTRIES
// =============================================================================

const INDUSTRIES = [
  'Technologie / IT',
  'E-Commerce / Handel',
  'Finanzdienstleistungen',
  'Gesundheitswesen',
  'Bildung',
  'Beratung / Consulting',
  'Marketing / Agentur',
  'Produktion / Industrie',
  'Logistik / Transport',
  'Immobilien',
  'Maschinenbau',
  'Anlagenbau',
  'Automatisierung',
  'Robotik',
  'Messtechnik',
  'Sonstige',
]

const MACHINE_BUILDER_INDUSTRIES = [
  'Maschinenbau',
  'Anlagenbau',
  'Automatisierung',
  'Robotik',
  'Messtechnik',
]

const isMachineBuilderIndustry = (industry: string) =>
  MACHINE_BUILDER_INDUSTRIES.includes(industry)

// =============================================================================
// HELPER: ASSESS SDK COVERAGE
// =============================================================================

function assessSDKCoverage(profile: Partial<CompanyProfile>): SDKCoverageAssessment {
  const coveredRegulations: string[] = ['DSGVO', 'BDSG', 'TTDSG', 'AI Act']
  const partiallyCoveredRegulations: string[] = []
  const notCoveredRegulations: string[] = []
  const reasons: string[] = []
  const recommendations: string[] = []

  // Check target markets
  const targetMarkets = profile.targetMarkets || []

  if (targetMarkets.includes('worldwide')) {
    notCoveredRegulations.push('CCPA (Kalifornien)', 'LGPD (Brasilien)', 'POPIA (Südafrika)')
    reasons.push('Weltweiter Betrieb erfordert Kenntnisse lokaler Datenschutzgesetze')
    recommendations.push('Für außereuropäische Märkte empfehlen wir die Konsultation lokaler Rechtsanwälte')
  }

  if (targetMarkets.includes('eu_uk')) {
    partiallyCoveredRegulations.push('UK GDPR', 'UK AI Framework')
    reasons.push('UK-Recht weicht nach Brexit teilweise von EU-Recht ab')
    recommendations.push('Prüfen Sie UK-spezifische Anpassungen Ihrer Datenschutzerklärung')
  }

  // Check company size
  if (profile.companySize === 'enterprise' || profile.companySize === 'large') {
    coveredRegulations.push('NIS2')
    reasons.push('Als größeres Unternehmen können NIS2-Pflichten relevant sein')
  }

  // Check offerings
  const offerings = profile.offerings || []
  if (offerings.includes('webshop')) {
    coveredRegulations.push('Fernabsatzrecht')
    recommendations.push('Widerrufsbelehrung und AGB-Generator sind im SDK enthalten')
  }

  // Determine if fully covered
  const requiresLegalCounsel = notCoveredRegulations.length > 0 || targetMarkets.includes('worldwide')
  const isFullyCovered = !requiresLegalCounsel && notCoveredRegulations.length === 0

  return {
    isFullyCovered,
    coveredRegulations,
    partiallyCoveredRegulations,
    notCoveredRegulations,
    requiresLegalCounsel,
    reasons,
    recommendations,
  }
}

// =============================================================================
// STEP COMPONENTS
// =============================================================================

function StepBasicInfo({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Firmenname <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          value={data.companyName || ''}
          onChange={e => onChange({ companyName: e.target.value })}
          placeholder="Ihre Firma GmbH"
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Rechtsform <span className="text-red-500">*</span>
        </label>
        <select
          value={data.legalForm || ''}
          onChange={e => onChange({ legalForm: e.target.value as LegalForm })}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        >
          <option value="">Bitte wählen...</option>
          {Object.entries(LEGAL_FORM_LABELS).map(([value, label]) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Branche</label>
        <select
          value={data.industry || ''}
          onChange={e => onChange({ industry: e.target.value })}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        >
          <option value="">Bitte wählen...</option>
          {INDUSTRIES.map(industry => (
            <option key={industry} value={industry}>
              {industry}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Gründungsjahr</label>
        <input
          type="number"
          value={data.foundedYear || ''}
          onChange={e => onChange({ foundedYear: parseInt(e.target.value) || null })}
          placeholder="2020"
          min="1800"
          max={new Date().getFullYear()}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
      </div>
    </div>
  )
}

function StepBusinessModel({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  const toggleOffering = (offering: OfferingType) => {
    const current = data.offerings || []
    if (current.includes(offering)) {
      onChange({ offerings: current.filter(o => o !== offering) })
    } else {
      onChange({ offerings: [...current, offering] })
    }
  }

  return (
    <div className="space-y-8">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Geschäftsmodell <span className="text-red-500">*</span>
        </label>
        <div className="grid grid-cols-3 gap-4">
          {Object.entries(BUSINESS_MODEL_LABELS).map(([value, label]) => (
            <button
              key={value}
              type="button"
              onClick={() => onChange({ businessModel: value as BusinessModel })}
              className={`p-4 rounded-xl border-2 text-center transition-all ${
                data.businessModel === value
                  ? 'border-purple-500 bg-purple-50 text-purple-700'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="text-2xl mb-2">
                {value === 'B2B' ? '🏢' : value === 'B2C' ? '👥' : '🏢👥'}
              </div>
              <div className="font-medium">{label}</div>
            </button>
          ))}
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Was bieten Sie an? <span className="text-gray-400">(Mehrfachauswahl möglich)</span>
        </label>
        <div className="grid grid-cols-2 gap-3">
          {Object.entries(OFFERING_TYPE_LABELS).map(([value, { label, description }]) => (
            <button
              key={value}
              type="button"
              onClick={() => toggleOffering(value as OfferingType)}
              className={`p-4 rounded-xl border-2 text-left transition-all ${
                (data.offerings || []).includes(value as OfferingType)
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="font-medium text-gray-900">{label}</div>
              <div className="text-sm text-gray-500">{description}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

function StepCompanySize({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  return (
    <div className="space-y-8">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Unternehmensgröße <span className="text-red-500">*</span>
        </label>
        <div className="space-y-3">
          {Object.entries(COMPANY_SIZE_LABELS).map(([value, label]) => (
            <button
              key={value}
              type="button"
              onClick={() => onChange({ companySize: value as CompanySize })}
              className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
                data.companySize === value
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="font-medium text-gray-900">{label}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Mitarbeiterzahl</label>
          <select
            value={data.employeeCount || ''}
            onChange={e => onChange({ employeeCount: e.target.value })}
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          >
            <option value="">Bitte wählen...</option>
            <option value="1-9">1-9 Mitarbeiter</option>
            <option value="10-49">10-49 Mitarbeiter</option>
            <option value="50-249">50-249 Mitarbeiter</option>
            <option value="250-999">250-999 Mitarbeiter</option>
            <option value="1000+">1.000+ Mitarbeiter</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Jahresumsatz</label>
          <select
            value={data.annualRevenue || ''}
            onChange={e => onChange({ annualRevenue: e.target.value })}
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          >
            <option value="">Bitte wählen...</option>
            <option value="< 2 Mio">&lt; 2 Mio. Euro</option>
            <option value="2-10 Mio">2-10 Mio. Euro</option>
            <option value="10-50 Mio">10-50 Mio. Euro</option>
            <option value="> 50 Mio">&gt; 50 Mio. Euro</option>
          </select>
        </div>
      </div>
    </div>
  )
}

function StepLocations({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  const toggleMarket = (market: TargetMarket) => {
    const current = data.targetMarkets || []
    if (current.includes(market)) {
      onChange({ targetMarkets: current.filter(m => m !== market) })
    } else {
      onChange({ targetMarkets: [...current, market] })
    }
  }

  return (
    <div className="space-y-8">
      <div className="grid grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Land des Hauptsitzes <span className="text-red-500">*</span>
          </label>
          <select
            value={data.headquartersCountry || ''}
            onChange={e => onChange({ headquartersCountry: e.target.value })}
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          >
            <option value="">Bitte wählen...</option>
            <option value="DE">Deutschland</option>
            <option value="AT">Österreich</option>
            <option value="CH">Schweiz</option>
            <option value="other">Anderes Land</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Stadt</label>
          <input
            type="text"
            value={data.headquartersCity || ''}
            onChange={e => onChange({ headquartersCity: e.target.value })}
            placeholder="z.B. Berlin"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Zielmärkte <span className="text-red-500">*</span>
          <span className="text-gray-400 font-normal ml-2">Wo verkaufen/operieren Sie?</span>
        </label>
        <div className="space-y-3">
          {Object.entries(TARGET_MARKET_LABELS).map(([value, { label, description, regulations }]) => (
            <button
              key={value}
              type="button"
              onClick={() => toggleMarket(value as TargetMarket)}
              className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
                (data.targetMarkets || []).includes(value as TargetMarket)
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="flex items-center justify-between">
                <div>
                  <div className="font-medium text-gray-900">{label}</div>
                  <div className="text-sm text-gray-500">{description}</div>
                </div>
                <div className="text-right">
                  <div className="text-xs text-gray-400">Relevante Regulierungen:</div>
                  <div className="text-xs text-purple-600">{regulations.join(', ')}</div>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

function StepDataProtection({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  return (
    <div className="space-y-8">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Datenschutz-Rolle nach DSGVO
        </label>
        <div className="space-y-3">
          <label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
            <input
              type="checkbox"
              checked={data.isDataController ?? true}
              onChange={e => onChange({ isDataController: e.target.checked })}
              className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
            />
            <div>
              <div className="font-medium text-gray-900">Verantwortlicher (Art. 4 Nr. 7 DSGVO)</div>
              <div className="text-sm text-gray-500">
                Wir entscheiden selbst über Zwecke und Mittel der Datenverarbeitung
              </div>
            </div>
          </label>

          <label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
            <input
              type="checkbox"
              checked={data.isDataProcessor ?? false}
              onChange={e => onChange({ isDataProcessor: e.target.checked })}
              className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
            />
            <div>
              <div className="font-medium text-gray-900">Auftragsverarbeiter (Art. 4 Nr. 8 DSGVO)</div>
              <div className="text-sm text-gray-500">
                Wir verarbeiten personenbezogene Daten im Auftrag anderer Unternehmen
              </div>
            </div>
          </label>
        </div>
      </div>

      <div>
        <label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
          <input
            type="checkbox"
            checked={data.usesAI ?? false}
            onChange={e => onChange({ usesAI: e.target.checked })}
            className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
          />
          <div>
            <div className="font-medium text-gray-900">Wir setzen KI/ML-Systeme ein</div>
            <div className="text-sm text-gray-500">
              Chatbots, Empfehlungssysteme, automatisierte Entscheidungen, etc.
            </div>
          </div>
        </label>
      </div>

      <div className="grid grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Datenschutzbeauftragter (Name)
          </label>
          <input
            type="text"
            value={data.dpoName || ''}
            onChange={e => onChange({ dpoName: e.target.value || null })}
            placeholder="Optional"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">DSB E-Mail</label>
          <input
            type="email"
            value={data.dpoEmail || ''}
            onChange={e => onChange({ dpoEmail: e.target.value || null })}
            placeholder="dsb@firma.de"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// STEP 6: PRODUKT & MASCHINE (nur fuer Maschinenbauer)
// =============================================================================

const EMPTY_MACHINE_BUILDER: MachineBuilderProfile = {
  productTypes: [],
  productDescription: '',
  productPride: '',
  containsSoftware: false,
  containsFirmware: false,
  containsAI: false,
  aiIntegrationType: [],
  hasSafetyFunction: false,
  safetyFunctionDescription: '',
  autonomousBehavior: false,
  humanOversightLevel: 'full',
  isNetworked: false,
  hasRemoteAccess: false,
  hasOTAUpdates: false,
  updateMechanism: '',
  exportMarkets: [],
  criticalSectorClients: false,
  criticalSectors: [],
  oemClients: false,
  ceMarkingRequired: false,
  existingCEProcess: false,
  hasRiskAssessment: false,
}

function StepMachineBuilder({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  const mb = data.machineBuilder || EMPTY_MACHINE_BUILDER

  const updateMB = (updates: Partial<MachineBuilderProfile>) => {
    onChange({ machineBuilder: { ...mb, ...updates } })
  }

  const toggleProductType = (type: MachineProductType) => {
    const current = mb.productTypes || []
    if (current.includes(type)) {
      updateMB({ productTypes: current.filter(t => t !== type) })
    } else {
      updateMB({ productTypes: [...current, type] })
    }
  }

  const toggleAIType = (type: AIIntegrationType) => {
    const current = mb.aiIntegrationType || []
    if (current.includes(type)) {
      updateMB({ aiIntegrationType: current.filter(t => t !== type) })
    } else {
      updateMB({ aiIntegrationType: [...current, type] })
    }
  }

  const toggleCriticalSector = (sector: CriticalSector) => {
    const current = mb.criticalSectors || []
    if (current.includes(sector)) {
      updateMB({ criticalSectors: current.filter(s => s !== sector) })
    } else {
      updateMB({ criticalSectors: [...current, sector] })
    }
  }

  return (
    <div className="space-y-8">
      {/* Block 1: Erzaehlen Sie uns von Ihrer Anlage */}
      <div>
        <h3 className="text-lg font-semibold text-gray-900 mb-1">Erzaehlen Sie uns von Ihrer Anlage</h3>
        <p className="text-sm text-gray-500 mb-4">
          Je besser wir Ihr Produkt verstehen, desto praeziser koennen wir die relevanten Vorschriften identifizieren.
        </p>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Was baut Ihr Unternehmen? <span className="text-red-500">*</span>
            </label>
            <textarea
              value={mb.productDescription}
              onChange={e => updateMB({ productDescription: e.target.value })}
              placeholder="z.B. Wir bauen automatisierte Pruefstaende fuer die Qualitaetskontrolle in der Automobilindustrie..."
              rows={3}
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Was macht Ihre Anlage besonders?
            </label>
            <textarea
              value={mb.productPride}
              onChange={e => updateMB({ productPride: e.target.value })}
              placeholder="z.B. Unsere Anlage kann 500 Teile/Stunde mit 99.9% Erkennungsrate pruefen..."
              rows={2}
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-3">
              Produkttyp <span className="text-gray-400">(Mehrfachauswahl)</span>
            </label>
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
              {Object.entries(MACHINE_PRODUCT_TYPE_LABELS).map(([value, label]) => (
                <button
                  key={value}
                  type="button"
                  onClick={() => toggleProductType(value as MachineProductType)}
                  className={`px-4 py-3 rounded-lg border-2 text-sm font-medium transition-all ${
                    mb.productTypes.includes(value as MachineProductType)
                      ? 'border-purple-500 bg-purple-50 text-purple-700'
                      : 'border-gray-200 hover:border-purple-300 text-gray-700'
                  }`}
                >
                  {label}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Block 2: Software & KI */}
      <div className="border-t border-gray-200 pt-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Software & KI in Ihrem Produkt</h3>

        <div className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {[
              { key: 'containsSoftware', label: 'Enthaelt Software', desc: 'Anwendungssoftware in der Maschine' },
              { key: 'containsFirmware', label: 'Enthaelt Firmware', desc: 'Embedded Software / Steuerung' },
              { key: 'containsAI', label: 'Enthaelt KI/ML', desc: 'Kuenstliche Intelligenz / Machine Learning' },
            ].map(item => (
              <label
                key={item.key}
                className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
                  (mb as any)[item.key]
                    ? 'border-purple-500 bg-purple-50'
                    : 'border-gray-200 hover:border-purple-300'
                }`}
              >
                <input
                  type="checkbox"
                  checked={(mb as any)[item.key] ?? false}
                  onChange={e => updateMB({ [item.key]: e.target.checked } as any)}
                  className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
                />
                <div>
                  <div className="font-medium text-gray-900 text-sm">{item.label}</div>
                  <div className="text-xs text-gray-500">{item.desc}</div>
                </div>
              </label>
            ))}
          </div>

          {mb.containsAI && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-3">
                Art der KI-Integration
              </label>
              <div className="grid grid-cols-2 gap-3">
                {Object.entries(AI_INTEGRATION_TYPE_LABELS).map(([value, label]) => (
                  <button
                    key={value}
                    type="button"
                    onClick={() => toggleAIType(value as AIIntegrationType)}
                    className={`px-4 py-2 rounded-lg border text-sm transition-all ${
                      mb.aiIntegrationType.includes(value as AIIntegrationType)
                        ? 'border-purple-500 bg-purple-50 text-purple-700'
                        : 'border-gray-200 hover:border-purple-300 text-gray-700'
                    }`}
                  >
                    {label}
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.hasSafetyFunction ? 'border-red-400 bg-red-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.hasSafetyFunction}
                onChange={e => updateMB({ hasSafetyFunction: e.target.checked })}
                className="mt-1 w-5 h-5 text-red-600 rounded focus:ring-red-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Sicherheitsrelevante Funktion</div>
                <div className="text-xs text-gray-500">KI/SW hat sicherheitsrelevante Funktion</div>
              </div>
            </label>

            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.autonomousBehavior ? 'border-amber-400 bg-amber-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.autonomousBehavior}
                onChange={e => updateMB({ autonomousBehavior: e.target.checked })}
                className="mt-1 w-5 h-5 text-amber-600 rounded focus:ring-amber-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Autonomes Verhalten</div>
                <div className="text-xs text-gray-500">System lernt oder handelt eigenstaendig</div>
              </div>
            </label>
          </div>

          {mb.hasSafetyFunction && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Beschreibung der Sicherheitsfunktion
              </label>
              <textarea
                value={mb.safetyFunctionDescription}
                onChange={e => updateMB({ safetyFunctionDescription: e.target.value })}
                placeholder="z.B. KI-Vision ueberwacht den Schutzbereich und stoppt den Roboter bei Personenerkennung..."
                rows={2}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Human Oversight Level
            </label>
            <select
              value={mb.humanOversightLevel}
              onChange={e => updateMB({ humanOversightLevel: e.target.value as HumanOversightLevel })}
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            >
              {Object.entries(HUMAN_OVERSIGHT_LABELS).map(([value, label]) => (
                <option key={value} value={value}>{label}</option>
              ))}
            </select>
          </div>
        </div>
      </div>

      {/* Block 3: Konnektivitaet & Updates */}
      <div className="border-t border-gray-200 pt-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Konnektivitaet & Updates</h3>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
          {[
            { key: 'isNetworked', label: 'Vernetzt', desc: 'Maschine ist mit Netzwerk verbunden' },
            { key: 'hasRemoteAccess', label: 'Remote-Zugriff', desc: 'Fernwartung / Remote-Zugang' },
            { key: 'hasOTAUpdates', label: 'OTA-Updates', desc: 'Drahtlose Software-/Firmware-Updates' },
          ].map(item => (
            <label
              key={item.key}
              className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
                (mb as any)[item.key]
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <input
                type="checkbox"
                checked={(mb as any)[item.key] ?? false}
                onChange={e => updateMB({ [item.key]: e.target.checked } as any)}
                className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">{item.label}</div>
                <div className="text-xs text-gray-500">{item.desc}</div>
              </div>
            </label>
          ))}
        </div>

        {(mb.hasOTAUpdates || mb.hasRemoteAccess) && (
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Wie werden Updates eingespielt?
            </label>
            <input
              type="text"
              value={mb.updateMechanism}
              onChange={e => updateMB({ updateMechanism: e.target.value })}
              placeholder="z.B. VPN-gesicherter Remote-Zugang mit manueller Freigabe..."
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>
        )}
      </div>

      {/* Block 4: Markt & Kunden */}
      <div className="border-t border-gray-200 pt-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Markt & Kunden</h3>

        <div className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.criticalSectorClients ? 'border-red-400 bg-red-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.criticalSectorClients}
                onChange={e => updateMB({ criticalSectorClients: e.target.checked })}
                className="mt-1 w-5 h-5 text-red-600 rounded focus:ring-red-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Liefert an KRITIS-Betreiber</div>
                <div className="text-xs text-gray-500">Kunden in kritischer Infrastruktur</div>
              </div>
            </label>

            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.oemClients ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.oemClients}
                onChange={e => updateMB({ oemClients: e.target.checked })}
                className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">OEM-Zulieferer</div>
                <div className="text-xs text-gray-500">Liefern Komponenten an andere Hersteller</div>
              </div>
            </label>
          </div>

          {mb.criticalSectorClients && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-3">
                Kritische Sektoren Ihrer Kunden
              </label>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                {Object.entries(CRITICAL_SECTOR_LABELS).map(([value, label]) => (
                  <button
                    key={value}
                    type="button"
                    onClick={() => toggleCriticalSector(value as CriticalSector)}
                    className={`px-3 py-2 rounded-lg border text-sm transition-all ${
                      mb.criticalSectors.includes(value as CriticalSector)
                        ? 'border-red-400 bg-red-50 text-red-700'
                        : 'border-gray-200 hover:border-gray-300 text-gray-700'
                    }`}
                  >
                    {label}
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.ceMarkingRequired ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.ceMarkingRequired}
                onChange={e => updateMB({ ceMarkingRequired: e.target.checked })}
                className="mt-1 w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">CE-Kennzeichnung erforderlich</div>
                <div className="text-xs text-gray-500">Produkt benoetigt CE-Zertifizierung</div>
              </div>
            </label>

            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.existingCEProcess ? 'border-green-400 bg-green-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.existingCEProcess}
                onChange={e => updateMB({ existingCEProcess: e.target.checked })}
                className="mt-1 w-5 h-5 text-green-600 rounded focus:ring-green-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Bestehender CE-Prozess</div>
                <div className="text-xs text-gray-500">Bereits ein CE-Verfahren etabliert</div>
              </div>
            </label>
          </div>

          {mb.ceMarkingRequired && (
            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.hasRiskAssessment ? 'border-green-400 bg-green-50' : 'border-red-400 bg-red-50'
            }`}>
              <input
                type="checkbox"
                checked={mb.hasRiskAssessment}
                onChange={e => updateMB({ hasRiskAssessment: e.target.checked })}
                className="mt-1 w-5 h-5 text-green-600 rounded focus:ring-green-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Bestehende Risikobeurteilung</div>
                <div className="text-xs text-gray-500">
                  {mb.hasRiskAssessment
                    ? 'Risikobeurteilung vorhanden'
                    : 'Keine bestehende Risikobeurteilung - IACE hilft Ihnen dabei!'}
                </div>
              </div>
            </label>
          )}
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// COVERAGE ASSESSMENT COMPONENT
// =============================================================================

function CoverageAssessmentPanel({ profile }: { profile: Partial<CompanyProfile> }) {
  const assessment = assessSDKCoverage(profile)

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">SDK-Abdeckung</h3>

      {/* Status */}
      <div
        className={`p-4 rounded-lg mb-4 ${
          assessment.isFullyCovered
            ? 'bg-green-50 border border-green-200'
            : 'bg-amber-50 border border-amber-200'
        }`}
      >
        <div className="flex items-center gap-2">
          {assessment.isFullyCovered ? (
            <>
              <svg
                className="w-5 h-5 text-green-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <span className="font-medium text-green-800">Vollständig durch SDK abgedeckt</span>
            </>
          ) : (
            <>
              <svg
                className="w-5 h-5 text-amber-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>
              <span className="font-medium text-amber-800">Teilweise Einschränkungen</span>
            </>
          )}
        </div>
      </div>

      {/* Covered Regulations */}
      {assessment.coveredRegulations.length > 0 && (
        <div className="mb-4">
          <div className="text-sm font-medium text-gray-700 mb-2">Abgedeckte Regulierungen</div>
          <div className="flex flex-wrap gap-2">
            {assessment.coveredRegulations.map(reg => (
              <span key={reg} className="px-2 py-1 bg-green-100 text-green-700 text-sm rounded-full">
                {reg}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Not Covered */}
      {assessment.notCoveredRegulations.length > 0 && (
        <div className="mb-4">
          <div className="text-sm font-medium text-gray-700 mb-2">Nicht abgedeckt</div>
          <div className="flex flex-wrap gap-2">
            {assessment.notCoveredRegulations.map(reg => (
              <span key={reg} className="px-2 py-1 bg-red-100 text-red-700 text-sm rounded-full">
                {reg}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Recommendations */}
      {assessment.recommendations.length > 0 && (
        <div className="mt-4 p-4 bg-blue-50 rounded-lg">
          <div className="text-sm font-medium text-blue-800 mb-2">Empfehlungen</div>
          <ul className="text-sm text-blue-700 space-y-1">
            {assessment.recommendations.map((rec, i) => (
              <li key={i} className="flex items-start gap-2">
                <span>•</span>
                <span>{rec}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Legal Counsel Warning */}
      {assessment.requiresLegalCounsel && (
        <div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
          <div className="flex items-start gap-3">
            <svg
              className="w-5 h-5 text-amber-600 mt-0.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>
            <div>
              <div className="font-medium text-amber-800">Rechtsberatung empfohlen</div>
              <div className="text-sm text-amber-700 mt-1">
                Basierend auf Ihrem Profil empfehlen wir die Konsultation eines spezialisierten
                Rechtsanwalts für Bereiche, die über den Scope dieses SDKs hinausgehen.
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// =============================================================================
// MAIN COMPONENT
// =============================================================================

export default function CompanyProfilePage() {
  const { state, dispatch, setCompanyProfile, goToNextStep } = useSDK()
  const [currentStep, setCurrentStep] = useState(1)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [formData, setFormData] = useState<Partial<CompanyProfile>>({
    companyName: '',
    legalForm: undefined,
    industry: '',
    foundedYear: null,
    businessModel: undefined,
    offerings: [],
    companySize: undefined,
    employeeCount: '',
    annualRevenue: '',
    headquartersCountry: 'DE',
    headquartersCity: '',
    hasInternationalLocations: false,
    internationalCountries: [],
    targetMarkets: [],
    primaryJurisdiction: 'DE',
    isDataController: true,
    isDataProcessor: false,
    usesAI: false,
    aiUseCases: [],
    dpoName: null,
    dpoEmail: null,
    legalContactName: null,
    legalContactEmail: null,
    isComplete: false,
    completedAt: null,
  })

  const showMachineBuilderStep = isMachineBuilderIndustry(formData.industry || '')
  const wizardSteps = getWizardSteps(formData.industry || '')
  const totalSteps = wizardSteps.length
  const lastStep = wizardSteps[wizardSteps.length - 1].id

  // Load existing profile: first try backend, then SDK state as fallback
  useEffect(() => {
    let cancelled = false

    async function loadFromBackend() {
      try {
        const response = await fetch('/api/sdk/v1/company-profile?tenant_id=default')
        if (response.ok) {
          const data = await response.json()
          if (data && !cancelled) {
            const backendProfile: Partial<CompanyProfile> = {
              companyName: data.company_name || '',
              legalForm: data.legal_form || undefined,
              industry: data.industry || '',
              foundedYear: data.founded_year || undefined,
              businessModel: data.business_model || undefined,
              offerings: data.offerings || [],
              companySize: data.company_size || undefined,
              employeeCount: data.employee_count || '',
              annualRevenue: data.annual_revenue || '',
              headquartersCountry: data.headquarters_country || 'DE',
              headquartersCity: data.headquarters_city || '',
              hasInternationalLocations: data.has_international_locations || false,
              internationalCountries: data.international_countries || [],
              targetMarkets: data.target_markets || [],
              primaryJurisdiction: data.primary_jurisdiction || 'DE',
              isDataController: data.is_data_controller ?? true,
              isDataProcessor: data.is_data_processor ?? false,
              usesAI: data.uses_ai ?? false,
              aiUseCases: data.ai_use_cases || [],
              dpoName: data.dpo_name || '',
              dpoEmail: data.dpo_email || '',
              isComplete: data.is_complete || false,
            }
            setFormData(backendProfile)
            if (backendProfile.isComplete) {
              setCurrentStep(5)
            }
            return
          }
        }
      } catch {
        // Backend not available, fall through to SDK state
      }

      // Fallback: use SDK state
      if (!cancelled && state.companyProfile) {
        setFormData(state.companyProfile)
        if (state.companyProfile.isComplete) {
          setCurrentStep(5)
        }
      }
    }

    loadFromBackend()

    return () => { cancelled = true }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const updateFormData = (updates: Partial<CompanyProfile>) => {
    setFormData(prev => ({ ...prev, ...updates }))
  }

  const handleNext = () => {
    if (currentStep < lastStep) {
      // Skip step 6 if not a machine builder
      const nextStep = currentStep + 1
      if (nextStep === 6 && !showMachineBuilderStep) {
        // Complete profile (was step 5, last step for non-machine-builders)
        completeAndSaveProfile()
        return
      }
      setCurrentStep(nextStep)
    } else {
      // Complete profile
      completeAndSaveProfile()
    }
  }

  const completeAndSaveProfile = async () => {
    const completeProfile: CompanyProfile = {
      ...formData,
      isComplete: true,
      completedAt: new Date(),
    } as CompanyProfile

    setCompanyProfile(completeProfile)
    dispatch({ type: 'COMPLETE_STEP', payload: 'company-profile' })

    // Also persist to dedicated backend endpoint
    try {
      await fetch('/api/sdk/v1/company-profile', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          company_name: formData.companyName || '',
          legal_form: formData.legalForm || 'GmbH',
          industry: formData.industry || '',
          founded_year: formData.foundedYear || null,
          business_model: formData.businessModel || 'B2B',
          offerings: formData.offerings || [],
          company_size: formData.companySize || 'small',
          employee_count: formData.employeeCount || '',
          annual_revenue: formData.annualRevenue || '',
          headquarters_country: formData.headquartersCountry || 'DE',
          headquarters_city: formData.headquartersCity || '',
          has_international_locations: formData.hasInternationalLocations || false,
          international_countries: formData.internationalCountries || [],
          target_markets: formData.targetMarkets || [],
          primary_jurisdiction: formData.primaryJurisdiction || 'DE',
          is_data_controller: formData.isDataController ?? true,
          is_data_processor: formData.isDataProcessor ?? false,
          uses_ai: formData.usesAI ?? false,
          ai_use_cases: formData.aiUseCases || [],
          dpo_name: formData.dpoName || '',
          dpo_email: formData.dpoEmail || '',
          is_complete: true,
          // Machine builder fields (if applicable)
          ...(formData.machineBuilder ? {
            machine_builder: {
              product_types: formData.machineBuilder.productTypes || [],
              product_description: formData.machineBuilder.productDescription || '',
              product_pride: formData.machineBuilder.productPride || '',
              contains_software: formData.machineBuilder.containsSoftware || false,
              contains_firmware: formData.machineBuilder.containsFirmware || false,
              contains_ai: formData.machineBuilder.containsAI || false,
              ai_integration_type: formData.machineBuilder.aiIntegrationType || [],
              has_safety_function: formData.machineBuilder.hasSafetyFunction || false,
              safety_function_description: formData.machineBuilder.safetyFunctionDescription || '',
              autonomous_behavior: formData.machineBuilder.autonomousBehavior || false,
              human_oversight_level: formData.machineBuilder.humanOversightLevel || 'full',
              is_networked: formData.machineBuilder.isNetworked || false,
              has_remote_access: formData.machineBuilder.hasRemoteAccess || false,
              has_ota_updates: formData.machineBuilder.hasOTAUpdates || false,
              update_mechanism: formData.machineBuilder.updateMechanism || '',
              export_markets: formData.machineBuilder.exportMarkets || [],
              critical_sector_clients: formData.machineBuilder.criticalSectorClients || false,
              critical_sectors: formData.machineBuilder.criticalSectors || [],
              oem_clients: formData.machineBuilder.oemClients || false,
              ce_marking_required: formData.machineBuilder.ceMarkingRequired || false,
              existing_ce_process: formData.machineBuilder.existingCEProcess || false,
              has_risk_assessment: formData.machineBuilder.hasRiskAssessment || false,
            },
          } : {}),
        }),
      })
    } catch (err) {
      console.error('Failed to save company profile to backend:', err)
    }

    goToNextStep()
  }

  const handleBack = () => {
    if (currentStep > 1) {
      setCurrentStep(prev => prev - 1)
    }
  }

  const handleDeleteProfile = async () => {
    setIsDeleting(true)
    try {
      const response = await fetch('/api/sdk/v1/company-profile?tenant_id=default', {
        method: 'DELETE',
      })
      if (response.ok) {
        // Reset form and SDK state
        setFormData({
          companyName: '',
          legalForm: undefined,
          industry: '',
          foundedYear: null,
          businessModel: undefined,
          offerings: [],
          companySize: undefined,
          employeeCount: '',
          annualRevenue: '',
          headquartersCountry: 'DE',
          headquartersCity: '',
          hasInternationalLocations: false,
          internationalCountries: [],
          targetMarkets: [],
          primaryJurisdiction: 'DE',
          isDataController: true,
          isDataProcessor: false,
          usesAI: false,
          aiUseCases: [],
          dpoName: null,
          dpoEmail: null,
          legalContactName: null,
          legalContactEmail: null,
          isComplete: false,
          completedAt: null,
        })
        setCurrentStep(1)
        dispatch({ type: 'SET_STATE', payload: { companyProfile: undefined } })
      }
    } catch (err) {
      console.error('Failed to delete company profile:', err)
    } finally {
      setIsDeleting(false)
      setShowDeleteConfirm(false)
    }
  }

  const canProceed = () => {
    switch (currentStep) {
      case 1:
        return formData.companyName && formData.legalForm
      case 2:
        return formData.businessModel && (formData.offerings?.length || 0) > 0
      case 3:
        return formData.companySize
      case 4:
        return formData.headquartersCountry && (formData.targetMarkets?.length || 0) > 0
      case 5:
        return true
      case 6:
        // Machine builder step: require at least product description
        return (formData.machineBuilder?.productDescription?.length || 0) > 0
      default:
        return false
    }
  }

  const isLastStep = currentStep === lastStep || (currentStep === 5 && !showMachineBuilderStep)

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-6xl mx-auto px-4">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Unternehmensprofil</h1>
          <p className="text-gray-600 mt-2">
            Helfen Sie uns, Ihr Unternehmen zu verstehen, damit wir die relevanten Regulierungen
            identifizieren können.
          </p>
        </div>

        {/* Progress Steps */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            {wizardSteps.map((step, index) => (
              <React.Fragment key={step.id}>
                <div className="flex items-center">
                  <div
                    className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium ${
                      step.id < currentStep
                        ? 'bg-purple-600 text-white'
                        : step.id === currentStep
                        ? 'bg-purple-100 text-purple-600 border-2 border-purple-600'
                        : 'bg-gray-100 text-gray-400'
                    }`}
                  >
                    {step.id < currentStep ? (
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path
                          fillRule="evenodd"
                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                          clipRule="evenodd"
                        />
                      </svg>
                    ) : (
                      step.id
                    )}
                  </div>
                  <div className="ml-3 hidden sm:block">
                    <div
                      className={`text-sm font-medium ${
                        step.id <= currentStep ? 'text-gray-900' : 'text-gray-400'
                      }`}
                    >
                      {step.name}
                    </div>
                  </div>
                </div>
                {index < wizardSteps.length - 1 && (
                  <div
                    className={`flex-1 h-0.5 mx-4 ${
                      step.id < currentStep ? 'bg-purple-600' : 'bg-gray-200'
                    }`}
                  />
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Content */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Form */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-xl border border-gray-200 p-8">
              <div className="mb-6">
                <h2 className="text-xl font-semibold text-gray-900">
                  {(wizardSteps.find(s => s.id === currentStep) || wizardSteps[0]).name}
                </h2>
                <p className="text-gray-500">{(wizardSteps.find(s => s.id === currentStep) || wizardSteps[0]).description}</p>
              </div>

              {currentStep === 1 && <StepBasicInfo data={formData} onChange={updateFormData} />}
              {currentStep === 2 && <StepBusinessModel data={formData} onChange={updateFormData} />}
              {currentStep === 3 && <StepCompanySize data={formData} onChange={updateFormData} />}
              {currentStep === 4 && <StepLocations data={formData} onChange={updateFormData} />}
              {currentStep === 5 && <StepDataProtection data={formData} onChange={updateFormData} />}
              {currentStep === 6 && showMachineBuilderStep && <StepMachineBuilder data={formData} onChange={updateFormData} />}

              {/* Navigation */}
              <div className="flex justify-between mt-8 pt-6 border-t border-gray-200">
                <button
                  onClick={handleBack}
                  disabled={currentStep === 1}
                  className="px-6 py-3 text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Zurück
                </button>
                <button
                  onClick={handleNext}
                  disabled={!canProceed()}
                  className="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {isLastStep ? 'Profil speichern & weiter' : 'Weiter'}
                </button>
              </div>
            </div>
          </div>

          {/* Delete Confirmation Modal */}
          {showDeleteConfirm && (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
              <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Profil löschen?</h3>
                <p className="text-sm text-gray-600 mb-6">
                  Alle gespeicherten Unternehmensdaten werden unwiderruflich gelöscht (DSGVO Art. 17).
                  Diese Aktion kann nicht rückgängig gemacht werden.
                </p>
                <div className="flex justify-end gap-3">
                  <button
                    onClick={() => setShowDeleteConfirm(false)}
                    className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg"
                  >
                    Abbrechen
                  </button>
                  <button
                    onClick={handleDeleteProfile}
                    disabled={isDeleting}
                    className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
                  >
                    {isDeleting ? 'Lösche...' : 'Endgültig löschen'}
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* Sidebar: Coverage Assessment */}
          <div className="lg:col-span-1">
            <CoverageAssessmentPanel profile={formData} />

            {/* Info Box */}
            <div className="mt-6 bg-blue-50 rounded-xl border border-blue-200 p-6">
              <div className="flex items-start gap-3">
                <svg
                  className="w-5 h-5 text-blue-600 mt-0.5"
                  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>
                  <div className="font-medium text-blue-800">Warum diese Fragen?</div>
                  <div className="text-sm text-blue-700 mt-1">
                    Diese Informationen helfen uns, die für Ihr Unternehmen relevanten Regulierungen
                    zu identifizieren und ehrlich zu kommunizieren, wo unsere Grenzen liegen.
                  </div>
                </div>
              </div>
            </div>
            {/* Delete Profile Button */}
            {formData.companyName && (
              <div className="mt-6">
                <button
                  onClick={() => setShowDeleteConfirm(true)}
                  className="w-full px-4 py-2 text-sm text-red-600 border border-red-200 rounded-lg hover:bg-red-50 transition-colors"
                >
                  Profil löschen (Art. 17 DSGVO)
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}