'use client'

import type { Risk } from './types'
import { RISK_COLORS, RISK_BG_COLORS, calculateRiskLevel } from './types'

interface RiskMatrixProps {
  risks: Risk[]
  onEditRisk: (risk: Risk) => void
}

export default function RiskMatrix({ risks, onEditRisk }: RiskMatrixProps) {
  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] = []
    }
  }
  risks.forEach((risk) => {
    if (matrix[risk.likelihood] && matrix[risk.likelihood][risk.impact]) {
      matrix[risk.likelihood][risk.impact].push(risk)
    }
  })

  return (
    <div className="bg-white rounded-xl shadow-sm border p-6">
      <h3 className="text-lg font-semibold text-slate-900 mb-4">Risk Matrix (Likelihood x Impact)</h3>

      <div className="overflow-x-auto">
        <div className="inline-block">
          {/* Column headers (Impact) */}
          <div className="flex ml-16">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="w-24 text-center text-sm font-medium text-slate-500 pb-2">
                Impact {i}
              </div>
            ))}
          </div>

          {/* Matrix rows */}
          {[5, 4, 3, 2, 1].map((likelihood) => (
            <div key={likelihood} className="flex items-center">
              <div className="w-16 text-sm 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]

                return (
                  <div
                    key={impact}
                    className={`w-24 h-20 border m-0.5 rounded flex flex-col items-center justify-center ${RISK_BG_COLORS[level]}`}
                  >
                    {cellRisks.length > 0 && (
                      <div className="flex flex-wrap gap-1 justify-center">
                        {cellRisks.map((r) => (
                          <button
                            key={r.id}
                            onClick={() => onEditRisk(r)}
                            className={`px-2 py-0.5 text-xs font-medium rounded text-white ${RISK_COLORS[r.inherent_risk] || 'bg-slate-500'} hover:opacity-80`}
                            title={r.title}
                          >
                            {r.risk_id}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          ))}
        </div>
      </div>

      {/* Legend */}
      <div className="flex gap-4 mt-6 pt-4 border-t">
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 bg-green-500 rounded" />
          <span className="text-sm 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-sm 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-sm 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-sm text-slate-600">Critical (20-25)</span>
        </div>
      </div>
    </div>
  )
}