/**
 * AI Remark Utilization Report Component
 * Displays AI remark usage statistics and trends
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Zap } from 'lucide-react';
import { AIRemarkUtilization } from '@/services/dashboard.service';
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

interface AIRemarkUtilizationReportProps {
  aiRemarkUtilization: AIRemarkUtilization | null;
}

export function AIRemarkUtilizationReport({ aiRemarkUtilization }: AIRemarkUtilizationReportProps) {
  if (!aiRemarkUtilization) return null;

  return (
    <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="ai-remark-utilization-report">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-3">
          <div className="bg-purple-50 p-2 sm:p-3 rounded-lg">
            <Zap className="h-5 w-5 sm:h-6 sm:w-6 text-purple-600" />
          </div>
          <div>
            <CardTitle className="text-base sm:text-lg lg:text-xl">AI Remark Utilization Report</CardTitle>
            <CardDescription className="text-xs sm:text-sm">AI-generated remarks usage and edits</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        {/* Summary Cards */}
        <div className="grid grid-cols-3 gap-4 mb-6">
          <div className="bg-purple-50 p-4 rounded-lg text-center" data-testid="ai-total-usage">
            <div className="text-sm text-gray-600 mb-1">Total Usage</div>
            <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.totalUsage}</div>
          </div>
          <div className="bg-pink-50 p-4 rounded-lg text-center" data-testid="ai-total-edits">
            <div className="text-sm text-gray-600 mb-1">Total Edits</div>
            <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.totalEdits}</div>
          </div>
          <div className="bg-purple-50 p-4 rounded-lg text-center" data-testid="ai-edit-rate">
            <div className="text-sm text-gray-600 mb-1">Edit Rate</div>
            <div className="text-2xl font-bold text-gray-900">{aiRemarkUtilization.editRate}%</div>
          </div>
        </div>

        {/* Monthly Trends Line Graph */}
        {aiRemarkUtilization.monthlyTrends && aiRemarkUtilization.monthlyTrends.length > 0 && (
          <ResponsiveContainer width="100%" height={250}>
            <LineChart data={aiRemarkUtilization.monthlyTrends}>
              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
              <XAxis dataKey="month" stroke="#999" tick={{ fontSize: 11 }} />
              <YAxis stroke="#999" tick={{ fontSize: 11 }} />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#ffffff',
                  border: '1px solid #e5e7eb',
                  borderRadius: '6px',
                  fontSize: '12px',
                }}
              />
              <Legend
                verticalAlign="bottom"
                height={36}
                iconType="circle"
                wrapperStyle={{ fontSize: '12px', paddingTop: '10px' }}
              />
              <Line
                type="monotone"
                dataKey="aiUsage"
                stroke="#8b5cf6"
                strokeWidth={2}
                name="AI Usage"
                dot={{ fill: '#8b5cf6', r: 4 }}
              />
              <Line
                type="monotone"
                dataKey="manualEdits"
                stroke="#ec4899"
                strokeWidth={2}
                name="Manual Edits"
                dot={{ fill: '#ec4899', r: 4 }}
              />
            </LineChart>
          </ResponsiveContainer>
        )}
      </CardContent>
    </Card>
  );
}

