import { useState, useEffect } from "react";
import { motion } from "motion/react";
import { 
  FileText, 
  Download, 
  Calendar, 
  BarChart3, 
  PieChart, 
  TrendingUp,
  Users,
  DollarSign,
  AlertTriangle,
  Filter,
  RefreshCw,
  Eye,
  Send,
  Settings,
  Plus,
  Target,
  Activity,
  CheckCircle,
  Clock
} from "lucide-react";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { DatePickerWithRange } from "./ui/date-range-picker";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Progress } from "./ui/progress";
import { Badge } from "./ui/badge";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart as RechartsPieChart, Cell, Pie } from "recharts";
import { formatNaira } from "../utils/currency";
import { toast } from "sonner@2.0.3";
import { 
  reportingService, 
  type FinancialSummary, 
  type MemberAnalytics, 
  type TransactionAnalytics,
  type PayoutAnalytics,
  type AgentPerformance,
  type RiskAnalytics
} from "../utils/reportingService";

interface AdvancedReportingProps {
  onBack: () => void;
  members: any[];
  contributions: any[];
  payouts: any[];
  agents: any[];
  transactions: any[];
}

export function AdvancedReporting({ 
  onBack, 
  members, 
  contributions, 
  payouts, 
  agents, 
  transactions 
}: AdvancedReportingProps) {
  const [selectedDateRange, setSelectedDateRange] = useState({
    from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // 30 days ago
    to: new Date()
  });
  const [selectedTemplate, setSelectedTemplate] = useState("daily_operations");
  const [isGenerating, setIsGenerating] = useState(false);
  const [activeTab, setActiveTab] = useState("overview");
  const [financialData, setFinancialData] = useState<FinancialSummary | null>(null);
  const [memberData, setMemberData] = useState<MemberAnalytics | null>(null);
  const [transactionData, setTransactionData] = useState<TransactionAnalytics | null>(null);
  const [payoutData, setPayoutData] = useState<PayoutAnalytics | null>(null);
  const [agentData, setAgentData] = useState<AgentPerformance[]>([]);
  const [riskData, setRiskData] = useState<RiskAnalytics | null>(null);

  useEffect(() => {
    generateAnalytics();
  }, [selectedDateRange, members, contributions, payouts, agents, transactions]);

  const generateAnalytics = async () => {
    try {
      // Generate financial summary
      const financial = await reportingService.generateFinancialSummary(
        selectedDateRange.from,
        selectedDateRange.to,
        { contributions, payouts, members }
      );
      setFinancialData(financial);

      // Generate member analytics
      const memberAnalytics = await reportingService.generateMemberAnalytics(members);
      setMemberData(memberAnalytics);

      // Generate transaction analytics
      const transactionAnalytics = await reportingService.generateTransactionAnalytics(
        transactions,
        selectedDateRange.from,
        selectedDateRange.to
      );
      setTransactionData(transactionAnalytics);

      // Generate payout analytics
      const payoutAnalytics = await reportingService.generatePayoutAnalytics(
        payouts,
        selectedDateRange.from,
        selectedDateRange.to
      );
      setPayoutData(payoutAnalytics);

      // Generate agent performance
      const agentPerformance = await reportingService.generateAgentPerformance(
        agents,
        contributions,
        selectedDateRange.from,
        selectedDateRange.to
      );
      setAgentData(agentPerformance);

      // Generate risk analytics
      const riskAnalytics = await reportingService.generateRiskAnalytics(
        members,
        transactions,
        selectedDateRange.from,
        selectedDateRange.to
      );
      setRiskData(riskAnalytics);

    } catch (error) {
      console.error('Error generating analytics:', error);
      toast.error('Failed to generate analytics');
    }
  };

  const handleGenerateReport = async (format: 'pdf' | 'excel') => {
    setIsGenerating(true);
    try {
      const reportData = {
        financial: financialData,
        members: memberData,
        transactions: transactionData,
        payouts: payoutData,
        agents: agentData,
        risk: riskData
      };

      if (format === 'pdf') {
        const pdfBlob = await reportingService.generatePDFReport(
          selectedTemplate,
          reportData,
          {
            title: 'Enamel Wallets Report',
            subtitle: `${selectedDateRange.from.toLocaleDateString()} - ${selectedDateRange.to.toLocaleDateString()}`,
            dateRange: selectedDateRange,
            generatedBy: 'Admin User'
          }
        );
        
        // Download PDF
        const url = URL.createObjectURL(pdfBlob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `enamel-wallets-report-${Date.now()}.pdf`;
        a.click();
        URL.revokeObjectURL(url);
      } else {
        const excelBlob = await reportingService.generateExcelReport(
          selectedTemplate,
          reportData,
          {
            title: 'Enamel Wallets Report',
            dateRange: selectedDateRange,
            generatedBy: 'Admin User'
          }
        );
        
        // Download Excel
        const url = URL.createObjectURL(excelBlob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `enamel-wallets-report-${Date.now()}.xlsx`;
        a.click();
        URL.revokeObjectURL(url);
      }

      toast.success(`${format.toUpperCase()} report generated successfully!`);
    } catch (error) {
      console.error('Error generating report:', error);
      toast.error('Failed to generate report');
    } finally {
      setIsGenerating(false);
    }
  };

  const kpiCards = [
    {
      title: "Total Revenue",
      value: formatNaira(financialData?.totalCommissions || 0),
      change: `+${financialData?.growthRate.toFixed(1) || 0}%`,
      icon: <DollarSign className="w-6 h-6" />,
      color: "text-green-600",
      bgColor: "bg-green-50"
    },
    {
      title: "Active Members",
      value: financialData?.activeMembers || 0,
      change: `+${financialData?.newMembers || 0} new`,
      icon: <Users className="w-6 h-6" />,
      color: "text-blue-600",
      bgColor: "bg-blue-50"
    },
    {
      title: "Collection Rate",
      value: `${financialData?.collectionRate.toFixed(1) || 0}%`,
      change: "Target: 95%",
      icon: <Target className="w-6 h-6" />,
      color: "text-purple-600",
      bgColor: "bg-purple-50"
    },
    {
      title: "Risk Score",
      value: `${riskData?.complianceScore.toFixed(0) || 0}/100`,
      change: `${riskData?.defaultRate.toFixed(1) || 0}% default rate`,
      icon: <AlertTriangle className="w-6 h-6" />,
      color: "text-orange-600",
      bgColor: "bg-orange-50"
    }
  ];

  const chartColors = ['#1A73E8', '#34A853', '#FF7F50', '#8B5CF6', '#F59E0B'];

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-100 dark:from-background dark:via-card dark:to-background">
      {/* Header */}
      <div className="bg-card shadow-sm border-b p-6">
        <div className="flex items-center justify-between max-w-7xl mx-auto">
          <div className="flex items-center gap-3">
            <Button variant="ghost" size="sm" onClick={onBack}>
              <ArrowLeft className="w-4 h-4" />
            </Button>
            <div>
              <h1 className="text-2xl font-bold">Advanced Reporting & Analytics</h1>
              <p className="text-sm text-muted-foreground">
                Comprehensive insights and reports for your cooperative
              </p>
            </div>
          </div>
          
          <div className="flex items-center gap-3">
            <Button variant="outline" onClick={generateAnalytics}>
              <RefreshCw className="w-4 h-4 mr-2" />
              Refresh Data
            </Button>
            <Button 
              onClick={() => handleGenerateReport('pdf')}
              disabled={isGenerating}
              className="bg-red-600 hover:bg-red-700 text-white"
            >
              <FileText className="w-4 h-4 mr-2" />
              {isGenerating ? 'Generating...' : 'Export PDF'}
            </Button>
            <Button 
              onClick={() => handleGenerateReport('excel')}
              disabled={isGenerating}
              className="bg-green-600 hover:bg-green-700 text-white"
            >
              <Download className="w-4 h-4 mr-2" />
              {isGenerating ? 'Generating...' : 'Export Excel'}
            </Button>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto p-6 space-y-6">
        {/* Controls */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Filter className="w-5 h-5" />
              Report Configuration
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="text-sm font-medium mb-2 block">Date Range</label>
                <DatePickerWithRange
                  dateRange={selectedDateRange}
                  onDateRangeChange={setSelectedDateRange}
                />
              </div>
              <div>
                <label className="text-sm font-medium mb-2 block">Report Template</label>
                <Select value={selectedTemplate} onValueChange={setSelectedTemplate}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="daily_operations">Daily Operations</SelectItem>
                    <SelectItem value="monthly_financial">Monthly Financial</SelectItem>
                    <SelectItem value="member_analytics">Member Analytics</SelectItem>
                    <SelectItem value="risk_assessment">Risk Assessment</SelectItem>
                    <SelectItem value="agent_performance">Agent Performance</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex items-end">
                <Button className="w-full" onClick={generateAnalytics}>
                  <BarChart3 className="w-4 h-4 mr-2" />
                  Generate Analytics
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* KPI Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {kpiCards.map((kpi, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
            >
              <Card className="hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-muted-foreground">{kpi.title}</p>
                      <p className="text-2xl font-bold mt-1">{kpi.value}</p>
                      <p className={`text-sm mt-1 ${kpi.color}`}>{kpi.change}</p>
                    </div>
                    <div className={`w-12 h-12 rounded-full ${kpi.bgColor} ${kpi.color} flex items-center justify-center`}>
                      {kpi.icon}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>

        {/* Analytics Tabs */}
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-6">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="financial">Financial</TabsTrigger>
            <TabsTrigger value="members">Members</TabsTrigger>
            <TabsTrigger value="transactions">Transactions</TabsTrigger>
            <TabsTrigger value="agents">Agents</TabsTrigger>
            <TabsTrigger value="risk">Risk Analysis</TabsTrigger>
          </TabsList>

          {/* Overview Tab */}
          <TabsContent value="overview" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Contribution Trend */}
              <Card>
                <CardHeader>
                  <CardTitle>Contribution Trend</CardTitle>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={300}>
                    <LineChart data={transactionData?.dailyTrend || []}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="date" />
                      <YAxis />
                      <Tooltip formatter={(value) => formatNaira(Number(value))} />
                      <Line 
                        type="monotone" 
                        dataKey="volume" 
                        stroke="#1A73E8" 
                        strokeWidth={2}
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>

              {/* Member Distribution */}
              <Card>
                <CardHeader>
                  <CardTitle>Member Status Distribution</CardTitle>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={300}>
                    <RechartsPieChart>
                      <Pie
                        data={[
                          { name: 'Active', value: memberData?.activeMembers || 0, color: '#34A853' },
                          { name: 'Inactive', value: memberData?.inactiveMembers || 0, color: '#FF7F50' },
                          { name: 'Defaulters', value: memberData?.defaultingMembers || 0, color: '#EA4335' }
                        ]}
                        cx="50%"
                        cy="50%"
                        outerRadius={80}
                        dataKey="value"
                        label={({ name, value }) => `${name}: ${value}`}
                      >
                        {[
                          { name: 'Active', value: memberData?.activeMembers || 0, color: '#34A853' },
                          { name: 'Inactive', value: memberData?.inactiveMembers || 0, color: '#FF7F50' },
                          { name: 'Defaulters', value: memberData?.defaultingMembers || 0, color: '#EA4335' }
                        ].map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </RechartsPieChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
            </div>

            {/* Quick Stats */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="text-2xl font-bold text-primary">{transactionData?.totalTransactions || 0}</div>
                  <div className="text-sm text-muted-foreground">Total Transactions</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="text-2xl font-bold text-secondary">{formatNaira(transactionData?.averageTransactionSize || 0)}</div>
                  <div className="text-sm text-muted-foreground">Avg Transaction</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="text-2xl font-bold text-accent">{payoutData?.totalPayouts || 0}</div>
                  <div className="text-sm text-muted-foreground">Total Payouts</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="text-2xl font-bold text-purple-600">{memberData?.kycCompletionRate.toFixed(1) || 0}%</div>
                  <div className="text-sm text-muted-foreground">KYC Completion</div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Financial Tab */}
          <TabsContent value="financial" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Revenue Breakdown</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <span>Total Contributions</span>
                      <span className="font-bold">{formatNaira(financialData?.totalContributions || 0)}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span>Total Payouts</span>
                      <span className="font-bold">{formatNaira(financialData?.totalPayouts || 0)}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span>Commission Earned</span>
                      <span className="font-bold text-green-600">{formatNaira(financialData?.totalCommissions || 0)}</span>
                    </div>
                    <div className="border-t pt-2">
                      <div className="flex justify-between items-center">
                        <span className="font-semibold">Net Revenue</span>
                        <span className="font-bold text-primary">{formatNaira(financialData?.netRevenue || 0)}</span>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Growth Metrics</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between items-center mb-2">
                        <span>Growth Rate</span>
                        <span className="font-bold">{financialData?.growthRate.toFixed(1) || 0}%</span>
                      </div>
                      <Progress value={Math.max(0, Math.min(100, (financialData?.growthRate || 0) + 50))} />
                    </div>
                    <div>
                      <div className="flex justify-between items-center mb-2">
                        <span>Collection Rate</span>
                        <span className="font-bold">{financialData?.collectionRate.toFixed(1) || 0}%</span>
                      </div>
                      <Progress value={financialData?.collectionRate || 0} />
                    </div>
                    <div>
                      <div className="flex justify-between items-center mb-2">
                        <span>New Members</span>
                        <span className="font-bold">{financialData?.newMembers || 0}</span>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle>Payout Trend Analysis</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={400}>
                  <BarChart data={payoutData?.payoutTrend || []}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="date" />
                    <YAxis />
                    <Tooltip formatter={(value) => formatNaira(Number(value))} />
                    <Bar dataKey="amount" fill="#34A853" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Members Tab */}
          <TabsContent value="members" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Member Demographics</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-semibold mb-2">Age Distribution</h4>
                      {Object.entries(memberData?.ageDistribution || {}).map(([age, count]) => (
                        <div key={age} className="flex justify-between items-center">
                          <span>{age}</span>
                          <span className="font-medium">{count}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Geographic Distribution</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {Object.entries(memberData?.membersByState || {}).map(([state, count]) => (
                      <div key={state} className="flex justify-between items-center">
                        <span>{state}</span>
                        <div className="flex items-center gap-2">
                          <div className="w-20 bg-gray-200 rounded-full h-2">
                            <div 
                              className="bg-primary h-2 rounded-full" 
                              style={{ width: `${(count / (memberData?.totalMembers || 1)) * 100}%` }}
                            />
                          </div>
                          <span className="text-sm font-medium">{count}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle>Member Tier Distribution</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <RechartsPieChart>
                    <Pie
                      data={Object.entries(memberData?.membersByTier || {}).map(([tier, count]) => ({
                        name: tier,
                        value: count,
                        color: chartColors[Object.keys(memberData?.membersByTier || {}).indexOf(tier)]
                      }))}
                      cx="50%"
                      cy="50%"
                      outerRadius={80}
                      dataKey="value"
                      label={({ name, value }) => `${name}: ${value}`}
                    >
                      {Object.entries(memberData?.membersByTier || {}).map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={chartColors[index]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </RechartsPieChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Transactions Tab */}
          <TabsContent value="transactions" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Transaction Methods</CardTitle>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={300}>
                    <RechartsPieChart>
                      <Pie
                        data={Object.entries(transactionData?.transactionsByMethod || {}).map(([method, count]) => ({
                          name: method.replace('_', ' '),
                          value: count,
                          color: chartColors[Object.keys(transactionData?.transactionsByMethod || {}).indexOf(method)]
                        }))}
                        cx="50%"
                        cy="50%"
                        outerRadius={80}
                        dataKey="value"
                        label={({ name, value }) => `${name}: ${value}`}
                      >
                        {Object.entries(transactionData?.transactionsByMethod || {}).map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={chartColors[index]} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </RechartsPieChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Transaction Status</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {Object.entries(transactionData?.transactionsByStatus || {}).map(([status, count]) => (
                      <div key={status} className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          {status === 'completed' && <CheckCircle className="w-4 h-4 text-green-600" />}
                          {status === 'pending' && <Clock className="w-4 h-4 text-yellow-600" />}
                          {status === 'failed' && <AlertTriangle className="w-4 h-4 text-red-600" />}
                          <span className="capitalize">{status}</span>
                        </div>
                        <Badge variant="secondary">{count}</Badge>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle>Daily Transaction Volume</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={400}>
                  <BarChart data={transactionData?.dailyTrend || []}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="date" />
                    <YAxis />
                    <Tooltip formatter={(value) => formatNaira(Number(value))} />
                    <Bar dataKey="volume" fill="#1A73E8" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Agents Tab */}
          <TabsContent value="agents" className="space-y-6">
            <div className="grid grid-cols-1 gap-6">
              {agentData.map((agent, index) => (
                <Card key={agent.agentId}>
                  <CardHeader>
                    <CardTitle className="flex items-center justify-between">
                      <span>{agent.agentName}</span>
                      <Badge 
                        className={
                          agent.performanceRating === 'excellent' ? 'bg-green-500' :
                          agent.performanceRating === 'good' ? 'bg-blue-500' :
                          agent.performanceRating === 'average' ? 'bg-yellow-500' : 'bg-red-500'
                        }
                      >
                        {agent.performanceRating}
                      </Badge>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      <div>
                        <p className="text-sm text-muted-foreground">Assigned Members</p>
                        <p className="text-xl font-bold">{agent.assignedMembers}</p>
                      </div>
                      <div>
                        <p className="text-sm text-muted-foreground">Total Collections</p>
                        <p className="text-xl font-bold">{formatNaira(agent.totalCollections)}</p>
                      </div>
                      <div>
                        <p className="text-sm text-muted-foreground">Collection Rate</p>
                        <p className="text-xl font-bold">{agent.collectionRate.toFixed(1)}%</p>
                      </div>
                      <div>
                        <p className="text-sm text-muted-foreground">Commission Earned</p>
                        <p className="text-xl font-bold">{formatNaira(agent.commissionsEarned)}</p>
                      </div>
                    </div>
                    <div className="mt-4">
                      <div className="flex justify-between items-center mb-2">
                        <span className="text-sm">Performance Score</span>
                        <span className="text-sm font-medium">{agent.collectionRate.toFixed(1)}%</span>
                      </div>
                      <Progress value={agent.collectionRate} />
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          {/* Risk Analysis Tab */}
          <TabsContent value="risk" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Risk Metrics</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between items-center mb-2">
                        <span>Default Rate</span>
                        <span className="font-bold text-red-600">{riskData?.defaultRate.toFixed(1) || 0}%</span>
                      </div>
                      <Progress value={riskData?.defaultRate || 0} className="bg-red-100" />
                    </div>
                    <div>
                      <div className="flex justify-between items-center mb-2">
                        <span>Late Payment Rate</span>
                        <span className="font-bold text-orange-600">{riskData?.latePaymentRate.toFixed(1) || 0}%</span>
                      </div>
                      <Progress value={riskData?.latePaymentRate || 0} className="bg-orange-100" />
                    </div>
                    <div>
                      <div className="flex justify-between items-center mb-2">
                        <span>Compliance Score</span>
                        <span className="font-bold text-green-600">{riskData?.complianceScore.toFixed(0) || 0}/100</span>
                      </div>
                      <Progress value={riskData?.complianceScore || 0} className="bg-green-100" />
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Risk Distribution</CardTitle>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={300}>
                    <RechartsPieChart>
                      <Pie
                        data={Object.entries(riskData?.riskDistribution || {}).map(([risk, count]) => ({
                          name: risk,
                          value: count,
                          color: risk === 'Low Risk' ? '#34A853' : risk === 'Medium Risk' ? '#FF7F50' : '#EA4335'
                        }))}
                        cx="50%"
                        cy="50%"
                        outerRadius={80}
                        dataKey="value"
                        label={({ name, value }) => `${name}: ${value}`}
                      >
                        {Object.entries(riskData?.riskDistribution || {}).map(([risk, count], index) => (
                          <Cell 
                            key={`cell-${index}`} 
                            fill={risk === 'Low Risk' ? '#34A853' : risk === 'Medium Risk' ? '#FF7F50' : '#EA4335'} 
                          />
                        ))}
                      </Pie>
                      <Tooltip />
                    </RechartsPieChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="text-2xl font-bold text-red-600">{riskData?.flaggedMembers || 0}</div>
                  <div className="text-sm text-muted-foreground">Flagged Members</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="text-2xl font-bold text-orange-600">{riskData?.suspiciousTransactions || 0}</div>
                  <div className="text-sm text-muted-foreground">Suspicious Transactions</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="text-2xl font-bold text-yellow-600">{riskData?.amlAlerts || 0}</div>
                  <div className="text-sm text-muted-foreground">AML Alerts</div>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4 text-center">
                  <div className="text-2xl font-bold text-green-600">{riskData?.complianceScore.toFixed(0) || 0}</div>
                  <div className="text-sm text-muted-foreground">Compliance Score</div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}