import { TrendingUp } from 'lucide-react';
import type { WalkthroughTrendPoint } from '@/business/walkthrough/types';

interface WalkthroughTrendChartProps {
  readonly trendData: readonly WalkthroughTrendPoint[];
  readonly title: string;
  readonly gradientId: string;
  readonly presentation?: boolean;
}

function getPointX(index: number, total: number): number {
  return 40 + (index / (total - 1)) * 740;
}

function getPointY(pct: number): number {
  return 180 - (pct / 100) * 160;
}

export function WalkthroughTrendChart({
  trendData,
  title,
  gradientId,
  presentation = false,
}: WalkthroughTrendChartProps) {
  if (trendData.length <= 1) {
    return null;
  }

  const pathPoints = trendData
    .map((point, index) => `${getPointX(index, trendData.length)},${getPointY(point.pct)}`)
    .join(' L ');
  const polylinePoints = trendData
    .map((point, index) => `${getPointX(index, trendData.length)},${getPointY(point.pct)}`)
    .join(' ');

  return (
    <div className={presentation ? 'bg-slate-900/50 rounded-2xl border border-slate-800 p-6' : 'bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5'}>
      <h3 className={`font-semibold text-white mb-4 flex items-center gap-2 ${presentation ? 'text-lg' : 'text-sm'}`}>
        {!presentation && <TrendingUp size={16} className="text-violet-400" />} {title}
      </h3>
      <div className="relative">
        <svg viewBox="0 0 800 200" className={`w-full ${presentation ? 'h-48' : 'h-40'}`}>
          <defs>
            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#818cf8" stopOpacity={presentation ? '0.3' : '0.2'} />
              <stop offset="100%" stopColor="#818cf8" stopOpacity="0" />
            </linearGradient>
          </defs>
          {[25, 50, 75, 100].map((value) => (
            <g key={value}>
              <line x1="40" y1={getPointY(value)} x2="780" y2={getPointY(value)} stroke={presentation ? '#334155' : '#1e293b'} strokeWidth="1" strokeDasharray="4" />
              <text x="30" y={getPointY(value) + 4} fill={presentation ? '#64748b' : '#475569'} fontSize="10" textAnchor="end">{value}%</text>
            </g>
          ))}
          <path d={`M ${pathPoints} L 780,180 L 40,180 Z`} fill={`url(#${gradientId})`} />
          <polyline points={polylinePoints} fill="none" stroke="#818cf8" strokeWidth={presentation ? '3' : '2.5'} strokeLinecap="round" strokeLinejoin="round" />
          {trendData.map((point, index) => {
            const x = getPointX(index, trendData.length);
            const y = getPointY(point.pct);

            return (
              <g key={`${point.date}-${point.teacher}-${index}`}>
                <circle cx={x} cy={y} r={presentation ? '5' : '4'} fill="#818cf8" stroke={presentation ? '#1e1b4b' : '#0f172a'} strokeWidth="2" />
                {!presentation && (
                  <>
                    <text x={x} y={y - 8} fill="#94a3b8" fontSize="9" textAnchor="middle">{point.pct}%</text>
                    {trendData.length <= 10 && (
                      <text x={x} y={196} fill="#475569" fontSize="8" textAnchor="middle">
                        {new Date(point.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                      </text>
                    )}
                  </>
                )}
              </g>
            );
          })}
        </svg>
      </div>
    </div>
  );
}
