/**
 * ContainerSettingsPanel Component
 *
 * A floating popover panel for editing container (oppb-price-container) settings.
 * Uses shared tab components that work in both floating and sidebar modes.
 */

import { useRef, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import * as Tabs from "@radix-ui/react-tabs";
import { Cross2Icon, ContainerIcon, CodeIcon } from "@radix-ui/react-icons";

import { useCanvasStore, useContainerSettings, useContainerSelected } from "@/stores/canvasStore";
import type { ContainerSettings } from "@/types";
import { ContainerSpacingTab, ContainerBackgroundTab, ContainerBorderTab, ContainerHooksTab } from "./tabs";

// Animation variants for the floating panel
const panelVariants = {
  hidden: {
    opacity: 0,
    scale: 0.95,
    x: 20,
  },
  visible: {
    opacity: 1,
    scale: 1,
    x: 0,
    transition: {
      type: "spring",
      stiffness: 300,
      damping: 30,
    },
  },
  exit: {
    opacity: 0,
    scale: 0.95,
    x: 20,
    transition: {
      duration: 0.15,
    },
  },
};

interface ContainerSettingsPanelProps {
  /** Position for the panel */
  position?: { x: number; y: number };
}

export function ContainerSettingsPanel({ position = { x: 100, y: 100 } }: ContainerSettingsPanelProps) {
  const panelRef = useRef<HTMLDivElement>(null);

  const containerSelected = useContainerSelected();
  const containerSettings = useContainerSettings();
  const updateContainerSettings = useCanvasStore((state) => state.updateContainerSettings);
  const clearSelection = useCanvasStore((state) => state.clearSelection);

  // Close panel when clicking outside
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
        const target = e.target as HTMLElement;
        if (target.closest(".konvajs-content")) return;
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  if (!containerSelected) return null;

  const handleUpdate = (updates: Partial<ContainerSettings>) => {
    updateContainerSettings(updates);
  };

  const handleClose = () => {
    clearSelection();
  };

  return (
    <AnimatePresence>
      <motion.div
        ref={panelRef}
        className="floating-settings"
        style={{
          position: "absolute",
          left: position.x,
          top: position.y,
          zIndex: 100,
        }}
        variants={panelVariants}
        initial="hidden"
        animate="visible"
        exit="exit"
      >
        {/* Main Panel */}
        <div className="floating-settings__panel">
          {/* Header */}
          <div className="floating-settings__header">
            <div className="floating-settings__title">
              <ContainerIcon className="w-3.5 h-3.5" />
              <span>Container Settings</span>
            </div>
            <button className="floating-settings__close" onClick={handleClose} aria-label="Close settings">
              <Cross2Icon className="w-4 h-4" />
            </button>
          </div>

          {/* Content */}
          <div className="floating-settings__content">
            <Tabs.Root defaultValue="spacing" className="w-full">
              <Tabs.List className="floating-settings__tabs">
                <Tabs.Trigger value="spacing" className="floating-settings__tab">
                  Spacing
                </Tabs.Trigger>
                <Tabs.Trigger value="background" className="floating-settings__tab">
                  Background
                </Tabs.Trigger>
                <Tabs.Trigger value="border" className="floating-settings__tab">
                  Border
                </Tabs.Trigger>
                <Tabs.Trigger value="hooks" className="floating-settings__tab">
                  <CodeIcon className="w-3 h-3 mr-1" />
                  Hooks
                </Tabs.Trigger>
              </Tabs.List>

              {/* Spacing Tab */}
              <Tabs.Content value="spacing" className="floating-settings__tab-content">
                <ContainerSpacingTab containerSettings={containerSettings} onUpdate={handleUpdate} compact={true} />
              </Tabs.Content>

              {/* Background Tab */}
              <Tabs.Content value="background" className="floating-settings__tab-content">
                <ContainerBackgroundTab containerSettings={containerSettings} onUpdate={handleUpdate} compact={true} />
              </Tabs.Content>

              {/* Border Tab */}
              <Tabs.Content value="border" className="floating-settings__tab-content">
                <ContainerBorderTab containerSettings={containerSettings} onUpdate={handleUpdate} compact={true} />
              </Tabs.Content>

              <Tabs.Content value="hooks" className="floating-settings__tab-content">
                <ContainerHooksTab compact={true} />
              </Tabs.Content>
            </Tabs.Root>
          </div>
        </div>
      </motion.div>
    </AnimatePresence>
  );
}

export default ContainerSettingsPanel;
