import { Minimize2 } 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';
import { WalkthroughTrendChart } from '@/components/walkthrough-summary/WalkthroughTrendChart';

interface WalkthroughPresentationViewProps {
  readonly summary: WalkthroughSummaryWorkflow;
}

export function WalkthroughPresentationView({ summary }: WalkthroughPresentationViewProps) {
  const teacherLabel = summary.selectedTeacher !== 'all' ? summary.selectedTeacher : 'All Staff';

  return (
    <div className="fixed inset-0 bg-slate-950 z-50 overflow-y-auto">
      <div className="max-w-5xl mx-auto p-8">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h2 className="text-3xl font-bold text-white">Performance Overview</h2>
            <p className="text-slate-400">{teacherLabel} - Last {summary.timeRange} Days</p>
          </div>
          <button
            type="button"
            onClick={() => summary.setPresentationMode(false)}
            className="p-2 rounded-lg bg-slate-800 text-slate-400 hover:text-white transition-colors"
            aria-label="Close presentation mode"
          >
            <Minimize2 size={20} />
          </button>
        </div>

        <div className="flex items-center justify-center mb-12">
          <div className="text-center">
            <div className={`text-8xl font-black ${summary.status.text}`}>{summary.overallPct}%</div>
            <div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full ${summary.status.bg} border ${summary.status.border} mt-3`}>
              <span className={`text-sm font-semibold ${summary.status.text}`}>{summary.status.label}</span>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-4 mb-12">
          {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-4">
                <span className="text-sm text-slate-400 w-40 text-right">{category.shortLabel}</span>
                <div className="flex-1 h-8 bg-slate-800 rounded-full overflow-hidden">
                  <div className={`h-full rounded-full ${getWalkthroughBarColor(average.avg, average.max)} transition-all duration-700`} style={{ width: `${pct}%` }} />
                </div>
                <span className={`text-lg font-bold w-16 ${getWalkthroughRatingColor(average.avg, average.max)}`}>{pct}%</span>
              </div>
            );
          })}
        </div>

        <WalkthroughTrendChart
          trendData={summary.trendData}
          title="Performance Trend"
          gradientId="walkthroughTrendGradPresentation"
          presentation
        />
      </div>
    </div>
  );
}
