import React from 'react';
import { Link } from 'react-router-dom';
import clsx from 'clsx';

export const PageWrapper = ({ children, className = '', style }) => (
  <div className={clsx('min-h-[calc(100vh-140px)] py-5 animate-page-enter', className)} style={style}>
    {children}
  </div>
);

export const Container = ({ children, $narrow, $px, className = '', style }) => (
  <div
    className={clsx('mx-auto', $narrow ? 'max-w-3xl' : 'max-w-[1200px]', className)}
    style={{ padding: `0 ${$px || '16px'}`, ...style }}
  >
    {children}
  </div>
);

export const PageHeader = ({ children, className = '', style }) => (
  <div className={clsx('text-center mb-10', className)} style={style}>
    {children}
  </div>
);

export const PageTitle = ({ children, className = '' }) => (
  <h1
    className={clsx(
      'text-white text-[33.6px] md:text-[40px] font-bold mb-2.5',
      '[text-shadow:0_2px_10px_rgba(0,0,0,0.3)]',
      className,
    )}
  >
    {children}
  </h1>
);

export const PageSubtitle = ({ children, className = '' }) => (
  <p className={clsx('text-white/80 text-lg max-w-[600px] mx-auto', className)}>{children}</p>
);

export const Card = ({ children, $padding, $mb, className = '', style }) => (
  <div
    className={clsx(
      'bg-white/95 rounded-[20px] shadow-[0_8px_32px_rgba(168,230,207,0.3)]',
      'backdrop-blur-[10px] border border-[rgba(168,230,207,0.2)]',
      className,
    )}
    style={{ padding: $padding || '32px', marginBottom: $mb || '24px', ...style }}
  >
    {children}
  </div>
);

export const ItemGrid = ({ children, $cols = 5, $gap = '16px', $mb = '40px', className = '' }) => (
  <div
    className={clsx('grid', className)}
    style={{ gridTemplateColumns: `repeat(${$cols}, 1fr)`, gap: $gap, marginBottom: $mb }}
  >
    {children}
  </div>
);

export const FeatureGrid = ({ children, className = '' }) => (
  <div
    className={clsx(
      'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5',
      'gap-[10px] sm:gap-3 md:gap-4',
      'max-w-[1200px] mx-auto px-3 sm:px-5 pb-8',
      'animate-fade-up',
      className,
    )}
  >
    {children}
  </div>
);

export const FeatureCard = ({ children, $color, onClick, className = '' }) => (
  <div
    className={clsx(
      'group relative overflow-hidden',
      'bg-white/[0.96] rounded-2xl sm:rounded-xl',
      'px-3 pt-5 pb-[18px] sm:px-2.5 sm:pt-4 sm:pb-3.5',
      'min-h-[140px] sm:min-h-[120px]',
      'flex flex-col items-center text-center',
      'cursor-pointer transition-all duration-[250ms]',
      'shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-black/[0.04]',
      'hover:-translate-y-1 hover:shadow-[0_10px_28px_rgba(0,0,0,0.12)] hover:border-black/[0.08]',
      'active:-translate-y-0.5',
      className,
    )}
    onClick={onClick}
  >
    <div
      className="absolute top-0 left-0 right-0 h-[3px] group-hover:h-1 transition-all duration-200 opacity-90 group-hover:opacity-100"
      style={{ background: $color || 'linear-gradient(90deg, #4ade80, #86efac)' }}
    />
    {children}
  </div>
);

export const CatalogCard = ({ children, $c, onClick, className = '' }) => {
  const gradient = `linear-gradient(90deg, ${$c || '#4ade80'}, #86efac)`;
  return (
    <div
      className={clsx(
        'group relative overflow-hidden',
        'bg-white/[0.96] rounded-2xl sm:rounded-xl',
        'px-3 pt-5 pb-[18px] sm:px-2.5 sm:pt-4 sm:pb-3.5',
        'min-h-[140px] sm:min-h-[120px]',
        'flex flex-col items-center text-center',
        'cursor-pointer transition-all duration-[250ms]',
        'shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-black/[0.04]',
        'hover:-translate-y-1 hover:shadow-[0_10px_28px_rgba(0,0,0,0.12)] hover:border-black/[0.08]',
        'active:-translate-y-0.5',
        className,
      )}
      onClick={onClick}
    >
      <div
        className="absolute top-0 left-0 right-0 h-[3px] group-hover:h-1 transition-all duration-200 opacity-90 group-hover:opacity-100"
        style={{ background: gradient }}
      />
      {children}
    </div>
  );
};

