import { useState } from 'react';
import { Icon } from '../../Atoms/Icon/Icon';
import { Typography } from '../../Atoms/Typography/Typography';
import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
import { FONT_FAMILY_SANS } from '../../../designTokens';

export const HeaderGeneral = ({
  variant,
  logoText = 'HEXA',
  suiteText = 'Suite',
  languages = [
    { code: 'es-AR', name: 'Español' },
    { code: 'en', name: 'English' },
  ],
  currentLanguageCode = 'es-AR',
  onLanguageChange,
  onLogoClick,
  className = '',
  ...props
}) => {
  const [isLanguageOpen, setIsLanguageOpen] = useState(false);
  const [hoveredLangCode, setHoveredLangCode] = useState(null);
  const [isLanguageButtonHovered, setIsLanguageButtonHovered] = useState(false);
  const isLoginVariant = variant === 'login';

  const currentLanguage = languages.find(lang => lang.code === currentLanguageCode) || languages[0];

  const handleLanguageChange = (langCode) => {
    if (onLanguageChange) {
      onLanguageChange(langCode);
    }
    setIsLanguageOpen(false);
  };

  return (
    isLoginVariant ? (() => {
      const { style: styleProp, ...restProps } = props;

      return (
        <header
          className={`w-full flex justify-between items-center bg-white ${className}`}
          style={{
            boxShadow: '0px 2px 4px -1px #0000000F, 0px 4px 6px -1px #0000001A',
            padding: '16px var(--mf-ds-grid-margin, 20px)',
            ...styleProp,
          }}
          {...restProps}
        >
          {/* Logo */}
          <div className="flex items-center gap-3">
            {onLogoClick ? (
              <button
                onClick={onLogoClick}
                className="cursor-pointer hover:opacity-80 transition-opacity flex-shrink-0"
                style={{ 
                  border: 'none', 
                  background: 'transparent', 
                  padding: 0,
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
                aria-label="Logo"
                type="button"
              >
                <LogoHexa width={36} height={40} />
              </button>
            ) : (
              <LogoHexa width={36} height={40} />
            )}
            <div className="flex items-center" style={{ gap: '4px' }}>
              <Typography
                variant="h5"
                className="font-normal"
                style={{
                  color: '#2D5C63',
                  margin: 0,
                  fontFamily: FONT_FAMILY_SANS,
                  fontWeight: 400,
                  fontStyle: 'normal',
                  fontSize: '20px',
                  lineHeight: '30px',
                  letterSpacing: '0px',
                }}
              >
                {logoText}
              </Typography>
              <Typography
                variant="h5"
                className="font-normal"
                style={{
                  color: '#2D5C63',
                  margin: 0,
                  fontFamily: FONT_FAMILY_SANS,
                  fontWeight: 400,
                  fontStyle: 'normal',
                  fontSize: '20px',
                  lineHeight: '30px',
                  letterSpacing: '0px',
                }}
              >
                {suiteText}
              </Typography>
            </div>
          </div>

          {/* Language Selector - Solo se muestra si hay idiomas */}
          {languages && languages.length > 0 && (
            <div className="relative">
              <div className="flex items-center" style={{ width: '150px', height: '40px', gap: '16px', opacity: 1 }}>
                <Icon
                  name="LanguageIcon"
                  variant="24-outline"
                  size={20}
                  style={{ width: '20px', height: '20px', opacity: 1 }}
                />
                <button
                  onClick={() => setIsLanguageOpen(!isLanguageOpen)}
                  onMouseEnter={() => setIsLanguageButtonHovered(true)}
                  onMouseLeave={() => setIsLanguageButtonHovered(false)}
                  className="flex items-center gap-2 text-body-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
                  style={{
                    width: '114px',
                    height: '40px',
                    padding: '8px 12px 8px 16px',
                    gap: '8px',
                    borderRadius: '8px',
                    border: '1px solid #38656D',
                    background: isLanguageButtonHovered ? '#F9FAFB' : 'white',
                    opacity: 1,
                    color: '#374151',
                  }}
                >
                  <span>{currentLanguage.name}</span>
                  <Icon
                    name="ChevronDownIcon"
                    variant="24-outline"
                    size={16}
                    className={`transition-transform ${isLanguageOpen ? 'rotate-180' : ''}`}
                  />
                </button>
              </div>

              {isLanguageOpen && (
                <>
                  <div
                    className="fixed inset-0 z-10"
                    onClick={() => setIsLanguageOpen(false)}
                  />
                  <div
                    className="absolute right-0 mt-2 bg-white z-20"
                    style={{
                      width: '224px',
                      height: '112px',
                      padding: '12px',
                      borderRadius: '12px',
                      border: '1px solid #E5E7EB',
                      boxShadow: '0px 2px 4px -2px #0000001A, 0px 4px 6px -1px #0000001A',
                      display: 'flex',
                      flexDirection: 'column',
                      gap: '8px',
                    }}
                  >
                    {languages.map((lang) => (
                      <button
                        key={lang.code}
                        onClick={() => handleLanguageChange(lang.code)}
                        className="w-full text-left transition-colors"
                        style={{
                          width: '200px',
                          height: '40px',
                          padding: 0,
                          border: 'none',
                          background: 'transparent',
                        }}
                        onMouseEnter={() => setHoveredLangCode(lang.code)}
                        onMouseLeave={() => setHoveredLangCode(null)}
                      >
                        <div
                          style={{
                            width: '200px',
                            height: '40px',
                            padding: '8px',
                            borderRadius: '8px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                            gap: '16px',
                            backgroundColor:
                              currentLanguage.code === lang.code
                                ? '#6D3856'
                                : hoveredLangCode === lang.code
                                  ? '#DDDDDD'
                                  : 'transparent',
                            color: currentLanguage.code === lang.code ? '#FFFFFF' : undefined,
                          }}
                        >
                          <span
                            style={{
                              fontFamily: FONT_FAMILY_SANS,
                              fontWeight: 400,
                              fontStyle: 'normal',
                              fontSize: '16px',
                              lineHeight: '24px',
                              letterSpacing: '0px',
                              width: '144px',
                              height: '24px',
                              opacity: 1,
                            }}
                          >
                            {lang.name}
                          </span>

                          {currentLanguage.code === lang.code && (
                            <div
                              style={{
                                width: '24px',
                                height: '24px',
                                backgroundColor: '#FFFFFF',
                                borderRadius: '999px',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                              }}
                            >
                              <Icon
                                name="CheckCircleIcon"
                                variant="24-solid"
                                size={24}
                                style={{ width: '24px', height: '24px', color: '#6D3856' }}
                              />
                            </div>
                          )}
                        </div>
                      </button>
                    ))}
                  </div>
                </>
              )}
            </div>
          )}
        </header>
      );
    })() : (
      <header className={`w-full flex justify-between items-center bg-white ${className}`} style={{ paddingTop: '4px', paddingBottom: '4px', paddingLeft: '8px', paddingRight: '12px' }} {...props}>
        {/* Logo */}
        <div className="flex items-center gap-2">
          {onLogoClick ? (
            <button
              onClick={onLogoClick}
              className="cursor-pointer hover:opacity-80 transition-opacity flex-shrink-0"
              style={{ 
                border: 'none', 
                background: 'transparent', 
                padding: 0,
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}
              aria-label="Logo"
              type="button"
            >
              <LogoHexa width={32} height={36} />
            </button>
          ) : (
            <LogoHexa width={32} height={36} />
          )}
          <div className="flex items-center" style={{ gap: '4px' }}>
            <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
              {logoText}
            </Typography>
            <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
              {suiteText}
            </Typography>
          </div>
        </div>

        {/* Language Selector - Solo se muestra si hay idiomas */}
        {languages && languages.length > 0 && (
          <div className="relative flex items-center gap-2">
            <Icon name="LanguageIcon" variant="24-outline" size={18} style={{ color: '#374151' }} />
            <button
              onClick={() => setIsLanguageOpen(!isLanguageOpen)}
              className="flex items-center gap-2 px-3 py-2 text-body-md color-gray-700 bg-white hover:bg-gray-50 rounded-lg transition-colors"
              style={{ border: '1px solid #2D5C63' }}
            >
              <span>{currentLanguage.name}</span>
              <Icon
                name="ChevronDownIcon"
                variant="24-outline"
                size={16}
                className={`transition-transform ${isLanguageOpen ? 'rotate-180' : ''}`}
              />
            </button>

            {isLanguageOpen && (
              <>
                <div
                  className="fixed inset-0 z-10"
                  onClick={() => setIsLanguageOpen(false)}
                />
                <div className="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-lg z-20 py-1" style={{ border: '1px solid #2D5C63' }}>
                  {languages.map((lang) => (
                    <button
                      key={lang.code}
                      onClick={() => handleLanguageChange(lang.code)}
                      className={`w-full text-left px-4 py-2 text-body-md hover:bg-gray-50 transition-colors ${
                        currentLanguage.code === lang.code
                          ? 'bg-gray-50 color-brand font-medium'
                          : 'color-gray-700'
                      }`}
                    >
                      {lang.name}
                    </button>
                  ))}
                </div>
              </>
            )}
          </div>
        )}
      </header>
    )
  );
};

export default HeaderGeneral;

