import { BarChart3 } from 'lucide-react';
import {
  getWalkthroughBarColor,
  getWalkthroughCategoryPct,
  getWalkthroughRatingColor,
} from '@/business/walkthrough/selectors';
import { WALKTHROUGH_FORM_CATEGORIES } from '@/shared/constants/walkthrough';
import type { WalkthroughSummaryWorkflow } from '@/components/walkthrough-summary/types';

interface WalkthroughCategoryBreakdownProps {
  readonly summary: WalkthroughSummaryWorkflow;
}

export function WalkthroughCategoryBreakdown({ summary }: WalkthroughCategoryBreakdownProps) {
  return (
    <div className="bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5">
      <h3 className="text-sm font-semibold text-white mb-4 flex items-center gap-2">
        <BarChart3 size={16} className="text-indigo-400" /> Category Breakdown
      </h3>
      <div className="space-y-3">
        {WALKTHROUGH_FORM_CATEGORIES.map((category) => {
          const average = summary.categoryAverageByKey.get(category.key);
          if (!average) return null;

          const pct = getWalkthroughCategoryPct(average.avg, average.max);
          return (
            <div key={category.key} className="flex items-center gap-3">
              <span className="text-xs text-slate-400 w-32 text-right truncate">{category.shortLabel}</span>
              <div className="flex-1 h-6 bg-slate-900/50 rounded-full overflow-hidden">
                <div
                  className={`h-full rounded-full ${getWalkthroughBarColor(average.avg, average.max)} transition-all duration-700 flex items-center justify-end pr-2`}
                  style={{ width: `${Math.max(pct, 8)}%` }}
                >
                  {pct > 20 && <span className="text-[10px] font-bold text-white">{pct}%</span>}
                </div>
              </div>
              {pct <= 20 && <span className={`text-xs font-bold ${getWalkthroughRatingColor(average.avg, average.max)}`}>{pct}%</span>}
            </div>
          );
        })}
      </div>
    </div>
  );
}
