import React from "react";
import { Star, X, ZoomIn } from "lucide-react";
import type { Review } from "@/types";
import Image from "next/image";

interface ReviewDetailModalProps {
  review: Review;
  onClose: () => void;
  onZoomImage: (imageUrl: string) => void;
}

export default function ReviewDetailModal({ review, onClose, onZoomImage }: ReviewDetailModalProps) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 animate-in fade-in duration-100">
      <div className="bg-white border border-zinc-200 rounded-3xl max-w-xl w-full p-6 md:p-8 relative shadow-2xl space-y-6 transform scale-100 animate-in zoom-in-95 duration-100">
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-zinc-400 hover:text-zinc-600 transition-colors"
        >
          <X size={20} />
        </button>

        {/* Header info */}
        <div className="flex items-center gap-3">
          <div className="flex flex-col">
            <span className="text-zinc-900 font-black text-lg">{review.customer_name}</span>
            <span className="text-[10px] text-brand-accent font-black uppercase tracking-widest">
              Verified Purchase
            </span>
          </div>
          <span className="ml-auto text-xs text-zinc-455 font-semibold">
            {new Date(review.created_at).toLocaleDateString()}
          </span>
        </div>

        {/* Stars */}
        <div className="flex gap-1">
          {[...Array(5)].map((_, i) => (
            <Star
              key={i}
              size={16}
              className={`${
                i < review.rating ? "fill-brand-accent text-brand-accent" : "text-zinc-200"
              }`}
            />
          ))}
        </div>

        {/* Detailed Content */}
        <p className="text-zinc-700 text-sm font-medium leading-relaxed break-words">
          &quot;{review.content}&quot;
        </p>

        {/* Attached Image inside Modal */}
        {review.image_url && (
          <div className="space-y-2">
            <span className="text-[10px] font-black uppercase tracking-wider text-zinc-550">
              Shared Image
            </span>
            <div
              onClick={() => onZoomImage(review.image_url!)}
              className="relative h-48 rounded-2xl overflow-hidden border border-zinc-200 cursor-pointer group"
            >
              <Image
                src={review.image_url}
                alt="Customer review photo"
                fill
                className="object-cover group-hover:scale-102 transition-transform duration-300"
              />
              <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                <div className="px-4 py-2 bg-black/60 rounded-xl flex items-center gap-2 text-white text-xs font-bold backdrop-blur-sm">
                  <ZoomIn size={14} />
                  <span>Zoom Image</span>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}