import { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { Sliders } from "@phosphor-icons/react";
import { motion, AnimatePresence } from "framer-motion";
import clsx from "clsx";
import { useExplorer } from "./context";
import { TopBarButton } from "@sd/ui";

interface ViewSettingsPanelProps {
	viewSettings: any;
	setViewSettings: (settings: any) => void;
	viewMode: string;
	totalFileCount?: number;
}

export function ViewSettingsPanel({
	viewSettings,
	setViewSettings,
	viewMode,
	totalFileCount,
}: ViewSettingsPanelProps) {
	return (
		<div className="w-64 bg-app-box border border-app-line rounded-lg shadow-lg p-3 space-y-4">
			<div className="text-xs font-semibold text-sidebar-ink uppercase tracking-wider">
				View Settings
			</div>

			{/* Column Width (Column View Only) */}
			{viewMode === "column" && (
				<div className="space-y-2">
					<div className="flex items-center justify-between">
						<label className="text-xs text-sidebar-inkDull">
							Column Width
						</label>
						<span className="text-xs text-sidebar-ink font-medium">
							{viewSettings.columnWidth}px
						</span>
					</div>
					<input
						type="range"
						min="200"
						max="400"
						step="8"
						value={viewSettings.columnWidth}
						onChange={(e) =>
							setViewSettings({ columnWidth: parseInt(e.target.value) })
						}
						className="w-full h-1 bg-app-line rounded-lg appearance-none cursor-pointer
							[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:cursor-pointer
							[&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0"
					/>
				</div>
			)}

			{/* Grid Size (Grid View and Media View) */}
			{(viewMode === "grid" || viewMode === "media") && (
				<div className="space-y-2">
					<div className="flex items-center justify-between">
						<label className="text-xs text-sidebar-inkDull">
							{viewMode === "media" ? "Thumbnail Size" : "Grid Size"}
						</label>
						<span className="text-xs text-sidebar-ink font-medium">
							{viewSettings.gridSize}px
						</span>
					</div>
					<input
						type="range"
						min="80"
						max="400"
						step="10"
						value={viewSettings.gridSize}
						onChange={(e) =>
							setViewSettings({ gridSize: parseInt(e.target.value) })
						}
						className="w-full h-1 bg-app-line rounded-lg appearance-none cursor-pointer
							[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:cursor-pointer
							[&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0"
					/>
				</div>
			)}

			{/* Gap Size (Grid View Only) */}
			{viewMode === "grid" && (
				<div className="space-y-2">
					<div className="flex items-center justify-between">
						<label className="text-xs text-sidebar-inkDull">Gap Size</label>
						<span className="text-xs text-sidebar-ink font-medium">
							{viewSettings.gapSize}px
						</span>
					</div>
					<input
						type="range"
						min="1"
						max="32"
						step="1"
						value={viewSettings.gapSize}
						onChange={(e) =>
							setViewSettings({ gapSize: parseInt(e.target.value) })
						}
						className="w-full h-1 bg-app-line rounded-lg appearance-none cursor-pointer
							[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:cursor-pointer
							[&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0"
					/>
				</div>
			)}

			{/* Item Limit (Size View Only) */}
			{viewMode === "size" && (
				<div className="space-y-2">
					<div className="flex items-center justify-between">
						<label className="text-xs text-sidebar-inkDull">Items Shown</label>
						<span className="text-xs text-sidebar-ink font-medium">
							{Math.min(viewSettings.sizeViewItemLimit || 500, totalFileCount || 500)} / {totalFileCount || 0}
						</span>
					</div>
					<input
						type="range"
						min="50"
						max={Math.max(50, totalFileCount || 500)}
						step="10"
						value={Math.min(viewSettings.sizeViewItemLimit || 500, totalFileCount || 500)}
						onChange={(e) =>
							setViewSettings({ sizeViewItemLimit: parseInt(e.target.value) })
						}
						className="w-full h-1 bg-app-line rounded-lg appearance-none cursor-pointer
							[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:cursor-pointer
							[&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0"
					/>
				</div>
			)}

			{/* Show File Size Toggle */}
			<div className="flex items-center justify-between pt-1">
				<label className="text-xs text-sidebar-inkDull">Show File Size</label>
				<button
					onClick={() =>
						setViewSettings({ showFileSize: !viewSettings.showFileSize })
					}
					className={clsx(
						"relative w-9 h-5 rounded-full transition-colors",
						viewSettings.showFileSize ? "bg-accent" : "bg-app-line",
					)}
				>
					<motion.div
						className="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full"
						animate={{
							x: viewSettings.showFileSize ? 16 : 0,
						}}
						transition={{ duration: 0.2 }}
					/>
				</button>
			</div>

			{/* Folders First Toggle */}
			<div className="flex items-center justify-between pt-1">
				<label className="text-xs text-sidebar-inkDull">Folders First</label>
				<button
					onClick={() =>
						setViewSettings({ foldersFirst: !viewSettings.foldersFirst })
					}
					className={clsx(
						"relative w-9 h-5 rounded-full transition-colors",
						viewSettings.foldersFirst ? "bg-accent" : "bg-app-line",
					)}
				>
					<motion.div
						className="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full"
						animate={{
							x: viewSettings.foldersFirst ? 16 : 0,
						}}
						transition={{ duration: 0.2 }}
					/>
				</button>
			</div>
		</div>
	);
}

interface ViewSettingsProps {
  className?: string;
  totalFileCount?: number;
}

export function ViewSettings({ className, totalFileCount }: ViewSettingsProps) {
  const [isOpen, setIsOpen] = useState(false);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const panelRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ top: 0, right: 0 });
  const { viewSettings, setViewSettings, viewMode } = useExplorer();

  // Update position when opened
  useEffect(() => {
    if (isOpen && buttonRef.current) {
      const rect = buttonRef.current.getBoundingClientRect();
      setPosition({
        top: rect.bottom + 8, // 8px gap (mt-2)
        right: window.innerWidth - rect.right,
      });
    }
  }, [isOpen]);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (
        panelRef.current &&
        buttonRef.current &&
        !panelRef.current.contains(e.target as Node) &&
        !buttonRef.current.contains(e.target as Node)
      ) {
        setIsOpen(false);
      }
    };

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

  return (
    <>
      <div className={clsx(className)}>
        <TopBarButton
          ref={buttonRef}
          icon={Sliders}
          onClick={() => setIsOpen(!isOpen)}
          active={isOpen}
          title="View Settings"
        />
      </div>

      {isOpen &&
        createPortal(
          <AnimatePresence>
            <motion.div
              ref={panelRef}
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.15 }}
              style={{
                position: "fixed",
                top: `${position.top}px`,
                right: `${position.right}px`,
              }}
              className="z-50"
            >
              <ViewSettingsPanel
                viewSettings={viewSettings}
                setViewSettings={setViewSettings}
                viewMode={viewMode}
                totalFileCount={totalFileCount}
              />
            </motion.div>
          </AnimatePresence>,
          document.body
        )}
    </>
  );
}