'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/shadcn/card';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { SurveyStatisticsData } from '../schemas/statistics';

interface SurveyOverviewProps {
  data: SurveyStatisticsData | undefined;
}

export function SurveyOverview({ data }: SurveyOverviewProps) {
  if (!data) return null;

  const { totalSurveys, totalResponses, completionRate, surveysByMonth } = data;

  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total de Encuestas</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{totalSurveys}</div>
          <p className="text-xs text-muted-foreground">
            Encuestas creadas en la plataforma
          </p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total de Respuestas</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{totalResponses}</div>
          <p className="text-xs text-muted-foreground">
            Respuestas recibidas en todas las encuestas
          </p>
        </CardContent>
      </Card>
      <Card>
        {/* <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Tasa de Completado</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{totalSurveys/totalResponses}</div>
          <p className="text-xs text-muted-foreground">
            Porcentaje de encuestas completadas
          </p>
        </CardContent> */}
      </Card>
      
      <Card className="col-span-full">
        <CardHeader>
          <CardTitle>Encuestas por Mes</CardTitle>
          <CardDescription>Distribución de encuestas creadas por mes</CardDescription>
        </CardHeader>
        <CardContent className="h-80">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              data={surveysByMonth}
              margin={{
                top: 5,
                right: 30,
                left: 20,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip wrapperStyle={{color: '#000', fontWeight: 'bold' }}/>
              <Legend />
              <Bar dataKey="count" fill="#8884d8" name="Encuestas" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  );
}