
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer, LineChart, Line } from 'recharts';
import { useTranslation } from "react-i18next";

const weeklyData = [
  { day: 'Mon', calls: 45 },
  { day: 'Tue', calls: 52 },
  { day: 'Wed', calls: 38 },
  { day: 'Thu', calls: 61 },
  { day: 'Fri', calls: 55 },
  { day: 'Sat', calls: 28 },
  { day: 'Sun', calls: 33 },
];

const resolutionData = [
  { week: 'Week 1', rate: 78 },
  { week: 'Week 2', rate: 82 },
  { week: 'Week 3', rate: 85 },
  { week: 'Week 4', rate: 87 },
];

// Data for Performance tab - Average Call Duration by Intent
const callDurationData = [
  { intent: 'Order Status', duration: 125 },
  { intent: 'Product Information', duration: 142 },
  { intent: 'Return Request', duration: 168 },
  { intent: 'Shipping Inquiry', duration: 133 },
  { intent: 'General Support', duration: 172 },
];

// Data for Performance tab - Top Call Intents
const topIntentsData = [
  { name: "Order Status", count: 1247, percentage: 43.8, change: "+5.2%" },
  { name: "Product Information", count: 685, percentage: 24.1, change: "-2.1%" },
  { name: "Return Request", count: 432, percentage: 15.2, change: "+8.7%" },
  { name: "Shipping Inquiry", count: 298, percentage: 10.5, change: "-1.4%" },
  { name: "General Support", count: 185, percentage: 6.5, change: "+12.3%" },
];

// Data for Trends tab - Resolution Rate Trend
const resolutionTrendData = [
  { week: 'Week 1', rate: 78 },
  { week: 'Week 2', rate: 82 },
  { week: 'Week 3', rate: 85 },
  { week: 'Week 4', rate: 87 },
];

// Data for Trends tab - Peak Call Hours
const peakHoursData = [
  { time: '10 AM', calls: 12 },
  { time: '11 AM', calls: 18 },
  { time: '12 PM', calls: 25 },
  { time: '1 PM', calls: 32 },
  { time: '2 PM', calls: 28 },
  { time: '3 PM', calls: 22 },
  { time: '4 PM', calls: 26 },
];

export function AnalyticsContent() {
  const { t } = useTranslation();

  return (
    <div className="flex-1 space-y-6 p-8 bg-slate-900">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-bold tracking-tight text-white">{t('analytics.title')}</h2>
          <p className="text-slate-400">{t('analytics.subtitle')}</p>
        </div>
      </div>

      <Tabs defaultValue="overview" className="space-y-6">
        <TabsList className="bg-slate-800 text-slate-300">
          <TabsTrigger value="overview" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">{t('analytics.tabs.overview')}</TabsTrigger>
          <TabsTrigger value="trends" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">{t('analytics.tabs.trends')}</TabsTrigger>
          <TabsTrigger value="performance" className="data-[state=active]:bg-cyan-500 data-[state=active]:text-white">{t('analytics.tabs.performance')}</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <CardTitle className="text-white">{t('analytics.charts.callVolumeByDay')}</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={weeklyData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                    <XAxis dataKey="day" stroke="#9CA3AF" />
                    <YAxis stroke="#9CA3AF" />
                    <Bar dataKey="calls" fill="#06B6D4" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <CardTitle className="text-white">{t('analytics.charts.resolutionRateOverTime')}</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={resolutionData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                    <XAxis dataKey="week" stroke="#9CA3AF" />
                    <YAxis stroke="#9CA3AF" />
                    <Line type="monotone" dataKey="rate" stroke="#06B6D4" strokeWidth={3} />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </div>

          <Card className="bg-slate-800 border-slate-700">
            <CardHeader>
              <CardTitle className="text-white">{t('analytics.charts.peakCallTimes')}</CardTitle>
              <p className="text-slate-400">{t('analytics.charts.heatmapSubtitle')}</p>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-7 gap-2 text-center">
                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.mon')}</div>
                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.tue')}</div>
                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.wed')}</div>
                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.thu')}</div>
                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.fri')}</div>
                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.sat')}</div>
                <div className="text-slate-400 text-sm font-medium">{t('analytics.weekdays.sun')}</div>
                
                {Array.from({ length: 7 * 24 }, (_, i) => (
                  <div 
                    key={i} 
                    className={`h-4 rounded ${Math.random() > 0.7 ? 'bg-cyan-500' : Math.random() > 0.4 ? 'bg-cyan-700' : 'bg-slate-700'}`}
                  />
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="trends" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <CardTitle className="text-white">{t('analytics.charts.resolutionRateTrend')}</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={resolutionTrendData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                    <XAxis dataKey="week" stroke="#9CA3AF" />
                    <YAxis domain={[0, 100]} stroke="#9CA3AF" />
                    <Line
                      type="monotone"
                      dataKey="rate"
                      stroke="#06B6D4"
                      strokeWidth={3}
                      dot={{ fill: '#06B6D4', strokeWidth: 2, r: 6 }}
                    />
                  </LineChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <CardTitle className="text-white">{t('analytics.charts.peakCallHours')}</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={peakHoursData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                    <XAxis dataKey="time" stroke="#9CA3AF" />
                    <YAxis domain={[0, 35]} stroke="#9CA3AF" />
                    <Bar dataKey="calls" fill="#06B6D4" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="performance" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <CardTitle className="text-white">{t('analytics.charts.avgCallDurationByIntent')}</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={callDurationData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                    <XAxis
                      dataKey="intent"
                      stroke="#9CA3AF"
                      angle={-45}
                      textAnchor="end"
                      height={80}
                      fontSize={12}
                    />
                    <YAxis domain={[0, 180]} stroke="#9CA3AF" />
                    <Bar dataKey="duration" fill="#06B6D4" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <CardTitle className="text-white">{t('analytics.charts.topCallIntents')}</CardTitle>
                <p className="text-slate-400">{t('analytics.charts.last24Hours')}</p>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {topIntentsData.map((intent) => (
                    <div key={intent.name} className="space-y-2">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          <div className="w-3 h-3 bg-cyan-500 rounded-full"></div>
                          <span className="text-white font-medium">{intent.name}</span>
                        </div>
                        
                        <div className="flex items-center gap-4">
                          <span className="text-2xl font-bold text-white">{intent.count}</span>
                          <span className={`text-sm font-medium ${
                            intent.change.startsWith('+') ? 'text-green-500' : 'text-red-500'
                          }`}>
                            {intent.change}
                          </span>
                        </div>
                      </div>
                      
                      <div className="text-sm text-slate-400 text-right">
                        {intent.percentage}%
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}
