'use client';

import Link from 'next/link';
import { BookOpen, Clock, Trophy, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ModuleProgress } from '@/components/modules/ModuleProgress';
import { cn } from '@/lib/utils';
import type { Module, Progress } from '@/types';

interface ModuleCardProps {
  module: Module;
  progress?: Progress;
  className?: string;
}

export function ModuleCard({ module, progress, className }: ModuleCardProps) {
  const isStarted = progress?.isStarted ?? false;
  const isCompleted = progress?.isCompleted ?? false;
  const percentage = progress?.percentage ?? 0;

  const getModuleIcon = () => {
    return <BookOpen className="h-6 w-6" />;
  };

  const getModuleTypeLabel = () => {
    switch (module.type) {
      case 'FUNDAMENTOS':
        return 'Fundamentos';
      case 'SISTEMAS':
        return 'Sistemas';
      case 'APLICACIONES':
        return 'Aplicaciones';
      default:
        return module.type;
    }
  };

  const getModuleTypeColor = () => {
    switch (module.type) {
      case 'FUNDAMENTOS':
        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
      case 'SISTEMAS':
        return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
      case 'APLICACIONES':
        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
      default:
        return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
    }
  };

  return (
    <Card
      className={cn(
        'group transition-all hover:shadow-lg hover:-translate-y-1',
        isCompleted && 'border-primary border-2',
        className
      )}
    >
      <CardHeader>
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div
              className={cn(
                'flex h-12 w-12 items-center justify-center rounded-lg',
                isCompleted
                  ? 'bg-primary text-primary-foreground'
                  : 'bg-primary/10 text-primary'
              )}
            >
              {getModuleIcon()}
            </div>
            <div>
              <CardTitle className="text-lg">{module.name}</CardTitle>
              <span
                className={cn(
                  'mt-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
                  getModuleTypeColor()
                )}
              >
                {getModuleTypeLabel()}
              </span>
            </div>
          </div>
        </div>
        <CardDescription className="line-clamp-2">
          {module.description}
        </CardDescription>
      </CardHeader>

      <CardContent>
        <div className="space-y-3">
          {/* Progress bar */}
          <ModuleProgress percentage={percentage} isCompleted={isCompleted} />

          {/* Stats */}
          <div className="flex items-center gap-4 text-sm text-muted-foreground">
            {progress && (
              <>
                <div className="flex items-center gap-1">
                  <Clock className="h-4 w-4" />
                  <span>{progress.exercisesCompleted} ejercicios</span>
                </div>
                {isCompleted && (
                  <div className="flex items-center gap-1 text-primary">
                    <Trophy className="h-4 w-4" />
                    <span>Completado</span>
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </CardContent>

      <CardFooter>
        <Link href={`/modules/${module.id}`} className="w-full">
          <Button
            variant={isCompleted ? 'outline' : 'default'}
            className="w-full group-hover:bg-primary/90"
          >
            {isStarted ? (
              <>Continuar</>
            ) : isCompleted ? (
              <>Repasar</>
            ) : (
              <>Comenzar</>
            )}
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </Link>
      </CardFooter>
    </Card>
  );
}
