{% comment %} Simple Liquid automation - static and limited {% endcomment %}

{% if product.available %}
  {% if product.compare_at_price > product.price %}
    <span class="sale-badge">Sale</span>
  {% endif %}
  <button class="add-to-cart">Add to Cart</button>
{% else %}
  <button class="notify-me" disabled>Notify When Available</button>
{% endif %}

{% comment %} Limited personalization {% endcomment %}
{% if customer %}
  <p>Welcome back, {{ customer.first_name }}!</p>
{% else %}
  <p>Welcome, guest!</p>
{% endif %}

// Intelligent component that adapts based on user behavior and performance data
interface AIComponentProps {
  productId: string;
  userId?: string;
  sessionData: SessionData;
  performanceContext: PerformanceContext;
}

export function AIProductCard({
  productId,
  userId,
  sessionData,
  performanceContext
}: AIComponentProps) {
  // AI-powered component optimization
  const aiOptimizations = useAIOptimizations({
    componentId: 'product-card',
    context: { productId, userId, sessionData },
    performanceMetrics: performanceContext,
  });

  // Dynamic layout based on user behavior patterns
  const optimalLayout = aiOptimizations.layout; // 'compact' | 'detailed' | 'visual'

  // AI-generated content variations
  const {
    title,
    description,
    ctaText,
    priceDisplay
  } = aiOptimizations.content;

  // Intelligent interaction predictions
  const predictedActions = aiOptimizations.predictedUserActions;

  return (
    <ProductCardContainer
      layout={optimalLayout}
      priority={predictedActions.addToCartProbability}
    >
      <ProductImage
        src={product.image}
        loading={predictedActions.viewProbability > 0.7 ? 'eager' : 'lazy'}
        optimizedFor={aiOptimizations.imageStrategy}
      />

      <ProductContent>
        <ProductTitle variant={aiOptimizations.titleStyle}>
          {title}
        </ProductTitle>

        {description && (
          <ProductDescription
            length={aiOptimizations.descriptionLength}
          >
            {description}
          </ProductDescription>
        )}

        <PriceDisplay
          strategy={priceDisplay.strategy}
          emphasis={priceDisplay.emphasis}
          showComparison={priceDisplay.showComparison}
        />

        <SmartCTAButton
          text={ctaText}
          variant={aiOptimizations.ctaVariant}
          urgency={aiOptimizations.urgencyLevel}
          predictedConversion={predictedActions.addToCartProbability}
        />
      </ProductContent>
    </ProductCardContainer>
  );
}

// AI-generated component based on business goals and user data
import { generateOptimalComponent } from '@weaverse/ai-components';

interface BusinessGoals {
  primaryKPI: 'conversion' | 'engagement' | 'revenue' | 'retention';
  targetAudience: UserSegment;
  brandGuidelines: BrandSpec;
  performanceRequirements: PerformanceSpec;
}

export async function createIntelligentHeroSection(
  goals: BusinessGoals,
  historicalData: AnalyticsData
): Promise<React.ComponentType> {
  // AI analyzes business goals and historical performance
  const analysis = await analyzeBusinessContext({
    goals,
    historicalData,
    competitorData: await getCompetitorAnalysis(),
    industryBenchmarks: await getIndustryBenchmarks(),
  });

  // Generate component optimized for specific business outcomes
  const OptimizedHeroSection = generateOptimalComponent({
    type: 'hero-section',
    optimization: {
      conversionFocus: analysis.optimalConversionElements,
      layoutStrategy: analysis.recommendedLayout,
      contentStrategy: analysis.contentOptimizations,
      interactionPatterns: analysis.optimalInteractions,
    },
    constraints: {
      performance: goals.performanceRequirements,
      brand: goals.brandGuidelines,
      accessibility: 'WCAG-AA',
    },
  });

  return OptimizedHeroSection;
}

// Component that predicts and pre-loads user's next actions
export function PredictiveNavigation() {
  const user = useCurrentUser();
  const { predictions } = useUserIntentPrediction(user.id);

  // AI predicts next likely user actions
  const predictedCategories = predictions.likelyCategories; // ['electronics', 'home-garden']
  const searchIntent = predictions.searchIntent; // 'laptop accessories'
  const conversionProbability = predictions.conversionProbability; // 0.73

  return (
    <NavigationContainer>
      {/* Standard navigation items */}
      <PrimaryNavigation />

      {/* AI-powered predictive elements */}
      <PredictiveSection>
        <QuickAccess>
          {predictedCategories.map(category => (
            <PredictiveLink
              key={category}
              to={`/collections/${category}`}
              prefetch="intent" // Pre-load based on prediction confidence
              confidence={predictions.categoryConfidence[category]}
            >
              {category}
            </PredictiveLink>
          ))}
        </QuickAccess>

        {searchIntent && (
          <SmartSearchSuggestion
            query={searchIntent}
            confidence={predictions.searchConfidence}
            onSelect={() => trackPredictionAccuracy('search', searchIntent)}
          />
        )}

        {conversionProbability > 0.6 && (
          <ConversionOptimization
            urgency={conversionProbability > 0.8 ? 'high' : 'medium'}
            personalizedOffer={predictions.optimalOffer}
          />
        )}
      </PredictiveSection>
    </NavigationContainer>
  );
}

