'use client';

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { green1, green2, green5 } from '../colors';

type SkillsRadarPoint = {
  axis: string;
  observed?: number;
  self_reported?: number;
  certified?: number;
};

export default function SkillsValidation({
  skillsCategoryRadar,
  headless,
  title = 'Skills by Validation Type',
  description = 'The bar chart shows how each skill is supported by self-attested claims, observed practice, or certified evidence.',
  tickFontSize = 12,
  marginLeft = 8,
  marginRight = 8,
}: {
  skillsCategoryRadar?: SkillsRadarPoint[];
  headless?: boolean;
  title?: string;
  description?: string;
  tickFontSize?: number;
  marginLeft?: number;
  marginRight?: number;
}) {
  const skillsRadarLimited = skillsCategoryRadar || [];
  const hasNoData = skillsRadarLimited.length === 0 || skillsRadarLimited.every(p => !p.observed && !p.self_reported && !p.certified);
  const xAxisBottomOffset = 50 + 36; // XAxis height + BarChart margin.bottom

  return (
    <div className={'rounded-lg p-4 border kyd-avoid-break'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
      <h4 className={'font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>{title}</h4>
      <p className={'text-sm mb-4'} style={{ color: 'var(--text-secondary)' }}>{description}</p>
      <div style={{ height: 360, position: 'relative' }}>
        {hasNoData && (
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: xAxisBottomOffset,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              zIndex: 10,
              pointerEvents: 'none',
            }}
          >
            <span style={{ color: 'var(--text-secondary)', fontSize: 36, fontWeight: 600, opacity: 0.6 }}>No Data Exists</span>
          </div>
        )}
        <ResponsiveContainer>
          <BarChart data={skillsRadarLimited} margin={{ top: 8, right: marginRight, left: marginLeft, bottom: 8 }}>
            <CartesianGrid strokeDasharray="3 3" stroke={'var(--icon-button-secondary)'} />
            <XAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: tickFontSize }} interval={0} angle={-20} textAnchor="end" height={100}/>
            <YAxis domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} />
            <Tooltip contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }} />
            <Bar dataKey="observed" name="Observed" fill={green2} isAnimationActive={!headless} stroke={'var(--icon-button-secondary)'} strokeWidth={1} />
            <Bar dataKey="self_reported" name="Self-reported" fill={green5} isAnimationActive={!headless} stroke={'var(--icon-button-secondary)'} strokeWidth={1} />
            <Bar dataKey="certified" name="Certified" fill={green1} isAnimationActive={!headless} stroke={'var(--icon-button-secondary)'} strokeWidth={1} />
          </BarChart>

        </ResponsiveContainer>
      </div>
    </div>
  );
}