import React, { useEffect, useState } from 'react';
import { BookOpenCheck, Loader2, PlayCircle } from 'lucide-react';
import { Course } from '../types';
import { getMyLearningCourses } from '../services/db';
import { CourseCoverImage } from '../components/CourseCoverImage';

export const MyLearning: React.FC<{ onPlay: (course: Course) => void }> = ({ onPlay }) => {
  const [courses, setCourses] = useState<Course[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getMyLearningCourses().then(setCourses).catch(() => setCourses([])).finally(() => setLoading(false));
  }, []);

  return (
    <main className="min-h-screen max-w-[1440px] mx-auto pt-28 pb-20 px-6 md:px-12">
      <div className="mb-10">
        <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-orange-400 mb-3"><BookOpenCheck className="w-4 h-4" /> Minha área</div>
        <h1 className="text-3xl md:text-4xl font-bold text-white">Continue aprendendo</h1>
        <p className="mt-2 text-gray-400">Retome suas aulas exatamente de onde parou.</p>
      </div>
      {loading ? <div className="h-64 flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-orange-400" /></div> : courses.length === 0 ? (
        <div className="rounded-2xl border border-white/10 bg-zinc-950/80 py-16 px-6 text-center">
          <BookOpenCheck className="w-10 h-10 text-orange-400 mx-auto mb-4" />
          <h2 className="font-bold text-white text-lg">Você ainda não iniciou nenhum curso</h2>
          <p className="mt-2 text-sm text-gray-400">Escolha uma aula na página de cursos para começar.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
          {courses.map((course) => (
            <button key={course.id} onClick={() => onPlay(course)} className="group overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/80 text-left hover:border-orange-500/50 transition-colors">
              <div className="aspect-video relative overflow-hidden bg-zinc-900"><CourseCoverImage source={course.thumbnail} alt="" className="h-full w-full object-cover opacity-75 transition-opacity group-hover:opacity-100" style={{ transform: `scale(${course.coverImageZoom || 1})`, objectPosition: `${course.coverImagePositionX ?? 50}% ${course.coverImagePositionY ?? 50}%` }} /><div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" /><span className="absolute left-4 bottom-4 inline-flex items-center gap-2 rounded-full bg-orange-500 px-3 py-2 text-xs font-bold text-white"><PlayCircle className="w-4 h-4" /> Continuar</span></div>
              <div className="p-5"><p className="text-xs text-orange-400 font-semibold uppercase tracking-wider">{course.category}</p><h2 className="mt-2 font-bold text-white">{course.title}</h2><div className="mt-4 h-1.5 overflow-hidden rounded-full bg-white/10"><div className="h-full rounded-full bg-orange-500" style={{ width: `${course.progress || 0}%` }} /></div><p className="mt-2 text-xs text-gray-400">{course.progress || 0}% concluído</p></div>
            </button>
          ))}
        </div>
      )}
    </main>
  );
};