"use client";

import { useState } from "react";
import { X, ImagePlus, Loader2, MessageSquare } from "lucide-react";
import { addFeedback } from "@/app/services/feedBackApi";
import toast from "react-hot-toast";
import SidePanel from "@/app/landing/components/SidePanel";

interface Props {
  open: boolean;
  onClose: () => void;
}

export default function CustomThemeRequestModal({ open, onClose }: Props) {
  const [description, setDescription] = useState("");
  const [image, setImage] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    try {
      setLoading(true);

      await addFeedback({
        title: "Custom Theme Request",
        description: description.trim(),
        image: image || undefined,
      });

      setDescription("");
      setImage(null);
      onClose();
      toast.success("Custom theme request submitted successfully");
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <SidePanel isOpen={open} onClose={onClose} title="Request Custom Theme">
      <div className="flex flex-col h-full">
        {/* Header */}
        <div className="flex items-center justify-between px-7 py-5 bg-white border-b border-[#f3f4f6] shrink-0">
          <div>
            <p className="text-lg font-semibold text-[#111111]">
              Request Custom Theme
            </p>
            <p className="text-sm text-[#9ca3af]">Tell us your design idea</p>
          </div>

          <button
            onClick={onClose}
            className="w-9 h-9 rounded-lg flex items-center justify-center text-[#9ca3af] hover:bg-[#f7f7f8] border-none cursor-pointer"
          >
            <X size={20} />
          </button>
        </div>

        {/* Body */}
        <div className="p-7 flex-1 overflow-y-auto">
          {/* Info Box */}
          <div className="bg-white border border-[#e5e7eb] rounded-2xl p-4 flex gap-3 mb-6">
            <div className="w-10 h-10 rounded-xl bg-[#fceef3] text-[#d4537e] flex items-center justify-center flex-shrink-0">
              <MessageSquare size={18} />
            </div>

            <div>
              <p className="text-sm font-semibold text-[#111111]">
                We'll design it for you
              </p>

              <p className="text-sm text-[#6b7280] mt-1">
                Describe the look you want — colors, layout, logo placement, or
                any reference design and our team will create it and add it to
                your templates.
              </p>
            </div>
          </div>

          {/* Description */}
          <div className="mb-5">
            <label className="block text-sm font-medium text-[#374151] mb-2">
              Theme Description
            </label>

            <textarea
              rows={5}
              placeholder="Describe your desired theme..."
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className="w-full resize-none bg-white rounded-xl border border-[#e5e7eb] outline-none px-4 py-4 text-base text-[#111111] placeholder:text-[#9ca3af]"
            />
          </div>

          {/* Image Upload */}
          <div>
            <label className="block text-sm font-medium text-[#374151] mb-2">
              Reference Image (optional)
            </label>

            {image ? (
              <div className="relative w-full rounded-2xl overflow-hidden border border-[#e5e7eb]">
                <img
                  src={URL.createObjectURL(image)}
                  alt="Preview"
                  className="w-full object-cover max-h-56"
                />

                <button
                  type="button"
                  onClick={() => setImage(null)}
                  className="absolute top-2 right-2 w-8 h-8 bg-black/50 rounded-full flex items-center justify-center text-white"
                >
                  <X size={16} />
                </button>
              </div>
            ) : (
              <label className="border-2 border-dashed border-[#f3c7d6] rounded-2xl min-h-[180px] flex flex-col items-center justify-center cursor-pointer bg-[#fffafb]">
                <input
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={(e) => setImage(e.target.files?.[0] || null)}
                />

                <ImagePlus size={36} className="text-[#d4537e]" />

                <p className="text-sm text-[#d4537e] mt-3 text-center px-4">
                  Tap to add a photo of your letterhead or design
                </p>
              </label>
            )}
          </div>
        </div>

        {/* Footer */}
        <div className="px-7 py-5 bg-white border-t border-[#f3f4f6] shrink-0">
          <button
            onClick={handleSubmit}
            disabled={!description.trim() || loading}
            className="w-full bg-[#d4537e] hover:bg-[#993556] text-white text-base font-semibold py-4 rounded-2xl disabled:opacity-50 flex items-center justify-center gap-2"
          >
            {loading && <Loader2 size={18} className="animate-spin" />}

            {loading ? "Submitting..." : "Submit"}
          </button>
        </div>
      </div>
    </SidePanel>
  );
}