import React, { useState } from "react";
import { Star, Upload, X, MessageSquare } from "lucide-react";
import { toast } from "sonner";
import { submitReviewAction } from "@/actions/reviews/reviews.action";

interface ReviewFormProps {
  onSuccess?: () => void;
}

export default function ReviewForm({ onSuccess }: ReviewFormProps) {
  const [name, setName] = useState("");
  const [rating, setRating] = useState<number | null>(null);
  const [hoverRating, setHoverRating] = useState<number | null>(null);
  const [content, setContent] = useState("");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Handle Image Selection
  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      if (file.size > 5 * 1024 * 1024) {
        toast.error("File size should be less than 5MB");
        return;
      }
      setSelectedFile(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  // Remove Selected Image
  const removeSelectedImage = () => {
    setSelectedFile(null);
    setImagePreview(null);
  };

  // Handle Form Submission
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    setErrors({});

    const validationErrors: Record<string, string> = {};
    if (!rating) {
      validationErrors.rating = "Please select a rating star";
    }
    if (!name.trim()) {
      validationErrors.customer_name = "Name is required";
    }
    if (!content.trim()) {
      validationErrors.content = "Review content is required";
    }

    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      setSubmitting(false);
      return;
    }

    try {
      const reviewData = {
        customer_name: name.trim(),
        rating,
        content: content.trim(),
        type: selectedFile ? "image" : "text",
      };

      const formData = new FormData();
      formData.append("data", JSON.stringify(reviewData));
      if (selectedFile) {
        formData.append("file", selectedFile);
      }

      const res = await submitReviewAction(formData);
      if (res.success) {
        toast.success("Review submitted! Thank you, it is pending moderation.");
        setName("");
        setRating(null);
        setContent("");
        setSelectedFile(null);
        setImagePreview(null);
        if (onSuccess) {
          onSuccess();
        }
      } else {
        if (res.errors) {
          setErrors(res.errors);
        }
        toast.error(res.message || "Failed to submit review");
      }
    } catch (err) {
      toast.error("An error occurred during submission");
      console.error(err);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="bg-white border border-zinc-200/80 rounded-3xl p-8 md:p-10 shadow-sm">
      <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
        {/* Left Column: Form Header & Rating */}
        <div className="md:col-span-5 space-y-6">
          <div className="space-y-3">
            <div className="w-10 h-10 rounded-2xl bg-brand-accent/10 flex items-center justify-center text-brand-accent">
              <MessageSquare size={20} />
            </div>
            <h3 className="text-2xl font-black text-zinc-900 uppercase tracking-tight leading-tight">
              Share Your Experience
            </h3>
            <p className="text-zinc-500 text-xs font-medium leading-relaxed">
              Happy with your purchase? Let the world know!
            </p>
          </div>

          {/* Big Star Rating Block */}
          <div className="flex flex-col items-start space-y-1.5 py-4 px-0 bg-white rounded-md max-w-sm">
            <span className="text-[10px] font-black uppercase tracking-wider text-zinc-500">
              Your Rating
            </span>
            <div className="flex gap-2 items-center">
              {[1, 2, 3, 4, 5].map((star) => (
                <button
                  key={star}
                  type="button"
                  onClick={() => setRating(star)}
                  onMouseEnter={() => setHoverRating(star)}
                  onMouseLeave={() => setHoverRating(null)}
                  className="transition-transform active:scale-90"
                  aria-label={`Rate ${star} out of 5 stars`}
                >
                  <Star
                    size={26}
                    className={`${
                      star <= (hoverRating ?? rating ?? 0)
                        ? "fill-brand-accent text-brand-accent"
                        : "text-zinc-200"
                    }`}
                  />
                </button>
              ))}
            </div>
            <span className="text-[10px] font-black uppercase tracking-wider text-brand-accent">
              {rating === 5
                ? "Excellent!"
                : rating === 4
                ? "Very Good"
                : rating === 3
                ? "Average"
                : rating === 2
                ? "Below Average"
                : rating === 1
                ? "Poor"
                : "Select star to rate"}
            </span>
            {errors.rating && (
              <p className="text-red-500 text-[10px] font-bold mt-0.5">{errors.rating}</p>
            )}
          </div>
        </div>

        {/* Right Column: Form Fields */}
        <form onSubmit={handleSubmit} noValidate className="md:col-span-7 space-y-4">
          {/* Name Input */}
          <div className="space-y-1">
            <label htmlFor="name-input" className="text-[10px] font-black uppercase tracking-wider text-zinc-500">
              Your Name
            </label>
            <input
              id="name-input"
              type="text"
              placeholder="e.g. Nusrat"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className={`w-full px-4 py-2.5 bg-zinc-50 border ${
                errors.customer_name ? "border-red-400 focus:border-red-400" : "border-zinc-200 focus:border-brand-accent/40"
              } rounded-md text-zinc-900 text-xs font-semibold placeholder:text-zinc-400 focus:outline-none transition-colors`}
            />
            {errors.customer_name && (
              <p className="text-red-500 text-[10px] font-bold mt-0.5">{errors.customer_name}</p>
            )}
          </div>

          {/* Review Text Area */}
          <div className="space-y-1">
            <label htmlFor="review-content" className="text-[10px] font-black uppercase tracking-wider text-zinc-500">
              Detailed Review
            </label>
            <textarea
              id="review-content"
              rows={4}
              placeholder="Tell us what you liked (or how we can improve!)..."
              value={content}
              onChange={(e) => setContent(e.target.value)}
              className={`w-full px-4 py-3 bg-zinc-50 border ${
                errors.content ? "border-red-400 focus:border-red-400" : "border-zinc-200 focus:border-brand-accent/40"
              } rounded-md text-zinc-900 text-xs font-semibold placeholder:text-zinc-400 focus:outline-none transition-colors resize-none`}
            />
            {errors.content && (
              <p className="text-red-500 text-[10px] font-bold mt-0.5">{errors.content}</p>
            )}
          </div>

          {/* Upload field & Submit button placed on the same line for balance */}
          <div className="flex flex-wrap items-center justify-between gap-4 pt-2 border-t border-zinc-100">
            <div className="flex-1">
              {imagePreview ? (
                <div className="relative inline-flex items-center gap-2 px-3 bg-zinc-50 border border-zinc-200 rounded-md max-w-[200px] shadow-sm h-10">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={imagePreview} alt="Thumbnail preview" className="w-6 h-6 object-cover rounded-md border border-zinc-200" />
                  <span className="text-[10px] text-zinc-550 font-bold truncate max-w-[100px]">Photo Selected</span>
                  <button
                    type="button"
                    onClick={removeSelectedImage}
                    className="text-zinc-400 hover:text-red-500 hover:bg-red-50 p-1 rounded-lg transition-colors cursor-pointer"
                  >
                    <X size={12} />
                  </button>
                </div>
              ) : (
                <label className="inline-flex items-center gap-2 px-3.5 bg-zinc-50 border border-zinc-200 border-dashed hover:border-zinc-350 hover:bg-zinc-100/30 rounded-md text-zinc-650 hover:text-zinc-800 text-xs font-bold cursor-pointer transition-all duration-200 h-10">
                  <Upload size={14} className="text-zinc-400" />
                  <span>Attach Photo</span>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={handleImageChange}
                    className="hidden"
                  />
                </label>
              )}
            </div>

            <button
              type="submit"
              disabled={submitting}
              className="px-6 rounded-md bg-brand-accent hover:bg-brand-accent-hover text-white font-bold border-none transition-all duration-300 disabled:opacity-50 disabled:pointer-events-none cursor-pointer text-xs uppercase tracking-wider h-10 shadow-[0_4px_10px_rgba(245,158,11,0.15)] hover:shadow-[0_4px_12px_rgba(245,158,11,0.25)] flex items-center justify-center"
            >
              {submitting ? "Submitting..." : "Submit Review"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}