'use client';

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { DiagnosisRadarChart } from './ResultCharts';

interface LevelDisplayProps {
  title: string;
  definition: string;
  isCurrent?: boolean;
}

/**
 * Used in ResultView to show Level definition
 */
export function LevelDisplay({ title, definition }: LevelDisplayProps) {
  return (
    <div className="space-y-2 text-center">
      <h3 className="text-xl font-bold text-slate-900">
        {title}
      </h3>
      <p className="text-sm text-slate-600 leading-relaxed font-medium">
        {definition}
      </p>
    </div>
  );
}

interface SummaryBadgeProps {
  label: string;
  value: string | number;
  className?: string;
}

/**
 * Used in ResultView to show compensation summary items (User, Market Average, Gap).
 */
export function SummaryBadge({ label, value, className = "" }: SummaryBadgeProps) {
  return (
    <div className={`bg-[#f4f9fb] rounded-lg sm:rounded-xl pt-1 pb-1.5 sm:py-2 px-1.5 sm:px-2 text-center space-y-0 sm:space-y-1 min-w-0 ${className}`}>
      <span className="text-[12px] sm:text-[12px] font-medium text-slate-500">{label}</span>
      <p className="text-[13px] sm:text-lg font-bold text-slate-900 break-all">{value}</p>
    </div>
  );
}

interface LevelAnalysisColumnProps {
  levelInfo: {
    title: string;
    definition: string;
    guide: string;
    items: string;
  };
  radarChartData: { subject: string; target: number; user: number }[];
  isCurrent?: boolean;
}

/**
 * Used in ResultView to display each level's analysis column.
 */
export function LevelAnalysisColumn({ levelInfo, radarChartData, isCurrent }: LevelAnalysisColumnProps) {
  return (
    <div className="p-5 sm:p-8 space-y-6 min-w-0">
      <LevelDisplay
        title={levelInfo.title}
        definition={levelInfo.definition}
        isCurrent={isCurrent}
      />

      <DiagnosisRadarChart data={radarChartData} />

      <div className="space-y-3 text-center">
        <h4 className="text-sm font-bold text-slate-900">{levelInfo.guide}</h4>
        <div className="p-4 bg-slate-50 rounded-xl text-sm text-slate-600 font-medium whitespace-pre-wrap min-h-[80px] flex items-center justify-center text-center break-keep">
          {levelInfo.items}
        </div>
      </div>
    </div>
  );
}