/**
 * StyleTab Component
 *
 * Style settings shared by all elements:
 * - Colors (Text & Background)
 * - Typography (cascading popover or modal)
 * - Borders (cascading popover or modal)
 * - Padding (responsive)
 *
 * Supports both floating panel (compact) and sidebar (!compact) modes.
 */

import { FontStyleIcon, BorderAllIcon, ChevronRightIcon } from "@radix-ui/react-icons";

import type { CanvasElement } from "@/types";
import { ColorPicker } from "../ui";
import { PaddingGroup } from "../groups/PaddingGroup";
import { MarginGroup } from "../groups/MarginGroup";

interface StyleTabProps {
  element: CanvasElement;
  onUpdate: (updates: Partial<CanvasElement>) => void;
  typographyOpen: boolean;
  onTypographyToggle: (open: boolean) => void;
  bordersOpen: boolean;
  onBordersToggle: (open: boolean) => void;
  /** Whether to use compact (floating) styling */
  compact?: boolean;
}

export function StyleTab({
  element,
  onUpdate,
  typographyOpen,
  onTypographyToggle,
  bordersOpen,
  onBordersToggle,
  compact = true,
}: StyleTabProps) {
  // Use different class prefixes based on mode
  // Floating uses floating-settings__, Sidebar uses settings- classes
  const sectionClass = compact ? "floating-settings__section" : "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";

  return (
    <div className={sectionClass}>
      {/* Colors */}
      <div className={groupClass}>
        <label className={labelClass}>Colors</label>
        <div className={gridClass}>
          <div className={compact ? "floating-settings__color-field" : "settings-field"}>
            <ColorPicker value={element.color} onChange={(color: string) => onUpdate({ color })} />
            {compact && <span className="floating-settings__color-label">Text</span>}
            {!compact && <label className="settings-label">Text</label>}
          </div>
          <div className={compact ? "floating-settings__color-field" : "settings-field"}>
            <ColorPicker
              value={element.backgroundColor === "transparent" ? "#ffffff" : element.backgroundColor}
              onChange={(color: string) => onUpdate({ backgroundColor: color })}
            />
            {compact && <span className="floating-settings__color-label">Fill</span>}
            {!compact && <label className="settings-label">Fill</label>}
          </div>
        </div>
      </div>

      {/* Typography & Borders - Buttons */}
      <div className={groupClass}>
        <button
          className={
            compact
              ? `floating-settings__cascade-btn ${typographyOpen ? "active" : ""}`
              : `settings-modal-trigger ${typographyOpen ? "active" : ""}`
          }
          onClick={() => {
            onTypographyToggle(!typographyOpen);
            if (!typographyOpen) onBordersToggle(false);
          }}
        >
          <FontStyleIcon className="w-4 h-4" />
          <span>Typography</span>
          <span className={compact ? "floating-settings__cascade-preview" : "settings-modal-trigger__preview"}>
            {element.typography.fontFamily.split(",")[0]} • {element.typography.fontSize.desktop}px
          </span>
          {compact && <ChevronRightIcon className="w-4 h-4 ml-auto" />}
        </button>

        <button
          className={
            compact
              ? `floating-settings__cascade-btn ${bordersOpen ? "active" : ""}`
              : `settings-modal-trigger ${bordersOpen ? "active" : ""}`
          }
          onClick={() => {
            onBordersToggle(!bordersOpen);
            if (!bordersOpen) onTypographyToggle(false);
          }}
        >
          <BorderAllIcon className="w-4 h-4" />
          <span>Borders</span>
          <span className={compact ? "floating-settings__cascade-preview" : "settings-modal-trigger__preview"}>
            {element.border.width.desktop}px • {element.border.radius}px radius
          </span>
          {compact && <ChevronRightIcon className="w-4 h-4 ml-auto" />}
        </button>
      </div>

      {/* Padding - Responsive */}
      <div className={groupClass}>
        <PaddingGroup padding={element.padding} onUpdate={(padding) => onUpdate({ padding })} compact={compact} />
      </div>

      {/* Margin - Responsive */}
      <div className={groupClass}>
        <MarginGroup margin={element.margin} onUpdate={(margin) => onUpdate({ margin })} compact={compact} />
      </div>
    </div>
  );
}

export default StyleTab;
