'use client';

import { CheckCircle2, XCircle, AlertCircle, Award, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

/**
 * Feedback types
 */
export type FeedbackType = 'correct' | 'incorrect' | 'partial' | 'error';

/**
 * Exercise feedback data
 */
export interface FeedbackData {
  type: FeedbackType;
  message?: string;
  points?: number;
  correctAnswer?: string;
  explanation?: string;
}

/**
 * ExerciseFeedback component props
 */
export interface ExerciseFeedbackProps {
  /**
   * Feedback data
   */
  feedback: FeedbackData | null;

  /**
   * Try again callback
   */
  onTryAgain?: () => void;

  /**
   * Show solution callback
   */
  onShowSolution?: () => void;

  /**
   * Next exercise callback
   */
  onNext?: () => void;

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

  /**
   * Is the feedback visible?
   */
  show?: boolean;
}

/**
 * Feedback type configurations
 */
const feedbackConfig = {
  correct: {
    bgColor: 'bg-green-50 dark:bg-green-950',
    borderColor: 'border-green-200 dark:border-green-800',
    textColor: 'text-green-800 dark:text-green-200',
    icon: CheckCircle2,
    iconColor: 'text-green-600 dark:text-green-400',
    title: 'Correct!',
  },
  incorrect: {
    bgColor: 'bg-red-50 dark:bg-red-950',
    borderColor: 'border-red-200 dark:border-red-800',
    textColor: 'text-red-800 dark:text-red-200',
    icon: XCircle,
    iconColor: 'text-red-600 dark:text-red-400',
    title: 'Incorrect',
  },
  partial: {
    bgColor: 'bg-yellow-50 dark:bg-yellow-950',
    borderColor: 'border-yellow-200 dark:border-yellow-800',
    textColor: 'text-yellow-800 dark:text-yellow-200',
    icon: AlertCircle,
    iconColor: 'text-yellow-600 dark:text-yellow-400',
    title: 'Partially Correct',
  },
  error: {
    bgColor: 'bg-gray-50 dark:bg-gray-950',
    borderColor: 'border-gray-200 dark:border-gray-800',
    textColor: 'text-gray-800 dark:text-gray-200',
    icon: AlertCircle,
    iconColor: 'text-gray-600 dark:text-gray-400',
    title: 'Error',
  },
};

/**
 * ExerciseFeedback component - displays feedback after answering
 */
export function ExerciseFeedback({
  feedback,
  onTryAgain,
  onShowSolution,
  onNext,
  className,
  show = true,
}: ExerciseFeedbackProps) {
  if (!feedback || !show) {
    return null;
  }

  const config = feedbackConfig[feedback.type];
  const Icon = config.icon;

  return (
    <div
      className={cn(
        'rounded-lg border-2 p-6 animate-in fade-in slide-in-from-bottom-4 duration-300',
        config.bgColor,
        config.borderColor,
        className
      )}
      role="alert"
      aria-live="polite"
    >
      {/* Header */}
      <div className="flex items-start gap-4 mb-4">
        <div className="animate-in zoom-in duration-300 delay-100">
          <Icon className={cn('h-8 w-8', config.iconColor)} />
        </div>

        <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <h3 className={cn('text-lg font-semibold', config.textColor)}>
                {config.title}
              </h3>

              {feedback.points !== undefined && feedback.points > 0 && (
                <div className="flex items-center gap-1 ml-2">
                  <Award className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
                  <span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">
                    +{feedback.points} pts
                  </span>
                </div>
              )}
            </div>

            {feedback.message && (
              <p className={cn('text-sm', config.textColor)}>
                {feedback.message}
              </p>
            )}
        </div>

        {/* Explanation */}
        {feedback.explanation && (
          <div className="mb-4 p-4 bg-white/50 dark:bg-black/20 rounded-lg animate-in fade-in slide-in-from-bottom-2 duration-300 delay-200">
            <p className="text-sm text-muted-foreground">{feedback.explanation}</p>
          </div>
        )}

        {/* Correct Answer */}
        {feedback.correctAnswer && feedback.type === 'incorrect' && (
          <div className="mb-4 p-4 bg-white/50 dark:bg-black/20 rounded-lg animate-in fade-in duration-300 delay-300">
            <p className="text-sm font-medium mb-2">Correct answer:</p>
            <p className="text-sm font-mono">{feedback.correctAnswer}</p>
          </div>
        )}

        {/* Action Buttons */}
        <div className="flex flex-wrap gap-2 animate-in fade-in duration-300 delay-400">
          {feedback.type === 'incorrect' && onTryAgain && (
            <Button
              variant="outline"
              onClick={onTryAgain}
              className={cn('gap-2', config.borderColor)}
            >
              <RefreshCw className="h-4 w-4" />
              Try Again
            </Button>
          )}

          {onShowSolution && feedback.type !== 'correct' && (
            <Button variant="secondary" onClick={onShowSolution}>
              Show Solution
            </Button>
          )}

          {feedback.type === 'correct' && onNext && (
            <Button onClick={onNext} className="gap-2">
              Next Exercise
              <Award className="h-4 w-4" />
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

/**
 * Simplified feedback badge for inline display
 */
export interface FeedbackBadgeProps {
  type: FeedbackType;
  message?: string;
  className?: string;
}

export function FeedbackBadge({ type, message, className }: FeedbackBadgeProps) {
  const config = feedbackConfig[type];
  const Icon = config.icon;

  return (
    <div
      className={cn(
        'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium',
        config.bgColor,
        config.borderColor,
        config.textColor,
        'border',
        className
      )}
    >
      <Icon className={cn('h-4 w-4', config.iconColor)} />
      {message && <span>{message}</span>}
    </div>
  );
}

/**
 * Progress feedback component
 */
export interface ProgressFeedbackProps {
  correct: number;
  total: number;
  percentage: number;
  className?: string;
}

export function ProgressFeedback({ correct, total, percentage, className }: ProgressFeedbackProps) {
  return (
    <div className={cn('flex items-center gap-3', className)}>
      <div className="flex-1 bg-muted rounded-full h-2 overflow-hidden">
        <div
          style={{ width: `${percentage}%` }}
          className={cn(
            'h-full transition-all duration-500 ease-out',
            percentage >= 80 ? 'bg-green-500' : percentage >= 50 ? 'bg-yellow-500' : 'bg-red-500'
          )}
        />
      </div>

      <div className="text-sm font-medium text-muted-foreground min-w-[80px] text-right">
        {correct}/{total} ({percentage}%)
      </div>
    </div>
  );
}
