'use client'

/**
 * P79 — Pre-Scan-Wizard (8 Pflichtfelder).
 *
 * 8 Pflichtfelder die vor dem Lauf abgefragt werden. Werte landen im
 * scan_context und filtern später die MC-Auswertung (zusammen mit P72
 * scope_doc_type + applicable_industries). Erwartete Noise-Reduktion:
 * 70-80% bei falsch zugeordneten HIGH-MCs.
 */

import React, { useState, useEffect } from 'react'

export interface ScanContext {
  industry: string
  business_model: string
  direct_sales: string
  legal_form: string
  group_structure: string
  employee_count: string
  special_data: string[]
  third_country_transfer: string
}

const INDUSTRIES = [
  { id: '', label: '— bitte wählen —' },
  { id: 'automotive', label: 'Automotive / OEM' },
  { id: 'ecommerce', label: 'E-Commerce / Online-Handel' },
  { id: 'saas', label: 'SaaS / Software' },
  { id: 'banking', label: 'Banking / Finance' },
  { id: 'insurance', label: 'Insurance / Versicherung' },
  { id: 'healthcare', label: 'Healthcare / Gesundheit' },
  { id: 'education', label: 'Bildung / Schule' },
  { id: 'public', label: 'Öffentliche Verwaltung' },
  { id: 'manufacturing', label: 'Industrie / Manufacturing' },
  { id: 'media', label: 'Medien / Verlag' },
  { id: 'other', label: 'Sonstige' },
]

const LEGAL_FORMS = [
  { id: '', label: '— bitte wählen —' },
  { id: 'ag', label: 'AG (Aktiengesellschaft)' },
  { id: 'gmbh', label: 'GmbH' },
  { id: 'gmbh_co_kg', label: 'GmbH & Co. KG' },
  { id: 'kg', label: 'KG' },
  { id: 'ohg', label: 'OHG' },
  { id: 'ug', label: 'UG (haftungsbeschränkt)' },
  { id: 'ek', label: 'e.K. / Einzelunternehmen' },
  { id: 'verein', label: 'Verein' },
  { id: 'stiftung', label: 'Stiftung' },
  { id: 'behoerde', label: 'Behörde / Körperschaft öff. Rechts' },
  { id: 'other', label: 'Sonstige' },
]

const GROUP_STRUCTURES = [
  { id: '', label: '— bitte wählen —' },
  { id: 'standalone', label: 'Eigenständig' },
  { id: 'parent', label: 'Konzern-Mutter' },
  { id: 'subsidiary', label: 'Konzern-Tochter' },
  { id: 'joint_venture', label: 'Joint Venture' },
  { id: 'processor', label: 'Reiner Auftragsverarbeiter' },
]

const EMPLOYEE_COUNTS = [
  { id: '', label: '— bitte wählen —' },
  { id: 'lt10', label: 'unter 10' },
  { id: '10_19', label: '10-19' },
  { id: '20_49', label: '20-49 (DSB ab 20 Pflicht)' },
  { id: '50_249', label: '50-249 (Whistleblower-Pflicht)' },
  { id: '250_499', label: '250-499' },
  { id: '500_999', label: '500-999' },
  { id: '1000_plus', label: '1.000+ (Konzern)' },
]

const SPECIAL_DATA_OPTIONS = [
  { id: 'health', label: 'Gesundheitsdaten' },
  { id: 'biometric', label: 'Biometrische Daten' },
  { id: 'ethnicity', label: 'Religiöse / ethnische Herkunft' },
  { id: 'sexual', label: 'Sexuelle Orientierung' },
  { id: 'criminal', label: 'Strafrechtliche Daten' },
  { id: 'minors', label: 'Minderjährige (<16)' },
  { id: 'none', label: 'Keine besonderen Daten' },
]

const STORAGE_KEY = 'compliance-scan-context'

function emptyContext(): ScanContext {
  return {
    industry: '',
    business_model: '',
    direct_sales: '',
    legal_form: '',
    group_structure: '',
    employee_count: '',
    special_data: [],
    third_country_transfer: '',
  }
}

export function isContextComplete(ctx: ScanContext): boolean {
  return Boolean(
    ctx.industry &&
    ctx.business_model &&
    ctx.direct_sales &&
    ctx.legal_form &&
    ctx.group_structure &&
    ctx.employee_count &&
    ctx.special_data.length > 0 &&
    ctx.third_country_transfer
  )
}

