"use client";
import React from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
import { Placement } from "./video-detail-type";
import Image from "next/image";

interface AddModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  placements?: Placement[];
}

const AddModal = ({ open, onOpenChange, placements }: AddModalProps) => {
  if (!open || !placements?.length) {
    return null;
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md bg-[#1C1C1E] border-[#2C2C2E] text-white p-6">
        <DialogHeader className="mb-4">
          <DialogTitle className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#ED3A57] to-[#FD521E]">
            Featured Products
          </DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-4 max-h-[60vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-[#ED3A57] scrollbar-track-[#2C2C2E]">
          {placements.map((placement) => (
            <a
              key={placement.request_id}
              href={placement.redirect_url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-4 p-3 rounded-xl bg-[#2C2C2E] hover:bg-[#3A3A3C] transition-all duration-300 group border border-transparent hover:border-[#ED3A57]/30"
            >
              <div className="relative w-20 h-20 overflow-hidden rounded-lg bg-[#3A3A3C] flex-shrink-0">
                <Image
                  src={placement.product_thumbnail}
                  alt={placement.product_name}
                  fill
                  className="object-cover group-hover:scale-110 transition-transform duration-500"
                />
              </div>
              <div className="flex-1 min-w-0">
                <span className="text-[10px] uppercase tracking-wider font-bold text-[#ED3A57] mb-1 block">
                  {placement.brand_name}
                </span>
                <h3 className="text-base font-semibold text-white truncate group-hover:text-[#ED3A57] transition-colors">
                  {placement.product_name}
                </h3>
                <div className="mt-2 flex items-center justify-between">
                  <span className="text-xs text-gray-400">View Product</span>
                  <div className="w-6 h-6 rounded-full bg-[#ED3A57] flex items-center justify-center -translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="3"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M5 12h14" />
                      <path d="m12 5 7 7-7 7" />
                    </svg>
                  </div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default AddModal;