import { Activity, BarChart3, CheckCircle, Link as LinkIcon, TrendingUp } from 'lucide-react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { cn } from '@/lib/utils';

interface ComponentScore {
  label: string;
  score: number;
  weight: number;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
}

interface HealthScoreBreakdownProps {
  trafficTrendScore: number | null;
  contentQualityScore: number | null;
  recommendationCompletionScore: number | null;
  roiPerformanceScore: number | null;
  connectionHealthScore: number | null;
  className?: string;
}

function getScoreColor(score: number): string {
  if (score >= 80) return 'text-success';
  if (score >= 60) return 'text-warning';
  if (score >= 40) return 'text-orange-600 dark:text-orange-400';
  return 'text-destructive';
}

function getProgressColor(score: number): string {
  if (score >= 80) return 'bg-success';
  if (score >= 60) return 'bg-warning';
  if (score >= 40) return 'bg-orange-600 dark:bg-orange-500';
  return 'bg-destructive';
}

function ComponentScoreItem({ component }: { component: ComponentScore }) {
  const Icon = component.icon;

  return (
    <div className="flex flex-col gap-3 py-4">
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-start gap-3 flex-1">
          <Icon className="h-5 w-5 text-muted-foreground mt-0.5 shrink-0" />
          <div className="flex-1 min-w-0">
            <div className="flex items-baseline gap-2">
              <h4 className="text-sm font-medium">{component.label}</h4>
              <span className="text-xs text-muted-foreground">({component.weight}% weight)</span>
            </div>
            <p className="text-xs text-muted-foreground mt-1">{component.description}</p>
          </div>
        </div>
        <div className="text-right shrink-0">
          <div className={cn('text-lg font-bold tabular-nums', getScoreColor(component.score))}>
            {Math.round(component.score)}
          </div>
          <div className="text-xs text-muted-foreground">/100</div>
        </div>
      </div>
      <div className="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
        <div
          className={cn('h-full transition-all', getProgressColor(component.score))}
          style={{ width: `${component.score}%` }}
        />
      </div>
    </div>
  );
}

export default function HealthScoreBreakdown({
  trafficTrendScore,
  contentQualityScore,
  recommendationCompletionScore,
  roiPerformanceScore,
  connectionHealthScore,
  className,
}: HealthScoreBreakdownProps) {
  const hasData =
    trafficTrendScore !== null &&
    contentQualityScore !== null &&
    recommendationCompletionScore !== null &&
    roiPerformanceScore !== null &&
    connectionHealthScore !== null;

  const components: ComponentScore[] = [
    {
      label: 'Traffic Trend',
      score: trafficTrendScore ?? 0,
      weight: 30,
      description: 'Comparison of last 30 days vs previous 30 days for clicks and impressions',
      icon: TrendingUp,
    },
    {
      label: 'Content Quality',
      score: contentQualityScore ?? 0,
      weight: 20,
      description: 'Distribution of recommendations and page performance issues',
      icon: BarChart3,
    },
    {
      label: 'Recommendation Completion',
      score: recommendationCompletionScore ?? 0,
      weight: 20,
      description: 'Percentage of recommendations reviewed, approved, and applied',
      icon: CheckCircle,
    },
    {
      label: 'ROI Performance',
      score: roiPerformanceScore ?? 0,
      weight: 20,
      description: 'Aggregate performance of tracked recommendation implementations',
      icon: Activity,
    },
    {
      label: 'Connection Health',
      score: connectionHealthScore ?? 0,
      weight: 10,
      description: 'Status of Google Search Console and WordPress connections',
      icon: LinkIcon,
    },
  ];

  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle>Score Breakdown</CardTitle>
        <CardDescription>
          Individual component scores contributing to overall health score
        </CardDescription>
      </CardHeader>
      <CardContent>
        {!hasData ? (
          <div className="py-4">
            <p className="text-sm text-muted-foreground">
              No component score data available. Run an analysis to calculate component scores.
            </p>
          </div>
        ) : (
          <div className="divide-y divide-border">
            {components.map((component) => (
              <ComponentScoreItem key={component.label} component={component} />
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}