'use client';

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/shadcn/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@repo/shadcn/select';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
import { SurveyStatisticsData } from '../schemas/statistics';

interface SurveyDetailsProps {
  data: SurveyStatisticsData | undefined;
}

export function SurveyDetails({ data }: SurveyDetailsProps) {
  const [selectedSurvey, setSelectedSurvey] = useState<string>('');

  if (!data || !data.surveyDetails || data.surveyDetails.length === 0) {
    return (
      <Card>
        <CardContent className="pt-6">
          <p className="text-center text-muted-foreground">No hay datos detallados disponibles</p>
        </CardContent>
      </Card>
    );
  }

  // Set default selected survey if none is selected
  if (!selectedSurvey && data.surveyDetails.length > 0) {
    setSelectedSurvey(data.surveyDetails?.[0]?.id.toString() ?? '');
  }

  const currentSurvey = data.surveyDetails.find(
    (survey) => survey.id.toString() === selectedSurvey
  );

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

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>Detalles por Encuesta</CardTitle>
          <CardDescription>Análisis detallado de respuestas por encuesta</CardDescription>
        </CardHeader>
        <CardContent>
          <Select value={selectedSurvey} onValueChange={setSelectedSurvey}>
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Selecciona una encuesta" />
            </SelectTrigger>
            <SelectContent>
              {data.surveyDetails.map((survey) => (
                <SelectItem key={survey.id} value={survey.id.toString()}>
                  {survey.title}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </CardContent>
      </Card>

      {currentSurvey && (
        <>
          <div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>{currentSurvey.title}</CardTitle>
                <CardDescription>{currentSurvey.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="font-medium">Total de respuestas:</span>
                    <span>{currentSurvey.totalResponses}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="font-medium">Audiencia objetivo:</span>
                    <span>{currentSurvey.targetAudience}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="font-medium">Fecha de creación:</span>
                    <span>{new Date(currentSurvey.createdAt).toLocaleDateString()}</span>
                  </div>
                  {currentSurvey.closingDate && (
                    <div className="flex justify-between">
                      <span className="font-medium">Fecha de cierre:</span>
                      <span>{new Date(currentSurvey.closingDate).toLocaleDateString()}</span>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

            {currentSurvey.questionStats && currentSurvey.questionStats.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle>Distribución de Respuestas</CardTitle>
                </CardHeader>
                <CardContent className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={currentSurvey.questionStats}
                        cx="50%"
                        cy="50%"
                        labelLine={true}
                        label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="count"
                        nameKey="label"
                      >
                        {currentSurvey.questionStats.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip formatter={(value, name) => [`${value}`, name]} />
                      {/* <Legend /> */}
                    </PieChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
            )}
          </div>
        </>
      )}
    </div>
  );
}