"use client";

import {
  type LabMetaV2,
  tidbEnvironmentLocaleKey,
} from "@/components/labs/hooks-v2";
import { NextLink } from "@/components/next-link";
import { Skeleton } from "@/components/ui/skeleton";
import { useLocaleFunction } from "@/hooks/use-localed";
import type { Locale } from "@/lib/locale";
import { cn } from "@/lib/utils";
import {
  levelIndexFromLabel,
  levelColorClassFromIndex,
  levelI18nKeyFromIndex,
} from "@/components/labs/lab-level";
import { ArrowRightIcon, ClockIcon } from "lucide-react";
import Image from "next/image";

export default function LabItem({
  className,
  lab,
  usage = false,
  iframeMode,
  locale,
}: {
  className?: string;
  lab: LabMetaV2;
  usage?: boolean;
  iframeMode?: boolean;
  locale?: Locale;
}) {
  const t = useLocaleFunction(locale);
  const levelIdx = levelIndexFromLabel(lab.lab_level);
  const levelClass =
    levelIdx != null ? levelColorClassFromIndex(levelIdx) : "text-purple-600";
  const levelText =
    levelIdx != null
      ? t(levelI18nKeyFromIndex(levelIdx) as never)
      : lab.lab_level;

  return (
    <div className={className}>
      <NextLink
        href={`/labs/${lab.lab_code}`}
        noStyle
        className="group/lab-item"
        target={iframeMode ? "_parent" : undefined}
      >
        <div
          className={cn(
            "relative h-full flex flex-col border bg-card transition-all group-hover/lab-item:shadow-lg",
            !iframeMode && "shadow-xs group-hover/lab-item:shadow-lg"
          )}
        >
          {lab.employee_only && (
            <div className="absolute top-4 left-0 bg-red-600 text-white text-xs uppercase p-1 z-1">
              {t('lab.employee-only')}
              <span className="absolute right-0 top-0 translate-x-full border-l-12 border-t-12 border-b-12 border-l-red-600 border-t-transparent border-b-transparent"></span>
            </div>
          )}
          <div className="aspect-video overflow-hidden bg-muted">
            <Image
              className="w-full aspect-video object-cover transition-transform duration-300 group-hover/lab-item:scale-105"
              unoptimized
              src={t(lab, "splash_image")}
              width={240}
              height={135}
              alt="Splash Image"
            />
          </div>
          <div className="p-4 flex flex-col grow">
            <div className="grow">
              <div className={cn(levelClass, "mb-3 text-sm font-semibold")}>
                {levelText}
              </div>
              <div className="leading-5 font-semibold line-clamp-2">
                {t(lab, "title")}
              </div>
              <div className="text-sm text-muted-foreground font-semibold flex flex-wrap gap-2 items-center mt-3">
                <span>
                  {lab.tidb_environments
                    .map((environment) =>
                      t(tidbEnvironmentLocaleKey(environment) as never)
                    )
                    .join(", ")}
                </span>
                |
                <div className="flex gap-1 items-center">
                  <ClockIcon className="size-3" />
                  {t("lab.duration-minutes", lab.estimated_duration_minutes)}
                </div>
              </div>
              <div className="flex flex-wrap gap-2 mt-3 items-start">
                {([] as string[])
                  .concat(t(lab, "category"))
                  .splice(0, 2)
                  .map((topic: string) => (
                    <span
                      key={topic}
                      className="text-xs font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded"
                    >
                      {topic}
                    </span>
                  ))}
              </div>
              {usage && (
                <div
                  className={cn(
                    "text-xs text-green-600 mt-3 invisible",
                    !!lab.usage?.start_count && "visible"
                  )}
                >
                  {t("lab.start-times", lab.usage?.start_count ?? 0)}
                </div>
              )}
            </div>
            <div className="block text-base cursor-pointer mt-4">
              {t("lab.learn-more")}{" "}
              <ArrowRightIcon className="inline-flex size-4 ml-2 transition-all group-hover/lab-item:ml-3" />
            </div>
          </div>
        </div>
      </NextLink>
    </div>
  );
}

export function LabItemPlaceholder() {
  return (
    <div className="rounded-lg border col-span-2 bg-card h-[264px]">
      <Skeleton className="block w-full aspect-video bg-zinc-700/10 rounded-lg" />
      <div className="space-y-1.5 p-6">
        <Skeleton className="w-full h-4 bg-zinc-700/10" />
        <Skeleton className="w-1/3 h-4 bg-zinc-700/10" />
      </div>
    </div>
  );
}