import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StatisticsDisplayComponent, StatisticsConfig, StatisticItem } from 'ui-landing-pages';

@Component({
  selector: 'app-landing-statistics-demo',
  standalone: true,
  imports: [CommonModule, StatisticsDisplayComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Statistics Display Component</h2>
      <p style="margin-bottom: 2rem; color: #666;">Showcase key metrics with animated counters and various layouts</p>

    <!-- Basic Row Layout -->
    <section class="demo-section">
      <h3 class="demo-section__title">Row Layout - Minimal</h3>
      <ui-lp-statistics-display 
        [configuration]="rowConfig">
      </ui-lp-statistics-display>
    </section>

    <!-- Grid Layout with Cards -->
    <section class="demo-section">
      <h3 class="demo-section__title">Grid Layout - Card Variant</h3>
      <ui-lp-statistics-display 
        [configuration]="cardConfig">
      </ui-lp-statistics-display>
    </section>

    <!-- Primary Background -->
    <section class="demo-section">
      <h3 class="demo-section__title">Primary Background</h3>
      <ui-lp-statistics-display 
        [configuration]="primaryConfig">
      </ui-lp-statistics-display>
    </section>

    <!-- Highlighted Variant -->
    <section class="demo-section">
      <h3 class="demo-section__title">Highlighted Variant</h3>
      <ui-lp-statistics-display 
        [configuration]="highlightedConfig">
      </ui-lp-statistics-display>
    </section>

    <!-- Configuration Code -->
    <section class="demo-section">
      <h3 class="demo-section__title">Configuration</h3>
      <pre class="demo-code">{{ configExample }}</pre>
    </section>
    </div>
  `,
  styleUrl: './landing-statistics-demo.component.scss'
})
export class LandingStatisticsDemoComponent {
  private sampleStatistics: StatisticItem[] = [
    {
      id: 'users',
      value: 150000,
      label: 'Active Users',
      suffix: '+',
      description: 'Growing every day',
      icon: 'users',
      animateValue: true
    },
    {
      id: 'projects',
      value: 25000,
      label: 'Projects Created',
      suffix: '+',
      description: 'Successful deployments',
      icon: 'chart-bar',
      animateValue: true
    },
    {
      id: 'uptime',
      value: 99.9,
      label: 'Uptime',
      suffix: '%',
      description: 'Reliable service',
      icon: 'arrow-up',
      animateValue: true
    },
    {
      id: 'support',
      value: '24/7',
      label: 'Support Available',
      description: 'Round-the-clock assistance',
      icon: 'headset',
      animateValue: false
    }
  ];

  rowConfig: StatisticsConfig = {
    title: 'Platform Performance',
    subtitle: 'See how we\'re making a difference',
    statistics: this.sampleStatistics,
    layout: 'row',
    variant: 'minimal',
    animateOnScroll: true,
    backgroundColor: 'transparent'
  };

  cardConfig: StatisticsConfig = {
    title: 'Success Metrics',
    statistics: this.sampleStatistics,
    layout: 'grid',
    variant: 'card',
    animateOnScroll: true,
    backgroundColor: 'surface'
  };

  primaryConfig: StatisticsConfig = {
    title: 'Key Achievements',
    subtitle: 'Numbers that matter to our community',
    statistics: this.sampleStatistics.slice(0, 3),
    layout: 'row',
    variant: 'minimal',
    animateOnScroll: true,
    backgroundColor: 'primary'
  };

  highlightedConfig: StatisticsConfig = {
    title: 'Performance Indicators',
    statistics: this.sampleStatistics,
    layout: 'grid',
    variant: 'highlighted',
    animateOnScroll: true,
    backgroundColor: 'transparent'
  };

  configExample = `const statisticsConfig: StatisticsConfig = {
  title: 'Platform Performance',
  subtitle: 'See how we're making a difference',
  statistics: [
    {
      id: 'users',
      value: 150000,
      label: 'Active Users',
      suffix: '+',
      description: 'Growing every day',
      icon: 'users',
      animateValue: true
    }
    // ... more statistics
  ],
  layout: 'row',
  variant: 'minimal',
  animateOnScroll: true,
  backgroundColor: 'transparent'
};`;
}