'use client'

import React, { useState, useEffect } from 'react'
import { useSDK } from '@/lib/sdk'
import { StepHeader } from '@/components/sdk/StepHeader'
import {
  ExecutiveReport,
  RiskLevel,
  DeadlineSeverity,
  RISK_LEVEL_INFO,
  DEADLINE_SEVERITY_INFO,
  getScoreColor,
  getScoreBgColor,
} from '@/lib/sdk/reporting/types'
import { getExecutiveReport } from '@/lib/sdk/reporting/api'

// =============================================================================
// TYPES
// =============================================================================

type TabId = 'overview' | 'risks' | 'deadlines' | 'modules' | 'activity'

interface Tab {
  id: TabId
  label: string
}

// =============================================================================
// HELPER COMPONENTS
// =============================================================================

function TabNavigation({
  tabs,
  activeTab,
  onTabChange,
}: {
  tabs: Tab[]
  activeTab: TabId
  onTabChange: (tab: TabId) => void
}) {
  return (
    <div className="border-b border-gray-200">
      <nav className="flex gap-1 -mb-px" aria-label="Tabs">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
              activeTab === tab.id
                ? 'border-purple-600 text-purple-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </nav>
    </div>
  )
}

function ScoreCircle({ score }: { score: number }) {
  const circumference = 2 * Math.PI * 60
  const strokeDashoffset = circumference - (score / 100) * circumference

  return (
    <div className="relative w-36 h-36">
      <svg className="w-full h-full -rotate-90" viewBox="0 0 128 128">
        <circle
          cx="64" cy="64" r="60"
          stroke="#e5e7eb" strokeWidth="8" fill="none"
        />
        <circle
          cx="64" cy="64" r="60"
          stroke={score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : score >= 40 ? '#f97316' : '#ef4444'}
          strokeWidth="8" fill="none"
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={strokeDashoffset}
          className="transition-all duration-1000"
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className={`text-3xl font-bold ${getScoreColor(score)}`}>{score}%</span>
        <span className="text-xs text-gray-500">Compliance</span>
      </div>
    </div>
  )
}

function StatCard({
  label,
  value,
  color = 'gray',
  subtitle,
}: {
  label: string
  value: number | string
  color?: 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'purple' | 'orange'
  subtitle?: string
}) {
  const colorClasses: Record<string, string> = {
    gray: 'border-gray-200 text-gray-900',
    blue: 'border-blue-200 text-blue-600',
    yellow: 'border-yellow-200 text-yellow-600',
    red: 'border-red-200 text-red-600',
    green: 'border-green-200 text-green-600',
    purple: 'border-purple-200 text-purple-600',
    orange: 'border-orange-200 text-orange-600',
  }

  return (
    <div className={`bg-white rounded-xl border-2 ${colorClasses[color]} p-4`}>
      <div className="text-sm text-gray-500 mb-1">{label}</div>
      <div className={`text-2xl font-bold ${colorClasses[color]?.split(' ')[1] || ''}`}>{value}</div>
      {subtitle && <div className="text-xs text-gray-400 mt-1">{subtitle}</div>}
    </div>
  )
}

function RiskBadge({ level }: { level: RiskLevel }) {
  const info = RISK_LEVEL_INFO[level]
  return (
    <span className={`px-2 py-1 rounded-full text-xs font-medium ${info.bgColor} ${info.color}`}>
      {info.label}
    </span>
  )
}

function DeadlineBadge({ severity }: { severity: DeadlineSeverity }) {
  const info = DEADLINE_SEVERITY_INFO[severity]
  return (
    <span className={`px-2 py-1 rounded-full text-xs font-medium ${info.bgColor} ${info.color}`}>
      {info.label}
    </span>
  )
}

// =============================================================================
// TAB CONTENTS
// =============================================================================

