"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import Modal from "../elements/Modal";
import { cn } from "@/lib/utils";
import BoldIcon from "@/components/ui/BoldIcon";
import ChatBoldIcon from "./ChatBoldIcon";
import ViewOnceToggle from "./ViewOnceToggle";
import TimedMessagePicker from "./TimedMessagePicker";
import { formatTimedLabel } from "@/lib/chat/timedMessages";

interface MultiImageModalProps {
  isOpen: boolean;
  files: File[];
  onRemove: (index: number) => void;
  onCancel: () => void;
  onConfirm: () => void;
  viewOnceMedia?: boolean;
  onViewOnceChange?: (value: boolean) => void;
  selfDestructSeconds?: number | null;
  onSelfDestructChange?: (seconds: number | null) => void;
}

export default function MultiImageModal({
  isOpen,
  files,
  onRemove,
  onCancel,
  onConfirm,
  viewOnceMedia = false,
  onViewOnceChange,
  selfDestructSeconds = null,
  onSelfDestructChange,
}: MultiImageModalProps) {
  if (!isOpen || files.length === 0) return null;

  const single = files.length === 1;

  return (
    <Modal isOpen={isOpen} onClose={onCancel} height="min(88vh, 680px)">
      <div className="flex h-full flex-col">
        {/* Header */}
        <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="بستن"
          >
            ×
          </button>
          <span className="text-sm font-semibold text-neutral-800 dark:text-neutral-100">
            {single ? "پیش‌نمایش عکس" : `${files.length} عکس انتخاب شده`}
          </span>
          <span className="h-9 w-9" aria-hidden />
        </div>

        {/* Preview area */}
        <div
          className={
            single
              ? "flex flex-1 items-center justify-center overflow-hidden px-4"
              : "grid flex-1 auto-rows-min grid-cols-2 gap-2.5 overflow-y-auto px-4 pb-2 sm:grid-cols-3"
          }
        >
          {files.map((file, i) => (
            <motion.div
              key={`${file.name}-${i}`}
              layout
              initial={{ opacity: 0, scale: 0.92 }}
              animate={{ opacity: 1, scale: 1 }}
              className={cn(
                "group relative overflow-hidden rounded-2xl bg-neutral-100 shadow-sm ring-1 ring-black/5 dark:bg-neutral-800 dark:ring-white/10",
                single ? "max-h-[52vh] w-full" : "aspect-square"
              )}
              style={single ? { aspectRatio: "auto" } : undefined}
            >
              <Image
                src={URL.createObjectURL(file)}
                alt=""
                width={single ? 900 : 400}
                height={single ? 900 : 400}
                className={cn(
                  "h-full w-full",
                  single ? "max-h-[52vh] w-auto object-contain" : "object-cover"
                )}
                unoptimized
              />
              <button
                type="button"
                onClick={() => onRemove(i)}
                className="gentle-transition absolute left-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur-md active:scale-90"
                aria-label="حذف عکس"
              >
                <BoldIcon name="close-circle" size={16} tinted className="text-white" />
              </button>
              {!single && (
                <span className="absolute bottom-2 right-2 flex h-5 min-w-5 items-center justify-center rounded-full bg-black/45 px-1.5 text-[10px] font-semibold text-white backdrop-blur-md">
                  {i + 1}
                </span>
              )}
            </motion.div>
          ))}
        </div>

        {/* Footer */}
        <div className="flex flex-col items-center gap-3 border-t border-black/5 px-4 pb-4 pt-3 dark:border-white/10">
          <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)
                    : "زماندار"}
                </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">
                  یک‌بار مصرف
                </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" />
            {single ? "ارسال" : "ارسال همه"}
          </button>
        </div>
      </div>
    </Modal>
  );
}
