import actionPanelAiLogoDark from '../../assets/logos/actionpanel-ai-logo-dark.svg';
import actionPanelAiLogoLight from '../../assets/logos/actionpanel-ai-logo-light.svg';
import wpAssistantLogoDark from '../../assets/logos/wp-assistant-logo-dark.svg';
import wpAssistantLogoLight from '../../assets/logos/wp-assistant-logo-light.svg';
import { ASSISTANT_BRAND_NAME, IS_WORDPRESS } from '../../constants';
import { useTheme } from '../../contexts/ThemeContext';

interface WPAssistantLogoProps {
  size?: number;
}

const ATIBA_URL = IS_WORDPRESS
  ? 'https://www.atiba.com/'
  : 'https://www.atiba.com?utm_source=wpassistant&utm_medium=referral&utm_campaign=wpassistant&utm_id=10219074-wpassistant';

const LOGO_VARIANTS = {
  'ActionPanel AI': {
    aspectRatio: 1897.762 / 269,
    darkSrc: actionPanelAiLogoDark,
    lightSrc: actionPanelAiLogoLight,
    showSubtitle: false,
    subtitleOffsetRem: 0.45,
  },
  'WP Assistant': {
    aspectRatio: 173 / 24,
    darkSrc: wpAssistantLogoDark,
    lightSrc: wpAssistantLogoLight,
    showSubtitle: true,
    subtitleOffsetRem: 0.6,
  },
} as const;

export const WPAssistantLogo = ({ size = 24 }: WPAssistantLogoProps) => {
  const { effectiveTheme } = useTheme();
  const scale = size / 24;
  const variant =
    LOGO_VARIANTS[ASSISTANT_BRAND_NAME as keyof typeof LOGO_VARIANTS] ?? LOGO_VARIANTS['WP Assistant'];
  const logoSrc = effectiveTheme === 'dark' ? variant.darkSrc : variant.lightSrc;

  const subtitleSize = 0.8 * scale;
  const subtitleIndentRight = 0.8 * scale;
  const renderedWidth = size * variant.aspectRatio;

  return (
    <div className="flex flex-col whitespace-nowrap p-0 m-0" style={{ width: `${renderedWidth}px` }}>
      <span
        aria-hidden="true"
        className="block p-0 m-0 leading-none text-inherit"
        style={{ width: `${renderedWidth}px`, height: `${size}px` }}
      >
        <img
          src={logoSrc}
          alt=""
          draggable={false}
          className="block p-0 m-0 select-none"
          style={{ width: `${renderedWidth}px`, height: `${size}px`, objectFit: 'contain' }}
        />
      </span>

      {variant.showSubtitle ? (
        <div
          className="flex p-0 m-0"
          style={{
            justifyContent: 'flex-end',
            marginTop: `${-variant.subtitleOffsetRem * scale}rem`,
          }}
        >
          <div
            style={{
              paddingRight: `${subtitleIndentRight}rem`,
              width: '100%',
              textAlign: 'right',
            }}
          >
            <a
              href={ATIBA_URL}
              target="_blank"
              rel="noopener"
              className="cursor-pointer text-gray-900 dark:text-gray-300 hover:underline inline-block"
              style={{
                fontSize: `${subtitleSize}rem`,
              }}
            >
              By Atiba
            </a>
          </div>
        </div>
      ) : null}
    </div>
  );
};