export function PreScanWizard({
  value,
  onChange,
}: {
  value: ScanContext
  onChange: (ctx: ScanContext) => void
}) {
  const update = <K extends keyof ScanContext>(key: K, val: ScanContext[K]) => {
    onChange({ ...value, [key]: val })
  }

  const toggleSpecialData = (id: string) => {
    const next = value.special_data.includes(id)
      ? value.special_data.filter(x => x !== id)
      : [...value.special_data.filter(x => x !== 'none' || id === 'none'), id]
    onChange({ ...value, special_data: id === 'none' ? ['none'] : next.filter(x => x !== 'none') })
  }

  return (
    <div style={{
      background: '#f0f9ff',
      border: '1px solid #bfdbfe',
      borderRadius: 8,
      padding: '14px 16px',
      marginBottom: 14,
    }}>
      <div style={{ fontSize: 11, color: '#1e40af', textTransform: 'uppercase',
                    letterSpacing: 1.2, marginBottom: 4, fontWeight: 600 }}>
        Pflichtangaben zur Klassifizierung des Audits
      </div>
      <h3 style={{ margin: '0 0 6px', fontSize: 14, color: '#1e293b' }}>
        Vor dem Scan: 8 Angaben zum Unternehmen
      </h3>
      <p style={{ margin: '0 0 12px', fontSize: 11, color: '#475569', lineHeight: 1.5 }}>
        Diese Angaben filtern irrelevante Compliance-Themen heraus (z.B. eHealth-
        Vorschriften bei einem Autobauer) und liefern eine realistische
        Einschätzung statt pauschaler Verstoss-Listen.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        <Field label="1. Branche*">
          <select value={value.industry} onChange={e => update('industry', e.target.value)} style={inputStyle}>
            {INDUSTRIES.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
          </select>
        </Field>

        <Field label="2. Geschäftsmodell*">
          <select value={value.business_model} onChange={e => update('business_model', e.target.value)} style={inputStyle}>
            <option value="">— bitte wählen —</option>
            <option value="b2b">B2B</option>
            <option value="b2c">B2C</option>
            <option value="both">Beides (B2B + B2C)</option>
          </select>
        </Field>

        <Field label="3. Direkt-Vertrieb (Webshop/Buchung)*">
          <select value={value.direct_sales} onChange={e => update('direct_sales', e.target.value)} style={inputStyle}>
            <option value="">— bitte wählen —</option>
            <option value="yes">Ja</option>
            <option value="no">Nein</option>
            <option value="lead_funnel">Nur Lead-Funnel (Probefahrten, Anfragen)</option>
          </select>
        </Field>

        <Field label="4. Rechtsform*">
          <select value={value.legal_form} onChange={e => update('legal_form', e.target.value)} style={inputStyle}>
            {LEGAL_FORMS.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
          </select>
        </Field>

        <Field label="5. Konzern-Struktur*">
          <select value={value.group_structure} onChange={e => update('group_structure', e.target.value)} style={inputStyle}>
            {GROUP_STRUCTURES.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
          </select>
        </Field>

        <Field label="6. Mitarbeiterzahl*">
          <select value={value.employee_count} onChange={e => update('employee_count', e.target.value)} style={inputStyle}>
            {EMPLOYEE_COUNTS.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
          </select>
        </Field>

        <Field label="7. Besondere Datenkategorien*" colSpan={2}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {SPECIAL_DATA_OPTIONS.map(o => (
              <label key={o.id} style={{ fontSize: 12, display: 'inline-flex',
                                          alignItems: 'center', gap: 4,
                                          padding: '4px 8px', background: '#fff',
                                          border: '1px solid #cbd5e1',
                                          borderRadius: 4 }}>
                <input type="checkbox"
                       checked={value.special_data.includes(o.id)}
                       onChange={() => toggleSpecialData(o.id)} />
                {o.label}
              </label>
            ))}
          </div>
        </Field>

        <Field label="8. Bekannter Drittland-Transfer*" colSpan={2}>
          <select value={value.third_country_transfer} onChange={e => update('third_country_transfer', e.target.value)} style={inputStyle}>
            <option value="">— bitte wählen —</option>
            <option value="yes">Ja (USA, CN, IN, UK, ...)</option>
            <option value="no">Nein (nur EU/EWR)</option>
            <option value="unknown">Weiß nicht (bitte automatisch prüfen)</option>
          </select>
        </Field>
      </div>

      {!isContextComplete(value) && (
        <div style={{ marginTop: 10, fontSize: 11, color: '#92400e',
                       background: '#fef3c7', padding: '6px 10px',
                       borderRadius: 4, border: '1px solid #fde68a' }}>
          Bitte alle 8 Pflichtfelder ausfüllen — der Scan-Button wird erst aktiv,
          wenn die Klassifizierung komplett ist.
        </div>
      )}
    </div>
  )
}

const inputStyle: React.CSSProperties = {
  width: '100%',
  padding: '6px 8px',
  fontSize: 12,
  border: '1px solid #cbd5e1',
  borderRadius: 4,
  background: '#fff',
}

function Field({ label, children, colSpan }: { label: string; children: React.ReactNode; colSpan?: number }) {
  return (
    <div style={{ gridColumn: colSpan ? `span ${colSpan}` : undefined }}>
      <label style={{ display: 'block', fontSize: 11, color: '#475569',
                       marginBottom: 4, fontWeight: 600 }}>
        {label}
      </label>
      {children}
    </div>
  )
}

export function useScanContext(): [ScanContext, (ctx: ScanContext) => void] {
  const [ctx, setCtx] = useState<ScanContext>(() => {
    if (typeof window === 'undefined') return emptyContext()
    try {
      const s = localStorage.getItem(STORAGE_KEY)
      return s ? { ...emptyContext(), ...JSON.parse(s) } : emptyContext()
    } catch {
      return emptyContext()
    }
  })
  useEffect(() => {
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(ctx)) } catch {}
  }, [ctx])
  return [ctx, setCtx]
}