/**
 * ContainerBorderTab Component
 *
 * Tab content for container border settings.
 * Supports both compact (floating) and non-compact (sidebar) modes.
 * Uses BordersPopover in compact mode and BordersModal in sidebar mode.
 */

import {useState} from "react";
import {ChevronRightIcon} from "@radix-ui/react-icons";
import {AnimatePresence} from "motion/react";

import type {ContainerSettings, ResponsiveBorderSettings} from "@/types";
import {BordersPopover} from "../popovers";
import {BordersModal} from "../modals/BordersModal";

interface ContainerBorderTabProps {
  /** Container settings */
  containerSettings: ContainerSettings;
  /** Called when settings change */
  onUpdate: (updates: Partial<ContainerSettings>) => void;
  /** Use compact styling for floating panels */
  compact?: boolean;
}

export function ContainerBorderTab({
  containerSettings,
  onUpdate,
  compact = true,
}: ContainerBorderTabProps) {
  const [bordersOpen, setBordersOpen] = useState(false);

  const sectionClass = compact
    ? "floating-settings__section floating-settings__section--scrollable"
    : "settings-section";
  const groupClass = compact ? "floating-settings__group" : "settings-group";

  const handleBorderUpdate = (border: ResponsiveBorderSettings) => {
    onUpdate({border});
  };

  // Preview text showing current border values
  const borderPreview = `${containerSettings.border.width.desktop}px ${containerSettings.border.color}`;

  return (
    <div className={sectionClass}>
      <div className={groupClass}>
        {compact ? (
          // Compact mode: use popover trigger
          <button
            className="floating-settings__popover-trigger"
            onClick={() => setBordersOpen(!bordersOpen)}
          >
            <span>Border Settings</span>
            <span className="floating-settings__popover-indicator">
              <span className="text-xs text-text-muted mr-1">
                {borderPreview}
              </span>
              <ChevronRightIcon className="w-4 h-4" />
            </span>
          </button>
        ) : (
          // Sidebar mode: use modal trigger
          <button
            className="settings-modal-trigger"
            onClick={() => setBordersOpen(true)}
          >
            <span>Border Settings</span>
            <span className="settings-modal-trigger__preview">
              <span className="text-xs text-text-muted">{borderPreview}</span>
              <ChevronRightIcon className="w-4 h-4" />
            </span>
          </button>
        )}
      </div>

      {/* Popover (compact mode) */}
      {compact && (
        <AnimatePresence>
          {bordersOpen && (
            <BordersPopover
              border={containerSettings.border}
              onUpdate={handleBorderUpdate}
              onClose={() => setBordersOpen(false)}
            />
          )}
        </AnimatePresence>
      )}

      {/* Modal (sidebar mode) */}
      {!compact && (
        <BordersModal
          open={bordersOpen}
          onOpenChange={setBordersOpen}
          border={containerSettings.border}
          onUpdate={handleBorderUpdate}
          isResponsive={true}
        />
      )}
    </div>
  );
}

export default ContainerBorderTab;
