/**
 * CurrencySettings Component
 *
 * Settings panel for currency element:
 * - Currency symbol dropdown
 * - Custom image from WordPress media library
 */

import type { CurrencyElement } from "@/types";
import { CURRENCY_SYMBOLS, getWooCommerceCurrency } from "@/constants/currencySymbols";
import { Select, Switch, MediaPicker, type MediaAttachment } from "../ui";

// Build currency options for Select component
const CURRENCY_OPTIONS = CURRENCY_SYMBOLS.map((currency) => ({
  value: currency.code,
  label: `${currency.symbol} - ${currency.name} (${currency.code})`,
}));

interface CurrencySettingsProps {
  element: CurrencyElement;
  onUpdate: (updates: Partial<CurrencyElement>) => void;
  /** Use compact styling for floating panels */
  compact?: boolean;
}

export function CurrencySettings({ element, onUpdate, compact = false }: CurrencySettingsProps) {
  const wcCurrency = getWooCommerceCurrency();

  const size = compact ? "compact" : "default";
  const labelClass = compact ? "floating-settings__label" : "settings-label";
  const fieldClass = compact ? "floating-settings__group" : "settings-field";
  const rowClass = compact ? "floating-settings__row" : "settings-field-inline";
  const titleClass = compact ? "text-xs font-semibold text-gray-600 mb-2" : "settings-section__title";
  const infoClass = compact ? "text-[10px] text-gray-500 bg-gray-50 rounded px-2 py-1 mb-2" : "settings-info-box";

  // Handle currency selection
  const handleCurrencyChange = (code: string) => {
    const selected = CURRENCY_SYMBOLS.find((c) => c.code === code);
    if (selected) {
      onUpdate({
        symbol: selected.symbol,
        symbolCode: selected.code,
      });
    }
  };

  // Handle media selection
  const handleMediaSelect = (attachment: MediaAttachment) => {
    onUpdate({
      customImageUrl: attachment.url,
      customImageId: attachment.id,
      useCustomImage: true,
    });
  };

  // Handle media removal
  const handleMediaRemove = () => {
    onUpdate({
      customImageUrl: null,
      customImageId: null,
      useCustomImage: false,
    });
  };

  return (
    <div className="currency-settings">
      <h4 className={titleClass}>Currency Symbol</h4>

      {/* WooCommerce Default Info */}
      <div className={infoClass}>
        <span className="text-xs text-gray-500">
          WooCommerce Default: <strong>{wcCurrency.symbol}</strong> ({wcCurrency.code})
        </span>
      </div>

      {/* Symbol Dropdown */}
      <div className={`${fieldClass} mt-3`}>
        <label className={labelClass}>Currency</label>
        <Select value={element.symbolCode || wcCurrency.code} onValueChange={handleCurrencyChange} options={CURRENCY_OPTIONS} size={size} />
      </div>

      <h4 className={`${titleClass} mt-4`}>Custom Image</h4>

      {/* Use Custom Image Toggle */}
      <div className={rowClass}>
        <label className={labelClass}>Use Custom Image</label>
        <Switch
          checked={element.useCustomImage || false}
          onCheckedChange={(checked: boolean) => onUpdate({ useCustomImage: checked })}
          size={size}
        />
      </div>

      {/* Custom Image Selector */}
      {element.useCustomImage && (
        <div className={`${fieldClass} mt-2`}>
          <MediaPicker
            value={element.customImageUrl}
            onSelect={handleMediaSelect}
            onRemove={handleMediaRemove}
            title="Select Currency Image"
            selectLabel="Select Image"
            changeLabel="Change Image"
            helpText="Use a custom image (SVG, PNG, etc.) instead of the currency symbol text."
            compact={compact}
            previewSize="sm"
          />
        </div>
      )}
    </div>
  );
}

export default CurrencySettings;
