import { 
    CheckCircle,
    Warning as AlertCircle,
    Shield as ShieldIcon,
    Warning as WarningIcon,
    ChevronRight as ChevronRightIcon
} from '@mui/icons-material';
import { useContext, useState } from "react";
import { Context } from "../context/ContextApi.jsx";
import { useNavigate } from 'react-router-dom';

const Licensed = ({licensed, expanded, showBadge}) => {
    
    const { themeMode } = useContext(Context);
    const navigate = useNavigate()


    const [isHovered, setIsHovered] = useState(false);
    
      const theme = {
        light: {
          cardBg: '#ffffff',
          cardBgHover: '#f5f7fa',
          border: '#e1e4e8',
          textPrimary: '#1f2937',
          textSecondary: '#6b7280',
          textMuted: '#9ca3af',
          success: '#10b981',
          successBg: licensed ? 'rgba(5, 150, 105, 0.08)' : '#ddf4ff',
          successBorder: 'rgba(5, 150, 105, 0.2)',
          warning: '#d97706',
          warningBg: licensed ? '#fef3c7' : 'rgba(245, 158, 11, 0.08)',
          warningBorder: 'rgba(245, 158, 11, 0.2)',
          shadow: 'rgba(0, 0, 0, 0.05)',
        },
        dark: {
          cardBg: '#1a1a1a',
          cardBgHover: '#242424',
          border: '#30363d',
          textPrimary: '#e6edf3',
          textSecondary: '#8b949e',
          textMuted: '#6e7681',
          success: '#10b981',
          successBg: 'rgba(16, 185, 129, 0.1)',
          successBorder: 'rgba(16, 185, 129, 0.3)',
          warning: '#f59e0b',
          warningBg: 'rgba(245, 158, 11, 0.1)',
          warningBorder: 'rgba(245, 158, 11, 0.3)',
          shadow: 'rgba(0, 0, 0, 0.3)',
        },
      };
    
      const colors = themeMode === "dark" ? theme.dark : theme.light;
    
      const statusConfig = licensed
        ? {
            icon: showBadge ? ShieldIcon : CheckCircle,
            text: showBadge ? 'Licensed' : 'Enterprise Licensed',
            shortText: 'Licensed',
            subtitle: 'Full access',
            color: colors.success,
            bgColor: colors.successBg,
            borderColor: colors.successBorder,
            description: 'All features unlocked',
          }
        : {
            icon: showBadge ? WarningIcon : AlertCircle,
            text: showBadge ? 'Unlicensed' : 'Activate License',
            shortText: 'Inactive',
            subtitle: 'Limited access',
            color: colors.warning,
            bgColor: colors.warningBg,
            borderColor: colors.warningBorder,
            description: 'Limited access',
          };
    
      const Icon = statusConfig.icon;
    
    // Display badge when showing license status only
    // Display full component for CTA to license activation
    if (showBadge) {
        return (
            <div
                onClick={()=> {navigate('/admin?admin_tab=billingstats');}}
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
                style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 8,
                    padding: '8px 14px',
                    borderRadius: 12,
                    cursor: 'pointer',
                    backgroundColor: statusConfig.bgColor,
                    border: `1.5px solid ${statusConfig.borderColor}`,
                    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
                    transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
                    boxShadow: isHovered
                        ? `0 4px 12px ${colors.shadow}, 0 0 0 3px ${statusConfig.bgColor}`
                        : `0 2px 4px ${colors.shadow}`,
                    position: 'relative',
                    overflow: 'hidden',
                }}
            >
                {/* Shine effect on hover */}
                <div
                    style={{
                        position: 'absolute',
                        top: 0,
                        width: '100%',
                        height: '100%',
                        background: `linear-gradient(90deg, transparent, rgba(255,255,255,${themeMode === "dark" ? '0.1' : '0.2'}), transparent)`,
                        transition: 'left 0.5s',
                        left: isHovered ? '100%' : '-100%',
                        pointerEvents: 'none',
                    }}
                />

                {/* Status indicator with pulse */}
                <div
                    style={{
                        position: 'relative',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                >
                    <span
                        style={{
                            width: 8,
                            height: 8,
                            borderRadius: '50%',
                            backgroundColor: statusConfig.color,
                            boxShadow: `0 0 8px ${statusConfig.color}`,
                            position: 'relative',
                            zIndex: 1,
                        }}
                    />
                    {/* Pulse ring */}
                    <span
                        style={{
                            position: 'absolute',
                            width: 8,
                            height: 8,
                            borderRadius: '50%',
                            backgroundColor: statusConfig.color,
                            opacity: 0.75,
                        }}
                    />
                </div>

                <Icon
                    style={{
                        color: statusConfig.color,
                        flexShrink: 0,
                        fontSize: 16,
                    }}
                />

                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 1,
                        alignItems: 'flex-start',
                    }}
                >
                    <span
                        style={{
                            fontSize: 13,
                            fontWeight: 700,
                            color: statusConfig.color,
                            lineHeight: 1.2,
                            letterSpacing: '0.2px',
                        }}
                    >
                        {statusConfig.text}
                    </span>
                    <span
                        style={{
                            fontSize: 10,
                            fontWeight: 600,
                            color: statusConfig.color,
                            opacity: 0.7,
                            lineHeight: 1,
                            textTransform: 'uppercase',
                            letterSpacing: '0.5px',
                        }}
                    >
                        {statusConfig.subtitle}
                    </span>
                </div>

                <ChevronRightIcon
                    style={{
                        color: statusConfig.color,
                        opacity: 0.6,
                        flexShrink: 0,
                        fontSize: 14,
                        transform: isHovered ? 'translateX(2px)' : 'translateX(0)',
                        transition: 'all 0.2s',
                    }}
                />
            </div>
        );
    }

    return (
        <div
            onClick={()=> {navigate('/admin?admin_tab=billingstats');}}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: expanded ? 12 : 8,
            padding: expanded ? '10px 14px' : '10px',
            marginBottom: 20,
            marginRight: 12,
            borderRadius: 10,
            cursor: 'pointer',
            backgroundColor: isHovered ? colors.cardBgHover : colors.cardBg,
            border: `1.5px solid ${licensed ? statusConfig.color : colors.border}`,
            boxShadow: `0 1px 3px ${colors.shadow}`,
            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
            transform: isHovered ? 'translateY(-1px)' : 'translateY(0)',
            position: 'relative',
            overflow: 'hidden',
            }}
        >
              <div
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  background: `linear-gradient(135deg, ${statusConfig.bgColor} 0%, transparent 100%)`,
                  opacity: 0.5,
                  pointerEvents: 'none',
                }}
              />
        
              {/* Content */}
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 10,
                  position: 'relative',
                  flex: 1,
                  minWidth: 0,
                }}
              >
               {expanded && (
                 <div
                  style={{
                    position: 'relative',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Icon
                    style={{
                      color: statusConfig.color,
                      flexShrink: 0,
                      fontSize: 18,
                    }}
                  />
                  {!licensed && (
                    <div
                      style={{
                        position: 'absolute',
                        width: '100%',
                        height: '100%',
                        borderRadius: '50%',
                        border: `2px solid ${statusConfig.color}`,
                      }}
                    />
                  )}
                </div>
                )}
        
                {/* Text content */}
                {expanded && (
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 2,
                      minWidth: 0,
                      flex: 1,
                    }}
                  >
                    <span
                      style={{
                        fontSize: 13,
                        fontWeight: 600,
                        color: colors.textPrimary,
                        lineHeight: 1.2,
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                      }}
                    >
                      {statusConfig.text}
                    </span>
                    <span
                      style={{
                        fontSize: 11,
                        fontWeight: 500,
                        color: colors.textSecondary,
                        lineHeight: 1.2,
                      }}
                    >
                      {statusConfig.description}
                    </span>
                  </div>
                )}
        
                {!expanded && (
                  <span
                    style={{
                      fontSize: 11,
                      fontWeight: 700,
                      color: statusConfig.color,
                      letterSpacing: '0.5px',
                      textTransform: 'uppercase',
                    }}
                  >
                    {licensed ? 'ON' : 'OFF'}
                  </span>
                )}
              </div>
        
              {/* Arrow indicator (only when expanded) */}
              {expanded && (
                <ChevronRightIcon
                  style={{
                    color: colors.textMuted,
                    flexShrink: 0,
                    fontSize: 16,
                    opacity: isHovered ? 1 : 0.5,
                    transform: isHovered ? 'translateX(2px)' : 'translateX(0)',
                    transition: 'all 0.2s',
                  }}
                />
              )}
            </div>
    );
}

export default Licensed;