/**
 * MoreTab Component
 *
 * Additional settings tab containing transform, animation, and custom HTML settings.
 */

import { MagicWandIcon, LayoutIcon } from "@radix-ui/react-icons";

import type { CanvasElement, AnimationSettings } from "@/types";
import { Switch, NumberInput, Slider, ButtonGroup } from "../ui";
import { AnimationGroup, CustomHtmlGroup } from "../groups";

interface MoreTabProps {
  element: CanvasElement;
  onUpdate: (updates: Partial<CanvasElement>) => void;
  compact?: boolean;
  placeholderOpen?: boolean;
  onPlaceholderToggle?: (open: boolean) => void;
}

export function MoreTab({ element, onUpdate, compact = false, placeholderOpen = false, onPlaceholderToggle }: MoreTabProps) {
  const isPriceElement = element.type === "regularPrice" || element.type === "salePrice";

  // Class names based on mode
  const sectionClass = compact ? "floating-settings__section floating-settings__section--scrollable" : "settings-section";
  const groupClass = compact ? "floating-settings__group" : "settings-field";
  const labelClass = compact ? "floating-settings__label" : "settings-label";
  const gridClass = compact ? "floating-settings__grid-2" : "settings-grid-2";
  const rowClass = compact ? "floating-settings__row" : "settings-field-inline";
  const dividerClass = compact ? "floating-settings__divider" : "settings-divider";

  return (
    <div className={sectionClass}>
      {/* Position Type Section */}
      <div className={groupClass}>
        <label className={labelClass}>
          <LayoutIcon className="w-3.5 h-3.5 inline mr-1" />
          Position Type
        </label>
        <ButtonGroup
          options={[
            { value: "relative", label: "Flow" },
            { value: "absolute", label: "Absolute" },
          ]}
          value={element.positionType}
          onChange={(value) => onUpdate({ positionType: value as "relative" | "absolute" })}
          size={compact ? "compact" : "default"}
        />
        <p className="text-xs text-text-muted mt-1">
          {element.positionType === "absolute"
            ? "Element positioned at exact X/Y coordinates"
            : "Element flows with other elements in layout"}
        </p>
      </div>

      {/* Divider */}
      <div className={dividerClass} />

      {/* Transform Section */}
      <div className={groupClass}>
        <label className={labelClass}>Position</label>
        <div className={gridClass}>
          <NumberInput
            label="X"
            value={Math.round(element.position.x)}
            onChange={(value: number) =>
              onUpdate({
                position: { ...element.position, x: value },
              })
            }
          />
          <NumberInput
            label="Y"
            value={Math.round(element.position.y)}
            onChange={(value: number) =>
              onUpdate({
                position: { ...element.position, y: value },
              })
            }
          />
        </div>
      </div>

      <div className={groupClass}>
        <label className={labelClass}>Size</label>
        <div className={gridClass}>
          <NumberInput label="W" value={Math.round(element.size.width)} disabled />
          <NumberInput label="H" value={Math.round(element.size.height)} disabled />
        </div>
      </div>

      <div className={gridClass}>
        <div className={groupClass}>
          <label className={labelClass}>Rotation</label>
          <NumberInput value={Math.round(element.rotation)} onChange={(value: number) => onUpdate({ rotation: value })} />
        </div>
        <div className={groupClass}>
          <label className={labelClass}>Opacity</label>
          <Slider
            value={element.opacity}
            onValueChange={(value: number) => onUpdate({ opacity: value })}
            min={0}
            max={1}
            step={0.05}
            showValue
          />
        </div>
      </div>

      <div className={rowClass}>
        <span className={labelClass}>Locked</span>
        <Switch checked={element.locked} onCheckedChange={(checked: boolean) => onUpdate({ locked: checked })} size="sm" />
      </div>

      {/* Divider */}
      <div className={dividerClass} />

      {/* Animation Section */}
      <div className={groupClass}>
        <label className={labelClass}>
          <MagicWandIcon className="w-3.5 h-3.5 inline mr-1" />
          Animation
        </label>
        <AnimationGroup
          animation={element.animation}
          onUpdate={(animation: AnimationSettings) => onUpdate({ animation })}
          isPriceElement={isPriceElement}
          compact={compact}
        />
      </div>
    </div>
  );
}

export default MoreTab;
