import { streamDemoUrlFromBuild } from "@/lib/streamDemoUrl";
import { resolveProjectImageSrc } from "@/lib/resolveProjectImageSrc";
import type { IProject } from "@/types";
import ArrowMoreIcon from "@/components/icons/ArrowMoreIcon";

export function StreamingProject({
  city,
  title,
  image,
  href,
  buildFilename,
  company,
  index,
  current,
  count,
  className,
}: Pick<IProject, "city" | "title" | "image" | "company" | "buildFilename"> & {
  href: string;
  index: number;
  current: number;
  count: number;
  className?: string;
}) {
  const imgSrc = resolveProjectImageSrc(image);
  const build = buildFilename?.trim() ?? "";
  const streamHref = build ? streamDemoUrlFromBuild(build) : href;

  return (
    <div
      className={`lg:aspect-[344/396] aspect-[300/344] flex-1 md:max-lg:min-w-[300px] transition-[scale,transform] will-change-[transform,scale] lg:rounded-[1.111vw] rounded-2xl lg:p-[1.111vw] p-4 flex duration-500 relative overflow-hidden group max-md:absolute max-md:w-[calc(100%-40px)] select-none h-full ${
        index === current
          ? "max-md:[transform:translateZ(40px)]"
          : "max-md:[scale:85%]"
      } ${
        index === (current + 1) % count
          ? "max-md:[transform:translateX(calc(7.5%+20px))]"
          : index === (current - 1 + count) % count
          ? "max-md:[transform:translateX(calc(-7.5%-20px))]"
          : ""
      } ${className ?? ""}`}
    >
      <div className="z-0 rounded-2xl absolute inset-0 overflow-hidden transition-transform duration-500 group-hover:scale-110">
        <img
          src={imgSrc}
          alt=""
          loading="lazy"
          decoding="async"
          className="absolute inset-0 z-0 size-full object-cover object-bottom"
          draggable={false}
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 z-[1] rounded-2xl bg-[linear-gradient(to_bottom,rgba(0,0,0,0.45),transparent)] lg:bg-[linear-gradient(to_top,rgba(0,0,0,0.45),transparent)]"
        />
      </div>
      <div className="relative z-[2] lg:self-end space-y-3 font-medium">
        <p className="heading1 font-medium">{title}</p>
        <div className="flex flex-wrap gap-1">
          {company && (
            <div className="px-2 py-1.5 flex lg:gap-[0.278vw] gap-1 items-center lg:rounded-[1.181vw] rounded-2xl [backdrop-filter:blur(12px)] bg-[#37393B99] btns">
              <div
                className="lg:w-[0.556vw] lg:h-[0.556vw] w-2 h-2 rounded-full m-1"
                style={{ backgroundColor: company.color }}
              />
              {company.title}
            </div>
          )}
          <p className="lg:px-[0.833vw] lg:py-[0.486vw] px-3 py-[7px] bg-[#37393B99] [backdrop-filter:blur(12px)] lg:rounded-[1.181vw] rounded-2xl btns">
            {city}
          </p>
        </div>
      </div>
      <div className="z-[2] lg:hidden absolute right-4 bottom-4">
        <a
          className="bg-gradient btns flex gap-2 items-center px-3 py-2 font-medium rounded-xl"
          href={streamHref}
        >
          Смотреть
          <div className="text-white lg:size-[1.389vw] size-4">
            <ArrowMoreIcon />
          </div>
        </a>
      </div>
      <a
        href={streamHref}
        className="max-lg:hidden lg:group-hover:opacity-100 opacity-0 transition-opacity duration-500 absolute w-full h-full left-0 bottom-0 md:max-lg:rounded-2xl rounded-xl font-medium [backdrop-filter:blur(3px)] content-center text-center z-[3]"
      >
        <div className="btnl flex gap-2 justify-center">
          Начать демонстрацию{" "}
          <div className="text-white lg:size-[1.389vw] size-4">
            <ArrowMoreIcon />
          </div>
        </div>
      </a>
    </div>
  );
}