// AI-generated content that adapts to user context and performance
export function IntelligentProductDescription({
  product,
  userContext,
  performanceMetrics
}: IntelligentContentProps) {
  // AI generates content optimized for this specific user
  const { optimizedContent } = useAIContentGeneration({
    product,
    userSegment: userContext.segment, // 'tech-savvy' | 'price-conscious' | 'luxury'
    intent: userContext.intent, // 'research' | 'compare' | 'buy'
    performanceGoals: ['conversion', 'engagement'],
    previousInteractions: userContext.history,
  });

  return (
    <ContentContainer>
      {/* AI-optimized headline */}
      <ProductHeadline
        text={optimizedContent.headline}
        emotion={optimizedContent.emotionalTone} // 'excitement' | 'trust' | 'urgency'
        personalization={optimizedContent.personalizationLevel}
      />

      {/* Dynamic feature highlighting based on user interests */}
      <FeatureHighlights>
        {optimizedContent.prioritizedFeatures.map(feature => (
          <FeaturePoint
            key={feature.id}
            feature={feature}
            relevanceScore={feature.userRelevance}
            presentationStyle={feature.optimalPresentation}
          />
        ))}
      </FeatureHighlights>

      {/* AI-generated social proof */}
      {optimizedContent.socialProof && (
        <SocialProofSection
          strategy={optimizedContent.socialProof.strategy}
          testimonials={optimizedContent.socialProof.selectedTestimonials}
          trustSignals={optimizedContent.socialProof.trustIndicators}
        />
      )}

      {/* Personalized call-to-action */}
      <PersonalizedCTA
        text={optimizedContent.ctaText}
        urgency={optimizedContent.urgencyLevel}
        incentive={optimizedContent.personalizedIncentive}
      />
    </ContentContainer>
  );
}

// Multi-tenant AI system for enterprise component optimization
export class EnterpriseAIComponentSystem {
  private aiModels: Map<string, AIModel> = new Map();
  private tenantConfigurations: Map<string, TenantConfig> = new Map();

  async optimizeComponentForTenant(
    tenantId: string,
    componentType: string,
    context: BusinessContext
  ): Promise<OptimizedComponent> {
    const tenantConfig = this.tenantConfigurations.get(tenantId);
    const aiModel = this.aiModels.get(tenantId) || await this.createTenantModel(tenantId);

    // Tenant-specific optimization considering:
    const optimization = await aiModel.optimize({
      componentType,
      brandGuidelines: tenantConfig.brand,
      audienceSegments: tenantConfig.targetAudiences,
      performanceGoals: tenantConfig.kpis,
      competitiveContext: await this.getCompetitiveAnalysis(tenantId),
      historicalPerformance: await this.getTenantAnalytics(tenantId),
      globalBenchmarks: await this.getIndustryBenchmarks(tenantConfig.industry),
    });

    return {
      component: optimization.optimizedComponent,
      confidence: optimization.confidenceScore,
      expectedImprovement: optimization.projectedPerformance,
      testingStrategy: optimization.recommendedTesting,
    };
  }

  async trainTenantModel(
    tenantId: string,
    performanceData: PerformanceData[]
  ): Promise<void> {
    const model = this.aiModels.get(tenantId);

    // Continuous learning from tenant-specific performance data
    await model.updateWithPerformanceData(performanceData);

    // Cross-tenant learning while preserving privacy
    await this.shareAnonymizedInsights(tenantId, performanceData);
  }
}

// AI generates design tokens optimized for brand and performance
export async function generateOptimalDesignSystem(
  brandAssets: BrandAssets,
  performanceRequirements: PerformanceSpec,
  accessibilityLevel: AccessibilitySpec
): Promise<DesignSystem> {

  const aiDesigner = new AIDesignSystemGenerator();

  // Analyze brand assets for design direction
  const brandAnalysis = await aiDesigner.analyzeBrandAssets({
    logo: brandAssets.logo,
    existingColors: brandAssets.colors,
    typography: brandAssets.fonts,
    imageStyle: brandAssets.photography,
  });

  // Generate optimized design tokens
  const designTokens = await aiDesigner.generateTokens({
    colorPalette: {
      primary: brandAnalysis.optimalPrimary,
      secondary: brandAnalysis.suggestedSecondary,
      neutral: brandAnalysis.neutralPalette,
      semantic: brandAnalysis.semanticColors, // success, warning, error
    },
    typography: {
      fontStack: brandAnalysis.optimalFonts,
      scales: brandAnalysis.typographicScale,
      weights: brandAnalysis.fontWeights,
    },
    spacing: {
      scale: brandAnalysis.spatialRhythm,
      components: brandAnalysis.componentSpacing,
    },
    animation: {
      timing: brandAnalysis.brandPersonality.timing,
      easing: brandAnalysis.brandPersonality.easing,
      duration: brandAnalysis.brandPersonality.duration,
    },
  });

  // Performance optimization of design tokens
  const optimizedTokens = await aiDesigner.optimizeForPerformance({
    tokens: designTokens,
    performanceGoals: performanceRequirements,
    accessibilityRequirements: accessibilityLevel,
  });

  return {
    tokens: optimizedTokens,
    components: await aiDesigner.generateComponents(optimizedTokens),
    guidelines: await aiDesigner.generateUsageGuidelines(optimizedTokens),
    performanceImpact: await aiDesigner.analyzePerformanceImpact(optimizedTokens),
  };
}