import React, { useEffect, useRef, useState, useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
// Sidebar handled in App.tsx
// import Sidebar from "@/components/layout/sidebar";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { safeToFixed, safePercentage } from "@/lib/number-utils";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import {
  Download,
  TrendingUp,
  Calendar,
  Target,
  DollarSign,
  Users,
  Award,
  BarChart3,
  FileText,
  Filter,
  RefreshCw,
  Zap,
  Star,
  ChevronDown,
  ChevronUp,
  Activity as ActivityIcon
} from "lucide-react";

// Import only the recharts components we actually use
import {
  Line,
  Area,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Pie,
  Cell,
  SafeLineChart as LineChart,
  SafeBarChart as BarChart,
  SafeAreaChart as AreaChart,
  SafePieChart as PieChart
} from "@/lib/safe-charts";
import type { Trainer, NewHire, Activity, DailyEntry, TrainerActivity, RepActivity } from "@shared/schema";
import { sanitizeChartData, createSafeTooltipFormatter } from "@/lib/chart-utils";
import { useAuth } from "@/hooks/useAuth";
import { getCurrentISOWeek } from "@/lib/utils";
import { toast } from "@/hooks/use-toast";
import { toReportPeriod, trackEvent } from "@/lib/analytics";
import { getQueryFn } from "@/lib/queryClient";
import { getTrainingPairName } from "@/lib/historical-report-data";

interface TrainingPair {
  trainerId: string;
  primeRepId: string;
}

interface PrimeRepActivity {
  id: string;
  date: string;
  primeRepId: string;
  trainerId: string;
  doorsKnocked: number | null;
  appointmentsSet: number | null;
  presentationsGiven: number | null;
  contractsClosed: number | null;
  moodRating: number | null;
  trainerRating: number | null;
  learningNotes: string | null;
}

// Convert week format (2025-W35) to readable date range (Sept 1st-6th)
const formatWeekToDateRange = (weekString: string) => {
  const [year, week] = weekString.split('-W');
  const yearNum = parseInt(year);
  const weekNum = parseInt(week);

  // Calculate the start date of the week using ISO 8601 week date system
  // Week 1 is the week containing the first Thursday of the year
  const jan4 = new Date(yearNum, 0, 4); // January 4th is always in week 1
  const dayOfWeek = jan4.getDay() || 7; // Sunday = 7 instead of 0
  const weekOneMonday = new Date(jan4);
  weekOneMonday.setDate(jan4.getDate() - dayOfWeek + 1);

  // Calculate the start of the specified week
  const startOfWeek = new Date(weekOneMonday);
  startOfWeek.setDate(weekOneMonday.getDate() + (weekNum - 1) * 7);

  // Calculate end of week (6 days later)
  const endOfWeek = new Date(startOfWeek);
  endOfWeek.setDate(startOfWeek.getDate() + 6);

  // Format dates
  const startMonth = startOfWeek.toLocaleDateString('en-US', { month: 'short' });
  const endMonth = endOfWeek.toLocaleDateString('en-US', { month: 'short' });
  const startDay = startOfWeek.getDate();
  const endDay = endOfWeek.getDate();

  // Add ordinal suffix (1st, 2nd, 3rd, etc.)
  const getOrdinalSuffix = (day: number) => {
    if (day >= 11 && day <= 13) return 'th';
    switch (day % 10) {
      case 1: return 'st';
      case 2: return 'nd';
      case 3: return 'rd';
      default: return 'th';
    }
  };

  const startFormatted = `${startMonth} ${startDay}${getOrdinalSuffix(startDay)}`;
  const endFormatted = `${endDay}${getOrdinalSuffix(endDay)}`;

  // If same month, show "Sept 1st-6th", otherwise "Aug 30th-Sept 5th"
  if (startMonth === endMonth) {
    return `${startFormatted}-${endFormatted}`;
  } else {
    return `${startFormatted}-${endMonth} ${endFormatted}`;
  }
};

// Expandable text component for notes
const ExpandableText = ({ text, maxLength = 100 }: { text: string; maxLength?: number }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  if (!text || text === '-') return <span>-</span>;

  if (text.length <= maxLength) {
    return <span>{text}</span>;
  }

  return (
    <div className="space-y-1">
      <span>{isExpanded ? text : `${text.substring(0, maxLength)}...`}</span>
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="flex items-center space-x-1 text-xs text-primary hover:text-primary/80 transition-colors font-medium underline decoration-primary/50"
        data-testid={`toggle-text-${isExpanded ? 'collapse' : 'expand'}`}
      >
        {isExpanded ? (
          <>
            <ChevronUp className="w-3 h-3" />
            <span>View less</span>
          </>
        ) : (
          <>
            <ChevronDown className="w-3 h-3" />
            <span>View more</span>
          </>
        )}
      </button>
    </div>
  );
};

