@hed-hog/lms 0.0.358 → 0.0.364

package/hedhog/frontend/app/courses/[id]/structure/_components/detail-lesson-xp-tab.tsx.ejs

@@ -0,0 +1,1458 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  AlertCircle,
+  BookOpen,
+  Brain,
+  Clock3,
+  Cpu,
+  Loader2,
+  RefreshCw,
+  Zap,
+} from 'lucide-react';
+import { useMemo, useState, type CSSProperties, type ReactNode } from 'react';
+import {
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip as RechartsTooltip,
+} from 'recharts';
+
+import {
+  useLessonXpMapQuery,
+  useRecalculateLessonXpMutation,
+  type LessonXpMapStatus,
+  type LessonXpSegment,
+  type LessonXpSegmentLearningType,
+} from '../_data/use-lesson-xp-map';
+import {
+  resolveXpAreaColor,
+  resolveXpLearningTypeColor,
+  resolveXpSkillColor,
+} from '../_utils/xp-color-config';
+
+interface LessonXpTabProps {
+  lessonId: string;
+  activeTab: string;
+  hasTranscription: boolean;
+}
+
+type XpAreaOption = {
+  id: number;
+  name: string;
+  color: string | null;
+};
+
+type XpSkillOption = {
+  id: number;
+  name: string;
+  xpAreaId: number | null;
+};
+
+type PaginatedResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+};
+
+type DistributionItem = {
+  id: number;
+  label: string;
+  xp: number;
+  percent: number;
+  color: string;
+};
+
+type SegmentView = {
+  id: number;
+  label: string;
+  durationSeconds: number;
+  startSeconds: number;
+  endSeconds: number;
+  xpValue: number;
+  difficulty: LessonXpSegment['difficulty'];
+  shouldGrantXp: boolean;
+  aiSummary: string | null;
+  aiConfidence: number | null;
+  areaLabel: string;
+  areaColor: string;
+  skillLabel: string;
+  skillColor: string;
+  learningTypeLabel: string;
+  learningTypeColor: string;
+  areaBreakdown: Array<{
+    key: number;
+    label: string;
+    percent: number;
+    color: string;
+  }>;
+  skillBreakdown: Array<{
+    key: number;
+    label: string;
+    percent: number;
+    color: string;
+  }>;
+  learningTypeBreakdown: Array<{
+    key: number;
+    label: string;
+    percent: number;
+    color: string;
+  }>;
+  areas: LessonXpSegment['areas'];
+  skills: LessonXpSegment['skills'];
+  learningTypes: LessonXpSegment['learningTypes'];
+};
+
+const chartTooltipStyle = {
+  backgroundColor: '#ffffff',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '10px',
+  fontSize: '12px',
+  boxShadow: '0 18px 36px -20px rgba(15,23,42,0.42)',
+};
+
+const chartTooltipWrapperStyle = {
+  zIndex: 30,
+};
+
+export function LessonXpTab({
+  lessonId,
+  activeTab,
+  hasTranscription,
+}: LessonXpTabProps) {
+  const { currentLocaleCode, request } = useApp();
+  const { data: xpMap, isLoading } = useLessonXpMapQuery(lessonId, activeTab);
+  const {
+    mutate: recalculate,
+    isPending: isRecalculating,
+    error: recalcError,
+  } = useRecalculateLessonXpMutation(lessonId);
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const { data: areaOptions = [] } = useQuery<XpAreaOption[]>({
+    queryKey: ['lms-xp-areas-all'],
+    enabled: activeTab === 'xp',
+    queryFn: async () => {
+      const response = await request<XpAreaOption[]>({
+        url: '/lms/xp/areas/all',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: [],
+  });
+
+  const {
+    data: skillPage = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 1000,
+      lastPage: 1,
+    },
+  } = useQuery<PaginatedResult<XpSkillOption>>({
+    queryKey: ['lms-xp-skills-all'],
+    enabled: activeTab === 'xp',
+    queryFn: async () => {
+      const response = await request<PaginatedResult<XpSkillOption>>({
+        url: '/lms/xp/skills?page=1&pageSize=1000',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 1000,
+      lastPage: 1,
+    },
+  });
+
+  const handleRecalculate = () => {
+    setLocalError(null);
+    recalculate({
+      onError: (msg) => setLocalError(msg),
+    });
+  };
+
+  const displayError = localError ?? recalcError;
+  const isProcessing = xpMap?.status === 'processing';
+
+  const areaLookup = useMemo(
+    () => new Map(areaOptions.map((area) => [area.id, area])),
+    [areaOptions]
+  );
+  const skillLookup = useMemo(
+    () => new Map(skillPage.data.map((skill) => [skill.id, skill])),
+    [skillPage.data]
+  );
+
+  const areaDistribution = useMemo(() => {
+    if (!xpMap) return [];
+    return buildDistributionItems(
+      aggregateAreas(xpMap.segments),
+      xpMap.totalXp,
+      (id) => areaLookup.get(id)?.name ?? `Área ${id}`,
+      (id, index) =>
+        resolveXpAreaColor({
+          areaId: id,
+          index,
+          persistedColor: areaLookup.get(id)?.color,
+        })
+    );
+  }, [areaLookup, xpMap]);
+
+  const skillDistribution = useMemo(() => {
+    if (!xpMap) return [];
+    return buildDistributionItems(
+      aggregateSkills(xpMap.segments),
+      xpMap.totalXp,
+      (id) => skillLookup.get(id)?.name ?? `Skill ${id}`,
+      (id, index) => resolveXpSkillColor({ skillId: id, index })
+    );
+  }, [skillLookup, xpMap]);
+
+  const learningTypeDistribution = useMemo(() => {
+    if (!xpMap) return [];
+    const totals = aggregateLearningTypes(xpMap.segments);
+    return [...totals.entries()].map(([id, item], index) => ({
+      id,
+      label: item.learningType.name,
+      xp: item.xp,
+      percent:
+        xpMap.totalXp > 0 ? Math.round((item.xp / xpMap.totalXp) * 100) : 0,
+      color: resolveXpLearningTypeColor({ learningTypeId: id, index }),
+    }));
+  }, [xpMap]);
+
+  const segmentViews = useMemo<SegmentView[]>(() => {
+    if (!xpMap) return [];
+
+    return xpMap.segments.map((segment, index) => {
+      const primaryArea = pickDominantItem(segment.areas);
+      const primarySkill = pickDominantItem(segment.skills);
+      const primaryLearningType = pickDominantItem(segment.learningTypes);
+
+      const areaId = primaryArea?.xpAreaId ?? null;
+      const skillId = primarySkill?.xpSkillId ?? null;
+      const learningTypeId = primaryLearningType?.xpLearningTypeId ?? null;
+      const areaBreakdown = segment.areas.map((area, areaIndex) => ({
+        key: area.xpAreaId,
+        label: areaLookup.get(area.xpAreaId)?.name ?? `Área ${area.xpAreaId}`,
+        percent: area.weightPercent,
+        color: resolveXpAreaColor({
+          areaId: area.xpAreaId,
+          index: areaIndex,
+          persistedColor: areaLookup.get(area.xpAreaId)?.color,
+        }),
+      }));
+      const skillBreakdown = segment.skills.map((skill, skillIndex) => ({
+        key: skill.xpSkillId,
+        label:
+          skillLookup.get(skill.xpSkillId)?.name ?? `Skill ${skill.xpSkillId}`,
+        percent: skill.weightPercent,
+        color: resolveXpSkillColor({
+          skillId: skill.xpSkillId,
+          index: skillIndex,
+        }),
+      }));
+      const learningTypeBreakdown = segment.learningTypes.map(
+        (learningType, learningTypeIndex) => ({
+          key: learningType.xpLearningTypeId,
+          label: learningType.name ?? `Tipo ${learningType.xpLearningTypeId}`,
+          percent: learningType.weightPercent,
+          color: resolveXpLearningTypeColor({
+            learningTypeId: learningType.xpLearningTypeId,
+            learningTypeSlug: learningType.slug,
+            index: learningTypeIndex,
+          }),
+        })
+      );
+
+      return {
+        id: segment.id,
+        label: `Segmento ${index + 1}`,
+        durationSeconds: Math.max(segment.endSeconds - segment.startSeconds, 1),
+        startSeconds: segment.startSeconds,
+        endSeconds: segment.endSeconds,
+        xpValue: segment.xpValue,
+        difficulty: segment.difficulty,
+        shouldGrantXp: segment.shouldGrantXp,
+        aiSummary: segment.aiSummary,
+        aiConfidence: segment.aiConfidence,
+        areaLabel:
+          areaId !== null
+            ? (areaLookup.get(areaId)?.name ?? `Área ${areaId}`)
+            : 'Sem área',
+        areaColor:
+          areaId !== null
+            ? resolveXpAreaColor({
+                areaId,
+                index,
+                persistedColor: areaLookup.get(areaId)?.color,
+              })
+            : '#64748b',
+        skillLabel:
+          skillId !== null
+            ? (skillLookup.get(skillId)?.name ?? `Skill ${skillId}`)
+            : 'Sem skill',
+        skillColor:
+          skillId !== null
+            ? resolveXpSkillColor({ skillId, index })
+            : '#64748b',
+        learningTypeLabel:
+          learningTypeId !== null
+            ? (primaryLearningType?.name ?? `Tipo ${learningTypeId}`)
+            : 'Sem tipo',
+        learningTypeColor:
+          learningTypeId !== null
+            ? resolveXpLearningTypeColor({ learningTypeId, index })
+            : '#64748b',
+        areaBreakdown,
+        skillBreakdown,
+        learningTypeBreakdown,
+        areas: segment.areas,
+        skills: segment.skills,
+        learningTypes: segment.learningTypes,
+      };
+    });
+  }, [areaLookup, skillLookup, xpMap]);
+
+  if (isLoading) {
+    return <LessonXpSkeleton />;
+  }
+
+  if (!hasTranscription && !xpMap) {
+    return (
+      <div className="flex flex-col items-center gap-3 px-4 py-12 text-center">
+        <BookOpen className="size-8 text-muted-foreground/40" />
+        <p className="text-sm text-muted-foreground">
+          Esta aula ainda não possui transcrição. Gere ou importe a transcrição
+          para calcular o XP com IA.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div className="rounded-2xl border border-border/70 bg-linear-to-br from-background via-background to-muted/30 px-3 py-2.5 shadow-[0_14px_34px_-28px_rgba(15,23,42,0.45)] backdrop-blur-sm sm:px-4">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="flex min-w-0 flex-col gap-2">
+            <div className="flex min-w-0 items-center gap-1.5">
+              {xpMap ? (
+                <>
+                  <Zap className="size-3.5 shrink-0 text-yellow-500" />
+                  <span className="text-sm font-semibold">
+                    {xpMap.totalXp} XP
+                  </span>
+                  <XpStatusBadge status={xpMap.status} />
+                </>
+              ) : (
+                <span className="text-xs text-muted-foreground">
+                  Sem mapa de XP
+                </span>
+              )}
+            </div>
+            {xpMap && (
+              <div className="flex flex-wrap items-center gap-1.5">
+                <MetricPill
+                  label="Segmentos"
+                  value={String(xpMap.segments.length)}
+                />
+                <MetricPill
+                  label="Áreas"
+                  value={String(countUniqueAreas(xpMap.segments))}
+                  tone="sky"
+                />
+                <MetricPill
+                  label="Skills"
+                  value={String(countUniqueSkills(xpMap.segments))}
+                  tone="emerald"
+                />
+                {avgConfidence(xpMap.segments) !== null && (
+                  <MetricPill
+                    label="Confiança"
+                    value={`${Math.round(avgConfidence(xpMap.segments)! * 100)}%`}
+                    tone="violet"
+                  />
+                )}
+              </div>
+            )}
+          </div>
+          <div className="flex shrink-0 flex-col items-end gap-0.5">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleRecalculate}
+              disabled={isRecalculating || isProcessing}
+              className="h-8 rounded-xl border-border/70 bg-background/80 gap-1.5 px-3 text-xs shadow-sm"
+            >
+              {isRecalculating || isProcessing ? (
+                <Loader2 className="size-3 animate-spin" />
+              ) : (
+                <RefreshCw className="size-3" />
+              )}
+              Recalcular XP
+            </Button>
+            {displayError && (
+              <p className="max-w-40 text-right text-[0.65rem] leading-tight text-destructive">
+                {displayError}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {isProcessing && (
+        <div className="flex items-center gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/10 px-2.5 py-1.5 text-xs text-yellow-700 dark:text-yellow-400">
+          <Loader2 className="size-3.5 shrink-0 animate-spin" />
+          Calculando XP com IA...
+        </div>
+      )}
+
+      {xpMap && (
+        <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+          <DistributionCard
+            title="Áreas Macro"
+            description="Distribuição do XP por área macro na aula"
+            icon={<Cpu className="size-4 text-sky-600" />}
+            total={xpMap.totalXp}
+            items={areaDistribution}
+            toneClassName="bg-linear-to-r from-sky-500/10 via-sky-500/5 to-transparent"
+          />
+          <DistributionCard
+            title="Skills"
+            description="Distribuição do XP por skill principal"
+            icon={<Zap className="size-4 text-emerald-600" />}
+            total={xpMap.totalXp}
+            items={skillDistribution}
+            toneClassName="bg-linear-to-r from-emerald-500/10 via-emerald-500/5 to-transparent"
+          />
+          <TimelineCard
+            segmentViews={segmentViews}
+            totalDuration={Math.max(
+              ...segmentViews.map((segment) => segment.endSeconds),
+              0
+            )}
+          />
+          <LearningTypesCard items={learningTypeDistribution} />
+        </div>
+      )}
+
+      {xpMap && (
+        <Card className="border-border/70">
+          <CardHeader className="pb-1.5">
+            <CardTitle className="text-sm font-semibold">
+              Resumo do mapa
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="grid grid-cols-2 gap-x-3 gap-y-1.5 pt-0 text-xs sm:grid-cols-4">
+            <SummaryItem
+              label="Áreas"
+              value={String(countUniqueAreas(xpMap.segments))}
+            />
+            <SummaryItem
+              label="Skills"
+              value={String(countUniqueSkills(xpMap.segments))}
+            />
+            <SummaryItem
+              label="Tipos"
+              value={String(countUniqueLearningTypes(xpMap.segments))}
+            />
+            <SummaryItem
+              label="Segmentos"
+              value={String(xpMap.segments.length)}
+            />
+            {xpMap.generatedAt && (
+              <SummaryItem
+                label="Gerado"
+                value={formatDate(xpMap.generatedAt)}
+              />
+            )}
+            {xpMap.aiModelVersion && (
+              <SummaryItem label="Modelo" value={xpMap.aiModelVersion} />
+            )}
+            {avgConfidence(xpMap.segments) !== null && (
+              <SummaryItem
+                label="Confiança"
+                value={`${Math.round(avgConfidence(xpMap.segments)! * 100)}%`}
+              />
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {!xpMap && !isProcessing && (
+        <div className="flex flex-col items-center gap-2 py-6 text-center">
+          <Brain className="size-7 text-muted-foreground/40" />
+          <p className="text-xs text-muted-foreground">
+            Nenhum mapa de XP calculado.
+          </p>
+        </div>
+      )}
+
+      {xpMap?.processingError && (
+        <div className="flex items-start gap-1.5 rounded-md bg-destructive/10 px-2.5 py-1.5 text-xs text-destructive">
+          <AlertCircle className="mt-0.5 size-3.5 shrink-0" />
+          <span>{xpMap.processingError}</span>
+        </div>
+      )}
+
+      {xpMap && xpMap.segments.length > 0 && !isProcessing && (
+        <>
+          <SegmentsSection
+            segments={segmentViews}
+            areaLookup={areaLookup}
+            skillLookup={skillLookup}
+            locale={currentLocaleCode || 'pt-BR'}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+function LessonXpSkeleton() {
+  return (
+    <div className="flex flex-col gap-3 p-1">
+      <div className="flex items-center justify-between gap-2">
+        <Skeleton className="h-5 w-24 rounded-full" />
+        <Skeleton className="h-7 w-28 rounded-md" />
+      </div>
+      <div className="grid gap-3 xl:grid-cols-[1fr_1fr]">
+        <Skeleton className="h-72 rounded-xl" />
+        <Skeleton className="h-72 rounded-xl" />
+        <Skeleton className="h-28 rounded-xl xl:col-span-2" />
+      </div>
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div
+          key={index}
+          className="flex flex-col gap-2 rounded-lg border bg-muted/20 p-3"
+        >
+          <div className="flex items-center justify-between gap-2">
+            <Skeleton className="h-3 w-32" />
+            <Skeleton className="h-4 w-14 rounded-full" />
+          </div>
+          <Skeleton className="h-3 w-3/4" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-3 w-16" />
+            <Skeleton className="h-3 w-20" />
+            <Skeleton className="h-3 w-12" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function DistributionCard({
+  title,
+  description,
+  icon,
+  total,
+  items,
+  toneClassName,
+}: {
+  title: string;
+  description: string;
+  icon: ReactNode;
+  total: number;
+  items: DistributionItem[];
+  toneClassName: string;
+}) {
+  if (!items.length) return null;
+
+  return (
+    <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
+      <CardHeader
+        className={cn(
+          'space-y-0.5 border-b border-border/60 pt-3 pb-1.5!',
+          toneClassName
+        )}
+      >
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0">
+            <CardTitle className="text-sm font-semibold">{title}</CardTitle>
+            <p className="text-xs text-muted-foreground">{description}</p>
+          </div>
+          <div className="flex items-center gap-2 rounded-full border border-white/40 bg-background/85 px-2 py-1 shadow-sm backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-background hover:shadow-md dark:border-white/10 dark:bg-background/70">
+            {icon}
+            <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+              {items.length} itens
+            </span>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2.5 px-2.5 py-2.5 sm:px-3">
+        <div className="relative h-44">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={items}
+                cx="50%"
+                cy="50%"
+                innerRadius={46}
+                outerRadius={68}
+                paddingAngle={2.5}
+                dataKey="xp"
+                strokeWidth={3}
+                stroke="hsl(var(--background))"
+              >
+                {items.map((entry) => (
+                  <Cell key={entry.id} fill={entry.color} />
+                ))}
+              </Pie>
+              <RechartsTooltip
+                wrapperStyle={chartTooltipWrapperStyle}
+                content={<DistributionTooltip />}
+              />
+            </PieChart>
+          </ResponsiveContainer>
+          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+            <span className="text-xl font-bold text-foreground">{total}</span>
+            <span className="text-[10px] text-muted-foreground">XP total</span>
+          </div>
+        </div>
+
+        <div className="grid max-h-40 grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-1.5 overflow-auto pr-1">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className="flex min-w-0 items-start gap-2 rounded-xl border border-border/50 bg-muted/15 px-2 py-1.5 transition-all duration-200 hover:-translate-y-0.5 hover:border-border hover:bg-background/90 hover:shadow-md"
+            >
+              <span
+                className="mt-1 size-2 shrink-0 rounded-sm"
+                style={{ backgroundColor: item.color }}
+              />
+              <div className="flex min-w-0 flex-col">
+                <span className="wrap-break-word text-xs font-medium leading-tight text-foreground">
+                  {item.label}
+                </span>
+                <span className="text-[10px] text-muted-foreground">
+                  {item.xp} XP ({item.percent}%)
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function TimelineCard({
+  segmentViews,
+  totalDuration,
+}: {
+  segmentViews: SegmentView[];
+  totalDuration: number;
+}) {
+  if (!segmentViews.length) return null;
+
+  const safeDuration = Math.max(totalDuration, 1);
+
+  return (
+    <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)] xl:col-span-2">
+      <CardHeader className="border-b border-border/60 bg-linear-to-r from-slate-500/10 via-slate-500/5 to-transparent pt-3 pb-1.5!">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <CardTitle className="text-sm font-semibold">
+              Timeline da aula
+            </CardTitle>
+            <p className="text-xs text-muted-foreground">
+              Segmentos proporcionais ao tempo total, com pesos visuais por
+              área, skill e tipo
+            </p>
+          </div>
+          <div className="flex items-center gap-2 rounded-full border border-white/40 bg-background/85 px-2 py-1 shadow-sm backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-background hover:shadow-md dark:border-white/10 dark:bg-background/70">
+            <Clock3 className="size-4 text-muted-foreground" />
+            <span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+              {segmentViews.length} blocos
+            </span>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="px-2.5 py-2.5 sm:px-3">
+        <div className="rounded-xl border border-border/60 bg-linear-to-br from-muted/35 via-muted/20 to-background p-2.5">
+          <TooltipProvider delayDuration={120}>
+            <div className="flex h-12 items-stretch gap-1 overflow-x-auto rounded-lg">
+              {segmentViews.map((segment) => {
+                const width = Math.max(
+                  4,
+                  (segment.durationSeconds / safeDuration) * 100
+                );
+                return (
+                  <Tooltip key={segment.id}>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className={cn(
+                          'group relative flex min-w-0 flex-col overflow-hidden rounded-md border border-border/60 bg-background/80 text-left outline-none transition-all duration-200 hover:-translate-y-0.5 hover:border-border hover:bg-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
+                          !segment.shouldGrantXp && 'opacity-50'
+                        )}
+                        style={{ flexBasis: `${width}%`, flexGrow: 0 }}
+                        aria-label={`${segment.label} ${formatSeconds(segment.startSeconds)} a ${formatSeconds(segment.endSeconds)} ${segment.xpValue} XP`}
+                      >
+                        <SegmentCompositionRow
+                          items={segment.areaBreakdown}
+                          getKey={(item) => item.key}
+                          getValue={(item) => item.percent}
+                          getColor={(item) => item.color}
+                        />
+                        <SegmentCompositionRow
+                          items={segment.skillBreakdown}
+                          getKey={(item) => item.key}
+                          getValue={(item) => item.percent}
+                          getColor={(item) => item.color}
+                        />
+                        <SegmentCompositionRow
+                          items={segment.learningTypeBreakdown}
+                          getKey={(item) => item.key}
+                          getValue={(item) => item.percent}
+                          getColor={(item) => item.color}
+                        />
+                        <div className="pointer-events-none absolute inset-x-1 bottom-0.5 flex items-center justify-between gap-1 rounded bg-black/45 px-1 py-0.5 text-[9px] font-medium text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">
+                          <span>{formatSeconds(segment.startSeconds)}</span>
+                          <span>{segment.xpValue} XP</span>
+                        </div>
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent
+                      side="top"
+                      hideArrow
+                      className="max-w-72 rounded-lg border border-border bg-popover px-3 py-2 text-popover-foreground shadow-lg"
+                    >
+                      <SegmentTooltipContent segment={segment} />
+                    </TooltipContent>
+                  </Tooltip>
+                );
+              })}
+            </div>
+          </TooltipProvider>
+          <div className="mt-2 flex items-center justify-between text-[10px] text-muted-foreground">
+            <span>{formatSeconds(0)}</span>
+            <span>{formatSeconds(safeDuration)}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function LearningTypesCard({ items }: { items: DistributionItem[] }) {
+  if (!items.length) return null;
+
+  return (
+    <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)] xl:col-span-2">
+      <CardHeader className="border-b border-border/60 bg-linear-to-r from-violet-500/10 via-violet-500/5 to-transparent pt-3 pb-1.5!">
+        <div className="flex items-center justify-between gap-3">
+          <CardTitle className="text-sm font-semibold">
+            Tipos de aprendizado
+          </CardTitle>
+          <div className="rounded-full border border-white/40 bg-background/85 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground shadow-sm backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-background hover:shadow-md dark:border-white/10 dark:bg-background/70">
+            {items.length} tipos
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] content-start gap-2 px-2.5 py-2.5 sm:px-3">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className="flex h-full flex-col justify-start gap-1.5 rounded-xl border border-border/60 bg-muted/20 px-2.5 py-2 text-xs shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-violet-500/20 hover:bg-background/95 hover:shadow-md"
+          >
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <span className="min-w-0 flex-1 font-medium">{item.label}</span>
+              <span className="font-semibold tabular-nums">{item.xp} XP</span>
+            </div>
+            <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full rounded-full"
+                style={{
+                  width: `${item.percent}%`,
+                  backgroundColor: item.color,
+                }}
+              />
+            </div>
+            <div className="text-[10px] text-muted-foreground">
+              {item.percent}%
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+function SegmentsSection({
+  segments,
+  areaLookup,
+  skillLookup,
+  locale,
+}: {
+  segments: SegmentView[];
+  areaLookup: Map<number, XpAreaOption>;
+  skillLookup: Map<number, XpSkillOption>;
+  locale: string;
+}) {
+  return (
+    <Card className="min-w-0 overflow-hidden border-border/70 bg-card/95 py-0 gap-0! shadow-[0_18px_40px_-32px_rgba(15,23,42,0.45)]">
+      <CardHeader className="border-b border-border/60 bg-linear-to-r from-cyan-500/10 via-cyan-500/5 to-transparent pt-3 pb-1.5!">
+        <div className="flex items-center justify-between gap-3">
+          <CardTitle className="text-sm font-semibold">
+            Segmentos ({segments.length})
+          </CardTitle>
+          <div className="rounded-full border border-white/40 bg-background/85 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground shadow-sm backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-background hover:shadow-md dark:border-white/10 dark:bg-background/70">
+            leitura IA
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2.5 px-2.5 py-2.5 sm:px-3">
+        <TooltipProvider delayDuration={120}>
+          {segments.map((segment) => (
+            <div
+              key={segment.id}
+              className={cn(
+                'flex flex-col gap-2 rounded-2xl border border-border/60 bg-linear-to-br from-background via-background to-muted/25 px-3 py-2.5 text-xs shadow-[0_16px_30px_-24px_rgba(15,23,42,0.45)] transition-all duration-200 hover:-translate-y-0.5 hover:border-cyan-500/15 hover:to-muted/35 hover:shadow-[0_20px_36px_-24px_rgba(15,23,42,0.52)]',
+                !segment.shouldGrantXp && 'opacity-50'
+              )}
+            >
+              <div className="flex flex-wrap items-start justify-between gap-2">
+                <div className="flex min-w-0 flex-col gap-1">
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <span className="rounded-full border border-cyan-500/15 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-cyan-700 transition-all duration-200 hover:bg-cyan-500/15 hover:shadow-sm dark:text-cyan-300">
+                      {segment.label}
+                    </span>
+                    <span className="rounded-full border border-border/60 bg-background/90 px-2 py-0.5 font-mono text-[10px] text-muted-foreground shadow-sm transition-all duration-200 hover:border-border hover:bg-background hover:text-foreground hover:shadow-md">
+                      {formatSeconds(segment.startSeconds)} -{' '}
+                      {formatSeconds(segment.endSeconds)}
+                    </span>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground">
+                    <span className="font-medium text-foreground">
+                      {segment.areaLabel}
+                    </span>
+                    <span className="text-muted-foreground/60">/</span>
+                    <span>{segment.skillLabel}</span>
+                    <span className="text-muted-foreground/60">/</span>
+                    <span>{segment.learningTypeLabel}</span>
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap items-center justify-end gap-1.5">
+                  <span className="rounded-full border border-amber-500/15 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-700 dark:text-amber-300">
+                    {segment.xpValue} XP
+                  </span>
+                  <DifficultyBadge difficulty={segment.difficulty} />
+                  {segment.aiConfidence !== null && (
+                    <span className="rounded-full border border-border/60 bg-background/90 px-2 py-0.5 text-[10px] font-semibold text-muted-foreground shadow-sm">
+                      {Math.round(segment.aiConfidence * 100)}% conf.
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="overflow-hidden rounded-full border border-border/50 bg-muted/40">
+                <div className="flex h-1.5 w-full overflow-hidden">
+                  {buildSegmentComposition(
+                    segment.areaBreakdown,
+                    (item) => item.percent
+                  ).map(({ item, percent }, index) => (
+                    <Tooltip key={`area-${item.key}-${index}`}>
+                      <TooltipTrigger asChild>
+                        <div
+                          className="h-full cursor-help transition-opacity hover:opacity-85"
+                          style={{
+                            width: `${percent}%`,
+                            backgroundColor: item.color,
+                          }}
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent
+                        side="top"
+                        hideArrow
+                        className="rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg"
+                      >
+                        <div className="flex items-center gap-1.5">
+                          <span
+                            className="size-2 rounded-full"
+                            style={{ backgroundColor: item.color }}
+                          />
+                          <span className="font-medium text-foreground">
+                            {item.label}
+                          </span>
+                          <span className="text-muted-foreground">
+                            {Math.round(percent)}%
+                          </span>
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  ))}
+                </div>
+              </div>
+
+              {segment.aiSummary && (
+                <div className="rounded-xl border border-border/50 bg-muted/20 px-2.5 py-2">
+                  <p className="line-clamp-2 leading-relaxed text-muted-foreground">
+                    {segment.aiSummary}
+                  </p>
+                </div>
+              )}
+              <div className="grid gap-1.5 md:grid-cols-2 xl:grid-cols-3">
+                <SegmentBreakdownGroup
+                  title="Áreas"
+                  tone="sky"
+                  items={segment.areaBreakdown.map((area) => ({
+                    key: area.key,
+                    label:
+                      areaLookup.get(area.key)?.name ??
+                      area.label ??
+                      `Área ${area.key}`,
+                    percent: area.percent,
+                    color: area.color,
+                  }))}
+                />
+                <SegmentBreakdownGroup
+                  title="Skills"
+                  tone="emerald"
+                  items={segment.skillBreakdown.map((skill) => ({
+                    key: skill.key,
+                    label:
+                      skillLookup.get(skill.key)?.name ??
+                      skill.label ??
+                      `Skill ${skill.key}`,
+                    percent: skill.percent,
+                    color: skill.color,
+                  }))}
+                />
+                <SegmentBreakdownGroup
+                  title="Tipos"
+                  tone="violet"
+                  items={segment.learningTypeBreakdown.map((learningType) => {
+                    const metadata = segment.learningTypes.find(
+                      (item) => item.xpLearningTypeId === learningType.key
+                    );
+
+                    return {
+                      key: learningType.key,
+                      label:
+                        learningType.label +
+                        (metadata?.multiplier !== undefined
+                          ? ` ${formatMultiplier(metadata.multiplier, locale)}`
+                          : ''),
+                      percent: learningType.percent,
+                      color: learningType.color,
+                    };
+                  })}
+                />
+              </div>
+            </div>
+          ))}
+        </TooltipProvider>
+      </CardContent>
+    </Card>
+  );
+}
+
+function DistributionTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: Array<{
+    name?: string;
+    value?: number;
+    payload?: { color?: string; label?: string; percent?: number };
+  }>;
+}) {
+  if (!active || !payload?.length) return null;
+
+  const entry = payload[0];
+  const label = entry?.payload?.label ?? entry?.name ?? 'Item';
+  const percent = entry?.payload?.percent;
+
+  return (
+    <div
+      className="rounded-xl border border-border bg-white px-3 py-2 text-slate-900 shadow-xl"
+      style={chartTooltipStyle as CSSProperties}
+    >
+      <p className="flex items-center gap-1.5 text-xs text-slate-500">
+        <span
+          className="inline-block size-2 rounded-full"
+          style={{ backgroundColor: entry?.payload?.color }}
+        />
+        {label}
+      </p>
+      <p className="mt-0.5 text-sm font-semibold text-slate-900">
+        {entry?.value} XP
+      </p>
+      {typeof percent === 'number' && (
+        <p className="mt-0.5 text-[11px] text-slate-500">{percent}% do total</p>
+      )}
+    </div>
+  );
+}
+
+function SummaryItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-xl border border-border/50 bg-muted/15 px-2 py-1.5">
+      <div className="text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-0.5 text-sm font-semibold text-foreground">
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function MetricPill({
+  label,
+  value,
+  tone = 'default',
+}: {
+  label: string;
+  value: string;
+  tone?: 'default' | 'sky' | 'emerald' | 'violet';
+}) {
+  const toneClassName =
+    tone === 'sky'
+      ? 'border-sky-500/15 bg-sky-500/10 text-sky-700 dark:text-sky-300'
+      : tone === 'emerald'
+        ? 'border-emerald-500/15 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
+        : tone === 'violet'
+          ? 'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300'
+          : 'border-border/60 bg-muted/40 text-foreground';
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs shadow-sm',
+        toneClassName
+      )}
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.14em] opacity-80">
+        {label}
+      </span>
+      <span className="font-semibold">{value}</span>
+    </div>
+  );
+}
+
+function SegmentBreakdownGroup({
+  title,
+  tone,
+  items,
+}: {
+  title: string;
+  tone: 'sky' | 'emerald' | 'violet';
+  items: Array<{
+    key: number;
+    label: string;
+    percent: number;
+    color: string;
+  }>;
+}) {
+  const toneClassName =
+    tone === 'sky'
+      ? 'border-sky-500/15 bg-sky-500/8'
+      : tone === 'emerald'
+        ? 'border-emerald-500/15 bg-emerald-500/8'
+        : 'border-violet-500/15 bg-violet-500/8';
+
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <div className={cn('rounded-xl border px-2 py-2', toneClassName)}>
+      <div className="mb-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+        {title}
+      </div>
+      <div className="flex flex-wrap gap-1">
+        {items.map((item) => (
+          <span
+            key={item.key}
+            className="inline-flex items-center gap-1.5 rounded-full border border-border/50 bg-background/90 px-2 py-0.5 text-[10px] text-foreground shadow-sm"
+          >
+            <span
+              className="size-1.5 rounded-full"
+              style={{ backgroundColor: item.color }}
+            />
+            <span className="max-w-44 truncate">{item.label}</span>
+            <span className="font-semibold text-muted-foreground">
+              {Math.round(item.percent)}%
+            </span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SegmentCompositionRow<T>({
+  items,
+  getKey,
+  getValue,
+  getColor,
+}: {
+  items: T[];
+  getKey: (item: T) => number;
+  getValue: (item: T) => number | null | undefined;
+  getColor: (item: T, index: number) => string;
+}) {
+  const normalizedItems = buildSegmentComposition(items, getValue);
+
+  if (!normalizedItems.length) {
+    return <div className="h-1.5 bg-muted/60" />;
+  }
+
+  return (
+    <div className="flex h-1.5 w-full overflow-hidden">
+      {normalizedItems.map(({ item, percent }, index) => (
+        <div
+          key={`${getKey(item)}-${index}`}
+          className="h-full"
+          style={{
+            width: `${percent}%`,
+            backgroundColor: getColor(item, index),
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function SegmentTooltipContent({ segment }: { segment: SegmentView }) {
+  return (
+    <div className="flex flex-col gap-2 text-xs">
+      <div className="flex items-center justify-between gap-3">
+        <span className="font-semibold text-foreground">{segment.label}</span>
+        <span className="font-medium text-foreground">
+          {segment.xpValue} XP
+        </span>
+      </div>
+      <div className="text-muted-foreground">
+        {formatSeconds(segment.startSeconds)} -{' '}
+        {formatSeconds(segment.endSeconds)}
+      </div>
+      <div className="grid gap-1.5">
+        <TooltipMetric
+          label="Área macro"
+          value={segment.areaLabel}
+          color={segment.areaColor}
+          breakdown={segment.areaBreakdown}
+        />
+        <TooltipMetric
+          label="Skill"
+          value={segment.skillLabel}
+          color={segment.skillColor}
+          breakdown={segment.skillBreakdown}
+        />
+        <TooltipMetric
+          label="Tipo de aprendizado"
+          value={segment.learningTypeLabel}
+          color={segment.learningTypeColor}
+          breakdown={segment.learningTypeBreakdown}
+        />
+      </div>
+    </div>
+  );
+}
+
+function TooltipMetric({
+  label,
+  value,
+  color,
+  breakdown,
+}: {
+  label: string;
+  value: string;
+  color: string;
+  breakdown: Array<{
+    key: number;
+    label: string;
+    percent: number;
+    color: string;
+  }>;
+}) {
+  return (
+    <div className="grid gap-1">
+      <div className="flex items-center gap-2">
+        <span
+          className="size-2 rounded-full"
+          style={{ backgroundColor: color }}
+        />
+        <span className="min-w-24 text-muted-foreground">{label}</span>
+        <span className="truncate font-medium text-foreground">{value}</span>
+      </div>
+      {breakdown.length > 1 && (
+        <div className="flex flex-wrap gap-1">
+          {breakdown.map((item) => (
+            <span
+              key={item.key}
+              className="inline-flex items-center gap-1 rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 text-[10px] text-muted-foreground"
+            >
+              <span
+                className="size-1.5 rounded-full"
+                style={{ backgroundColor: item.color }}
+              />
+              {item.label} {Math.round(item.percent)}%
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function XpStatusBadge({ status }: { status: LessonXpMapStatus }) {
+  const config: Record<
+    LessonXpMapStatus,
+    { label: string; className: string }
+  > = {
+    pending: { label: 'Pendente', className: 'bg-muted text-muted-foreground' },
+    processing: {
+      label: 'Calculando',
+      className: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
+    },
+    ready: {
+      label: 'Calculado',
+      className: 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-400',
+    },
+    needs_review: {
+      label: 'Revisar',
+      className: 'bg-orange-500/20 text-orange-700 dark:text-orange-400',
+    },
+    approved: {
+      label: 'Aprovado',
+      className: 'bg-blue-500/20 text-blue-700 dark:text-blue-400',
+    },
+    rejected: {
+      label: 'Rejeitado',
+      className: 'bg-destructive/20 text-destructive',
+    },
+  };
+
+  const cfg = config[status] ?? config.pending;
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn('px-1.5 py-0 text-[0.65rem]', cfg.className)}
+    >
+      {cfg.label}
+    </Badge>
+  );
+}
+
+function DifficultyBadge({
+  difficulty,
+}: {
+  difficulty: LessonXpSegment['difficulty'];
+}) {
+  const config = {
+    easy: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+    medium: 'bg-blue-500/10 text-blue-700 dark:text-blue-400',
+    hard: 'bg-orange-500/10 text-orange-700 dark:text-orange-400',
+    expert: 'bg-rose-500/10 text-rose-700 dark:text-rose-400',
+  };
+  const labels = {
+    easy: 'Fácil',
+    medium: 'Médio',
+    hard: 'Difícil',
+    expert: 'Expert',
+  };
+
+  return (
+    <span
+      className={cn('rounded px-1 py-0 text-[0.65rem]', config[difficulty])}
+    >
+      {labels[difficulty]}
+    </span>
+  );
+}
+
+function aggregateAreas(segments: LessonXpSegment[]): Map<number, number> {
+  const map = new Map<number, number>();
+  for (const segment of segments) {
+    if (!segment.shouldGrantXp) continue;
+    for (const area of segment.areas) {
+      const prev = map.get(area.xpAreaId) ?? 0;
+      map.set(
+        area.xpAreaId,
+        prev + Math.round(segment.xpValue * (area.weightPercent / 100))
+      );
+    }
+  }
+  return new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
+}
+
+function aggregateSkills(segments: LessonXpSegment[]): Map<number, number> {
+  const map = new Map<number, number>();
+  for (const segment of segments) {
+    if (!segment.shouldGrantXp) continue;
+    for (const skill of segment.skills) {
+      const prev = map.get(skill.xpSkillId) ?? 0;
+      map.set(
+        skill.xpSkillId,
+        prev + Math.round(segment.xpValue * (skill.weightPercent / 100))
+      );
+    }
+  }
+  return new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
+}
+
+function aggregateLearningTypes(
+  segments: LessonXpSegment[]
+): Map<
+  number,
+  { xp: number; count: number; learningType: LessonXpSegmentLearningType }
+> {
+  const map = new Map<
+    number,
+    { xp: number; count: number; learningType: LessonXpSegmentLearningType }
+  >();
+  for (const segment of segments) {
+    if (!segment.shouldGrantXp) continue;
+    for (const learningType of segment.learningTypes) {
+      const prev = map.get(learningType.xpLearningTypeId) ?? {
+        xp: 0,
+        count: 0,
+        learningType,
+      };
+      map.set(learningType.xpLearningTypeId, {
+        xp:
+          prev.xp +
+          Math.round(segment.xpValue * (learningType.weightPercent / 100)),
+        count: prev.count + 1,
+        learningType: prev.learningType,
+      });
+    }
+  }
+  return new Map([...map.entries()].sort((a, b) => b[1].xp - a[1].xp));
+}
+
+function buildDistributionItems(
+  aggregated: Map<number, number>,
+  totalXp: number,
+  resolveLabel: (id: number) => string,
+  resolveColor: (id: number, index: number) => string
+): DistributionItem[] {
+  return [...aggregated.entries()].map(([id, xp], index) => ({
+    id,
+    label: resolveLabel(id),
+    xp,
+    percent: totalXp > 0 ? Math.round((xp / totalXp) * 100) : 0,
+    color: resolveColor(id, index),
+  }));
+}
+
+function pickDominantItem<T extends { weightPercent: number }>(
+  items: T[]
+): T | null {
+  if (!items.length) return null;
+  return (
+    [...items].sort((a, b) => b.weightPercent - a.weightPercent)[0] ?? null
+  );
+}
+
+function buildSegmentComposition<T>(
+  items: T[],
+  getValue: (item: T) => number | null | undefined
+) {
+  if (!items.length) return [];
+
+  const resolved = items.map((item) => ({
+    item,
+    value: Math.max(getValue(item) ?? 0, 0),
+  }));
+  const total = resolved.reduce((sum, entry) => sum + entry.value, 0);
+
+  if (total > 0) {
+    return resolved.map((entry) => ({
+      item: entry.item,
+      percent: (entry.value / total) * 100,
+    }));
+  }
+
+  const fallbackPercent = 100 / resolved.length;
+  return resolved.map((entry) => ({
+    item: entry.item,
+    percent: fallbackPercent,
+  }));
+}
+
+function countUniqueAreas(segments: LessonXpSegment[]): number {
+  const ids = new Set<number>();
+  for (const segment of segments)
+    segment.areas.forEach((area) => ids.add(area.xpAreaId));
+  return ids.size;
+}
+
+function countUniqueSkills(segments: LessonXpSegment[]): number {
+  const ids = new Set<number>();
+  for (const segment of segments)
+    segment.skills.forEach((skill) => ids.add(skill.xpSkillId));
+  return ids.size;
+}
+
+function countUniqueLearningTypes(segments: LessonXpSegment[]): number {
+  const ids = new Set<number>();
+  for (const segment of segments) {
+    segment.learningTypes.forEach((learningType) =>
+      ids.add(learningType.xpLearningTypeId)
+    );
+  }
+  return ids.size;
+}
+
+function avgConfidence(segments: LessonXpSegment[]): number | null {
+  const values = segments
+    .map((segment) => segment.aiConfidence)
+    .filter((value): value is number => value !== null);
+  if (!values.length) return null;
+  return values.reduce((sum, value) => sum + value, 0) / values.length;
+}
+
+function formatSeconds(seconds: number): string {
+  const minutes = Math.floor(seconds / 60);
+  const restSeconds = Math.floor(seconds % 60);
+  return `${String(minutes).padStart(2, '0')}:${String(restSeconds).padStart(2, '0')}`;
+}
+
+function formatDate(iso: string): string {
+  try {
+    return new Date(iso).toLocaleDateString('pt-BR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function formatMultiplier(value: number, locale: string): string {
+  const fractionDigits = Number.isInteger(value) ? 0 : 2;
+  return `x${new Intl.NumberFormat(locale, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: 2,
+  }).format(value)}`;
+}