"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Header } from "@/app/components";
import { getProgress } from "@/app/lib/learning";
import { CURRICULUM_CONFIG } from "@/config/course";
import { isPaid } from "@/app/lib/payment";

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

export default function CertificatePage() {
  const [progress, setProgress] = useState({ completed: 0, percent: 0 });
  const [paid, setPaid] = useState(false);

  useEffect(() => {
    setProgress(getProgress(TOTAL));
    setPaid(isPaid());
  }, []);

  const completed = progress.percent >= 100;

  return (
    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
      <Header />
      <main className="pt-20 pb-16">
        <div className="mx-auto max-w-2xl px-4 text-center">
          {!paid ? (
            <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-8">
              <h1 className="mb-4 text-2xl font-bold">报名后可查看证书</h1>
              <p className="mb-6 text-[var(--muted-foreground)]">
                完成全部 {TOTAL} 节课程后可申请结业证书
              </p>
              <Link
                href="/pay"
                className="inline-flex rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] hover:opacity-90"
              >
                立即报名
              </Link>
            </div>
          ) : completed ? (
            <div className="rounded-2xl border-2 border-[var(--accent)] bg-[var(--card)] p-8">
              <div className="mb-6 text-5xl">🎓</div>
              <h1 className="mb-2 text-2xl font-bold">结业证书</h1>
              <p className="mb-6 text-[var(--muted-foreground)]">
                恭喜你完成《数字游民实战课》全部 {TOTAL} 节课程
              </p>
              <p className="mb-8 text-sm text-[var(--muted-foreground)]">
                异度世界、大师兄、小美
              </p>
              <Link
                href="/"
                className="text-[var(--accent)] underline hover:no-underline"
              >
                返回课程
              </Link>
            </div>
          ) : (
            <div className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-8">
              <h1 className="mb-4 text-2xl font-bold">继续加油</h1>
              <p className="mb-6 text-[var(--muted-foreground)]">
                已完成 {progress.completed}/{TOTAL} 节，完成全部可解锁证书
              </p>
              <div className="mb-6 h-3 overflow-hidden rounded-full bg-[var(--muted)]">
                <div
                  className="h-full rounded-full bg-[var(--accent)] transition-all"
                  style={{ width: `${progress.percent}%` }}
                />
              </div>
              <Link
                href="/course/0/0"
                className="inline-flex rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] hover:opacity-90"
              >
                继续学习
              </Link>
            </div>
          )}
        </div>
      </main>
    </div>
  );
}