'use client'

import React, { useState, useEffect, Suspense } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { ZoneBadge } from '@/components/sdk/compliance-optimizer/ZoneBadge'

interface DimensionField {
  key: string
  label: string
  options: { value: string; label: string }[]
  type?: 'select' | 'toggle'
}

const DIMENSIONS: DimensionField[] = [
  { key: 'automation_level', label: 'Automatisierungsgrad', options: [
    { value: 'none', label: 'Keine' }, { value: 'assistive', label: 'Assistierend' },
    { value: 'partial', label: 'Teilautomatisiert' }, { value: 'full', label: 'Vollautomatisiert' },
  ]},
  { key: 'decision_binding', label: 'Entscheidungsbindung', options: [
    { value: 'non_binding', label: 'Unverbindlich' }, { value: 'human_review_required', label: 'Mensch entscheidet' },
    { value: 'fully_binding', label: 'Vollstaendig bindend' },
  ]},
  { key: 'decision_impact', label: 'Entscheidungswirkung', options: [
    { value: 'low', label: 'Niedrig' }, { value: 'medium', label: 'Mittel' }, { value: 'high', label: 'Hoch' },
  ]},
  { key: 'domain', label: 'Branche', options: [
    { value: 'hr', label: 'HR / Personal' }, { value: 'finance', label: 'Finanzen' },
    { value: 'education', label: 'Bildung' }, { value: 'health', label: 'Gesundheit' },
    { value: 'marketing', label: 'Marketing' }, { value: 'general', label: 'Allgemein' },
  ]},
  { key: 'data_type', label: 'Datensensitivitaet', options: [
    { value: 'non_personal', label: 'Keine personenbezogenen' }, { value: 'personal', label: 'Personenbezogen' },
    { value: 'sensitive', label: 'Besondere Kategorien (Art. 9)' }, { value: 'biometric', label: 'Biometrisch' },
  ]},
  { key: 'human_in_loop', label: 'Menschliche Kontrolle', options: [
    { value: 'required', label: 'Erforderlich' }, { value: 'optional', label: 'Optional' }, { value: 'none', label: 'Keine' },
  ]},
  { key: 'explainability', label: 'Erklaerbarkeit', options: [
    { value: 'high', label: 'Hoch' }, { value: 'basic', label: 'Basis' }, { value: 'none', label: 'Keine' },
  ]},
  { key: 'risk_classification', label: 'Risikoklasse (AI Act)', options: [
    { value: 'minimal', label: 'Minimal' }, { value: 'limited', label: 'Begrenzt' },
    { value: 'high', label: 'Hoch' }, { value: 'prohibited', label: 'Verboten' },
  ]},
  { key: 'legal_basis', label: 'Rechtsgrundlage (DSGVO)', options: [
    { value: 'consent', label: 'Einwilligung' }, { value: 'contract', label: 'Vertrag' },
    { value: 'legal_obligation', label: 'Rechtl. Verpflichtung' },
    { value: 'legitimate_interest', label: 'Berechtigtes Interesse' },
    { value: 'public_interest', label: 'Oeffentl. Interesse' },
  ]},
  { key: 'model_type', label: 'Modelltyp', options: [
    { value: 'rule_based', label: 'Regelbasiert' }, { value: 'statistical', label: 'Statistisch / ML' },
    { value: 'blackbox_llm', label: 'Blackbox / LLM' },
  ]},
  { key: 'deployment_scope', label: 'Einsatzbereich', options: [
    { value: 'internal', label: 'Intern' }, { value: 'external', label: 'Extern (Kunden)' },
    { value: 'public', label: 'Oeffentlich' },
  ]},
]

const TOGGLE_DIMENSIONS = [
  { key: 'transparency_required', label: 'Transparenzpflicht' },
  { key: 'logging_required', label: 'Protokollierungspflicht' },
]

