story-generator/src/components/dashboard/WritingMetricsSection.tsx

import React from 'react';
import { BookOpen, Clock, TrendingUp, Award, Target, Brain, Gauge, Sparkles, Puzzle, Pencil, HelpCircle } from 'lucide-react';
import { MetricCard } from './MetricCard';
import type { WritingMetrics } from '@/types/metrics';

interface WritingMetricsSectionProps {
  data: WritingMetrics;
  className?: string;
}

const MAIN_METRICS = [
  {
    key: 'totalEssays',
    title: 'Total de Redações',
    getValue: (data: WritingMetrics) => data.totalEssays,
    icon: BookOpen,
    iconColor: 'text-purple-600',
    iconBgColor: 'bg-purple-100'
  },
  {
    key: 'averageScore',
    title: 'Nota Média',
    getValue: (data: WritingMetrics) => `${data.averageScore}%`,
    icon: TrendingUp,
    iconColor: 'text-green-600',
    iconBgColor: 'bg-green-100'
  },
  {
    key: 'totalEssaysTime',
    title: 'Tempo de Escrita',
    getValue: (data: WritingMetrics) => `${data.totalEssaysTime}min`,
    icon: Clock,
    iconColor: 'text-blue-600',
    iconBgColor: 'bg-blue-100'
  },
  {
    key: 'currentWritingLevel',
    title: 'Nível de Escrita',
    getValue: (data: WritingMetrics) => data.currentWritingLevel,
    icon: Award,
    iconColor: 'text-yellow-600',
    iconBgColor: 'bg-yellow-100'
  }
];

const DETAILED_METRICS = [
  {
    key: 'averageAdequacy',
    title: 'Adequação ao Tema',
    getValue: (data: WritingMetrics) => `${data.averageAdequacy}%`,
    icon: Target,
    iconColor: 'text-indigo-600',
    iconBgColor: 'bg-indigo-100',
    tooltip: 'Avalia o quanto sua redação está alinhada com o tema e gênero propostos'
  },
  {
    key: 'averageCoherence',
    title: 'Coerência',
    getValue: (data: WritingMetrics) => `${data.averageCoherence}%`,
    icon: Brain,
    iconColor: 'text-pink-600',
    iconBgColor: 'bg-pink-100',
    tooltip: 'Indica a clareza e lógica no desenvolvimento das ideias do texto'
  },
  {
    key: 'averageCohesion',
    title: 'Coesão',
    getValue: (data: WritingMetrics) => `${data.averageCohesion}%`,
    icon: Puzzle,
    iconColor: 'text-orange-600',
    iconBgColor: 'bg-orange-100',
    tooltip: 'Avalia o uso adequado de conectivos e elementos de ligação entre as partes do texto'
  },
  {
    key: 'averageVocabulary',
    title: 'Vocabulário',
    getValue: (data: WritingMetrics) => `${data.averageVocabulary}%`,
    icon: Sparkles,
    iconColor: 'text-cyan-600',
    iconBgColor: 'bg-cyan-100',
    tooltip: 'Analisa a riqueza e adequação do vocabulário utilizado'
  },
  {
    key: 'averageGrammar',
    title: 'Gramática',
    getValue: (data: WritingMetrics) => `${data.averageGrammar}%`,
    icon: Pencil,
    iconColor: 'text-amber-600',
    iconBgColor: 'bg-amber-100',
    tooltip: 'Avalia o uso correto das regras gramaticais e ortográficas'
  }
];

export function WritingMetricsSection({ data, className = '' }: WritingMetricsSectionProps) {
  return (
    <div className={className}>
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-gray-900 mb-6">Métricas de Escrita</h2>
        
        {/* Métricas Principais */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          {MAIN_METRICS.map(metric => (
            <MetricCard
              key={metric.key}
              title={metric.title}
              value={metric.getValue(data)}
              icon={metric.icon}
              iconColor={metric.iconColor}
              iconBgColor={metric.iconBgColor}
            />
          ))}
        </div>

        {/* Métricas Detalhadas */}
        <div>
          <div className="flex items-center gap-2 mb-4">
            <h3 className="text-lg font-semibold text-gray-900">Métricas Detalhadas de Escrita</h3>
            <div 
              className="text-gray-400 hover:text-gray-600 cursor-help transition-colors" 
              title="Estas métricas são calculadas com base em todas as suas redações, fornecendo uma visão detalhada do seu progresso na escrita"
            >
              <HelpCircle className="h-4 w-4" />
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {DETAILED_METRICS.map(metric => (
              <MetricCard
                key={metric.key}
                title={metric.title}
                value={metric.getValue(data)}
                icon={metric.icon}
                iconColor={metric.iconColor}
                iconBgColor={metric.iconBgColor}
                tooltip={metric.tooltip}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}