'use client';

import React from 'react';
import { green, red } from '../colors';

type CategoryBarsProps = {
  title: string;
  categories: string[];
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  categoryScores: Record<string, any>;
  getCategoryTooltipCopy: (category: string) => string;
  description?: string;
  barHeight?: number; // px height for the filled bar
  categoryTargets?: Record<string, number>; // desired target lengths (0-100)
  linkToAppendix?: boolean;
  /** Extra classes for the flex column that lays out rows with justify-between (taller column = more space between bars). */
  tracksClassName?: string;
};

const CategoryBars: React.FC<CategoryBarsProps> = ({
  title,
  categories,
  categoryScores,
  getCategoryTooltipCopy,
  description,
  barHeight = 6,
  categoryTargets,
  linkToAppendix = true,
  tracksClassName,
}) => {
  return (
    <div className="relative flex flex-col h-full">
      <div className="font-semibold text-xl mb-2" style={{ color: 'var(--text-main)' }}>{title}</div>
      <div className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
        {description || "Each bar represents a category's net evidence: positive values extend right in green, negative values extend left, and bar length denotes contribution magnitude."}
        {categoryTargets && Object.keys(categoryTargets).length > 0 ? (
          <>
            {' '}Target overlays indicate desired evidence lengths for this role.
          </>
        ) : null}
      </div>
      <div className={`flex-1 flex flex-col justify-between relative${tracksClassName ? ` ${tracksClassName}` : ''}`}>
        <div
          className="absolute top-0 bottom-0 w-px"
          style={{
            left: '50%',
            transform: 'translateX(-50%)',
            backgroundColor: 'var(--text-secondary, #e5e7eb)',
          }}
        />
        {categories.map((category) => {
          const score = categoryScores[category] || {};
          const signed = Math.round(
            Number(
              score?.business?.percent_progress_signed ??
                score?.combined?.percent_progress_signed ??
                score?.business?.percent_progress ??
                score?.combined?.percent_progress ??
                0
            )
          );
          const candidatePercentRaw = Math.round(
            Number(
              score?.business?.percent_progress ??
                score?.combined?.percent_progress ??
                0
            )
          );
          const candidateClamp = Math.max(0, Math.min(100, candidatePercentRaw));
          const absPercent = Math.max(0, Math.min(Math.abs(signed), 100));
          const hasData = !!(score?.business || score?.combined) && signed !== 0;
          const isNegative = signed < 0;
          const label = !hasData ? 'No Data' :
            signed <= -61 ? 'Strong Evidence' :
            signed <= -21 ? 'Consistent Evidence' :
            signed <= 19 ? 'Mixed Signals' :
            signed <= 59 ? 'Consistent Evidence' :
            'Strong Evidence';
          const fillWidth = absPercent / 2; // half-bar represents 100%
          const left = isNegative ? `calc(50% - ${fillWidth}%)` : '50%';
          const targetRaw = categoryTargets?.[category];
          const hasTarget = typeof targetRaw === 'number' && isFinite(targetRaw);
          const targetClamp = hasTarget ? Math.max(0, Math.min(100, Math.round(targetRaw as number))) : 0;
          const targetWidth = targetClamp / 2; // same scale as fillWidth
          const handleClick = (e: React.MouseEvent) => {
            if (!linkToAppendix) return;
            // Navigate to Appendix -> Skills category anchor
            try {
              if (typeof window !== 'undefined') {
                const anchor = `#appendix-skills-cat-${encodeURIComponent(category.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''))}`;
                const url = `#appendix${anchor}`;
                window.location.hash = url;
              }
            } catch {}
          };
          return (
            <div key={category} className="first:pt-0 group relative">
              <button type="button" onClick={handleClick} className={`font-semibold mb-1 underline-offset-2 text-left ${linkToAppendix ? 'hover:underline' : ''}`} style={{ color: 'var(--text-main)' }}>
                {category}
              </button>
              <div className="relative">
                <div
                  className="w-full rounded-full overflow-hidden relative"
                  style={{
                    height: barHeight,
                    background: 'transparent',
                    outline: '1px solid var(--icon-button-secondary)',
                  }}
                  onClick={handleClick}
                  role={linkToAppendix ? 'button' : undefined}
                  aria-label={linkToAppendix ? `Jump to ${category} in Appendix` : undefined}
                >
                  {/* signed fill originating from center, or full grey fill when no data */}
                  {!hasData ? (
                    <div
                      role="img"
                      aria-label="No data available"
                      className="absolute top-0 h-full w-full"
                      style={{ backgroundColor: 'var(--icon-button-secondary)', zIndex: 1 }}
                    />
                  ) : (
                    <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: isNegative ? `var(--status-negative, ${red})` : `var(--status-positive, ${green})`, zIndex: 1 }} />
                  )}
                  {/* role target overlay: positive side only, dashed outline (always above fill) */}
                  {hasTarget && (
                    <div
                      className="absolute top-0 h-full"
                      style={{
                        left: '50%',
                        width: `${targetWidth}%`,
                        borderTop: '2px dashed #000',
                        borderBottom: '2px dashed #000',
                        opacity: 1,
                        zIndex: 2,
                      }}
                      aria-hidden="true"
                    />
                  )}
                </div>
              </div>
              <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
                <div
                  style={{
                    background: 'var(--content-card-background)',
                    border: '1px solid var(--icon-button-secondary)',
                    color: 'var(--text-main)',
                    padding: 10,
                    borderRadius: 6,
                  }}
                >
                  <div style={{ fontWeight: 600 }}>{category}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{label}</div>
                  <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
                    {getCategoryTooltipCopy(category)}
                  </div>
                  {hasTarget && (
                    <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
                      Target: {targetClamp}%
                      <div>Candidate Match: {candidateClamp}%</div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CategoryBars;