export const FeatureCardUseCount = ({ children }) => (
  <span className="absolute top-px right-0.5 z-[4] text-sm leading-none text-black pointer-events-none select-none font-normal">
    {children}
  </span>
);

export const FeatureCardIcon = ({ children, $bg, $border, $iconColor, className = '' }) => (
  <div
    className={clsx(
      'text-[32px] mb-2.5 leading-none flex items-center justify-center',
      'w-12 h-12 rounded-xl',
      'sm:text-[26px] sm:w-10 sm:h-10 sm:rounded-[10px] sm:mb-2',
      '[&_svg]:block [&_svg]:w-6 [&_svg]:h-6 sm:[&_svg]:w-5 sm:[&_svg]:h-5',
      className,
    )}
    style={{
      background: $bg || 'rgba(74, 222, 128, 0.1)',
      border: `1px solid ${$border || 'rgba(74, 222, 128, 0.25)'}`,
      color: $iconColor || '#22c55e',
    }}
  >
    {children}
  </div>
);

export const FeatureCardTitle = ({ children, className = '' }) => (
  <div className={clsx('text-[17px] font-bold text-gray-800 leading-[1.3] mb-2 w-full sm:text-[15px]', className)}>
    {children}
  </div>
);

export const FeatureCardDesc = ({ children, className = '' }) => (
  <div
    className={clsx(
      'text-sm text-gray-400 leading-[1.4] line-clamp-2 px-1 w-full flex-1 sm:text-xs',
      className,
    )}
  >
    {children}
  </div>
);

export const FeatureCardTag = ({ children, className = '' }) => (
  <span
    className={clsx('inline-block text-[10px] text-gray-500 bg-gray-100 px-2 py-0.5 rounded-md mt-2 font-medium', className)}
  >
    {children}
  </span>
);

/** 从 linear-gradient 配置串中提取首色 */
export function accentFromGradient(gradient) {
  if (!gradient || typeof gradient !== 'string') return '#4ade80';
  const s = gradient.replace(/\s+/g, ' ').trim();
  const m = s.match(/#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)/);
  return m ? m[0] : '#4ade80';
}

export const ModuleGrid = ({ children, className = '' }) => (
  <div
    className={clsx(
      'grid grid-cols-1 min-[520px]:grid-cols-2',
      'gap-3 min-[520px]:gap-3.5',
      'max-w-[900px] mx-auto px-3 min-[520px]:px-4',
      className,
    )}
  >
    {children}
  </div>
);

export const ModuleCard = ({ children, to, className = '' }) => (
  <Link
    to={to}
    className={clsx(
      'flex items-center gap-4 p-5 sm:p-4 sm:gap-3',
      'bg-white/95 rounded-2xl',
      'no-underline text-inherit',
      'shadow-[0_2px_8px_rgba(0,0,0,0.04)] border border-black/[0.04]',
      'transition-[transform,box-shadow] duration-200',
      'hover:-translate-y-[3px] hover:shadow-[0_6px_20px_rgba(0,0,0,0.08)]',
      'active:-translate-y-px',
      className,
    )}
  >
    {children}
  </Link>
);

export const ModuleIconBox = ({ children, $bg, className = '' }) => (
  <div
    className={clsx(
      'flex-shrink-0 w-12 h-12 rounded-[14px] flex items-center justify-center text-white text-xl',
      'sm:w-[42px] sm:h-[42px] sm:rounded-[12px] sm:text-lg',
      className,
    )}
    style={{ background: $bg || 'linear-gradient(135deg,#81c784,#a5d6a7)' }}
  >
    {children}
  </div>
);

export const ModuleInfo = ({ children, className = '' }) => (
  <div className={clsx('flex-1 min-w-0 text-left', className)}>{children}</div>
);

export const ModuleTitle = ({ children, className = '' }) => (
  <div className={clsx('text-base font-bold text-gray-800 mb-[3px] sm:text-sm', className)}>{children}</div>
);

export const ModuleDesc = ({ children, className = '' }) => (
  <div className={clsx('text-xs text-gray-500 leading-[1.4] sm:text-[11px]', className)}>{children}</div>
);

export const ModuleTags = ({ children, className = '' }) => (
  <div className={clsx('flex gap-1 flex-wrap mt-1.5', className)}>{children}</div>
);

export const ModuleTag = ({ children, className = '' }) => (
  <span className={clsx('text-[10px] text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded', className)}>
    {children}
  </span>
);
