'use client'

import { useState, useEffect, useCallback, useRef } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { LimitsFormSections } from './_components/LimitsFormSections'
import { EMPTY_LIMITS_FORM, type LimitsFormData } from './_types'

type SaveStatus = 'idle' | 'saving' | 'saved' | 'error'

interface ProjectData {
  machine_name: string
  machine_type: string
  manufacturer: string
  metadata?: {
    limits_form?: LimitsFormData
    [key: string]: unknown
  }
}

export default function IACEInterviewPage() {
  const { projectId } = useParams<{ projectId: string }>()
  const router = useRouter()
  const [formData, setFormData] = useState<LimitsFormData>(EMPTY_LIMITS_FORM)
  const [projectData, setProjectData] = useState<ProjectData | null>(null)
  const [loading, setLoading] = useState(true)
  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
  const [initStatus, setInitStatus] = useState<'idle' | 'running' | 'done' | 'error'>('idle')
  const [initResult, setInitResult] = useState<{ steps: { name: string; status: string; count: number; details?: string }[]; summary: Record<string, number> } | null>(null)
  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const latestFormRef = useRef<LimitsFormData>(EMPTY_LIMITS_FORM)

  // Load project data and existing form data
  useEffect(() => {
    loadProject()
  }, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps

  async function loadProject() {
    try {
      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}`)
      if (!res.ok) return
      const json = await res.json()
      const proj: ProjectData = {
        machine_name: json.machine_name || '',
        machine_type: json.machine_type || '',
        manufacturer: json.manufacturer || '',
        metadata: json.metadata || {},
      }
      setProjectData(proj)

      // Restore saved form data from metadata
      if (proj.metadata?.limits_form) {
        const saved = proj.metadata.limits_form
        const merged = { ...EMPTY_LIMITS_FORM, ...saved }
        setFormData(merged)
        latestFormRef.current = merged
      } else {
        // Pre-fill from project fields
        const prefilled: LimitsFormData = {
          ...EMPTY_LIMITS_FORM,
          machine_designation: proj.machine_name,
          machine_type: proj.machine_type,
          manufacturer: proj.manufacturer,
        }
        setFormData(prefilled)
        latestFormRef.current = prefilled
      }
    } catch (err) {
      console.error('Failed to load project:', err)
    } finally {
      setLoading(false)
    }
  }

  // Debounced auto-save
  const saveToBackend = useCallback(async (data: LimitsFormData) => {
    setSaveStatus('saving')
    try {
      // Merge limits_form into existing metadata
      const existingMetadata = projectData?.metadata || {}
      const newMetadata = { ...existingMetadata, limits_form: data }

      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ metadata: newMetadata }),
      })

      if (res.ok) {
        setSaveStatus('saved')
        // Also update local projectData metadata so next save merges correctly
        setProjectData((prev) => prev ? { ...prev, metadata: newMetadata } : prev)
        setTimeout(() => setSaveStatus((s) => s === 'saved' ? 'idle' : s), 2000)
      } else {
        setSaveStatus('error')
      }
    } catch {
      setSaveStatus('error')
    }
  }, [projectId, projectData?.metadata]) // eslint-disable-line react-hooks/exhaustive-deps

  const handleFieldChange = useCallback((field: keyof LimitsFormData, value: string | string[]) => {
    setFormData((prev) => {
      const next = { ...prev, [field]: value }
      latestFormRef.current = next
      return next
    })

    // Debounce save: wait 1.5s after last change
    if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
    saveTimerRef.current = setTimeout(() => {
      saveToBackend(latestFormRef.current)
    }, 1500)
  }, [saveToBackend])

  // Cleanup timer on unmount
  useEffect(() => {
    return () => {
      if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
    }
  }, [])

  // Calculate completion percentage
  const completionPct = calculateCompletion(formData)

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
            Grenzen & Verwendung
          </h1>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
            Schritt 3 — Bestimmungsgemasse Verwendung, Fehlanwendung und Maschinengrenzen definieren (ISO 12100)
          </p>
        </div>
        <div className="flex items-center gap-3">
          <SaveIndicator status={saveStatus} />
          <CompletionBadge pct={completionPct} />
        </div>
      </div>

      {/* Form Sections */}
      <LimitsFormSections
        data={formData}
        onChange={handleFieldChange}
        prefilled={{
          machine_name: projectData?.machine_name,
          machine_type: projectData?.machine_type,
          manufacturer: projectData?.manufacturer,
        }}
      />

      {/* Initialization Result */}
      {initResult && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-green-200 dark:border-green-700 p-5 space-y-3">
          <h3 className="text-sm font-semibold text-green-800 dark:text-green-300">Initialisierung abgeschlossen</h3>
          <div className="grid grid-cols-5 gap-3 text-center">
            {Object.entries(initResult.summary).map(([key, val]) => (
              <div key={key}>
                <div className="text-xl font-bold text-gray-900 dark:text-white">{val}</div>
                <div className="text-[10px] text-gray-500 capitalize">{key}</div>
              </div>
            ))}
          </div>
          <div className="space-y-1">
            {initResult.steps.map((s, i) => (
              <div key={i} className="flex items-center gap-2 text-xs">
                <span className={s.status === 'done' ? 'text-green-600' : s.status === 'skipped' ? 'text-gray-400' : 'text-red-500'}>
                  {s.status === 'done' ? '\u2713' : s.status === 'skipped' ? '\u25CB' : '\u2717'}
                </span>
                <span className="text-gray-700 dark:text-gray-300">{s.name}</span>
                {s.count > 0 && <span className="text-gray-400">({s.count})</span>}
                {s.details && <span className="text-gray-400 text-[10px]">— {s.details}</span>}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Navigation + Initialize */}
      <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
        <button
          onClick={() => router.push(`/sdk/iace/${projectId}`)}
          className="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
        >
          Zurueck zur Uebersicht
        </button>
        <div className="flex items-center gap-3">
          <button
            disabled={initStatus === 'running' || completionPct < 30}
            onClick={async () => {
              // Flush pending save first
              if (saveTimerRef.current) {
                clearTimeout(saveTimerRef.current)
                await saveToBackend(latestFormRef.current)
              }
              setInitStatus('running')
              setInitResult(null)
              try {
                const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/initialize`, { method: 'POST' })
                if (!res.ok) {
                  const err = await res.json().catch(() => ({}))
                  alert(err.error || 'Initialisierung fehlgeschlagen')
                  setInitStatus('error')
                  return
                }
                const data = await res.json()
                setInitResult(data)
                setInitStatus('done')
              } catch {
                setInitStatus('error')
              }
            }}
            className="flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {initStatus === 'running' ? (
              <>
                <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
                Analyse laeuft...
              </>
            ) : (
              <>
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                Projekt initialisieren
              </>
            )}
          </button>
          <button
            disabled={initStatus === 'running' || completionPct < 30}
            onClick={async () => {
              if (!confirm('Alle bestehenden Gefaehrdungen und Massnahmen loeschen und neu erstellen?')) return
              if (saveTimerRef.current) {
                clearTimeout(saveTimerRef.current)
                await saveToBackend(latestFormRef.current)
              }
              setInitStatus('running')
              setInitResult(null)
              try {
                const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/initialize?force=true`, { method: 'POST' })
                if (!res.ok) {
                  const err = await res.json().catch(() => ({}))
                  alert(err.error || 'Neu-Initialisierung fehlgeschlagen')
                  setInitStatus('error')
                  return
                }
                const data = await res.json()
                setInitResult(data)
                setInitStatus('done')
              } catch {
                setInitStatus('error')
              }
            }}
            className="flex items-center gap-2 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {initStatus === 'running' ? (
              <>
                <span className="animate-spin inline-block w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full" />
                Laeuft...
              </>
            ) : (
              <>
                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                Neu initialisieren
              </>
            )}
          </button>
          <button
            onClick={() => {
              if (saveTimerRef.current) {
                clearTimeout(saveTimerRef.current)
                saveToBackend(latestFormRef.current)
              }
              router.push(`/sdk/iace/${projectId}/components`)
            }}
            className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium transition-colors"
          >
            Weiter zu Komponenten
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}

// ────────────────────────────────────────
// Sub-components (small, page-local)
// ────────────────────────────────────────

function SaveIndicator({ status }: { status: SaveStatus }) {
  if (status === 'idle') return null
  return (
    <div className="flex items-center gap-1.5 text-xs">
      {status === 'saving' && (
        <>
          <div className="w-2 h-2 rounded-full bg-yellow-400 animate-pulse" />
          <span className="text-yellow-600 dark:text-yellow-400">Speichert...</span>
        </>
      )}
      {status === 'saved' && (
        <>
          <svg className="w-3.5 h-3.5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
          <span className="text-green-600 dark:text-green-400">Gespeichert</span>
        </>
      )}
      {status === 'error' && (
        <>
          <div className="w-2 h-2 rounded-full bg-red-500" />
          <span className="text-red-600 dark:text-red-400">Fehler beim Speichern</span>
        </>
      )}
    </div>
  )
}

function CompletionBadge({ pct }: { pct: number }) {
  const color = pct >= 80 ? 'text-green-600 bg-green-50 border-green-200' :
    pct >= 40 ? 'text-yellow-600 bg-yellow-50 border-yellow-200' :
      'text-gray-500 bg-gray-50 border-gray-200'
  return (
    <span className={`px-2.5 py-1 rounded-full text-xs font-medium border ${color}`}>
      {pct}% ausgefuellt
    </span>
  )
}

/** Calculate how many required-ish fields are filled */
function calculateCompletion(data: LimitsFormData): number {
  const checks = [
    !!data.machine_designation,
    !!data.machine_type,
    !!data.manufacturer,
    !!data.general_description,
    !!data.intended_purpose,
    !!data.area_of_use,
    data.operating_modes.length > 0,
    !!data.foreseeable_misuses,
    !!data.spatial_limits,
    !!data.operating_conditions,
    !!data.energy_supply,
    data.person_groups.length > 0,
    !!data.qualification_requirements,
  ]
  const filled = checks.filter(Boolean).length
  return Math.round((filled / checks.length) * 100)
}
