'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { MathBlock } from '@/components/math/MathFormula';
import { Clock, Target, TrendingUp } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * Exercise difficulty levels
 */
export type ExerciseDifficulty = 'easy' | 'medium' | 'hard' | 'expert';

/**
 * Exercise status
 */
export type ExerciseStatus = 'not-started' | 'in-progress' | 'completed' | 'perfect';

/**
 * Exercise data interface
 */
export interface Exercise {
  id: string;
  title: string;
  description: string;
  question: string;
  difficulty: ExerciseDifficulty;
  points: number;
  timeLimit?: number; // in seconds
  hints: string[];
  status?: ExerciseStatus;
  attempts?: number;
  bestScore?: number;
}

/**
 * ExerciseCard component props
 */
export interface ExerciseCardProps {
  /**
   * Exercise data
   */
  exercise: Exercise;

  /**
   * Click handler
   */
  onClick?: () => void;

  /**
   * Additional CSS classes
   */
  className?: string;

  /**
   * Compact mode (less details)
   */
  compact?: boolean;
}

/**
 * Difficulty badge colors
 */
const difficultyColors: Record<ExerciseDifficulty, { bg: string; text: string; border: string }> = {
  easy: { bg: 'bg-green-50 dark:bg-green-950', text: 'text-green-700 dark:text-green-300', border: 'border-green-200 dark:border-green-800' },
  medium: { bg: 'bg-yellow-50 dark:bg-yellow-950', text: 'text-yellow-700 dark:text-yellow-300', border: 'border-yellow-200 dark:border-yellow-800' },
  hard: { bg: 'bg-orange-50 dark:bg-orange-950', text: 'text-orange-700 dark:text-orange-300', border: 'border-orange-200 dark:border-orange-800' },
  expert: { bg: 'bg-red-50 dark:bg-red-950', text: 'text-red-700 dark:text-red-300', border: 'border-red-200 dark:border-red-800' },
};

/**
 * Status badge colors
 */
const statusColors: Record<ExerciseStatus, { bg: string; text: string; icon: string }> = {
  'not-started': { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-600 dark:text-gray-400', icon: '○' },
  'in-progress': { bg: 'bg-blue-100 dark:bg-blue-800', text: 'text-blue-600 dark:text-blue-400', icon: '◐' },
  'completed': { bg: 'bg-green-100 dark:bg-green-800', text: 'text-green-600 dark:text-green-400', icon: '✓' },
  'perfect': { bg: 'bg-purple-100 dark:bg-purple-800', text: 'text-purple-600 dark:text-purple-400', icon: '★' },
};

/**
 * ExerciseCard component - displays exercise information in a card format
 */
export function ExerciseCard({ exercise, onClick, className, compact = false }: ExerciseCardProps) {
  const difficultyColor = difficultyColors[exercise.difficulty];
  const statusColor = exercise.status ? statusColors[exercise.status] : null;

  return (
    <Card
      className={cn(
        'group cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-[1.02]',
        onClick && 'hover:border-primary',
        className
      )}
      onClick={onClick}
    >
      <CardHeader className={cn(compact && 'pb-3')}>
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 space-y-2">
            <div className="flex items-center gap-2 flex-wrap">
              <CardTitle className="text-xl group-hover:text-primary transition-colors">
                {exercise.title}
              </CardTitle>
              <Badge
                variant="outline"
                className={cn(
                  'text-xs font-semibold capitalize',
                  difficultyColor.bg,
                  difficultyColor.text,
                  difficultyColor.border
                )}
              >
                {exercise.difficulty}
              </Badge>
              {statusColor && (
                <Badge
                  variant="outline"
                  className={cn('text-xs font-semibold', statusColor.bg, statusColor.text)}
                >
                  <span className="mr-1">{statusColor.icon}</span>
                  {exercise.status?.replace('-', ' ')}
                </Badge>
              )}
            </div>
            {!compact && (
              <CardDescription className="text-sm text-muted-foreground">
                {exercise.description}
              </CardDescription>
            )}
          </div>
        </div>
      </CardHeader>

      {!compact && (
        <CardContent className="space-y-4">
          {/* Question preview */}
          <div className="bg-muted/50 rounded-lg p-4 border">
            <MathBlock formula={exercise.question} />
          </div>

          {/* Exercise metadata */}
          <div className="flex items-center gap-4 text-sm text-muted-foreground flex-wrap">
            <div className="flex items-center gap-1.5">
              <Target className="h-4 w-4" />
              <span className="font-medium text-foreground">{exercise.points} pts</span>
            </div>

            {exercise.timeLimit && (
              <div className="flex items-center gap-1.5">
                <Clock className="h-4 w-4" />
                <span>{Math.floor(exercise.timeLimit / 60)}m {exercise.timeLimit % 60}s</span>
              </div>
            )}

            {exercise.bestScore !== undefined && exercise.bestScore > 0 && (
              <div className="flex items-center gap-1.5">
                <TrendingUp className="h-4 w-4" />
                <span>Best: {exercise.bestScore}%</span>
              </div>
            )}

            {exercise.attempts !== undefined && exercise.attempts > 0 && (
              <div className="flex items-center gap-1.5">
                <span>Attempts: {exercise.attempts}</span>
              </div>
            )}

            {exercise.hints.length > 0 && (
              <div className="flex items-center gap-1.5">
                <span>Hints: {exercise.hints.length}</span>
              </div>
            )}
          </div>
        </CardContent>
      )}

      {compact && (
        <CardContent className="pt-0">
          <div className="flex items-center gap-3 text-sm text-muted-foreground">
            <div className="flex items-center gap-1.5">
              <Target className="h-4 w-4" />
              <span className="font-medium text-foreground">{exercise.points} pts</span>
            </div>

            {exercise.timeLimit && (
              <div className="flex items-center gap-1.5">
                <Clock className="h-4 w-4" />
                <span>{Math.floor(exercise.timeLimit / 60)}m</span>
              </div>
            )}

            {exercise.hints.length > 0 && (
              <span>{exercise.hints.length} hints</span>
            )}
          </div>
        </CardContent>
      )}
    </Card>
  );
}
