'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { apiFetch } from '../../../lib/auth';
import { Skeleton } from '@/components/ui/skeleton';
import { toast } from 'sonner';

interface LearningItem {
  courseId: number;
  courseTitle: string;
  progress: number;
  completedLessons: number;
  totalLessons: number;
}

export default function LearningPage() {
  const [items, setItems] = useState<LearningItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadData();
  }, []);

  async function loadData() {
    try {
      const res = await apiFetch('/courses/my-learning');
      const data = await res.json();
      setItems(data.items || []);
    } catch { toast.error("加载失败") }
    setLoading(false);
  }

  if (loading) return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <Skeleton className="h-8 w-48 mb-6" />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <Skeleton className="h-24 rounded-xl" />
        <Skeleton className="h-24 rounded-xl" />
        <Skeleton className="h-24 rounded-xl" />
      </div>
      <Skeleton className="h-64 w-full rounded-xl" />
    </div>
  );

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
          &larr; 返回我的
        </Link>
        <h1 className="text-3xl font-bold text-foreground">学习进度</h1>
        <p className="mt-2 text-muted-foreground">跟踪你的课程学习进度</p>
      </div>

      {items.length === 0 ? (
        <div className="text-center py-20">
          <div className="w-16 h-16 bg-muted rounded-2xl flex items-center justify-center mx-auto mb-4">
            📚
          </div>
          <p className="text-muted-foreground mb-4">还没有学习任何课程</p>
          <Link href="/courses" className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm hover:bg-brand-700">
            去选课
          </Link>
        </div>
      ) : (
        <div className="space-y-4">
          {items.map(item => (
            <Link key={item.courseId} href={`/courses/${item.courseId}`}
              className="bg-card rounded-xl border border-border p-6 hover:shadow-md transition-shadow block">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-foreground">{item.courseTitle}</h3>
                <span className="text-sm text-muted-foreground">{item.progress}%</span>
              </div>
              <div className="w-full bg-muted rounded-full h-2 mb-2">
                <div className="bg-brand-600 h-2 rounded-full transition-all" style={{ width: `${item.progress}%` }} />
              </div>
              <p className="text-xs text-muted-foreground">
                已完成 {item.completedLessons}/{item.totalLessons} 课时
              </p>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}
