import React from 'react';
import { IRiskAssessment } from '../../types';

interface RiskRegisterProps {
    risks: IRiskAssessment[];
    onRefresh?: () => void;
}

const RiskRegister: React.FC<RiskRegisterProps> = ({ risks, onRefresh }) => {
    return (
        <div>
            <div className="p-4 border-b border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
                <h3 className="font-bold text-slate-700 dark:text-slate-200">Sổ tay rủi ro (Risk Register)</h3>
            </div>

            {/* Visual Risk Matrix - Responsive */}
            <div className="p-6 border-b border-slate-100 dark:border-slate-700">
                <h4 className="text-sm font-bold text-slate-600 dark:text-slate-400 mb-4 uppercase">Ma trận rủi ro</h4>
                <div className="flex flex-col md:flex-row gap-4">
                    <div className="w-full md:w-1/2">
                        <div className="grid grid-cols-3 gap-1 text-center text-xs font-bold text-white">
                            <div className="bg-yellow-400 p-4 rounded-tl-lg">Medium</div>
                            <div className="bg-orange-500 p-4">High</div>
                            <div className="bg-red-600 p-4 rounded-tr-lg">Extreme</div>

                            <div className="bg-green-400 p-4">Low</div>
                            <div className="bg-yellow-400 p-4">Medium</div>
                            <div className="bg-orange-500 p-4">High</div>

                            <div className="bg-green-400 p-4 rounded-bl-lg">Low</div>
                            <div className="bg-green-400 p-4">Low</div>
                            <div className="bg-yellow-400 p-4 rounded-br-lg">Medium</div>
                        </div>
                        <div className="flex justify-between text-xs text-slate-500 dark:text-slate-400 mt-2 px-1">
                            <span>Thấp</span>
                            <span className="font-bold uppercase">Khả năng xảy ra</span>
                            <span>Cao</span>
                        </div>
                    </div>
                    <div className="w-full md:w-1/2 flex items-center justify-center text-slate-400 dark:text-slate-500 text-sm italic border border-dashed border-slate-300 dark:border-slate-600 rounded-lg min-h-[150px]">
                        Biểu đồ phân bố rủi ro (Placeholder)
                    </div>
                </div>
            </div>

            <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
                    <thead className="bg-slate-50 dark:bg-slate-700/50">
                        <tr>
                            <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Danh mục</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase min-w-[250px]">Mô tả rủi ro</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Mức độ</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase min-w-[250px]">Chiến lược giảm thiểu</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
                        {risks.map(risk => (
                            <tr key={risk._id} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                                <td className="px-6 py-4 text-sm font-medium text-blue-600 dark:text-blue-400 whitespace-nowrap">{risk.riskCategory}</td>
                                <td className="px-6 py-4 text-sm text-slate-900 dark:text-white">{risk.description}</td>
                                <td className="px-6 py-4 whitespace-nowrap">
                                    <span className={`px-2 py-1 text-xs font-bold rounded ${risk.riskLevel === 'Extreme' || risk.riskLevel === 'High' ? 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300' :
                                        risk.riskLevel === 'Medium' ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300' : 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300'
                                        }`}>
                                        {risk.riskLevel}
                                    </span>
                                </td>
                                <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300">{risk.mitigationStrategy}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default RiskRegister;