import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import { useMyEnrolledCourses } from "@/hooks/queries";
import { BookOpen, Users, Play } from "lucide-react";
import AiTipBanner from "@/components/ai/AiTipBanner";

export default function StudentCourses() {
  const { data: enrolledData, isLoading } = useMyEnrolledCourses();
  const myCourses = enrolledData?.items ?? [];
  if (isLoading) return <div className="flex items-center justify-center min-h-[400px]"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" /></div>;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">My Courses</h1>
        <p className="text-muted-foreground">Browse and continue your enrolled courses.</p>
      </div>

      <AiTipBanner context="student-courses" variant="recommendation" />

      {myCourses.length === 0 ? (
        <div className="text-center py-12">
          <BookOpen className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
          <h3 className="text-lg font-semibold">No Enrolled Courses</h3>
          <p className="text-muted-foreground mt-1">You haven't been enrolled in any courses yet. Contact your administrator.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {myCourses.map((c) => (
            <Link to={`/student/courses/${c.id}`} key={c.id}>
              <Card className="hover:shadow-md transition-shadow h-full">
                <div className="h-2 rounded-t-lg bg-primary" />
                <CardContent className="pt-5 space-y-4">
                  <div>
                    <div className="flex items-center justify-between mb-1">
                      <Badge variant="secondary" className="text-xs">
                        {c.progress === 100 ? "Completed" : c.progress > 0 ? "In Progress" : "Not Started"}
                      </Badge>
                      <Badge variant="outline" className="text-xs">{c.code}</Badge>
                    </div>
                    <h3 className="font-semibold mt-2">{c.title || c.name}</h3>
                    <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{c.description}</p>
                  </div>
                  <div className="flex items-center gap-4 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1"><BookOpen className="h-3 w-3" />{c.chapter_count} chapters</span>
                    <span className="flex items-center gap-1"><Users className="h-3 w-3" />{c.student_count} students</span>
                  </div>
                  <div>
                    <div className="flex justify-between text-xs mb-1">
                      <span className="text-muted-foreground">Progress</span>
                      <span className="font-medium">{c.progress}%</span>
                    </div>
                    <Progress value={c.progress} className="h-2" />
                  </div>
                  <Button variant="outline" className="w-full" size="sm">
                    <Play className="mr-2 h-3 w-3" />
                    {c.progress > 0 ? "Continue Learning" : "Start Learning"}
                  </Button>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}