"use client";

import { useCallback, useEffect, useState } from "react";
import { generateVideoPoster } from "./videoPoster";

type Lesson = {
  id: string;
  title: string;
  duration: string;
  videoUrl?: string;
};

type Props = {
  lesson: Lesson;
  completed?: boolean;
  onComplete?: () => void;
};

export function VideoCard({ lesson, completed = false, onComplete }: Props) {
  const [poster, setPoster] = useState<string | null>(null);

  useEffect(() => {
    setPoster(generateVideoPoster(lesson.title, lesson.id));
  }, [lesson.title, lesson.id]);

  const handleEnded = useCallback(() => {
    onComplete?.();
  }, [onComplete]);

  return (
    <article
      className={`group overflow-hidden rounded-2xl border shadow-sm transition-all duration-200 hover:shadow-md ${
        completed
          ? "border-emerald-200 bg-emerald-50/50 hover:border-emerald-300"
          : "border-slate-100 bg-white hover:border-slate-200"
      }`}
    >
      {/* 三级标题：视频上方，突出显示 */}
      <div className="flex items-center gap-3 border-b border-slate-100 bg-white/80 px-4 py-3">
        <span
          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold ${
            completed ? "bg-emerald-100 text-emerald-600" : "bg-sky-50 text-sky-600"
          }`}
        >
          {lesson.id}
        </span>
        <h4 className="min-w-0 flex-1 text-base font-semibold leading-snug text-slate-800 line-clamp-2">
          {lesson.title}
        </h4>
      </div>
      <div className="relative aspect-video overflow-hidden bg-slate-900">
        <video
          src={lesson.videoUrl}
          poster={poster ?? undefined}
          controls
          playsInline
          onEnded={handleEnded}
          className="h-full w-full object-contain transition-transform duration-300 group-hover:scale-[1.01]"
          preload="metadata"
        >
          您的浏览器不支持视频播放
        </video>
        <span className="absolute bottom-2 right-2 rounded bg-black/60 px-2 py-0.5 text-xs font-medium tabular-nums text-white/90 backdrop-blur-sm">
          {lesson.duration}
        </span>
        {completed && (
          <span className="absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500 text-white shadow-md">
            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </span>
        )}
      </div>
    </article>
  );
}