"use client";

import Link from "next/link";
import { getLastWatched, getProgress } from "@/app/cloudphone/lib/learning";
import { CURRICULUM_CONFIG } from "@/app/cloudphone/config/course";
import { useState, useEffect } from "react";
import styles from "../vip.module.css";

const TOTAL_LESSONS = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);

export function ContinueLearning() {
  const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
  const [progress, setProgress] = useState({ completed: 0, percent: 0 });

  useEffect(() => {
    setLast(getLastWatched());
    setProgress(getProgress(TOTAL_LESSONS));
    const onProgress = () => {
      setLast(getLastWatched());
      setProgress(getProgress(TOTAL_LESSONS));
    };
    window.addEventListener("learning:progress", onProgress);
    return () => window.removeEventListener("learning:progress", onProgress);
  }, []);

  if (!last || progress.completed >= TOTAL_LESSONS) {
    return (
      <section className={styles.section}>
        <h2 className={styles.sectionTitle}>继续学习</h2>
        <Link
          href="/cloudphone/course/0/0"
          className={`${styles.card} ${styles.btnPrimary}`}
          style={{ display: "block", textAlign: "center" }}
        >
          {progress.completed >= TOTAL_LESSONS ? "复习课程" : "开始学习"} →
        </Link>
      </section>
    );
  }

  const module = CURRICULUM_CONFIG.modules[last.moduleIndex];
  const lesson = module?.lessons[last.lessonIndex];
  const title = lesson?.name || `第 ${last.moduleIndex + 1} 章`;

  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>继续学习</h2>
      <Link
        href={`/cloudphone/course/${last.moduleIndex}/${last.lessonIndex}`}
        className={styles.card}
        style={{
          display: "block",
          textDecoration: "none",
          color: "inherit",
        }}
      >
        <div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.5rem" }}>
          {title}
        </div>
        <div className="animate__animated animate__fadeInUp" style={{ animationFillMode: "both" }}>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontSize: "0.8rem",
              color: "var(--muted-foreground)",
              marginBottom: "0.25rem",
            }}
          >
            <span>进度</span>
            <span>
              {progress.completed}/{TOTAL_LESSONS} 节
            </span>
          </div>
          <div
            style={{
              height: "6px",
              borderRadius: "3px",
              background: "var(--muted)",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                height: "100%",
                width: `${progress.percent}%`,
                background: "var(--accent)",
                borderRadius: "3px",
                transition: "width 0.3s",
              }}
            />
          </div>
        </div>
        <div style={{ marginTop: "0.75rem", color: "var(--accent)", fontSize: "0.9rem" }}>
          继续学习 →
        </div>
      </Link>
    </section>
  );
}