import { useTranslation } from "react-i18next";
import { Group, Select, Stack, ColorInput, Button, Slider, Text, NumberInput } from "@mantine/core";
import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampParameters";
import LocalIcon from "@app/components/shared/LocalIcon";
import styles from "@app/components/tools/addStamp/StampPreview.module.css";
import { Tooltip } from "@app/components/shared/Tooltip";

interface StampPositionFormattingSettingsProps {
  parameters: AddStampParameters;
  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
  disabled?: boolean;
  showPositionGrid?: boolean; // When true, show the 9-position grid for automation
}

const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabled = false, showPositionGrid = false }: StampPositionFormattingSettingsProps) => {
  const { t } = useTranslation();

  return (
    <Stack gap="md" justify="space-between">
      {/* Position Grid - shown in automation settings */}
      {showPositionGrid && (
        <Stack gap="xs">
          <Text size="sm" fw={500}>{t('AddStampRequest.position', 'Stamp Position')}</Text>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '0.5rem',
            maxWidth: '200px'
          }}>
            {Array.from({ length: 9 }).map((_, i) => {
              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
              const selected = parameters.position === idx;
              return (
                <Button
                  key={idx}
                  variant={selected ? 'filled' : 'outline'}
                  onClick={() => {
                    onParameterChange('position', idx);
                    // Ensure we're using grid positioning, not custom overrides
                    onParameterChange('overrideX', -1 as any);
                    onParameterChange('overrideY', -1 as any);
                  }}
                  disabled={disabled}
                  styles={{
                    root: {
                      height: '50px',
                      padding: '0',
                    }
                  }}
                >
                  {idx}
                </Button>
              );
            })}
          </div>
        </Stack>
      )}
      {/* Icon pill buttons row */}
      <div className="flex justify-between gap-[0.5rem]">
        <Tooltip content={t('AddStampRequest.rotation', 'Rotation')} position="top">
          <Button
            variant={parameters._activePill === 'rotation' ? 'filled' : 'outline'}
            className="flex-1"
            onClick={() => onParameterChange('_activePill', 'rotation')}
          >
            <LocalIcon icon="rotate-right-rounded" width="1.1rem" height="1.1rem" />
          </Button>
        </Tooltip>
        <Tooltip content={t('AddStampRequest.opacity', 'Opacity')} position="top">
          <Button
            variant={parameters._activePill === 'opacity' ? 'filled' : 'outline'}
            className="flex-1"
            onClick={() => onParameterChange('_activePill', 'opacity')}
          >
            <LocalIcon icon="opacity" width="1.1rem" height="1.1rem" />
          </Button>
        </Tooltip>
        <Tooltip content={parameters.stampType === 'image' ? t('AddStampRequest.imageSize', 'Image Size') : t('AddStampRequest.fontSize', 'Font Size')} position="top">
          <Button
            variant={parameters._activePill === 'fontSize' ? 'filled' : 'outline'}
            className="flex-1"
            onClick={() => onParameterChange('_activePill', 'fontSize')}
          >
            <LocalIcon icon="zoom-in-map-rounded" width="1.1rem" height="1.1rem" />
          </Button>
        </Tooltip>
      </div>

      {/* Single slider bound to selected pill */}
      {parameters._activePill === 'fontSize' && (
        <Stack gap="xs">
          <Text className={styles.labelText}>
            {parameters.stampType === 'image'
              ? t('AddStampRequest.imageSize', 'Image Size')
              : t('AddStampRequest.fontSize', 'Font Size')
            }
          </Text>
          <Group className={styles.sliderGroup} align="center">
            <NumberInput
              value={parameters.fontSize}
              onChange={(v) => onParameterChange('fontSize', typeof v === 'number' ? v : 1)}
              min={1}
              max={400}
              step={1}
              size="sm"
              className={styles.numberInput}
              disabled={disabled}
            />
            <Slider
              value={parameters.fontSize}
              onChange={(v) => onParameterChange('fontSize', v as number)}
              min={1}
              max={400}
              step={1}
              className={styles.slider}
            />
          </Group>
        </Stack>
      )}
      {parameters._activePill === 'rotation' && (
        <Stack gap="xs">
          <Text className={styles.labelText}>{t('AddStampRequest.rotation', 'Rotation')}</Text>
          <Group className={styles.sliderGroup} align="center">
            <NumberInput
              value={parameters.rotation}
              onChange={(v) => onParameterChange('rotation', typeof v === 'number' ? v : 0)}
              min={-180}
              max={180}
              step={1}
              size="sm"
              className={styles.numberInput}
              hideControls
              disabled={disabled}
            />
            <Slider
              value={parameters.rotation}
              onChange={(v) => onParameterChange('rotation', v as number)}
              min={-180}
              max={180}
              step={1}
              className={styles.sliderWide}
            />
          </Group>
        </Stack>
      )}
      {parameters._activePill === 'opacity' && (
        <Stack gap="xs">
          <Text className={styles.labelText}>{t('AddStampRequest.opacity', 'Opacity')}</Text>
          <Group className={styles.sliderGroup} align="center">
            <NumberInput
              value={parameters.opacity}
              onChange={(v) => onParameterChange('opacity', typeof v === 'number' ? v : 0)}
              min={0}
              max={100}
              step={1}
              size="sm"
              className={styles.numberInput}
              disabled={disabled}
            />
            <Slider
              value={parameters.opacity}
              onChange={(v) => onParameterChange('opacity', v as number)}
              min={0}
              max={100}
              step={1}
              className={styles.slider}
            />
          </Group>
        </Stack>
      )}

      {parameters.stampType !== 'image' && (
        <ColorInput
          label={t('AddStampRequest.customColor', 'Custom Text Color')}
          value={parameters.customColor}
          onChange={(value) => onParameterChange('customColor', value)}
          format="hex"
          disabled={disabled}
        />
      )}

      {/* Margin selection for text stamps */}
      {parameters.stampType === 'text' && (
        <Select
          label={t('AddStampRequest.margin', 'Margin')}
          value={parameters.customMargin}
          onChange={(v) => onParameterChange('customMargin', (v as any) || 'medium')}
          data={[
            { value: 'small', label: t('margin.small', 'Small') },
            { value: 'medium', label: t('margin.medium', 'Medium') },
            { value: 'large', label: t('margin.large', 'Large') },
            { value: 'x-large', label: t('margin.xLarge', 'Extra Large') },
          ]}
          disabled={disabled}
        />
      )}
    </Stack>
  );
};

export default StampPositionFormattingSettings;
