import { AlertTriangle, Award, Star } from 'lucide-react';
import type { WalkthroughSummaryWorkflow } from '@/components/walkthrough-summary/types';

interface WalkthroughOverviewCardsProps {
  readonly summary: WalkthroughSummaryWorkflow;
}

export function WalkthroughOverviewCards({ summary }: WalkthroughOverviewCardsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div className="bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5 flex items-center gap-5">
        <div className={`w-20 h-20 rounded-2xl ${summary.status.bg} border ${summary.status.border} flex items-center justify-center flex-shrink-0`}>
          <span className={`text-3xl font-black ${summary.status.text}`}>{summary.overallPct}%</span>
        </div>
        <div>
          <p className="text-xs text-slate-500 uppercase tracking-wider">Overall Performance</p>
          <p className={`text-sm font-semibold ${summary.status.text}`}>{summary.status.label}</p>
          <p className="text-xs text-slate-500 mt-1">{summary.filteredCheckins.length} walk-throughs</p>
        </div>
      </div>

      <div className="bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5">
        <div className="flex items-center gap-2 mb-3">
          <AlertTriangle size={16} className="text-amber-400" />
          <p className="text-xs text-slate-500 uppercase tracking-wider">Attention Flags</p>
        </div>
        {summary.flags.length > 0 ? (
          <div className="space-y-2">
            {summary.flags.map((flag) => (
              <div key={`${flag.teacher}-${flag.category}`} className="flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-1.5">
                <AlertTriangle size={12} className="text-amber-400 flex-shrink-0" />
                <p className="text-xs text-amber-300">{flag.category}: {flag.count}x needs attention</p>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-xs text-slate-500">No recurring concerns flagged</p>
        )}
      </div>

      <div className="bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5">
        <div className="flex items-center gap-2 mb-3">
          <Award size={16} className="text-emerald-400" />
          <p className="text-xs text-slate-500 uppercase tracking-wider">Recognitions</p>
        </div>
        {summary.recognitions.length > 0 ? (
          <div className="space-y-2">
            {summary.recognitions.map((recognition) => (
              <div key={`${recognition.teacher}-${recognition.category}`} className="flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 rounded-lg px-3 py-1.5">
                <Star size={12} className="text-emerald-400 flex-shrink-0" />
                <p className="text-xs text-emerald-300">{recognition.category}: 3+ consecutive Excellent</p>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-xs text-slate-500">Complete 3+ walk-throughs to unlock recognitions</p>
        )}
      </div>
    </div>
  );
}
