'use client';

import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
} from 'recharts';
import { cn } from '@/lib/utils';
import type { RiskProfile, CreditDetailInfo } from './types';

interface RiskRadarChartProps {
  data: RiskProfile;
  creditDetailInfo?: CreditDetailInfo;
}

const RISK_LABELS: Record<keyof RiskProfile, string> = {
  corporateRisk: '기업 리스크',
  publicRecord: '공공기록',
  stability: '안정성',
  growth: '성장성',
  overdueHistory: '연체이력',
};

const DETAIL_LABELS: Record<keyof CreditDetailInfo, string> = {
  koreaCreditRating: '한국신용평가등급',
  financialRisk: '금융 종합 위험도',
  purchasePayment: '매입 결제',
  salesPayment: '매출 결제',
  mortgageSetting: '저당권설정',
};

export function RiskRadarChart({ data, creditDetailInfo }: RiskRadarChartProps) {
  const chartData = Object.entries(data).map(([key, value]) => ({
    subject: RISK_LABELS[key as keyof RiskProfile],
    value,
    fullMark: 100,
  }));

  return (
    <div className="flex flex-col items-center">
      <h3 className="text-lg font-semibold text-gray-800 mb-4">신용 리스크 프로필</h3>

      <div className="w-full max-w-[300px] h-[220px]">
        <ResponsiveContainer width="100%" height="100%">
          <RadarChart cx="50%" cy="50%" outerRadius="70%" data={chartData}>
            <PolarGrid stroke="#e5e7eb" />
            <PolarAngleAxis
              dataKey="subject"
              tick={{ fill: '#6b7280', fontSize: 11 }}
            />
            <PolarRadiusAxis
              angle={90}
              domain={[0, 100]}
              tick={false}
              axisLine={false}
            />
            <Radar
              name="신용 점수"
              dataKey="value"
              stroke="#3b82f6"
              fill="#93c5fd"
              fillOpacity={0.5}
              strokeWidth={2}
            />
          </RadarChart>
        </ResponsiveContainer>
      </div>

      {/* 레이더 차트 하단 상세 정보 */}
      {creditDetailInfo && (
        <div className="w-full mt-4 grid grid-cols-2 gap-x-6 gap-y-2">
          {Object.entries(creditDetailInfo).map(([key, value]) => (
            <div key={key} className="flex items-center justify-between text-sm">
              <span className="text-gray-600">{DETAIL_LABELS[key as keyof CreditDetailInfo]}</span>
              <span className={cn(
                'font-medium',
                value === '우량' ? 'text-blue-600' :
                value === '양호' ? 'text-green-600' :
                value === '보통' ? 'text-yellow-600' :
                value === '주의' ? 'text-orange-600' :
                'text-red-600'
              )}>
                {value}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
