"use client";

import React, { useState, useEffect, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { MessageSquare, X, Check, Plus, List, Send, User } from "lucide-react";
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
import html2canvas from "html2canvas";

function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

interface FeedbackComment {
  id: string;
  userName: string;
  text: string;
  createdAt: string;
}

interface Feedback {
  id: string;
  x: number;
  y: number;
  selector: string;
  text: string;
  type: "design" | "content";
  elementRect: DOMRect | null;
  userName: string;
  comments: FeedbackComment[];
}

export function FeedbackOverlay() {
  const [isActive, setIsActive] = useState(false);
  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
    null,
  );
  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
    null,
  );
  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
  const [currentComment, setCurrentComment] = useState("");
  const [currentType, setCurrentType] = useState<"design" | "content">(
    "design",
  );
  const [showList, setShowList] = useState(false);
  const [currentUser, setCurrentUser] = useState<{
    identity: string;
    isDevFallback?: boolean;
  } | null>(null);
  const [newCommentTexts, setNewCommentTexts] = useState<{
    [feedbackId: string]: string;
  }>({});
  const [isCapturing, setIsCapturing] = useState(false);

  // 1. Fetch Identity and Existing Feedback
  useEffect(() => {
    const checkAuth = async () => {
      try {
        const urlParams = new URLSearchParams(window.location.search);
        const bypass = urlParams.get("gatekeeper_bypass");
        const apiUrl = bypass
          ? `/api/whoami?gatekeeper_bypass=${bypass}`
          : "/api/whoami";

        const res = await fetch(apiUrl);
        if (res.ok) {
          const data = await res.json();
          setCurrentUser(data);
        } else {
          setCurrentUser({ identity: "Guest" });
        }
      } catch (_e) {
        setCurrentUser({ identity: "Guest" });
      }
    };

    const fetchFeedback = async () => {
      try {
        const res = await fetch("/api/feedback");
        if (res.ok) {
          const data = await res.json();
          const mapped = data.map((fb: any) => ({
            id: fb.id,
            x: fb.x,
            y: fb.y,
            selector: fb.selector,
            text: fb.text,
            type: fb.type,
            userName: fb.user_name,
            comments: (fb.comments || []).map((c: any) => ({
              id: c.id,
              userName: c.user_name,
              text: c.text,
              createdAt: c.date_created,
            })),
          }));
          setFeedbacks(mapped);
        }
      } catch (e) {
        console.error("Failed to fetch feedbacks", e);
      }
    };

    checkAuth();
    fetchFeedback();
  }, []);

  const getSelector = (el: HTMLElement): string => {
    if (el.id) return `#${el.id}`;
    const path = [];
    let curr: HTMLElement | null = el;
    while (curr && curr.parentElement) {
      const index = Array.from(curr.parentElement.children).indexOf(curr) + 1;
      path.unshift(`${curr.tagName.toLowerCase()}:nth-child(${index})`);
      curr = curr.parentElement;
    }
    return path.join(" > ");
  };

  useEffect(() => {
    if (!isActive) {
      setHoveredElement(null);
      return;
    }

    const handleMouseMove = (e: MouseEvent) => {
      if (selectedElement) return;

      const target = e.target as HTMLElement;
      if (target.closest(".feedback-ui-ignore")) {
        setHoveredElement(null);
        return;
      }
      setHoveredElement(target);
    };

    const handleClick = (e: MouseEvent) => {
      if (selectedElement) return;

      const target = e.target as HTMLElement;
      if (target.closest(".feedback-ui-ignore")) return;

      e.preventDefault();
      e.stopPropagation();

      setSelectedElement(target);
      setHoveredElement(null);
    };

    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("click", handleClick, true);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("click", handleClick, true);
    };
  }, [isActive, selectedElement]);

  const captureScreenshot = async (): Promise<string | null> => {
    try {
      setIsCapturing(true);
      const canvas = await html2canvas(document.body, {
        useCORS: true,
        scale: 1,
        ignoreElements: (el) => el.classList.contains("feedback-ui-ignore"),
      });
      return canvas.toDataURL("image/png");
    } catch (e) {
      console.error("Screenshot failed", e);
      return null;
    } finally {
      setIsCapturing(false);
    }
  };

  const saveFeedback = async () => {
    if (!selectedElement || !currentComment) return;

    const rect = selectedElement.getBoundingClientRect();
    const screenshot = await captureScreenshot();

    const feedbackData = {
      url: window.location.href,
      x: rect.left + rect.width / 2 + window.scrollX,
      y: rect.top + rect.height / 2 + window.scrollY,
      selector: getSelector(selectedElement),
      text: currentComment,
      type: currentType,
      userName: currentUser?.identity || "Unknown",
      userIdentity: currentUser?.identity === "Admin" ? "admin" : "user",
      screenshot_base64: screenshot,
    };

    try {
      const res = await fetch("/api/feedback", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(feedbackData),
      });

      if (res.ok) {
        const savedFb = await res.json();
        const newFeedback: Feedback = {
          id: savedFb.id,
          x: savedFb.x,
          y: savedFb.y,
          selector: savedFb.selector,
          text: savedFb.text,
          type: savedFb.type,
          elementRect: rect,
          userName: savedFb.user_name,
          comments: [],
        };
        setFeedbacks([...feedbacks, newFeedback]);
        setSelectedElement(null);
        setCurrentComment("");
      }
    } catch (e) {
      console.error("Failed to save feedback", e);
    }
  };

  const addReply = async (feedbackId: string) => {
    const text = newCommentTexts[feedbackId];
    if (!text) return;

    if (!currentUser?.identity || currentUser.identity === "Guest") {
      alert("Nur angemeldete Benutzer können antworten.");
      return;
    }

    try {
      const res = await fetch("/api/feedback", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "reply",
          feedbackId,
          userName: currentUser?.identity || "Unknown",
          text,
        }),
      });

      if (res.ok) {
        const savedReply = await res.json();
        setFeedbacks(
          feedbacks.map((f) => {
            if (f.id === feedbackId) {
              return {
                ...f,
                comments: [
                  ...f.comments,
                  {
                    id: savedReply.id,
                    userName: savedReply.user_name,
                    text: savedReply.text,
                    createdAt: savedReply.date_created,
                  },
                ],
              };
            }
            return f;
          }),
        );
        setNewCommentTexts({ ...newCommentTexts, [feedbackId]: "" });
      }
    } catch (e) {
      console.error("Failed to save reply", e);
    }
  };

  const hoveredRect = useMemo(
    () => hoveredElement?.getBoundingClientRect(),
    [hoveredElement],
  );
  const selectedRect = useMemo(
    () => selectedElement?.getBoundingClientRect(),
    [selectedElement],
  );

  return (
    <div className="feedback-ui-ignore">
      {/* 1. Global Toolbar */}
      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[9999]">
        <div className="bg-black/80 backdrop-blur-xl border border-white/10 p-2 rounded-2xl shadow-2xl flex items-center gap-2">
          <div
            className={cn(
              "flex items-center gap-2 px-3 py-2 rounded-xl transition-all",
              currentUser?.isDevFallback
                ? "bg-orange-500/20 text-orange-400"
                : "bg-white/5 text-white/40",
            )}
          >
            <User size={14} />
            <span className="text-[10px] font-bold uppercase tracking-wider">
              {currentUser?.identity || "Loading..."}
              {currentUser?.isDevFallback && " (Local Dev Bypass)"}
            </span>
          </div>

          <div className="w-px h-6 bg-white/10 mx-1" />

          <button
            onClick={() => {
              if (!currentUser?.identity || currentUser.identity === "Guest") {
                alert("Bitte logge dich ein, um Feedback zu geben.");
                return;
              }
              setIsActive(!isActive);
            }}
            disabled={
              !currentUser?.identity || currentUser.identity === "Guest"
            }
            className={cn(
              "flex items-center gap-2 px-4 py-2 rounded-xl transition-all font-medium disabled:opacity-30 disabled:cursor-not-allowed",
              isActive
                ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
                : "text-white/70 hover:text-white hover:bg-white/10",
            )}
          >
            {isActive ? <X size={18} /> : <MessageSquare size={18} />}
            {isActive ? "Modus beenden" : "Feedback geben"}
          </button>

          <div className="w-px h-6 bg-white/10 mx-1" />

          <button
            onClick={() => setShowList(!showList)}
            className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-xl relative"
          >
            <List size={20} />
            {feedbacks.length > 0 && (
              <span className="absolute -top-1 -right-1 w-5 h-5 bg-blue-500 text-[10px] flex items-center justify-center rounded-full text-white font-bold border-2 border-[#1a1a1a]">
                {feedbacks.length}
              </span>
            )}
          </button>
        </div>
      </div>

      {/* 2. Feedback Markers & Highlights */}
      <AnimatePresence>
        {isActive && (
          <>
            {/* Fixed Overlay for real-time highlights */}
            <div className="fixed inset-0 pointer-events-none z-[9998]">
              {hoveredRect && (
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  className="absolute border-2 border-blue-400 bg-blue-400/10 rounded-sm transition-all duration-200"
                  style={{
                    top: hoveredRect.top,
                    left: hoveredRect.left,
                    width: hoveredRect.width,
                    height: hoveredRect.height,
                  }}
                />
              )}

              {selectedRect && (
                <motion.div
                  initial={{ scale: 0.9, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  className="absolute border-2 border-yellow-400 bg-yellow-400/20 rounded-sm"
                  style={{
                    top: selectedRect.top,
                    left: selectedRect.left,
                    width: selectedRect.width,
                    height: selectedRect.height,
                  }}
                />
              )}
            </div>

            {/* Absolute Overlay for persistent pins */}
            <div className="absolute inset-0 pointer-events-none z-[9997]">
              {feedbacks.map((fb) => (
                <div
                  key={fb.id}
                  className="absolute"
                  style={{ top: fb.y, left: fb.x }}
                >
                  <button
                    onClick={() => {
                      setShowList(true);
                    }}
                    className={cn(
                      "w-6 h-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-white cursor-pointer pointer-events-auto transition-transform hover:scale-110",
                      fb.type === "design" ? "bg-purple-500" : "bg-orange-500",
                    )}
                  >
                    <Plus size={14} className="rotate-45" />
                  </button>
                </div>
              ))}
            </div>
          </>
        )}
      </AnimatePresence>

      {/* 3. Feedback Modal */}
      <AnimatePresence>
        {selectedElement && (
          <div className="fixed inset-0 flex items-center justify-center z-[10000] bg-black/40 backdrop-blur-sm">
            <motion.div
              initial={{ opacity: 0, y: 20, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 20, scale: 0.95 }}
              className="bg-[#1c1c1e] border border-white/10 rounded-3xl p-6 w-[400px] shadow-2xl"
            >
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-white font-bold text-lg">Feedback geben</h3>
                <button
                  onClick={() => setSelectedElement(null)}
                  className="text-white/40 hover:text-white"
                >
                  <X size={20} />
                </button>
              </div>

              <div className="flex gap-2 mb-6">
                {(["design", "content"] as const).map((type) => (
                  <button
                    key={type}
                    onClick={() => setCurrentType(type)}
                    className={cn(
                      "flex-1 py-3 px-4 rounded-xl text-sm font-medium transition-all capitalize",
                      currentType === type
                        ? "bg-white text-black shadow-lg"
                        : "bg-white/5 text-white/40 hover:bg-white/10",
                    )}
                  >
                    {type === "design" ? "🎨 Design" : "✍️ Content"}
                  </button>
                ))}
              </div>

              <textarea
                autoFocus
                value={currentComment}
                onChange={(e) => setCurrentComment(e.target.value)}
                placeholder="Was möchtest du anmerken?"
                className="w-full h-32 bg-white/5 border border-white/5 rounded-2xl p-4 text-white placeholder:text-white/20 focus:outline-none focus:border-blue-500/50 transition-colors resize-none mb-6"
              />

              <button
                disabled={!currentComment || isCapturing}
                onClick={saveFeedback}
                className="w-full bg-blue-500 hover:bg-blue-400 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-500/20"
              >
                {isCapturing ? (
                  "Erfasse Screenshot..."
                ) : (
                  <>
                    <Check size={20} />
                    Feedback speichern
                  </>
                )}
              </button>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* 4. Feedback List Sidebar */}
      <AnimatePresence>
        {showList && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setShowList(false)}
              className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[10001]"
            />
            <motion.div
              initial={{ x: "100%" }}
              animate={{ x: 0 }}
              exit={{ x: "100%" }}
              transition={{ type: "spring", damping: 25, stiffness: 200 }}
              className="fixed top-0 right-0 h-full w-[400px] bg-[#1c1c1e] border-l border-white/10 z-[10002] shadow-2xl flex flex-col"
            >
              <div className="p-8 border-b border-white/10 flex items-center justify-between">
                <div>
                  <h2 className="text-2xl font-bold text-white mb-1">
                    Feedback
                  </h2>
                  <p className="text-white/40 text-sm">
                    {feedbacks.length} Anmerkungen live
                  </p>
                </div>
                <button
                  onClick={() => setShowList(false)}
                  className="p-2 text-white/40 hover:text-white bg-white/5 rounded-xl transition-colors"
                >
                  <X size={20} />
                </button>
              </div>

              <div className="flex-1 overflow-y-auto p-6 space-y-6">
                {feedbacks.length === 0 ? (
                  <div className="h-full flex flex-col items-center justify-center text-center px-8 opacity-40">
                    <MessageSquare size={48} className="mb-4" />
                    <p>
                      Noch kein Feedback vorhanden. Aktiviere den Modus um
                      Stellen auf der Seite zu markieren.
                    </p>
                  </div>
                ) : (
                  feedbacks.map((fb) => (
                    <div
                      key={fb.id}
                      className="bg-white/5 border border-white/5 rounded-3xl overflow-hidden hover:border-white/20 transition-all flex flex-col"
                    >
                      <div className="p-5 border-b border-white/5 bg-white/[0.02]">
                        <div className="flex items-center justify-between mb-4">
                          <div className="flex items-center gap-2">
                            <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
                              <User size={14} />
                            </div>
                            <div>
                              <p className="text-white text-[11px] font-bold uppercase tracking-wider">
                                {fb.userName}
                              </p>
                              <p className="text-white/20 text-[9px] uppercase tracking-widest">
                                Original Poster
                              </p>
                            </div>
                          </div>
                          <span
                            className={cn(
                              "px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-wider",
                              fb.type === "design"
                                ? "bg-purple-500/20 text-purple-400"
                                : "bg-orange-500/20 text-orange-400",
                            )}
                          >
                            {fb.type}
                          </span>
                        </div>
                        <p className="text-white/80 whitespace-pre-wrap text-sm leading-relaxed">
                          {fb.text}
                        </p>
                        <div className="mt-3 flex items-center gap-2">
                          <div className="w-1 h-1 bg-white/10 rounded-full" />
                          <span className="text-white/20 text-[9px] truncate tracking-wider italic">
                            {fb.selector}
                          </span>
                        </div>
                      </div>

                      {fb.comments.length > 0 && (
                        <div className="bg-black/20 p-5 space-y-4">
                          {fb.comments.map((comment) => (
                            <div key={comment.id} className="flex gap-3">
                              <div className="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center text-white/40 shrink-0">
                                <User size={10} />
                              </div>
                              <div className="space-y-1">
                                <div className="flex items-center gap-2">
                                  <p className="text-[10px] font-bold text-white/60 uppercase">
                                    {comment.userName}
                                  </p>
                                  <p className="text-[10px] text-white/20">
                                    {new Date(
                                      comment.createdAt,
                                    ).toLocaleTimeString([], {
                                      hour: "2-digit",
                                      minute: "2-digit",
                                    })}
                                  </p>
                                </div>
                                <p className="text-white/80 text-xs leading-snug">
                                  {comment.text}
                                </p>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}

                      <div className="p-4 bg-white/[0.01] mt-auto border-t border-white/5">
                        <div className="relative">
                          <input
                            type="text"
                            value={newCommentTexts[fb.id] || ""}
                            onChange={(e) =>
                              setNewCommentTexts({
                                ...newCommentTexts,
                                [fb.id]: e.target.value,
                              })
                            }
                            placeholder="Antworten..."
                            className="w-full bg-black/40 border border-white/5 rounded-2xl py-3 pl-4 pr-12 text-xs text-white placeholder:text-white/20 focus:outline-none focus:border-blue-500/50 transition-colors"
                            onKeyDown={(e) => {
                              if (e.key === "Enter") addReply(fb.id);
                            }}
                          />
                          <button
                            onClick={() => addReply(fb.id)}
                            className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-blue-500 hover:text-blue-400 transition-colors disabled:opacity-30"
                            disabled={!newCommentTexts[fb.id]}
                          >
                            <Send size={14} />
                          </button>
                        </div>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}