import { Card } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { formatDateTime } from "@/components/SearchResults";
import { addHoursToNow, formatHours } from "../song/[id]/info";
import { milestoneConfig, type CloseMilestoneInfo, type MilestoneType } from "./Milestone";

export const MilestoneVideoCard = ({
    video,
    milestoneType,
}: {
    video: NonNullable<CloseMilestoneInfo>[number];
    milestoneType: MilestoneType;
}) => {
    const config = milestoneConfig[milestoneType];
    const remainingViews = config.target - video.eta.currentViews;
    const progressPercentage = (video.eta.currentViews / config.target) * 100;

    return (
        <Card className="px-3 max-md:py-3 md:px-4 my-4 gap-0">
            <div className="w-full flex items-start space-x-4 mb-4">
                {video.bilibili_metadata.coverUrl && (
                    <img
                        src={video.bilibili_metadata.coverUrl}
                        alt="视频封面"
                        className="h-25 w-40 rounded-sm object-cover shrink-0"
                        referrerPolicy="no-referrer"
                        loading="lazy"
                    />
                )}
                <div className="flex flex-col w-full justify-between">
                    <h3 className="text-sm sm:text-lg font-medium line-clamp-2 text-wrap mb-2">
                        <a href={`/song/av${video.bilibili_metadata.aid}/info`} className="hover:underline">
                            {video.bilibili_metadata.title}
                        </a>
                    </h3>

                    <div className="space-y-2 text-xs text-muted-foreground">
                        <div className="flex items-center justify-between">
                            <span>当前播放: {video.eta.currentViews.toLocaleString()}</span>
                            <span>目标: {config.target.toLocaleString()}</span>
                        </div>

                        <Progress value={progressPercentage} />
                    </div>
                </div>
            </div>
            <div className="grid grid-cols-2 gap-5 text-xs text-muted-foreground mb-2">
                <div>
                    <p>剩余播放: {remainingViews.toLocaleString()}</p>
                    <p>预计达成: {formatHours(video.eta.eta)}</p>
                </div>
                <div>
                    <p>播放速度: {Math.round(video.eta.speed)}/小时</p>
                    <p>达成时间: {addHoursToNow(video.eta.eta)}</p>
                </div>
            </div>

            <div className="flex gap-4 text-xs text-muted-foreground">
                {video.bilibili_metadata.publishedAt && (
                    <span className="stat-num">
                        发布于 {formatDateTime(new Date(video.bilibili_metadata.publishedAt))}
                    </span>
                )}
                <a
                    href={`https://www.bilibili.com/video/av${video.bilibili_metadata.aid}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-pink-400 text-xs hover:underline"
                >
                    观看视频
                </a>
                <a
                    href={`/song/av${video.bilibili_metadata.aid}/info`}
                    className="text-xs text-secondary-foreground hover:underline"
                >
                    查看详情
                </a>
            </div>
        </Card>
    );
};