function NewOptimizationPageInner() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const fromAssessment = searchParams.get('from_assessment')
  const [autoOptimizing, setAutoOptimizing] = useState(false)
  const [title, setTitle] = useState('')

  useEffect(() => {
    if (!fromAssessment) return
    setAutoOptimizing(true)
    fetch(`/api/sdk/v1/maximizer/optimize-from-assessment/${fromAssessment}`, { method: 'POST' })
      .then(r => r.ok ? r.json() : Promise.reject('failed'))
      .then(data => router.push(`/sdk/compliance-optimizer/${data.id}`))
      .catch(() => setAutoOptimizing(false))
  }, [fromAssessment, router])
  const [config, setConfig] = useState<Record<string, string>>({
    automation_level: 'assistive', decision_binding: 'non_binding', decision_impact: 'low',
    domain: 'general', data_type: 'non_personal', human_in_loop: 'required',
    explainability: 'basic', risk_classification: 'minimal', legal_basis: 'contract',
    transparency_required: 'false', logging_required: 'false',
    model_type: 'rule_based', deployment_scope: 'internal',
  })
  const [preview, setPreview] = useState<Record<string, { zone: string }> | null>(null)
  const [submitting, setSubmitting] = useState(false)

  async function handlePreview() {
    try {
      const body = { ...config, transparency_required: config.transparency_required === 'true', logging_required: config.logging_required === 'true' }
      const res = await fetch('/api/sdk/v1/maximizer/evaluate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
      if (res.ok) {
        const data = await res.json()
        setPreview(data.zone_map || {})
      }
    } catch { /* silent */ }
  }

  async function handleSubmit() {
    setSubmitting(true)
    try {
      const body = {
        config: { ...config, transparency_required: config.transparency_required === 'true', logging_required: config.logging_required === 'true' },
        title: title || 'Optimierung ' + new Date().toLocaleDateString('de-DE'),
      }
      const res = await fetch('/api/sdk/v1/maximizer/optimize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
      if (res.ok) {
        const data = await res.json()
        router.push(`/sdk/compliance-optimizer/${data.id}`)
      }
    } finally {
      setSubmitting(false)
    }
  }

  if (autoOptimizing) {
    return (
      <div className="max-w-4xl mx-auto p-6 text-center py-24">
        <div className="animate-pulse">
          <span className="text-4xl">📊</span>
          <h2 className="text-xl font-bold text-gray-900 mt-4 mb-2">Optimierung laeuft...</h2>
          <p className="text-sm text-gray-500">Assessment wird analysiert und optimale Konfiguration berechnet.</p>
        </div>
      </div>
    )
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-2xl font-bold text-gray-900 mb-1">Neue Optimierung</h1>
      <p className="text-sm text-gray-500 mb-6">Konfigurieren Sie Ihren KI-Use-Case und finden Sie den maximalen regulatorischen Spielraum.</p>

      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
        <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="z.B. HR Bewerber-Ranking"
          className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        {DIMENSIONS.map((dim) => (
          <div key={dim.key}>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {dim.label}
              {preview && preview[dim.key] && (
                <span className="ml-2"><ZoneBadge zone={preview[dim.key].zone as 'FORBIDDEN' | 'RESTRICTED' | 'SAFE'} /></span>
              )}
            </label>
            <select
              value={config[dim.key]}
              onChange={(e) => { setConfig({ ...config, [dim.key]: e.target.value }); setPreview(null) }}
              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm bg-white"
            >
              {dim.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
            </select>
          </div>
        ))}

        {TOGGLE_DIMENSIONS.map((dim) => (
          <div key={dim.key} className="flex items-center gap-3">
            <input type="checkbox" checked={config[dim.key] === 'true'}
              onChange={(e) => { setConfig({ ...config, [dim.key]: String(e.target.checked) }); setPreview(null) }}
              className="h-4 w-4 rounded border-gray-300 text-blue-600" />
            <label className="text-sm font-medium text-gray-700">
              {dim.label}
              {preview && preview[dim.key] && (
                <span className="ml-2"><ZoneBadge zone={preview[dim.key].zone as 'FORBIDDEN' | 'RESTRICTED' | 'SAFE'} /></span>
              )}
            </label>
          </div>
        ))}
      </div>

      <div className="flex gap-3">
        <button onClick={handlePreview} className="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 text-sm">
          Vorschau (3-Zonen-Check)
        </button>
        <button onClick={handleSubmit} disabled={submitting}
          className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
          {submitting ? 'Optimiere...' : 'Optimieren'}
        </button>
      </div>
    </div>
  )
}

export default function NewOptimizationPage() {
  return (
    <Suspense fallback={<div className="max-w-4xl mx-auto p-6 text-gray-500">Laden...</div>}>
      <NewOptimizationPageInner />
    </Suspense>
  )
}