function OverviewTab({ report }: { report: ExecutiveReport }) {
  return (
    <div className="space-y-6">
      {/* Score + Key Metrics */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div className="lg:col-span-1 bg-white rounded-xl border border-gray-200 p-6 flex flex-col items-center justify-center">
          <ScoreCircle score={report.complianceScore} />
          <div className="mt-3 flex items-center gap-2">
            <span className="text-sm text-gray-500">Risikolevel:</span>
            <RiskBadge level={report.riskOverview.overallLevel} />
          </div>
        </div>

        <div className="lg:col-span-3 grid grid-cols-2 md:grid-cols-3 gap-4">
          <StatCard label="Verarbeitungstaetigkeiten" value={report.dsgvo.processingActivities} color="blue" subtitle={`${report.dsgvo.activeProcessings} aktiv`} />
          <StatCard label="TOMs umgesetzt" value={`${report.dsgvo.tomsImplemented}/${report.dsgvo.tomsTotal}`} color={report.dsgvo.completionPercent >= 80 ? 'green' : 'yellow'} subtitle={`${report.dsgvo.completionPercent}% vollstaendig`} />
          <StatCard label="Offene Betroffenenanfragen" value={report.dsgvo.openDSRs} color={report.dsgvo.overdueDSRs > 0 ? 'red' : 'green'} subtitle={report.dsgvo.overdueDSRs > 0 ? `${report.dsgvo.overdueDSRs} ueberfaellig` : 'Keine ueberfaelligen'} />
          <StatCard label="Offene Vorfaelle" value={report.incidents.openIncidents} color={report.incidents.criticalIncidents > 0 ? 'red' : 'green'} subtitle={report.incidents.criticalIncidents > 0 ? `${report.incidents.criticalIncidents} kritisch` : 'Keine kritischen'} />
          <StatCard label="Schulungsquote" value={`${Math.round(report.academy.completionRate)}%`} color={report.academy.completionRate >= 80 ? 'green' : 'yellow'} subtitle={`${report.academy.overdueCount} ueberfaellig`} />
          <StatCard label="Lieferanten" value={report.vendors.totalVendors} color="purple" subtitle={`${report.vendors.pendingReviews} ausstehende Pruefungen`} />
        </div>
      </div>

      {/* Deadlines Summary */}
      {report.upcomingDeadlines.length > 0 && (
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">Naechste Fristen</h3>
          <div className="space-y-3">
            {report.upcomingDeadlines.slice(0, 5).map((dl, i) => (
              <div key={i} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                <div className="flex items-center gap-3">
                  <DeadlineBadge severity={dl.severity} />
                  <div>
                    <div className="text-sm font-medium text-gray-900">{dl.description}</div>
                    <div className="text-xs text-gray-500">{dl.module} &middot; {dl.type}</div>
                  </div>
                </div>
                <div className={`text-sm font-medium ${dl.daysLeft <= 0 ? 'text-red-600' : dl.daysLeft <= 7 ? 'text-orange-600' : 'text-gray-600'}`}>
                  {dl.daysLeft <= 0 ? `${Math.abs(dl.daysLeft)} Tage ueberfaellig` : `${dl.daysLeft} Tage`}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

function RisksTab({ report }: { report: ExecutiveReport }) {
  return (
    <div className="space-y-6">
      {/* Overall Risk */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-gray-900">Gesamt-Risikobewertung</h3>
          <RiskBadge level={report.riskOverview.overallLevel} />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <StatCard label="Offene Findings" value={report.riskOverview.openFindings} color={report.riskOverview.openFindings > 5 ? 'orange' : 'gray'} />
          <StatCard label="Kritische Findings" value={report.riskOverview.criticalFindings} color={report.riskOverview.criticalFindings > 0 ? 'red' : 'green'} />
        </div>
      </div>

      {/* Per-Module Risks */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Risiken nach Modul</h3>
        <div className="space-y-3">
          {report.riskOverview.moduleRisks.map((mr, i) => (
            <div key={i} className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
              <div className="flex items-center gap-3">
                <span className="text-sm font-medium text-gray-900 w-32">{mr.module}</span>
                <RiskBadge level={mr.level} />
              </div>
              <div className="flex items-center gap-4">
                <div className="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div
                    className={`h-full rounded-full ${getScoreBgColor(mr.score)}`}
                    style={{ width: `${mr.score}%` }}
                  />
                </div>
                <span className="text-sm text-gray-500 w-12 text-right">{mr.score}%</span>
                <span className="text-xs text-gray-400">{mr.issues} Issues</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

function DeadlinesTab({ report }: { report: ExecutiveReport }) {
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Alle Fristen ({report.upcomingDeadlines.length})</h3>
      {report.upcomingDeadlines.length === 0 ? (
        <p className="text-gray-500 text-sm">Keine bevorstehenden Fristen.</p>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-200">
                <th className="text-left py-2 font-medium text-gray-500">Status</th>
                <th className="text-left py-2 font-medium text-gray-500">Modul</th>
                <th className="text-left py-2 font-medium text-gray-500">Typ</th>
                <th className="text-left py-2 font-medium text-gray-500">Beschreibung</th>
                <th className="text-left py-2 font-medium text-gray-500">Faellig am</th>
                <th className="text-right py-2 font-medium text-gray-500">Verbleibend</th>
              </tr>
            </thead>
            <tbody>
              {report.upcomingDeadlines.map((dl, i) => (
                <tr key={i} className="border-b border-gray-50 hover:bg-gray-50">
                  <td className="py-2"><DeadlineBadge severity={dl.severity} /></td>
                  <td className="py-2 text-gray-700">{dl.module}</td>
                  <td className="py-2 text-gray-500">{dl.type}</td>
                  <td className="py-2 text-gray-900">{dl.description}</td>
                  <td className="py-2 text-gray-500">{new Date(dl.dueDate).toLocaleDateString('de-DE')}</td>
                  <td className={`py-2 text-right font-medium ${dl.daysLeft <= 0 ? 'text-red-600' : dl.daysLeft <= 7 ? 'text-orange-600' : 'text-gray-600'}`}>
                    {dl.daysLeft <= 0 ? `${Math.abs(dl.daysLeft)}d ueberfaellig` : `${dl.daysLeft}d`}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}

function ModulesTab({ report }: { report: ExecutiveReport }) {
  return (
    <div className="space-y-6">
      {/* DSGVO Module */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">DSGVO-Compliance</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <StatCard label="Verarbeitungen" value={report.dsgvo.processingActivities} color="blue" />
          <StatCard label="TOM-Umsetzung" value={`${report.dsgvo.completionPercent}%`} color={report.dsgvo.completionPercent >= 80 ? 'green' : 'yellow'} />
          <StatCard label="DSFAs abgeschlossen" value={report.dsgvo.dsfasCompleted} color="purple" />
          <StatCard label="Loeschfristen definiert" value={report.dsgvo.retentionPolicies} color="gray" />
        </div>
      </div>

      {/* Vendors */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Lieferanten-Compliance</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <StatCard label="Lieferanten gesamt" value={report.vendors.totalVendors} color="purple" />
          <StatCard label="Aktive Lieferanten" value={report.vendors.activeVendors} color="blue" />
          <StatCard label="Ausstehende Pruefungen" value={report.vendors.pendingReviews} color={report.vendors.pendingReviews > 0 ? 'yellow' : 'green'} />
          <StatCard label="Abgelaufene Vertraege" value={report.vendors.expiredContracts} color={report.vendors.expiredContracts > 0 ? 'red' : 'green'} />
        </div>
      </div>

      {/* Incidents */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Datenschutzvorfaelle</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <StatCard label="Vorfaelle gesamt" value={report.incidents.totalIncidents} color="gray" />
          <StatCard label="Offen" value={report.incidents.openIncidents} color={report.incidents.openIncidents > 0 ? 'orange' : 'green'} />
          <StatCard label="Kritisch" value={report.incidents.criticalIncidents} color={report.incidents.criticalIncidents > 0 ? 'red' : 'green'} />
          <StatCard label="Meldungen ausstehend" value={report.incidents.notificationsPending} color={report.incidents.notificationsPending > 0 ? 'red' : 'green'} />
        </div>
      </div>

      {/* Whistleblower */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Hinweisgebersystem</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <StatCard label="Meldungen gesamt" value={report.whistleblower.totalReports} color="gray" />
          <StatCard label="Offen" value={report.whistleblower.openReports} color={report.whistleblower.openReports > 0 ? 'yellow' : 'green'} />
          <StatCard label="Eingangsbestaetigung ueberfaellig" value={report.whistleblower.overdueAcknowledgments} color={report.whistleblower.overdueAcknowledgments > 0 ? 'red' : 'green'} />
          <StatCard label="Rueckmeldung ueberfaellig" value={report.whistleblower.overdueFeedbacks} color={report.whistleblower.overdueFeedbacks > 0 ? 'red' : 'green'} />
        </div>
      </div>

      {/* Academy */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Compliance Academy</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <StatCard label="Kurse" value={report.academy.totalCourses} color="purple" />
          <StatCard label="Einschreibungen" value={report.academy.totalEnrollments} color="blue" />
          <StatCard label="Abschlussrate" value={`${Math.round(report.academy.completionRate)}%`} color={report.academy.completionRate >= 80 ? 'green' : 'yellow'} />
          <StatCard label="Ueberfaellig" value={report.academy.overdueCount} color={report.academy.overdueCount > 0 ? 'red' : 'green'} />
        </div>
      </div>
    </div>
  )
}

function ActivityTab({ report }: { report: ExecutiveReport }) {
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Letzte Aktivitaeten</h3>
      {report.recentActivity.length === 0 ? (
        <p className="text-gray-500 text-sm">Keine Aktivitaeten vorhanden.</p>
      ) : (
        <div className="space-y-3">
          {report.recentActivity.map((entry, i) => (
            <div key={i} className="flex items-start gap-3 py-2 border-b border-gray-100 last:border-0">
              <div className="w-2 h-2 rounded-full bg-purple-400 mt-2 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <div className="text-sm text-gray-900">{entry.description}</div>
                <div className="text-xs text-gray-500 flex gap-2 mt-0.5">
                  <span>{entry.module}</span>
                  <span>&middot;</span>
                  <span>{entry.action}</span>
                  <span>&middot;</span>
                  <span>{new Date(entry.timestamp).toLocaleString('de-DE')}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

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

export default function ReportingPage() {
  const { state } = useSDK()
  const [activeTab, setActiveTab] = useState<TabId>('overview')
  const [report, setReport] = useState<ExecutiveReport | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false

    async function loadReport() {
      setLoading(true)
      setError(null)
      try {
        const data = await getExecutiveReport()
        if (!cancelled) setReport(data)
      } catch (err) {
        console.warn('Backend nicht erreichbar:', err)
        if (!cancelled) setError(err instanceof Error ? err.message : 'Verbindung zum Backend fehlgeschlagen')
      } finally {
        if (!cancelled) setLoading(false)
      }
    }

    loadReport()
    return () => { cancelled = true }
  }, [])

  const tabs: Tab[] = [
    { id: 'overview', label: 'Uebersicht' },
    { id: 'risks', label: 'Risiken' },
    { id: 'deadlines', label: 'Fristen' },
    { id: 'modules', label: 'Module' },
    { id: 'activity', label: 'Aktivitaeten' },
  ]

  return (
    <div className="space-y-6">
      <StepHeader stepId="reporting" />

      <TabNavigation tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} />

      {loading ? (
        <div className="flex items-center justify-center py-20">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
          <span className="ml-3 text-gray-500">Bericht wird generiert...</span>
        </div>
      ) : report ? (
        <>
          {/* Generated timestamp */}
          <div className="text-xs text-gray-400 text-right">
            Generiert: {new Date(report.generatedAt).toLocaleString('de-DE')}
          </div>

          {activeTab === 'overview' && <OverviewTab report={report} />}
          {activeTab === 'risks' && <RisksTab report={report} />}
          {activeTab === 'deadlines' && <DeadlinesTab report={report} />}
          {activeTab === 'modules' && <ModulesTab report={report} />}
          {activeTab === 'activity' && <ActivityTab report={report} />}
        </>
      ) : (
        <div className="text-center py-20 text-gray-500">
          <p>Bericht konnte nicht geladen werden.</p>
          {error && <p className="text-sm text-red-500 mt-2">{error}</p>}
        </div>
      )}
    </div>
  )
}