"use client";

import { motion } from "framer-motion";
import Modal from "../elements/Modal";
import BoldIcon from "@/components/ui/BoldIcon";
import ChatBoldIcon from "./ChatBoldIcon";
import ViewOnceToggle from "./ViewOnceToggle";
import TimedMessagePicker from "./TimedMessagePicker";
import { formatTimedLabel } from "@/lib/chat/timedMessages";
import { useTranslation } from "react-i18next";

interface MediaPreviewModalProps {
  isOpen: boolean;
  file: File | null;
  kind: "video" | "file";
  onCancel: () => void;
  onConfirm: () => void;
  viewOnceMedia?: boolean;
  onViewOnceChange?: (value: boolean) => void;
  selfDestructSeconds?: number | null;
  onSelfDestructChange?: (seconds: number | null) => void;
}

export default function MediaPreviewModal({
  isOpen,
  file,
  kind,
  onCancel,
  onConfirm,
  viewOnceMedia = false,
  onViewOnceChange,
  selfDestructSeconds = null,
  onSelfDestructChange,
}: MediaPreviewModalProps) {
  const { t } = useTranslation("common");

  if (!isOpen || !file) return null;

  const previewUrl = URL.createObjectURL(file);
  const isVideo = kind === "video";

  return (
    <Modal
      isOpen={isOpen}
      onClose={onCancel}
      elevated
      height="min(calc(100dvh - 4.5rem), 720px)"
      panelClassName="!pb-0"
    >
      <div className="flex h-full min-h-0 flex-col">
        <div className="flex items-center justify-between px-4 pb-3 pt-1">
          <button
            type="button"
            onClick={onCancel}
            className="gentle-transition flex h-9 w-9 items-center justify-center rounded-full bg-black/5 text-lg leading-none text-neutral-600 active:scale-90 dark:bg-white/10 dark:text-neutral-300"
            aria-label={t("chats.actions.close")}
          >
            ×
          </button>
          <span className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
            {isVideo ? t("chats.modal.videoPreview") : t("chats.modal.filePreview")}
          </span>
          <span className="h-9 w-9" aria-hidden />
        </div>

        <div className="flex min-h-0 flex-1 flex-col items-center justify-center overflow-hidden px-4">
          {isVideo ? (
            <motion.video
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              src={previewUrl}
              controls
              playsInline
              className="max-h-full max-w-full rounded-2xl bg-black object-contain shadow-lg"
            />
          ) : (
            <motion.div
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              className="glass-panel flex w-full max-w-sm flex-col items-center gap-3 rounded-2xl p-6 text-center"
            >
              <span className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#2aabee]/15 text-[#248cc8]">
                <BoldIcon name="document" size={32} tinted className="text-current" />
              </span>
              <p className="break-all text-sm font-semibold text-neutral-800 dark:text-neutral-100">
                {file.name}
              </p>
              <p className="text-xs text-neutral-500">
                {t("chats.modal.fileSizeMb", {
                  size: (file.size / (1024 * 1024)).toFixed(2),
                })}
              </p>
            </motion.div>
          )}
        </div>

        <div className="relative z-[1] flex flex-col items-center gap-3 border-t border-black/5 px-4 pb-[calc(1.25rem+env(safe-area-inset-bottom,0px))] pt-3 dark:border-white/10">
          {isVideo && (
            <div className="flex w-full max-w-xs items-center justify-center gap-5">
              {onSelfDestructChange && (
                <div className="flex flex-col items-center gap-1">
                  <TimedMessagePicker
                    value={selfDestructSeconds}
                    onChange={onSelfDestructChange}
                  />
                  <span className="text-[10px] text-neutral-500 dark:text-neutral-400">
                    {selfDestructSeconds != null
                      ? formatTimedLabel(selfDestructSeconds, t)
                      : t("chats.timed.label")}
                  </span>
                </div>
              )}
              {onViewOnceChange && (
                <div className="flex flex-col items-center gap-1">
                  <ViewOnceToggle value={viewOnceMedia} onChange={onViewOnceChange} />
                  <span className="text-[10px] text-neutral-500 dark:text-neutral-400">
                    {t("chats.viewOnce.toggle")}
                  </span>
                </div>
              )}
            </div>
          )}
          <button
            type="button"
            onClick={onConfirm}
            className="ig-dm-send-btn gentle-transition flex w-full max-w-xs items-center justify-center gap-2 rounded-full py-3 text-sm font-semibold text-white shadow-lg active:scale-[0.98]"
          >
            <ChatBoldIcon name="send" size={18} className="text-white -mr-0.5" />
            {t("chats.actions.send")}
          </button>
        </div>
      </div>
    </Modal>
  );
}