export default function Reports() {
  const auth = useAuth();
  const user = auth?.user || null;
  const selectedIdentity = auth?.selectedIdentity || null;
  const [selectedPeriod, setSelectedPeriod] = useState("week");
  const [selectedWeek, setSelectedWeek] = useState(getCurrentISOWeek());
  const [selectedMonth, setSelectedMonth] = useState("2025-09");
  const lastGeneratedReport = useRef<string | null>(null);

  const {
    data: activities = [],
    isLoading: activitiesLoading,
    isSuccess: activitiesSucceeded,
    refetch,
  } = useQuery<Activity[]>({
    queryKey: ["/api/activities"],
    staleTime: 5 * 60 * 1000,
    gcTime: 10 * 60 * 1000,
    refetchOnWindowFocus: false,
  });

  const {
    data: trainers = [],
    isLoading: trainersLoading,
    isSuccess: trainersSucceeded,
  } = useQuery<Trainer[]>({
    queryKey: ["/api/trainers"],
    staleTime: 5 * 60 * 1000,
    gcTime: 10 * 60 * 1000,
    refetchOnWindowFocus: false,
  });

  const {
    data: historicalNewHires = [],
    isLoading: hiresLoading,
    isSuccess: hiresSucceeded,
  } = useQuery<NewHire[]>({
    // Reports must retain the original participant for historical pair ids.
    // Entry forms use the active-only roster separately.
    queryKey: ["/api/new-hires?includeGraduated=true"],
    staleTime: 5 * 60 * 1000,
    gcTime: 10 * 60 * 1000,
    refetchOnWindowFocus: false,
  });

  const {
    data: dailyEntries = [],
    isLoading: entriesLoading,
    isSuccess: entriesSucceeded,
  } = useQuery<DailyEntry[]>({
    queryKey: ["/api/daily-entries"],
    staleTime: 5 * 60 * 1000,
    gcTime: 10 * 60 * 1000,
    refetchOnWindowFocus: false,
  });

  // Training pairs are reconstructed from the retained historical Prime Rep
  // rows and trainers. This avoids making report rendering depend on the
  // operational active-pairs endpoint.
  const trainingPairs = useMemo<TrainingPair[]>(
    () =>
      historicalNewHires
        .filter((hire) => Boolean(hire.trainerId))
        .map((hire) => ({
          trainerId: hire.trainerId as string,
          primeRepId: hire.id,
        })),
    [historicalNewHires],
  );

  // Fetch prime rep activities - filtered by training pair relationship
  const {
    data: primeRepActivities = [],
    isSuccess: primeRepActivitiesSucceeded,
  } = useQuery<PrimeRepActivity[]>({
    queryKey: ['/api/prime-rep-activities'],
    select: (data) => {
      if (!user) return [];

      // If user is a prime rep, show only their activities
      if (user.role === 'prime_rep') {
        return data.filter(activity => activity.primeRepId === user.id);
      }

      // If user is a trainer, show only activities from their assigned prime reps
      if (user.role === 'trainer') {
        return data.filter(activity => {
          const pair = trainingPairs.find(p =>
            p.trainerId === user.id && p.primeRepId === activity.primeRepId
          );
          return !!pair;
        });
      }

      // Admins see all
      return data;
    }
  });

  // Fetch trainer activities - filtered by training pair relationship
  const {
    data: trainerActivities = [],
    isLoading: trainerActivitiesLoading,
    isSuccess: trainerActivitiesSucceeded,
  } = useQuery<TrainerActivity[]>({
    queryKey: ['/api/trainer-activities'],
    select: (data) => {
      if (!user) return [];

      // If user is a trainer, show only their activities
      if (user.role === 'trainer') {
        return data.filter(activity => activity.trainerId === user.id);
      }

      // If user is a prime rep, show only activities from their assigned trainer
      if (user.role === 'prime_rep') {
        return data.filter(activity => {
          const pair = trainingPairs.find(p =>
            p.primeRepId === user.id && p.trainerId === activity.trainerId
          );
          return !!pair;
        });
      }

      // Admins see all
      return data;
    }
  });

  const {
    data: repActivities = [],
    isLoading: repActivitiesLoading,
    isSuccess: repActivitiesSucceeded,
  } = useQuery<RepActivity[]>({
    queryKey: ["/api/rep-activities"],
    queryFn: getQueryFn({ on401: "throw" }),
    staleTime: 5 * 60 * 1000,
    gcTime: 10 * 60 * 1000,
    refetchOnWindowFocus: false,
  });

  const isLoading = activitiesLoading || trainersLoading || hiresLoading || entriesLoading || repActivitiesLoading || trainerActivitiesLoading;
  const reportDataSucceeded =
    activitiesSucceeded &&
    trainersSucceeded &&
    hiresSucceeded &&
    entriesSucceeded &&
    primeRepActivitiesSucceeded &&
    trainerActivitiesSucceeded &&
    repActivitiesSucceeded;

  useEffect(() => {
    if (!reportDataSucceeded) return;
    const period = toReportPeriod(selectedPeriod);
    const reportKey =
      period === "week"
        ? `${period}:${selectedWeek}`
        : period === "month"
          ? `${period}:${selectedMonth}`
          : period;
    if (lastGeneratedReport.current === reportKey) return;
    lastGeneratedReport.current = reportKey;
    trackEvent("report_generated", {
      report_type: "performance",
      period,
    });
  }, [
    reportDataSucceeded,
    selectedMonth,
    selectedPeriod,
    selectedWeek,
  ]);

  // Filter rep activities to remove "Unknown" entries for trainers
  const filteredRepActivities = useMemo(() => {
    // Determine if user is a trainer
    const isTrainer = user?.role === 'trainer' || selectedIdentity?.type === 'trainer';

    if (isTrainer) {
      // For trainers, only show activities where both rep and trainer can be resolved
      return repActivities.filter(activity => {
        const rep = historicalNewHires.find(h => h.id === activity.repId);
        const trainer = trainers.find(t => t.id === activity.trainerId);
        return rep && trainer; // Both must exist to avoid "Unknown" entries
      });
    }

    // For managers/admins, show all activities
    return repActivities;
  }, [repActivities, historicalNewHires, trainers, user?.role, selectedIdentity?.type]);

  const getPairNames = (pairId: string) => {
    return getTrainingPairName(pairId, trainers, historicalNewHires);
  };

  const getFilteredActivities = useMemo(() => {
    if (selectedPeriod === "week") {
      return activities.filter(a => a.week === selectedWeek);
    } else if (selectedPeriod === "month") {
      // Filter activities by month - convert week to month format
      return activities.filter(a => {
        if (!a.week) return false;
        const [year, week] = a.week.split('-W');
        const weekDate = new Date(parseInt(year), 0, 1 + (parseInt(week) - 1) * 7);
        const monthKey = `${weekDate.getFullYear()}-${String(weekDate.getMonth() + 1).padStart(2, '0')}`;
        return monthKey === selectedMonth;
      });
    }
    return activities;
  }, [activities, selectedPeriod, selectedWeek, selectedMonth]);

  const getPerformanceMetrics = useMemo(() => {
    const filteredActivities = getFilteredActivities;

    const totalMetrics = filteredActivities.reduce(
      (acc, activity) => ({
        doors: acc.doors + (activity.doors || 0),
        appointments: acc.appointments + (activity.appointments || 0),
        loisSigned: acc.loisSigned + (activity.loisSigned || 0),
        contractsSigned: acc.contractsSigned + (activity.contractsSigned || 0),
        kwSold: acc.kwSold + (activity.kwSold || 0),
      }),
      { doors: 0, appointments: 0, loisSigned: 0, contractsSigned: 0, kwSold: 0 }
    );

    const conversionRates = {
      doorToAppointment: totalMetrics.doors > 0 ? (totalMetrics.appointments / totalMetrics.doors * 100) : 0,
      appointmentToLoi: totalMetrics.appointments > 0 ? (totalMetrics.loisSigned / totalMetrics.appointments * 100) : 0,
      loiToContract: totalMetrics.loisSigned > 0 ? (totalMetrics.contractsSigned / totalMetrics.loisSigned * 100) : 0,
      overallConversion: totalMetrics.doors > 0 ? (totalMetrics.contractsSigned / totalMetrics.doors * 100) : 0,
    };

    return { totalMetrics, conversionRates };
  }, [getFilteredActivities]);

  const getTopPerformers = useMemo(() => {
    const filteredActivities = getFilteredActivities;
    const pairPerformance = new Map();

    filteredActivities.forEach(activity => {
      const existing = pairPerformance.get(activity.pairId) || {
        pairId: activity.pairId,
        pairName: getPairNames(activity.pairId),
        doors: 0,
        appointments: 0,
        loisSigned: 0,
        contractsSigned: 0,
        kwSold: 0,
      };

      existing.doors += activity.doors || 0;
      existing.appointments += activity.appointments || 0;
      existing.loisSigned += activity.loisSigned || 0;
      existing.contractsSigned += activity.contractsSigned || 0;
      existing.kwSold += activity.kwSold || 0;

      pairPerformance.set(activity.pairId, existing);
    });

    return Array.from(pairPerformance.values())
      .sort((a, b) => (b.kwSold || 0) - (a.kwSold || 0))
      .slice(0, 5);
  }, [getFilteredActivities, trainers, historicalNewHires]);

  const getWeeklyTrend = () => {
    const weeklyData = new Map();

    activities.forEach(activity => {
      const existing = weeklyData.get(activity.week) || {
        week: activity.week,
        doors: 0,
        appointments: 0,
        loisSigned: 0,
        contractsSigned: 0,
        kwSold: 0,
      };

      existing.doors += activity.doors || 0;
      existing.appointments += activity.appointments || 0;
      existing.loisSigned += activity.loisSigned || 0;
      existing.contractsSigned += activity.contractsSigned || 0;
      existing.kwSold += activity.kwSold || 0;

      weeklyData.set(activity.week, existing);
    });

    const data = Array.from(weeklyData.values()).sort((a, b) => a.week.localeCompare(b.week));
    return sanitizeChartData(data);
  };

  const getTrainerStats = () => {
    const trainerStats = trainers.map(trainer => {
      const assignedHires = historicalNewHires.filter(hire => hire.trainerId === trainer.id);
      const trainerActivities = activities.filter(activity =>
        activity.pairId.startsWith(`${trainer.id}-`)
      );

      const totalKwSold = trainerActivities.reduce((sum, a) => sum + (a.kwSold || 0), 0);
      const totalActivities = trainerActivities.length;

      return {
        trainer,
        assignedHires: assignedHires.length,
        totalActivities,
        totalKwSold,
        averageKwSold: totalActivities > 0 ? Math.round(totalKwSold / totalActivities) : 0,
      };
    });

    return trainerStats.sort((a, b) => b.totalKwSold - a.totalKwSold);
  };

  const handleExportReport = () => {
    const performanceMetrics = getPerformanceMetrics;
    const topPerformers = getTopPerformers;
    const weeklyTrend = getWeeklyTrend();

    const reportData = {
      generatedAt: new Date().toISOString(),
      period: selectedPeriod,
      selectedWeek: selectedWeek,
      summary: totalMetrics,
      conversionRates,
      topPerformers,
      weeklyTrend,
    };

    const blob = new Blob([JSON.stringify(reportData, null, 2)], { type: 'application/json' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `training_report_${selectedPeriod}_${selectedWeek}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
    trackEvent("report_exported", {
      report_type: "performance",
      export_format: "json",
      period: toReportPeriod(selectedPeriod),
    });
  };

  if (isLoading) {
    return (
      <div className="flex-1 p-6">
        <div className="animate-pulse">Loading reports...</div>
      </div>
    );
  }

  const { totalMetrics, conversionRates } = getPerformanceMetrics;
  const topPerformers = getTopPerformers;
  const weeklyTrend = getWeeklyTrend();
  const trainerStats = getTrainerStats();

  return (
    <div className="flex-1 overflow-auto">
        <header className="bg-card border-b border-border px-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-2xl font-bold text-foreground">Performance Reports</h2>
              <p className="text-muted-foreground">Analyze training performance and generate insights</p>
            </div>
            <div className="flex items-center space-x-4">
              <Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
                <SelectTrigger data-testid="period-selector" className="w-32">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="week">Weekly</SelectItem>
                  <SelectItem value="month">Monthly</SelectItem>
                  <SelectItem value="all">All Time</SelectItem>
                </SelectContent>
              </Select>

              {selectedPeriod === "week" && (
                <Select value={selectedWeek} onValueChange={setSelectedWeek}>
                  <SelectTrigger data-testid="week-selector" className="w-40">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {/* Generate last 12 weeks dynamically */}
                    {Array.from({ length: 12 }, (_, i) => {
                      const date = new Date();
                      date.setDate(date.getDate() - (i * 7));
                      const year = date.getFullYear();
                      const firstDayOfYear = new Date(year, 0, 1);
                      const dayOfYear = Math.floor((date.getTime() - firstDayOfYear.getTime()) / (24 * 60 * 60 * 1000)) + 1;
                      const weekNumber = Math.ceil((dayOfYear + firstDayOfYear.getDay()) / 7);
                      const weekString = `${year}-W${weekNumber.toString().padStart(2, '0')}`;
                      return (
                        <SelectItem key={weekString} value={weekString}>
                          {formatWeekToDateRange(weekString)}
                        </SelectItem>
                      );
                    })}
                  </SelectContent>
                </Select>
              )}

              {selectedPeriod === "month" && (
                <Select value={selectedMonth} onValueChange={setSelectedMonth}>
                  <SelectTrigger data-testid="month-selector" className="w-40">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2025-09">September 2025</SelectItem>
                    <SelectItem value="2025-08">August 2025</SelectItem>
                    <SelectItem value="2025-07">July 2025</SelectItem>
                    <SelectItem value="2025-06">June 2025</SelectItem>
                    <SelectItem value="2025-05">May 2025</SelectItem>
                  </SelectContent>
                </Select>
              )}

              <Button
                data-testid="export-report-button"
                onClick={handleExportReport}
                variant="outline"
              >
                <Download className="w-4 h-4 mr-2" />
                Export Report
              </Button>
            </div>
          </div>
        </header>

        <main className="p-6">
          <Tabs defaultValue="overview" className="space-y-6">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="activity-logs">Activity Logs</TabsTrigger>
              <TabsTrigger value="trends">Trends & Analytics</TabsTrigger>
              <TabsTrigger value="performance">Performance Deep Dive</TabsTrigger>
              {/* <TabsTrigger value="insights">AI Insights</TabsTrigger> Hidden until working */}
            </TabsList>

            <TabsContent value="overview" className="space-y-6">
              {/* Summary Cards */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
            <Card className="bg-card border border-border" data-testid="summary-doors">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Total Doors</p>
                    <p className="text-3xl font-bold text-foreground">{totalMetrics.doors}</p>
                    <p className="text-xs text-orange-600 mt-1">
                      {safePercentage(totalMetrics.appointments, totalMetrics.doors, 1)}% conversion
                    </p>
                  </div>
                  <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                    <Target className="text-orange-600 text-xl" />
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-card border border-border" data-testid="summary-appointments">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Appointments</p>
                    <p className="text-3xl font-bold text-foreground">{totalMetrics.appointments}</p>
                    <p className="text-xs text-blue-600 mt-1">
                      {safePercentage(totalMetrics.loisSigned, totalMetrics.appointments, 1)}% to LOI
                    </p>
                  </div>
                  <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <Calendar className="text-blue-600 text-xl" />
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-card border border-border" data-testid="summary-lois">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">LOIs Signed</p>
                    <p className="text-3xl font-bold text-foreground">{totalMetrics.loisSigned}</p>
                    <p className="text-xs text-purple-600 mt-1">
                      {safePercentage(totalMetrics.contractsSigned, totalMetrics.loisSigned, 1)}% to contract
                    </p>
                  </div>
                  <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <TrendingUp className="text-purple-600 text-xl" />
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-card border border-border" data-testid="summary-contracts">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">Contracts Signed</p>
                    <p className="text-3xl font-bold text-foreground">{totalMetrics.contractsSigned}</p>
                    <p className="text-xs text-green-600 mt-1">
                      {safePercentage(totalMetrics.contractsSigned, totalMetrics.doors, 1)}% overall conversion
                    </p>
                  </div>
                  <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <TrendingUp className="text-green-600 text-xl" />
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-card border border-border" data-testid="summary-kw-sold">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">KWs Sold</p>
                    <p className="text-3xl font-bold text-foreground">{totalMetrics.kwSold}</p>
                    <p className="text-xs text-yellow-600 mt-1">
                      Total system capacity
                    </p>
                  </div>
                  <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <DollarSign className="text-yellow-600 text-xl" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="grid grid-cols-1 xl:grid-cols-2 gap-8 mb-8">
            {/* Top Performers */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Award className="w-5 h-5" />
                  <span>Top Performers</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {topPerformers.map((performer: any, index: number) => (
                    <div key={performer.pairId} className="flex items-center justify-between p-3 bg-muted/30 rounded-lg" data-testid={`top-performer-${index + 1}`}>
                      <div className="flex items-center space-x-3">
                        <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                          index === 0 ? 'bg-yellow-100' : index === 1 ? 'bg-gray-100' : 'bg-orange-100'
                        }`}>
                          <span className={`font-bold text-sm ${
                            index === 0 ? 'text-yellow-600' : index === 1 ? 'text-gray-600' : 'text-orange-600'
                          }`}>
                            {index + 1}
                          </span>
                        </div>
                        <div>
                          <p className="font-medium text-foreground">{performer.pairName}</p>
                          <p className="text-sm text-muted-foreground">
                            {performer.contractsSigned} contracts • {performer.doors} doors
                          </p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="font-semibold text-foreground">{performer.kwSold} KW</p>
                        <p className="text-xs text-muted-foreground">{performer.appointments} appointments</p>
                      </div>
                    </div>
                  ))}

                  {topPerformers.length === 0 && (
                    <div className="text-center py-8 text-muted-foreground">
                      <Award className="w-12 h-12 mx-auto mb-4 text-muted-foreground/50" />
                      <p>No performance data available</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

            {/* Trainer Performance */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Users className="w-5 h-5" />
                  <span>Trainer Statistics</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {trainerStats.map((stat) => (
                    <div key={stat.trainer.id} className="flex items-center justify-between p-3 bg-muted/30 rounded-lg" data-testid={`trainer-stat-${stat.trainer.id}`}>
                      <div className="flex items-center space-x-3">
                        <div className="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                          <span className="text-primary-foreground font-semibold text-sm">
                            {stat.trainer.name.split(' ').map(n => n[0]).join('')}
                          </span>
                        </div>
                        <div>
                          <p className="font-medium text-foreground">{stat.trainer.name}</p>
                          <p className="text-sm text-muted-foreground">
                            {stat.assignedHires} trainees • {stat.totalActivities} activities
                          </p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="font-semibold text-foreground">{stat.totalKwSold.toLocaleString()} KW</p>
                        <p className="text-xs text-muted-foreground">
                          Avg: {stat.averageKwSold.toLocaleString()} KW
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Weekly Trend */}
          <Card className="mb-8">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <BarChart3 className="w-5 h-5" />
                <span>Weekly Performance Trend</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Week</TableHead>
                      <TableHead className="text-right">Doors</TableHead>
                      <TableHead className="text-right">Appointments</TableHead>
                      <TableHead className="text-right">LOIs Signed</TableHead>
                      <TableHead className="text-right">Contracts</TableHead>
                      <TableHead className="text-right">KWs Sold</TableHead>
                      <TableHead className="text-right">Conversion %</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {weeklyTrend.map((week) => {
                      const conversionRate = week.doors > 0 ? (week.contractsSigned / week.doors * 100) : 0;
                      return (
                        <TableRow key={week.week} data-testid={`week-trend-${week.week}`}>
                          <TableCell>
                            <Badge variant="outline">{formatWeekToDateRange(week.week)}</Badge>
                          </TableCell>
                          <TableCell className="text-right font-medium">{week.doors}</TableCell>
                          <TableCell className="text-right font-medium">{week.appointments}</TableCell>
                          <TableCell className="text-right font-medium">{week.loisSigned}</TableCell>
                          <TableCell className="text-right font-medium">{week.contractsSigned}</TableCell>
                          <TableCell className="text-right">
                            <span className="font-medium text-green-600">
                              {week.kwSold.toLocaleString()}
                            </span>
                          </TableCell>
                          <TableCell className="text-right">
                            <span className={`font-medium ${conversionRate >= 5 ? 'text-green-600' : conversionRate >= 2 ? 'text-orange-600' : 'text-red-600'}`}>
                              {safeToFixed(conversionRate, 1)}%
                            </span>
                          </TableCell>
                        </TableRow>
                      );
                    })}

                    {weeklyTrend.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                          <div>
                            <FileText className="w-12 h-12 mx-auto mb-4 text-muted-foreground/50" />
                            <p>No trend data available</p>
                            <p className="text-sm">Log more activities to see weekly trends</p>
                          </div>
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
            </TabsContent>

            <TabsContent value="activity-logs" className="space-y-6">
              <div className="space-y-6">
                {/* Prime Rep Activities Table */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center justify-between">
                      <span className="flex items-center space-x-2">
                        <Users className="w-5 h-5" />
                        <span>Prime Rep Daily Activity Logs</span>
                      </span>
                      <Badge variant="secondary">{primeRepActivities.length} entries</Badge>
                    </CardTitle>
                    <p className="text-sm text-muted-foreground mt-1">Activities logged by prime reps about their daily performance</p>
                  </CardHeader>
                  <CardContent>
                    <div className="overflow-x-auto">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Date</TableHead>
                            <TableHead>Prime Rep</TableHead>
                            <TableHead>Trainer</TableHead>
                            <TableHead className="text-center">Doors</TableHead>
                            <TableHead className="text-center">Appointments</TableHead>
                            <TableHead className="text-center">Presentations</TableHead>
                            <TableHead className="text-center">Closes</TableHead>
                            <TableHead className="text-center">Mood</TableHead>
                            <TableHead className="text-center">Trainer Rating</TableHead>
                            <TableHead>Learning Notes</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {primeRepActivities.length > 0 ? (
                            primeRepActivities.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).map((activity) => {
                              const rep = historicalNewHires.find(h => h.id === activity.primeRepId); // Changed to primeRepId
                              const trainer = trainers.find(t => t.id === activity.trainerId);
                              return (
                                <TableRow key={activity.id}>
                                  <TableCell>{new Date(activity.date).toLocaleDateString()}</TableCell>
                                  <TableCell className="font-medium">{rep?.name || 'Unknown'}</TableCell>
                                  <TableCell>{trainer?.name || 'Unknown'}</TableCell>
                                  <TableCell className="text-center">{activity.doorsKnocked || 0}</TableCell>
                                  <TableCell className="text-center">{activity.appointmentsSet || 0}</TableCell>
                                  <TableCell className="text-center">{activity.presentationsGiven || 0}</TableCell>
                                  <TableCell className="text-center">{activity.contractsClosed || 0}</TableCell>
                                  <TableCell className="text-center">
                                    {activity.moodRating ? (
                                      <div className="flex justify-center">
                                        {[...Array(5)].map((_, i) => (
                                          <Star
                                            key={i}
                                            className={`w-3 h-3 ${i < (activity.moodRating || 0) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
                                          />
                                        ))}
                                      </div>
                                    ) : '-'}
                                  </TableCell>
                                  <TableCell className="text-center">
                                    {activity.trainerRating ? (
                                      <div className="flex justify-center">
                                        {[...Array(5)].map((_, i) => (
                                          <Star
                                            key={i}
                                            className={`w-3 h-3 ${i < (activity.trainerRating || 0) ? 'fill-primary text-primary' : 'text-gray-300'}`}
                                          />
                                        ))}
                                      </div>
                                    ) : '-'}
                                  </TableCell>
                                  <TableCell className="max-w-xs">
                                    <ExpandableText text={activity.learningNotes || ''} maxLength={80} />
                                  </TableCell>
                                </TableRow>
                              );
                            })
                          ) : (
                            <TableRow>
                              <TableCell colSpan={10} className="text-center text-muted-foreground py-8">
                                No prime rep activities logged yet. Use "Log Prime Rep Activity" on the dashboard to add entries.
                              </TableCell>
                            </TableRow>
                          )}
                        </TableBody>
                      </Table>
                    </div>
                  </CardContent>
                </Card>

                {/* Trainer Activities Table */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center justify-between">
                      <span className="flex items-center space-x-2">
                        <Award className="w-5 h-5" />
                        <span>Trainer Daily Activity Logs</span>
                      </span>
                      <Badge variant="secondary">{trainerActivities.length} entries</Badge>
                    </CardTitle>
                    <p className="text-sm text-muted-foreground mt-1">Activities logged by trainers about their coaching sessions</p>
                  </CardHeader>
                  <CardContent>
                    <div className="overflow-x-auto">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Date</TableHead>
                            <TableHead>Trainer</TableHead>
                            <TableHead>Prime Rep</TableHead>
                            <TableHead className="text-center">Hours Spent</TableHead>
                            <TableHead className="text-center">Doors Together</TableHead>
                            <TableHead>Coaching Provided</TableHead>
                            <TableHead>Notes</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {trainerActivities.length > 0 ? (
                            trainerActivities.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).map((activity) => {
                              const trainer = trainers.find(t => t.id === activity.trainerId);
                              const rep = historicalNewHires.find(h => h.id === activity.repId);
                              return (
                                <TableRow key={activity.id}>
                                  <TableCell>{new Date(activity.date).toLocaleDateString()}</TableCell>
                                  <TableCell className="font-medium">{trainer?.name || 'Unknown'}</TableCell>
                                  <TableCell>{rep?.name || 'Unknown'}</TableCell>
                                  <TableCell className="text-center">{activity.hoursSpent || 0} hrs</TableCell>
                                  <TableCell className="text-center">{activity.doorsKnockedTogether || 0}</TableCell>
                                  <TableCell className="max-w-xs">
                                    <ExpandableText text={activity.coachingProvided || ''} maxLength={80} />
                                  </TableCell>
                                  <TableCell className="max-w-xs">
                                    <ExpandableText text={activity.notes || ''} maxLength={80} />
                                  </TableCell>
                                </TableRow>
                              );
                            })
                          ) : (
                            <TableRow>
                              <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
                                No trainer activities logged yet. Use "Log Trainer Activity" on the dashboard to add entries.
                              </TableCell>
                            </TableRow>
                          )}
                        </TableBody>
                      </Table>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            <TabsContent value="trends" className="space-y-6">
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
                {/* Performance Trend Chart */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <TrendingUp className="w-5 h-5" />
                      <span>Performance Trends</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <LineChart data={sanitizeChartData(weeklyTrend)}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="week" />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Line type="monotone" dataKey="doors" stroke="hsl(145 85% 35%)" strokeWidth={2} />
                        <Line type="monotone" dataKey="appointments" stroke="#3b82f6" strokeWidth={2} />
                        <Line type="monotone" dataKey="contractsSigned" stroke="#10b981" strokeWidth={2} />
                      </LineChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

                {/* KW Sales Chart */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <BarChart3 className="w-5 h-5" />
                      <span>KW Sales by Week</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={sanitizeChartData(weeklyTrend)}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="week" />
                        <YAxis />
                        <Tooltip />
                        <Bar dataKey="kwSold" fill="hsl(145 85% 35%)" />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </div>

              {/* Conversion Funnel */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Target className="w-5 h-5" />
                    <span>Sales Conversion Funnel</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={400}>
                    <AreaChart data={[{
                      stage: 'Doors Knocked',
                      value: totalMetrics.doors,
                      percentage: 100
                    }, {
                      stage: 'Appointments Set',
                      value: totalMetrics.appointments,
                      percentage: conversionRates.doorToAppointment
                    }, {
                      stage: 'LOIs Signed',
                      value: totalMetrics.loisSigned,
                      percentage: conversionRates.appointmentToLoi
                    }, {
                      stage: 'Contracts Signed',
                      value: totalMetrics.contractsSigned,
                      percentage: conversionRates.loiToContract
                    }]}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="stage" />
                      <YAxis />
                      <Tooltip formatter={createSafeTooltipFormatter({ valueLabel: 'Count', percentageLabel: 'Conversion Rate' })} />
                      <Area type="monotone" dataKey="value" stroke="hsl(145 85% 35%)" fill="hsl(145 85% 35%)" fillOpacity={0.3} />
                    </AreaChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="performance" className="space-y-6">
              {/* Refresh Button */}
              <div className="flex justify-end">
                <Button
                  onClick={() => {
                    refetch();
                    toast({
                      title: "Data Refreshed",
                      description: "Performance metrics updated successfully",
                    });
                  }}
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-2"
                  data-testid="refresh-performance-data"
                >
                  <ActivityIcon className="h-4 w-4" />
                  Refresh Data
                </Button>
              </div>

              <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
                {/* Individual Performance */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <Users className="w-5 h-5" />
                      <span>Individual Performance Breakdown</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={400}>
                      <BarChart data={sanitizeChartData(topPerformers)} layout="horizontal">
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis type="number" />
                        <YAxis type="category" dataKey="pairName" width={120} />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="doors" fill="#f59e0b" />
                        <Bar dataKey="appointments" fill="#3b82f6" />
                        <Bar dataKey="contractsSigned" fill="hsl(145 85% 35%)" />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

                {/* Efficiency Metrics */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <Zap className="w-5 h-5" />
                      <span>Efficiency Metrics</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {[
                        { label: 'Doors to Appointment', value: conversionRates.doorToAppointment, target: 15 },
                        { label: 'Appointment to LOI', value: conversionRates.appointmentToLoi, target: 60 },
                        { label: 'LOI to Contract', value: conversionRates.loiToContract, target: 70 },
                        { label: 'Overall Conversion', value: conversionRates.overallConversion, target: 6 }
                      ].map((metric, index) => (
                        <div key={metric.label} className="space-y-2">
                          <div className="flex justify-between items-center">
                            <span className="text-sm font-medium">{metric.label}</span>
                            <span className="text-sm font-bold">{safeToFixed(metric.value, 1)}%</span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div
                              className={`h-2 rounded-full ${metric.value >= metric.target ? 'bg-green-500' : 'bg-orange-500'}`}
                              style={{width: `${Math.min(metric.value / metric.target * 100, 100)}%`}}
                            ></div>
                          </div>
                          <div className="flex justify-between text-xs text-gray-500">
                            <span>Target: {metric.target}%</span>
                            <span className={metric.value >= metric.target ? 'text-green-600' : 'text-orange-600'}>
                              {metric.value >= metric.target ? '✓ On Track' : '△ Below Target'}
                            </span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            {/* AI Insights tab hidden until working - content removed temporarily */}
          </Tabs>
        </main>
      </div>
    );
}