/**
 * Burndown Chart Component
 *
 * Simple SVG-based burndown chart showing actual vs ideal progress.
 * This is a placeholder that will be enhanced when a charting library is integrated.
 */

'use client';

import { cn } from '@/lib/utils';
import type { BurndownDataPoint } from './types';

interface BurndownChartProps {
  /** Burndown data points */
  data: BurndownDataPoint[];
  /** Chart height */
  height?: number;
  /** Additional CSS classes */
  className?: string;
  /** Show legend */
  showLegend?: boolean;
}

export function BurndownChart({
  data,
  height = 120,
  className,
  showLegend = true,
}: BurndownChartProps) {
  if (data.length === 0) {
    return (
      <div
        className={cn(
          'flex items-center justify-center rounded-md border border-dashed p-4 text-sm text-muted-foreground',
          className
        )}
        style={{ height }}
      >
        No burndown data available
      </div>
    );
  }

  const chartWidth = 100;
  const chartHeight = height;
  const padding = { top: 10, right: 10, bottom: 20, left: 10 };
  const innerWidth = chartWidth - padding.left - padding.right;
  const innerHeight = chartHeight - padding.top - padding.bottom;

  const maxPoints = Math.max(...data.map((d) => Math.max(d.remaining, d.ideal)));

  // Generate points for polylines
  const getPoints = (key: 'remaining' | 'ideal') => {
    return data
      .map((d, i) => {
        const x = padding.left + (i / (data.length - 1)) * innerWidth;
        const y = padding.top + innerHeight - (d[key] / maxPoints) * innerHeight;
        return `${x},${y}`;
      })
      .join(' ');
  };

  return (
    <div className={cn('w-full', className)}>
      <div className="relative" style={{ height }}>
        <svg
          viewBox={`0 0 ${chartWidth} ${chartHeight}`}
          className="h-full w-full"
          preserveAspectRatio="none"
          role="img"
          aria-label="Sprint burndown chart showing actual progress versus ideal progress"
        >
          {/* Grid lines */}
          <g className="text-muted stroke-current opacity-20">
            {[0, 0.25, 0.5, 0.75, 1].map((ratio) => (
              <line
                key={ratio}
                x1={padding.left}
                y1={padding.top + innerHeight * ratio}
                x2={padding.left + innerWidth}
                y2={padding.top + innerHeight * ratio}
                strokeWidth="0.5"
              />
            ))}
          </g>

          {/* Ideal line (dashed) */}
          <polyline
            fill="none"
            stroke="currentColor"
            strokeOpacity="0.3"
            strokeWidth="1"
            strokeDasharray="4,2"
            points={getPoints('ideal')}
          />

          {/* Actual line */}
          <polyline
            fill="none"
            stroke="currentColor"
            className="text-primary"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            points={getPoints('remaining')}
          />

          {/* Data points on actual line */}
          {data.map((d, i) => {
            const x = padding.left + (i / (data.length - 1)) * innerWidth;
            const y = padding.top + innerHeight - (d.remaining / maxPoints) * innerHeight;
            return <circle key={i} cx={x} cy={y} r="2" className="fill-primary" />;
          })}
        </svg>

        {/* X-axis labels */}
        <div className="absolute bottom-0 left-0 right-0 flex justify-between text-xs text-muted-foreground">
          <span>Day 1</span>
          <span>Day {data.length}</span>
        </div>
      </div>

      {/* Legend */}
      {showLegend && (
        <div className="mt-2 flex items-center justify-center gap-6 text-xs text-muted-foreground">
          <span className="flex items-center gap-1">
            <span className="h-0.5 w-4 bg-primary" />
            Actual
          </span>
          <span className="flex items-center gap-1">
            <span className="h-0.5 w-4 border-t border-dashed border-muted-foreground" />
            Ideal
          </span>
        </div>
      )}
    </div>
  );
}
