import { Drawer, Radio, ColorPicker, theme } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useAppStore } from '@/stores/useAppStore';

interface StyleSettingsProps {
  open: boolean;
  onClose: () => void;
}

const PRESET_COLORS = [
  { color: '#1677ff', nameKey: 'colorBlue' },
  { color: '#13c2c2', nameKey: 'colorCyan' },
  { color: '#52c41a', nameKey: 'colorGreen' },
  { color: '#722ed1', nameKey: 'colorPurple' },
  { color: '#eb2f96', nameKey: 'colorPink' },
  { color: '#fa541c', nameKey: 'colorOrange' },
  { color: '#faad14', nameKey: 'colorYellow' },
  { color: '#2f54eb', nameKey: 'colorIndigo' },
];

const StyleSettings: React.FC<StyleSettingsProps> = ({ open, onClose }) => {
  const { t } = useTranslation('header');
  const { token: themeToken } = theme.useToken();
  const primaryColor = useAppStore((s) => s.primaryColor);
  const componentSize = useAppStore((s) => s.componentSize);
  const menuTheme = useAppStore((s) => s.menuTheme);
  const setPrimaryColor = useAppStore((s) => s.setPrimaryColor);
  const setComponentSize = useAppStore((s) => s.setComponentSize);
  const setMenuTheme = useAppStore((s) => s.setMenuTheme);

  const isPresetColor = PRESET_COLORS.some((c) => c.color === primaryColor);

  return (
    <Drawer
      title={t('styleSettings')}
      placement="right"
      styles={{ wrapper: { width: 360 } }}
      open={open}
      onClose={onClose}
      maskClosable={false}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
        <div>
          <div
            style={{
              fontSize: 14,
              fontWeight: 500,
              marginBottom: 16,
              color: themeToken.colorTextHeading,
            }}
          >
            {t('themeColor')}
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {PRESET_COLORS.map(({ color, nameKey }) => (
              <div
                key={color}
                onClick={() => setPrimaryColor(color)}
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  gap: 4,
                  cursor: 'pointer',
                }}
              >
                <div
                  style={{
                    width: 20,
                    height: 20,
                    borderRadius: '50%',
                    backgroundColor: color,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    border:
                      primaryColor === color
                        ? `2px solid ${themeToken.colorText}`
                        : '2px solid transparent',
                    transition: 'border-color 0.2s',
                  }}
                >
                  {primaryColor === color && (
                    <CheckOutlined
                      style={{ color: '#fff', fontSize: 14, fontWeight: 'bold' }}
                    />
                  )}
                </div>
                <span style={{ fontSize: 12, color: themeToken.colorTextSecondary }}>
                  {t(nameKey)}
                </span>
              </div>
            ))}
          </div>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              marginTop: 16,
            }}
          >
            <ColorPicker
              value={primaryColor}
              onChange={(_, hex) => setPrimaryColor(hex)}
              presets={[]}
              showText
            />
            <span style={{ color: themeToken.colorTextSecondary, fontSize: 13 }}>
              {!isPresetColor && t('customColor')}
            </span>
          </div>
        </div>

        <div>
          <div
            style={{
              fontSize: 14,
              fontWeight: 500,
              marginBottom: 16,
              color: themeToken.colorTextHeading,
            }}
          >
            {t('componentSize')}
          </div>
          <Radio.Group
            value={componentSize}
            onChange={(e) => setComponentSize(e.target.value)}
            optionType="button"
            buttonStyle="solid"
          >
            <Radio.Button value="small">{t('sizeSmall')}</Radio.Button>
            <Radio.Button value="middle">{t('sizeMiddle')}</Radio.Button>
            <Radio.Button value="large">{t('sizeLarge')}</Radio.Button>
          </Radio.Group>
        </div>

        <div>
          <div
            style={{
              fontSize: 14,
              fontWeight: 500,
              marginBottom: 16,
              color: themeToken.colorTextHeading,
            }}
          >
            {t('menuTheme')}
          </div>
          <Radio.Group
            value={menuTheme}
            onChange={(e) => setMenuTheme(e.target.value)}
            optionType="button"
            buttonStyle="solid"
          >
            <Radio.Button value="dark">{t('menuThemeDark')}</Radio.Button>
            <Radio.Button value="light">{t('menuThemeLight')}</Radio.Button>
          </Radio.Group>
        </div>
      </div>
    </Drawer>
  );
};

export default StyleSettings;