"use client";

import { useRef } from "react";
import { ImagePlus, Video } from "lucide-react";
import { useTranslations } from "next-intl";
import { apiUpload, resolveMediaUrl } from "@/lib/api/client";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type MediaKind = "menu" | "table";

type MediaPairUploadProps = {
  cafeId: string;
  kind: MediaKind;
  imageUrl?: string | null;
  videoUrl?: string | null;
  onImageChange: (url: string | null) => void;
  onVideoChange: (url: string | null) => void;
  className?: string;
};

export function MediaPairUpload({
  cafeId,
  kind,
  imageUrl,
  videoUrl,
  onImageChange,
  onVideoChange,
  className,
}: MediaPairUploadProps) {
  const t = useTranslations("media");
  const imageRef = useRef<HTMLInputElement>(null);
  const videoRef = useRef<HTMLInputElement>(null);

  const imageEndpoint =
    kind === "menu"
      ? `/api/cafes/${cafeId}/media/menu-image`
      : `/api/cafes/${cafeId}/media/table-image`;
  const videoEndpoint =
    kind === "menu"
      ? `/api/cafes/${cafeId}/media/menu-video`
      : `/api/cafes/${cafeId}/media/table-video`;

  const imgSrc = resolveMediaUrl(imageUrl);
  const vidSrc = resolveMediaUrl(videoUrl);

  const upload = async (file: File, endpoint: string, onDone: (url: string) => void) => {
    const data = await apiUpload<{ url: string }>(endpoint, file);
    onDone(data.url);
  };

  return (
    <div className={cn("space-y-2", className)}>
      <div className="flex flex-wrap gap-2">
        <input
          ref={imageRef}
          type="file"
          accept="image/jpeg,image/png,image/webp"
          className="hidden"
          onChange={(e) => {
            const f = e.target.files?.[0];
            if (f) void upload(f, imageEndpoint, onImageChange);
          }}
        />
        <input
          ref={videoRef}
          type="file"
          accept="video/mp4,video/webm,video/quicktime"
          className="hidden"
          onChange={(e) => {
            const f = e.target.files?.[0];
            if (f) void upload(f, videoEndpoint, onVideoChange);
          }}
        />
        <Button type="button" size="sm" variant="outline" onClick={() => imageRef.current?.click()}>
          <ImagePlus className="me-1 h-3.5 w-3.5" />
          {t("uploadImage")}
        </Button>
        <Button type="button" size="sm" variant="outline" onClick={() => videoRef.current?.click()}>
          <Video className="me-1 h-3.5 w-3.5" />
          {t("uploadVideo")}
        </Button>
        {imageUrl ? (
          <Button type="button" size="sm" variant="ghost" onClick={() => onImageChange(null)}>
            {t("removeImage")}
          </Button>
        ) : null}
        {videoUrl ? (
          <Button type="button" size="sm" variant="ghost" onClick={() => onVideoChange(null)}>
            {t("removeVideo")}
          </Button>
        ) : null}
      </div>
      <div className="flex flex-wrap gap-3">
        {imgSrc ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={imgSrc}
            alt=""
            className="h-20 w-20 rounded-lg border object-cover"
          />
        ) : null}
        {vidSrc ? (
          <video
            src={vidSrc}
            className="h-20 max-w-[140px] rounded-lg border object-cover"
            muted
            playsInline
            controls
          />
        ) : null}
      </div>
    </div>
  );
}
