'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 SurveyResponsesProps {
  data: SurveyStatisticsData | undefined;
}

export function SurveyResponses({ data }: SurveyResponsesProps) {
  if (!data) return null;

  const { responsesByAudience, responseDistribution } = data;
  
  const COLORS = ['#0088FE', '#8884d8', '#00C49F', '#FFBB28', '#FF8042'];

  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Card className="col-span-1">
        <CardHeader>
          <CardTitle>Respuestas por Audiencia</CardTitle>
          <CardDescription>Distribución de respuestas según el tipo de audiencia</CardDescription>
        </CardHeader>
        <CardContent className="h-80">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={responsesByAudience}
                cx="50%"
                cy="50%"
                labelLine={true}
                label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                outerRadius={80}
                fill="#8884d8"
                dataKey="value"
              >
                {responsesByAudience.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
              </Pie>
              <Tooltip formatter={(value, name) => [`${value} respuestas`, name]} />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

      <Card className="col-span-1">
        <CardHeader>
          <CardTitle>Distribución de Respuestas</CardTitle>
          <CardDescription>Cantidad de respuestas por encuesta</CardDescription>
        </CardHeader>
        <CardContent className="h-80">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              data={responseDistribution}
              layout="vertical"
              margin={{
                top: 5,
                right: 30,
                left: 20,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis type="number" />
              <YAxis dataKey="title" type="category" width={150} tick={{ fontSize: 12 }} />
              <Tooltip wrapperStyle={{color: '#000', fontWeight: 'bold' }}/>
              <Legend />
              <Bar dataKey="responses" fill="#8884d8" name="Respuestas" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  );
}