---
import GlowButton from '../common/GlowButton.astro';

export interface Props {
  title: string;
  description?: string;
  href: string;
  icon?: string;
  color?: 'primary' | 'secondary' | 'accent';
  size?: 'small' | 'medium' | 'large';
  buttonLabel?: string;
  reveal?: boolean;
  revealDirection?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'none';
  revealDistance?: string;
  revealDelay?: string;
  revealBlur?: string;
  revealScale?: string;
  revealOnce?: boolean;
}

const { 
  title, 
  description, 
  href, 
  icon, 
  color = 'primary',
  size = 'medium',
  buttonLabel,
  reveal = true,
  revealDirection,
  revealDistance,
  revealDelay,
  revealBlur,
  revealScale,
  revealOnce
} = Astro.props;

// 判断是否为外部链接
const isExternalLink = href.startsWith('http://') || href.startsWith('https://');
const linkTarget = isExternalLink ? '_blank' : undefined;
const linkRel = isExternalLink ? 'noopener noreferrer' : undefined;

const colorClasses = {
  primary: 'nav-card-primary',
  secondary: 'nav-card-secondary',
  accent: 'nav-card-accent'
} as const;

const sizeClasses = {
  small: 'nav-card-small',
  medium: 'nav-card-medium',
  large: 'nav-card-large'
} as const;

const buttonVariantMap = {
  primary: 'primary',
  secondary: 'secondary',
  accent: 'outline'
} as const;

const buttonSizeMap = {
  small: 'sm',
  medium: 'md',
  large: 'lg'
} as const;

const ctaLabel = buttonLabel ?? '访问服务';

const revealAttributes = reveal
  ? {
      'data-reveal': revealDirection ?? '',
      ...(revealDistance ? { 'data-reveal-distance': revealDistance } : { 'data-reveal-distance': '32px' }),
      ...(revealDelay ? { 'data-reveal-delay': revealDelay } : { 'data-reveal-delay': 'var(--card-delay, 0s)' }),
      ...(revealBlur ? { 'data-reveal-blur': revealBlur } : {}),
      ...(revealScale ? { 'data-reveal-scale': revealScale } : {}),
      ...(revealOnce === false ? { 'data-reveal-once': 'false' } : {})
    }
  : {};
---

<article
  class={`nav-card ${colorClasses[color]} ${sizeClasses[size]}`}
  {...revealAttributes}
>
  <div class="nav-card-content">
    {icon && (
      <div class="nav-card-icon">
        <i class={icon}></i>
      </div>
    )}
    
    <h3 class="nav-card-title">{title}</h3>
    
    {description && (
      <p class="nav-card-description">{description}</p>
    )}

    <GlowButton
      href={href}
      target={linkTarget}
      rel={linkRel}
      variant={buttonVariantMap[color]}
      size={buttonSizeMap[size]}
      icon="fas fa-arrow-right"
      className="nav-card-button"
      reveal={false}
    >
      {ctaLabel}
    </GlowButton>
  </div>
  
  <div class="nav-card-glow"></div>
</article>

<style>
  .nav-card {
    position: relative;
    display: block;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    padding: 2rem;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
  
  .nav-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }
  
  .nav-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    justify-content: center;
    gap: 1.25rem;
  }
  
  .nav-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #5b778e;
    transition: all 0.3s ease;
  }
  
  .nav-card:hover .nav-card-icon {
    color: #011a2d;
    transform: scale(1.1);
  }
  
  .nav-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #011a2d;
    margin: 0 0 0.5rem 0;
    transition: all 0.3s ease;
  }
  
  .nav-card-description {
    font-size: 0.875rem;
    color: #2c4a6b;
    margin: 0 0 1rem 0;
    line-height: 1.5;
    opacity: 0.9;
  }
  
  .nav-card-button {
    margin-top: auto;
  }
  
  .nav-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .nav-card:hover .nav-card-glow {
    opacity: 1;
  }
  
  /* 尺寸变体 */
  .nav-card-small {
    min-height: 150px;
    padding: 1.5rem;
  }
  
  .nav-card-small .nav-card-icon {
    font-size: 2rem;
  }
  
  .nav-card-small .nav-card-title {
    font-size: 1.1rem;
  }
  
  .nav-card-medium {
    min-height: 200px;
    padding: 2rem;
  }
  
  .nav-card-large {
    min-height: 280px;
    padding: 2.5rem;
  }
  
  .nav-card-large .nav-card-icon {
    font-size: 3rem;
  }
  
  .nav-card-large .nav-card-title {
    font-size: 1.5rem;
  }
  
  /* 颜色变体 */
  .nav-card-primary {
    background: rgba(91, 119, 142, 0.1);
    border-color: rgba(91, 119, 142, 0.2);
  }
  
  .nav-card-primary:hover {
    background: rgba(91, 119, 142, 0.15);
    border-color: rgba(91, 119, 142, 0.3);
  }
  
  .nav-card-secondary {
    background: rgba(178, 197, 213, 0.1);
    border-color: rgba(178, 197, 213, 0.2);
  }
  
  .nav-card-secondary:hover {
    background: rgba(178, 197, 213, 0.15);
    border-color: rgba(178, 197, 213, 0.3);
  }
  
  .nav-card-accent {
    background: rgba(177, 217, 212, 0.1);
    border-color: rgba(177, 217, 212, 0.2);
  }
  
  .nav-card-accent:hover {
    background: rgba(177, 217, 212, 0.15);
    border-color: rgba(177, 217, 212, 0.3);
  }
  
  @media (max-width: 768px) {
    .nav-card {
      padding: 1.5rem;
      min-height: 160px;
    }
    
    .nav-card-icon {
      font-size: 2rem;
    }
    
    .nav-card-title {
      font-size: 1.1rem;
    }
  }
</style>