'use client'

import React, { useState, useEffect, useCallback } from 'react'
import { ProductWizard } from './_components/ProductWizard'
import { GapDashboard } from './_components/GapDashboard'

interface GapProject {
  id: string
  name: string
  description: string
  product_type: string
  created_at: string
}

interface GapReport {
  profile_id: string
  profile_name: string
  regulations: Array<{
    id: string
    name: string
    applicable: boolean
    confidence: number
    reasoning: string
    risk_level: string
    deadline?: string
    requirements?: string[]
  }>
  summary: {
    total_applicable_regulations: number
    total_gaps: number
    gaps_by_status: Record<string, number>
    gaps_by_severity: Record<string, number>
    gaps_by_regulation: Record<string, number>
    overall_compliance_percent: number
    estimated_effort_weeks: number
  }
  gaps: Array<{
    mc_id: string
    mc_name: string
    regulation: string
    status: string
    title: string
    severity: string
    priority: { score: number; rank: number }
    recommendation: string
    control_count: number
  }>
}

type View = 'projects' | 'wizard' | 'dashboard'

const PRODUCT_TYPE_LABELS: Record<string, string> = {
  iot: 'IoT', software: 'Software', saas: 'SaaS', hardware: 'Hardware',
  machinery: 'Maschine', medical_device: 'Medizin', exchange: 'Fintech', other: 'Sonstiges',
}

export default function GapAnalysisPage() {
  const [view, setView] = useState<View>('projects')
  const [projects, setProjects] = useState<GapProject[]>([])
  const [report, setReport] = useState<GapReport | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const loadProjects = useCallback(async () => {
    try {
      const res = await fetch('/api/sdk/v1/gap/projects', {
        headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000001' },
      })
      if (res.ok) {
        const data = await res.json()
        setProjects(data.projects || [])
      }
    } catch { /* ignore */ }
  }, [])

  useEffect(() => { loadProjects() }, [loadProjects])

  const handleCreateAndAnalyze = async (profile: Record<string, unknown>) => {
    setLoading(true)
    setError('')
    try {
      // Save project
      const createRes = await fetch('/api/sdk/v1/gap/projects', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Tenant-ID': '00000000-0000-0000-0000-000000000001',
        },
        body: JSON.stringify(profile),
      })
      if (!createRes.ok) throw new Error('Projekt konnte nicht gespeichert werden')
      const created = await createRes.json()
      const projectId = created.project?.id

      // Run analysis
      const analyzeRes = await fetch(`/api/sdk/v1/gap/projects/${projectId}/analyze`, {
        method: 'POST',
        headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000001' },
      })
      if (!analyzeRes.ok) throw new Error(await analyzeRes.text())
      const data = await analyzeRes.json()
      setReport(data)
      setView('dashboard')
      loadProjects()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Analyse fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }

  const handleOpenProject = async (projectId: string) => {
    setLoading(true)
    setError('')
    try {
      const res = await fetch(`/api/sdk/v1/gap/projects/${projectId}/analyze`, {
        method: 'POST',
        headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000001' },
      })
      if (!res.ok) throw new Error(await res.text())
      const data = await res.json()
      setReport(data)
      setView('dashboard')
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Analyse fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-6xl mx-auto px-4">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">
              Regulatory Gap-Analyse
            </h1>
            <p className="text-gray-600 mt-2">
              Produkt beschreiben, Regulierungen erkennen, Prioritaeten setzen.
            </p>
          </div>
          {view !== 'projects' && (
            <button
              onClick={() => { setView('projects'); setReport(null) }}
              className="px-4 py-2 text-sm text-blue-600 hover:text-blue-800 border border-blue-200 rounded-lg hover:bg-blue-50"
            >
              Alle Projekte
            </button>
          )}
        </div>

        {error && (
          <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
            <p className="text-red-700">{error}</p>
            <button onClick={() => setError('')} className="text-sm text-red-500 mt-1 underline">
              Schliessen
            </button>
          </div>
        )}

        {view === 'projects' && (
          <div>
            {/* New project button */}
            <button
              onClick={() => setView('wizard')}
              className="mb-6 w-full py-4 border-2 border-dashed border-blue-300 rounded-xl text-blue-600 hover:bg-blue-50 hover:border-blue-400 transition-colors font-medium"
            >
              + Neues Produkt analysieren
            </button>

            {/* Project list */}
            {projects.length > 0 && (
              <div className="space-y-3">
                <h2 className="text-lg font-semibold text-gray-800">Gespeicherte Projekte</h2>
                {projects.map(p => (
                  <button
                    key={p.id}
                    onClick={() => handleOpenProject(p.id)}
                    disabled={loading}
                    className="w-full text-left bg-white rounded-xl shadow-sm border border-gray-200 p-5 hover:shadow-md hover:border-blue-300 transition-all disabled:opacity-50"
                  >
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold text-gray-900">{p.name}</h3>
                        <p className="text-sm text-gray-500 mt-1">{p.description}</p>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
                          {PRODUCT_TYPE_LABELS[p.product_type] || p.product_type}
                        </span>
                        <span className="text-xs text-gray-400">
                          {new Date(p.created_at).toLocaleDateString('de-DE')}
                        </span>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            )}

            {projects.length === 0 && (
              <p className="text-center text-gray-500 mt-8">
                Noch keine Projekte. Starten Sie Ihre erste Gap-Analyse.
              </p>
            )}
          </div>
        )}

        {view === 'wizard' && (
          <ProductWizard onAnalyze={handleCreateAndAnalyze} loading={loading} />
        )}

        {view === 'dashboard' && report && (
          <GapDashboard report={report} onBack={() => { setView('projects'); setReport(null) }} />
        )}
      </div>
    </div>
  )
}