breakpilot-compliance/breakpilot-compliance-sdk/packages/react/src/components/RiskMatrix.tsx

'use client'

import React from 'react'
import type { Risk, RiskLikelihood, RiskImpact } from '@breakpilot/compliance-sdk-types'

export interface RiskMatrixProps {
  risks: Risk[]
  onRiskClick?: (risk: Risk) => void
  className?: string
  style?: React.CSSProperties
}

export function RiskMatrix({ risks, onRiskClick, className, style }: RiskMatrixProps) {
  const getColor = (likelihood: number, impact: number): string => {
    const score = likelihood * impact
    if (score >= 20) return '#dc2626' // Critical - Red
    if (score >= 12) return '#f97316' // High - Orange
    if (score >= 6) return '#f59e0b' // Medium - Yellow
    return '#16a34a' // Low - Green
  }

  const getCellRisks = (likelihood: RiskLikelihood, impact: RiskImpact): Risk[] => {
    return risks.filter(r => r.likelihood === likelihood && r.impact === impact)
  }

  const containerStyle: React.CSSProperties = {
    fontFamily: 'system-ui, -apple-system, sans-serif',
    ...style,
  }

  const gridStyle: React.CSSProperties = {
    display: 'grid',
    gridTemplateColumns: '60px repeat(5, 1fr)',
    gridTemplateRows: '30px repeat(5, 60px)',
    gap: '2px',
    backgroundColor: '#e5e5e5',
    padding: '2px',
    borderRadius: '8px',
  }

  const cellStyle: React.CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
    position: 'relative',
  }

  const headerStyle: React.CSSProperties = {
    ...cellStyle,
    fontWeight: 600,
    fontSize: '12px',
    color: '#666',
  }

  const likelihoodLabels = ['Sehr niedrig', 'Niedrig', 'Mittel', 'Hoch', 'Sehr hoch']
  const impactLabels = ['1', '2', '3', '4', '5']

  return (
    <div style={containerStyle} className={className}>
      <div style={{ display: 'flex', marginBottom: '10px' }}>
        <div style={{ flex: 1 }}>
          <span style={{ fontWeight: 600 }}>Risikomatrix</span>
          <span style={{ marginLeft: '15px', color: '#666', fontSize: '14px' }}>
            {risks.length} Risiken
          </span>
        </div>
        <div style={{ display: 'flex', gap: '10px', fontSize: '12px' }}>
          <span>
            <span
              style={{
                display: 'inline-block',
                width: '12px',
                height: '12px',
                backgroundColor: '#16a34a',
                borderRadius: '2px',
                marginRight: '4px',
              }}
            />
            Niedrig
          </span>
          <span>
            <span
              style={{
                display: 'inline-block',
                width: '12px',
                height: '12px',
                backgroundColor: '#f59e0b',
                borderRadius: '2px',
                marginRight: '4px',
              }}
            />
            Mittel
          </span>
          <span>
            <span
              style={{
                display: 'inline-block',
                width: '12px',
                height: '12px',
                backgroundColor: '#f97316',
                borderRadius: '2px',
                marginRight: '4px',
              }}
            />
            Hoch
          </span>
          <span>
            <span
              style={{
                display: 'inline-block',
                width: '12px',
                height: '12px',
                backgroundColor: '#dc2626',
                borderRadius: '2px',
                marginRight: '4px',
              }}
            />
            Kritisch
          </span>
        </div>
      </div>

      <div style={gridStyle}>
        {/* Header row */}
        <div style={headerStyle} />
        {impactLabels.map((label, i) => (
          <div key={`impact-${i}`} style={headerStyle}>
            Auswirkung {label}
          </div>
        ))}

        {/* Data rows (reversed so high likelihood is at top) */}
        {[5, 4, 3, 2, 1].map(likelihood => (
          <React.Fragment key={`row-${likelihood}`}>
            <div style={headerStyle}>{likelihoodLabels[likelihood - 1]}</div>
            {[1, 2, 3, 4, 5].map(impact => {
              const cellRisks = getCellRisks(likelihood as RiskLikelihood, impact as RiskImpact)
              return (
                <div
                  key={`cell-${likelihood}-${impact}`}
                  style={{
                    ...cellStyle,
                    backgroundColor: getColor(likelihood, impact),
                    opacity: cellRisks.length > 0 ? 1 : 0.3,
                    cursor: cellRisks.length > 0 ? 'pointer' : 'default',
                  }}
                  onClick={() => {
                    if (cellRisks.length > 0 && onRiskClick) {
                      onRiskClick(cellRisks[0])
                    }
                  }}
                >
                  {cellRisks.length > 0 && (
                    <div
                      style={{
                        width: '24px',
                        height: '24px',
                        borderRadius: '50%',
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontWeight: 600,
                        fontSize: '12px',
                        color: '#1a1a1a',
                      }}
                    >
                      {cellRisks.length}
                    </div>
                  )}
                </div>
              )
            })}
          </React.Fragment>
        ))}
      </div>

      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginTop: '10px',
          fontSize: '12px',
          color: '#666',
        }}
      >
        <span>Wahrscheinlichkeit →</span>
        <span>Auswirkung →</span>
      </div>
    </div>
  )
}