import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { supabase } from '@/lib/supabase';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ArrowLeft, CheckCircle2, XCircle } from 'lucide-react';
import { Progress } from '@/components/ui/progress';

interface EssayAnalysis {
  id: string;
  essay_id: string;
  overall_score: number;
  feedback: {
    structure: string;
    content: string;
    language: string;
  };
  strengths: string[];
  improvements: string[];
  suggestions: string;
  criteria_scores: {
    adequacy: number;
    coherence: number;
    cohesion: number;
    vocabulary: number;
    grammar: number;
  };
  created_at: string;
}

interface Essay {
  id: string;
  title: string;
  content: string;
  essay_type: {
    title: string;
  };
  essay_genre: {
    title: string;
  };
}

export function EssayAnalysis() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [analysis, setAnalysis] = useState<EssayAnalysis | null>(null);
  const [essay, setEssay] = useState<Essay | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (id) {
      loadEssayAndAnalysis();
    }
  }, [id]);

  async function loadEssayAndAnalysis() {
    try {
      // Carregar redação
      const { data: essayData, error: essayError } = await supabase
        .from('student_essays')
        .select(`
          *,
          essay_type:essay_types(title),
          essay_genre:essay_genres(title)
        `)
        .eq('id', id)
        .single();

      if (essayError) throw essayError;
      setEssay(essayData);

      // Carregar análise
      const { data: analysisData, error: analysisError } = await supabase
        .from('essay_analyses')
        .select('*')
        .eq('essay_id', id)
        .order('created_at', { ascending: false })
        .limit(1)
        .single();

      if (analysisError) throw analysisError;
      setAnalysis(analysisData);
    } catch (error) {
      console.error('Erro ao carregar dados:', error);
    } finally {
      setLoading(false);
    }
  }

  if (loading) return <div>Carregando...</div>;
  if (!essay || !analysis) return <div>Análise não encontrada</div>;

  return (
    <div className="container mx-auto p-6">
      <div className="flex items-center gap-4 mb-6">
        <Button
          variant="ghost"
          onClick={() => navigate('/aluno/redacoes')}
          className="text-purple-600 hover:text-purple-700"
          trackingId="essay-analysis-back-to-list-button"
        >
          <ArrowLeft className="mr-2 h-4 w-4" />
          Voltar para lista de redações
        </Button>
        <Button
          variant="ghost"
          onClick={() => navigate(`/aluno/redacoes/${id}`)}
          className="text-gray-600 hover:text-gray-900"
          trackingId="essay-analysis-back-to-essay-button"
        >
          <ArrowLeft className="mr-2 h-4 w-4" />
          Voltar para redação
        </Button>
        <div>
          <h1 className="text-3xl font-bold">{essay.title}</h1>
          <p className="text-muted-foreground">
            {essay.essay_type.title} • {essay.essay_genre.title}
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Pontuação Geral */}
        <Card>
          <CardHeader>
            <CardTitle>Pontuação Geral</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-center">
              <div className="text-6xl font-bold text-primary">
                {analysis.overall_score}
              </div>
              <div className="text-2xl ml-1">/100</div>
            </div>
          </CardContent>
        </Card>

        {/* Pontos Fortes */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5 text-success" />
              Pontos Fortes
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="list-disc list-inside space-y-2">
              {analysis.strengths.map((strength, index) => (
                <li key={index} className="text-success">{strength}</li>
              ))}
            </ul>
          </CardContent>
        </Card>

        {/* Pontos a Melhorar */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <XCircle className="h-5 w-5 text-destructive" />
              Pontos a Melhorar
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="list-disc list-inside space-y-2">
              {analysis.improvements.map((improvement, index) => (
                <li key={index} className="text-destructive">{improvement}</li>
              ))}
            </ul>
          </CardContent>
        </Card>

        {/* Feedback Detalhado */}
        <Card className="md:col-span-2">
          <CardHeader>
            <CardTitle>Feedback Detalhado</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <h4 className="font-semibold mb-2">Estrutura</h4>
              <p className="text-muted-foreground">{analysis.feedback.structure}</p>
            </div>
            <div>
              <h4 className="font-semibold mb-2">Conteúdo</h4>
              <p className="text-muted-foreground">{analysis.feedback.content}</p>
            </div>
            <div>
              <h4 className="font-semibold mb-2">Linguagem</h4>
              <p className="text-muted-foreground">{analysis.feedback.language}</p>
            </div>
          </CardContent>
        </Card>

        {/* Critérios de Avaliação */}
        <Card>
          <CardHeader>
            <CardTitle>Critérios de Avaliação</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <div className="flex justify-between mb-1">
                <span>Adequação ao Gênero</span>
                <span>{analysis.criteria_scores.adequacy}%</span>
              </div>
              <Progress value={analysis.criteria_scores.adequacy} />
            </div>
            <div>
              <div className="flex justify-between mb-1">
                <span>Coerência</span>
                <span>{analysis.criteria_scores.coherence}%</span>
              </div>
              <Progress value={analysis.criteria_scores.coherence} />
            </div>
            <div>
              <div className="flex justify-between mb-1">
                <span>Coesão</span>
                <span>{analysis.criteria_scores.cohesion}%</span>
              </div>
              <Progress value={analysis.criteria_scores.cohesion} />
            </div>
            <div>
              <div className="flex justify-between mb-1">
                <span>Vocabulário</span>
                <span>{analysis.criteria_scores.vocabulary}%</span>
              </div>
              <Progress value={analysis.criteria_scores.vocabulary} />
            </div>
            <div>
              <div className="flex justify-between mb-1">
                <span>Gramática</span>
                <span>{analysis.criteria_scores.grammar}%</span>
              </div>
              <Progress value={analysis.criteria_scores.grammar} />
            </div>
          </CardContent>
        </Card>

        {/* Sugestões */}
        <Card className="md:col-span-3">
          <CardHeader>
            <CardTitle>Sugestões para Melhoria</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-muted-foreground whitespace-pre-line">
              {analysis.suggestions}
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}