'use client'

/**
 * RiskHeatmap Component
 *
 * Enhanced risk matrix visualization with:
 * - 5x5 likelihood x impact matrix
 * - Drill-down on matrix cells
 * - Category filtering
 * - Inherent vs Residual comparison view
 * - Linked controls display
 *
 * Sprint 5: PDF Reports & Erweiterte Visualisierungen
 */

import { useState, useMemo } from 'react'
import { Language } from '@/lib/compliance-i18n'
import {
  Risk,
  Control,
  RiskHeatmapProps,
  RISK_LEVEL_COLORS,
  RISK_BADGE_COLORS,
  CATEGORY_OPTIONS,
  STATUS_OPTIONS,
  calculateRiskLevel,
} from './risk-heatmap-types'

// Re-export types and utilities for backward compatibility
export type { Risk, Control } from './risk-heatmap-types'
export { calculateRiskLevel } from './risk-heatmap-types'
export { MiniRiskMatrix } from './MiniRiskMatrix'
export { RiskDistribution } from './RiskDistribution'

export default function RiskHeatmap({
  risks,
  controls = [],
  lang = 'de',
  onRiskClick,
  onCellClick,
  showComparison = false,
  height = 400,
}: RiskHeatmapProps) {
  const [viewMode, setViewMode] = useState<'inherent' | 'residual' | 'comparison'>('inherent')
  const [filterCategory, setFilterCategory] = useState<string>('')
  const [filterStatus, setFilterStatus] = useState<string>('')
  const [selectedCell, setSelectedCell] = useState<{ l: number; i: number } | null>(null)
  const [selectedRisk, setSelectedRisk] = useState<Risk | null>(null)

  const categories = useMemo(() => {
    const cats = new Set(risks.map((r) => r.category))
    return Array.from(cats).sort()
  }, [risks])

  const filteredRisks = useMemo(() => {
    return risks.filter((r) => {
      if (filterCategory && r.category !== filterCategory) return false
      if (filterStatus && r.status !== filterStatus) return false
      return true
    })
  }, [risks, filterCategory, filterStatus])

  const buildMatrix = (useResidual: boolean) => {
    const matrix: Record<number, Record<number, Risk[]>> = {}
    for (let l = 1; l <= 5; l++) { matrix[l] = {}; for (let i = 1; i <= 5; i++) { matrix[l][i] = [] } }
    filteredRisks.forEach((risk) => {
      const likelihood = useResidual ? (risk.residual_likelihood ?? risk.likelihood) : risk.likelihood
      const impact = useResidual ? (risk.residual_impact ?? risk.impact) : risk.impact
      if (matrix[likelihood] && matrix[likelihood][impact]) matrix[likelihood][impact].push(risk)
    })
    return matrix
  }

  const inherentMatrix = useMemo(() => buildMatrix(false), [filteredRisks])
  const residualMatrix = useMemo(() => buildMatrix(true), [filteredRisks])

  const getControlsForRisk = (risk: Risk): Control[] => {
    if (!risk.mitigating_controls || risk.mitigating_controls.length === 0) return []
    return controls.filter((c) => risk.mitigating_controls?.includes(c.control_id))
  }

  const stats = useMemo(() => {
    const total = filteredRisks.length
    const byLevel: Record<string, number> = { low: 0, medium: 0, high: 0, critical: 0 }
    const byStatus: Record<string, number> = {}
    filteredRisks.forEach((r) => { byLevel[r.inherent_risk] = (byLevel[r.inherent_risk] || 0) + 1; byStatus[r.status] = (byStatus[r.status] || 0) + 1 })
    const residualByLevel: Record<string, number> = { low: 0, medium: 0, high: 0, critical: 0 }
    filteredRisks.forEach((r) => { const level = r.residual_risk || r.inherent_risk; residualByLevel[level] = (residualByLevel[level] || 0) + 1 })
    return { total, byLevel, byStatus, residualByLevel }
  }, [filteredRisks])

  const handleCellClick = (likelihood: number, impact: number, matrix: Record<number, Record<number, Risk[]>>) => {
    const cellRisks = matrix[likelihood][impact]
    if (selectedCell?.l === likelihood && selectedCell?.i === impact) { setSelectedCell(null) }
    else { setSelectedCell({ l: likelihood, i: impact }) }
    onCellClick?.(likelihood, impact, cellRisks)
  }

  const handleRiskClick = (risk: Risk) => {
    if (selectedRisk?.id === risk.id) { setSelectedRisk(null) } else { setSelectedRisk(risk) }
    onRiskClick?.(risk)
  }

  const renderMatrix = (matrix: Record<number, Record<number, Risk[]>>, title: string) => (
    <div className="flex-1">
      <h4 className="text-sm font-medium text-slate-700 mb-3 text-center">{title}</h4>
      <div className="inline-block">
        <div className="flex ml-12">
          {[1, 2, 3, 4, 5].map((i) => (<div key={i} className="w-16 text-center text-xs font-medium text-slate-500 pb-1">I{i}</div>))}
        </div>
        {[5, 4, 3, 2, 1].map((likelihood) => (
          <div key={likelihood} className="flex items-center">
            <div className="w-12 text-xs font-medium text-slate-500 text-right pr-2">L{likelihood}</div>
            {[1, 2, 3, 4, 5].map((impact) => {
              const level = calculateRiskLevel(likelihood, impact)
              const cellRisks = matrix[likelihood][impact]
              const isSelected = selectedCell?.l === likelihood && selectedCell?.i === impact
              const colors = RISK_LEVEL_COLORS[level]
              return (
                <div key={impact} onClick={() => handleCellClick(likelihood, impact, matrix)}
                  className={`w-16 h-14 border m-0.5 rounded flex flex-col items-center justify-center cursor-pointer transition-all ${colors.bg} ${colors.border} ${isSelected ? 'ring-2 ring-primary-500 ring-offset-1' : 'hover:ring-1 hover:ring-slate-300'}`}>
                  {cellRisks.length > 0 ? (
                    <div className="flex flex-wrap gap-0.5 justify-center max-h-12 overflow-hidden">
                      {cellRisks.slice(0, 4).map((r) => (
                        <button key={r.id} onClick={(e) => { e.stopPropagation(); handleRiskClick(r) }}
                          className={`px-1.5 py-0.5 text-[10px] font-medium rounded text-white ${RISK_BADGE_COLORS[r.inherent_risk] || 'bg-slate-500'} hover:opacity-80 transition-opacity ${selectedRisk?.id === r.id ? 'ring-2 ring-white' : ''}`}
                          title={r.title}>{r.risk_id.replace('RISK-', 'R')}</button>
                      ))}
                      {cellRisks.length > 4 && <span className="text-[10px] text-slate-600">+{cellRisks.length - 4}</span>}
                    </div>
                  ) : <span className="text-[10px] text-slate-400">-</span>}
                </div>
              )
            })}
          </div>
        ))}
      </div>
    </div>
  )

  const renderRiskDetails = () => {
    const risksToShow = selectedRisk ? [selectedRisk]
      : selectedCell ? (viewMode === 'residual' ? residualMatrix : inherentMatrix)[selectedCell.l][selectedCell.i] : []
    if (risksToShow.length === 0) return (<div className="text-center text-slate-400 py-8">{lang === 'de' ? 'Klicken Sie auf eine Zelle oder ein Risiko fuer Details' : 'Click a cell or risk for details'}</div>)
    return (
      <div className="space-y-3 max-h-[300px] overflow-y-auto">
        {risksToShow.map((risk) => {
          const riskControls = getControlsForRisk(risk)
          return (
            <div key={risk.id} className={`p-3 rounded-lg border transition-colors ${selectedRisk?.id === risk.id ? 'border-primary-500 bg-primary-50' : 'border-slate-200'}`}>
              <div className="flex items-start justify-between gap-2 mb-2">
                <div><span className="font-mono text-sm font-medium text-primary-600">{risk.risk_id}</span><h4 className="font-medium text-slate-900">{risk.title}</h4></div>
                <div className="flex gap-1.5">
                  <span className={`px-2 py-0.5 text-xs font-medium rounded text-white ${RISK_BADGE_COLORS[risk.inherent_risk]}`}>{risk.inherent_risk}</span>
                  <span className={`px-2 py-0.5 text-xs rounded ${STATUS_OPTIONS[risk.status]?.color || 'bg-slate-100'}`}>{STATUS_OPTIONS[risk.status]?.[lang] || risk.status}</span>
                </div>
              </div>
              {risk.description && <p className="text-sm text-slate-600 mb-2">{risk.description}</p>}
              <div className="grid grid-cols-2 gap-2 text-xs mb-2">
                <div><span className="text-slate-500">{lang === 'de' ? 'Kategorie' : 'Category'}:</span> <span className="font-medium">{CATEGORY_OPTIONS[risk.category]?.[lang] || risk.category}</span></div>
                <div><span className="text-slate-500">{lang === 'de' ? 'Verantwortlich' : 'Owner'}:</span> <span className="font-medium">{risk.owner || '-'}</span></div>
                <div><span className="text-slate-500">{lang === 'de' ? 'Inhaerent' : 'Inherent'}:</span> <span className="font-medium">{risk.likelihood} x {risk.impact} = {risk.likelihood * risk.impact}</span></div>
                {(risk.residual_likelihood && risk.residual_impact) && (<div><span className="text-slate-500">Residual:</span> <span className="font-medium">{risk.residual_likelihood} x {risk.residual_impact} = {risk.residual_likelihood * risk.residual_impact}</span></div>)}
              </div>
              {riskControls.length > 0 && (
                <div className="mt-2 pt-2 border-t"><p className="text-xs text-slate-500 mb-1">{lang === 'de' ? 'Mitigierende Massnahmen' : 'Mitigating Controls'} ({riskControls.length})</p>
                  <div className="flex flex-wrap gap-1">{riskControls.map((ctrl) => (<span key={ctrl.control_id} className="px-2 py-0.5 text-xs bg-slate-100 text-slate-700 rounded" title={ctrl.title}>{ctrl.control_id}</span>))}</div></div>
              )}
              {risk.treatment_plan && (<div className="mt-2 pt-2 border-t"><p className="text-xs text-slate-500 mb-1">{lang === 'de' ? 'Behandlungsplan' : 'Treatment Plan'}</p><p className="text-xs text-slate-600">{risk.treatment_plan}</p></div>)}
            </div>
          )
        })}
      </div>
    )
  }

  if (risks.length === 0) {
    return (<div className="bg-white rounded-xl shadow-sm border p-8 text-center">
      <svg className="w-16 h-16 text-slate-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
      <p className="text-slate-500">{lang === 'de' ? 'Keine Risiken vorhanden' : 'No risks available'}</p>
    </div>)
  }

  return (
    <div className="space-y-4">
      {/* Statistics Header */}
      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
        <div className="bg-white rounded-lg border p-3"><p className="text-xs text-slate-500">{lang === 'de' ? 'Gesamt' : 'Total'}</p><p className="text-xl font-bold text-slate-800">{stats.total}</p></div>
        <div className="bg-white rounded-lg border p-3"><p className="text-xs text-slate-500">Critical</p><p className="text-xl font-bold text-red-600">{stats.byLevel.critical}</p></div>
        <div className="bg-white rounded-lg border p-3"><p className="text-xs text-slate-500">High</p><p className="text-xl font-bold text-orange-600">{stats.byLevel.high}</p></div>
        <div className="bg-white rounded-lg border p-3"><p className="text-xs text-slate-500">Medium</p><p className="text-xl font-bold text-yellow-600">{stats.byLevel.medium}</p></div>
        <div className="bg-white rounded-lg border p-3"><p className="text-xs text-slate-500">Low</p><p className="text-xl font-bold text-green-600">{stats.byLevel.low}</p></div>
      </div>

      {/* Filters and Controls */}
      <div className="bg-white rounded-xl shadow-sm border p-4">
        <div className="flex flex-wrap items-center gap-4">
          <select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 text-sm">
            <option value="">{lang === 'de' ? 'Alle Kategorien' : 'All Categories'}</option>
            {categories.map((cat) => <option key={cat} value={cat}>{CATEGORY_OPTIONS[cat]?.[lang] || cat}</option>)}
          </select>
          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)} className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 text-sm">
            <option value="">{lang === 'de' ? 'Alle Status' : 'All Status'}</option>
            {Object.entries(STATUS_OPTIONS).map(([key, val]) => <option key={key} value={key}>{val[lang]}</option>)}
          </select>
          <div className="flex-1" />
          {showComparison && (
            <div className="flex bg-slate-100 rounded-lg p-1">
              <button onClick={() => setViewMode('inherent')} className={`px-3 py-1.5 text-sm rounded-md transition-colors ${viewMode === 'inherent' ? 'bg-white shadow text-slate-900' : 'text-slate-600'}`}>{lang === 'de' ? 'Inhaerent' : 'Inherent'}</button>
              <button onClick={() => setViewMode('residual')} className={`px-3 py-1.5 text-sm rounded-md transition-colors ${viewMode === 'residual' ? 'bg-white shadow text-slate-900' : 'text-slate-600'}`}>Residual</button>
              <button onClick={() => setViewMode('comparison')} className={`px-3 py-1.5 text-sm rounded-md transition-colors ${viewMode === 'comparison' ? 'bg-white shadow text-slate-900' : 'text-slate-600'}`}>{lang === 'de' ? 'Vergleich' : 'Compare'}</button>
            </div>
          )}
        </div>
      </div>

      {/* Main Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border p-4">
          {viewMode === 'comparison' ? (
            <div className="flex gap-6 overflow-x-auto">
              {renderMatrix(inherentMatrix, lang === 'de' ? 'Inhaerent' : 'Inherent')}
              <div className="w-px bg-slate-200 self-stretch" />
              {renderMatrix(residualMatrix, 'Residual')}
            </div>
          ) : viewMode === 'residual' ? (
            <div className="flex justify-center">{renderMatrix(residualMatrix, lang === 'de' ? 'Residuales Risiko' : 'Residual Risk')}</div>
          ) : (
            <div className="flex justify-center">{renderMatrix(inherentMatrix, lang === 'de' ? 'Inhaeentes Risiko' : 'Inherent Risk')}</div>
          )}
          <div className="flex gap-4 mt-4 pt-4 border-t justify-center flex-wrap">
            <div className="flex items-center gap-2"><div className="w-4 h-4 bg-green-500 rounded" /><span className="text-xs text-slate-600">Low (1-5)</span></div>
            <div className="flex items-center gap-2"><div className="w-4 h-4 bg-yellow-500 rounded" /><span className="text-xs text-slate-600">Medium (6-11)</span></div>
            <div className="flex items-center gap-2"><div className="w-4 h-4 bg-orange-500 rounded" /><span className="text-xs text-slate-600">High (12-19)</span></div>
            <div className="flex items-center gap-2"><div className="w-4 h-4 bg-red-500 rounded" /><span className="text-xs text-slate-600">Critical (20-25)</span></div>
          </div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border p-4">
          <h3 className="text-sm font-medium text-slate-700 mb-3">{lang === 'de' ? 'Risiko-Details' : 'Risk Details'}</h3>
          {renderRiskDetails()}
        </div>
      </div>

      {/* Risk Movement Summary */}
      {viewMode === 'comparison' && (
        <div className="bg-white rounded-xl shadow-sm border p-4">
          <h3 className="text-sm font-medium text-slate-700 mb-3">{lang === 'de' ? 'Risikoveraenderung durch Massnahmen' : 'Risk Change from Controls'}</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="text-center"><p className="text-2xl font-bold text-green-600">{stats.byLevel.critical - stats.residualByLevel.critical}</p><p className="text-xs text-slate-500">{lang === 'de' ? 'Critical reduziert' : 'Critical reduced'}</p></div>
            <div className="text-center"><p className="text-2xl font-bold text-orange-600">{stats.byLevel.high - stats.residualByLevel.high}</p><p className="text-xs text-slate-500">{lang === 'de' ? 'High reduziert' : 'High reduced'}</p></div>
            <div className="text-center"><p className="text-2xl font-bold text-yellow-600">{stats.byLevel.medium - stats.residualByLevel.medium}</p><p className="text-xs text-slate-500">{lang === 'de' ? 'Medium reduziert' : 'Medium reduced'}</p></div>
            <div className="text-center"><p className="text-2xl font-bold text-slate-600">{filteredRisks.filter((r) => r.residual_likelihood && r.residual_impact).length}</p><p className="text-xs text-slate-500">{lang === 'de' ? 'Bewertet' : 'Assessed'}</p></div>
          </div>
        </div>
      )}
    </div>
  )
}