import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
// Temporarily commented out until ui-landing-pages is built
// import { TestimonialCarouselComponent, TestimonialCarouselConfig, TestimonialItem } from 'ui-landing-pages';

// Placeholder types
interface TestimonialItem {
  id: string;
  name: string;
  title: string;
  company: string;
  content: string;
  rating: number;
  avatar: string;
  verified: boolean;
}

interface TestimonialCarouselConfig {
  title?: string;
  subtitle?: string;
  testimonials: TestimonialItem[];
  autoPlay?: boolean;
  autoPlayDelay?: number;
  showDots?: boolean;
  showNavigation?: boolean;
  itemsPerView?: number;
  variant?: 'card' | 'quote' | 'minimal';
  showRatings?: boolean;
}

@Component({
  selector: 'app-landing-testimonials-demo',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Testimonial Carousel Component</h2>
      <p style="margin-bottom: 2rem; color: #666;">Display customer testimonials with carousel navigation and various styles</p>
      
      <div style="background: #f5f5f5; padding: 2rem; border-radius: 8px; text-align: center; color: #666;">
        <p><strong>Component Preview Unavailable</strong></p>
        <p>The TestimonialCarouselComponent will be available once the ui-landing-pages library is built.</p>
        <p>This demo will show:</p>
        <ul style="list-style: none; padding: 0; margin: 1rem 0;">
          <li>• Single Item Carousel</li>
          <li>• Multi-Item Carousel</li>
          <li>• Quote Variant</li>
          <li>• Minimal Variant</li>
        </ul>
      </div>

      <!-- Configuration Code -->
      <section class="demo-section" style="margin-top: 2rem;">
        <h3 class="demo-section__title">Configuration Example</h3>
        <pre class="demo-code" style="background: #f8f8f8; padding: 1rem; border-radius: 4px; overflow-x: auto;">{{ configExample }}</pre>
      </section>
    </div>
  `,
  styleUrl: './landing-testimonials-demo.component.scss'
})
export class LandingTestimonialsDemoComponent {
  private sampleTestimonials: TestimonialItem[] = [
    {
      id: 'sarah-chen',
      name: 'Sarah Chen',
      title: 'CTO',
      company: 'TechCorp',
      content: 'This platform transformed our development workflow. The intuitive design and powerful features helped us deliver projects 40% faster.',
      rating: 5,
      avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b977?w=100&h=100&fit=crop&crop=face',
      verified: true
    },
    {
      id: 'marcus-rodriguez',
      name: 'Marcus Rodriguez',
      title: 'Lead Developer',
      company: 'StartupXYZ',
      content: 'Outstanding performance and reliability. The support team is incredibly responsive and knowledgeable.',
      rating: 5,
      avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
      verified: true
    },
    {
      id: 'emily-watson',
      name: 'Emily Watson',
      title: 'Product Manager',
      company: 'InnovateLabs',
      content: 'The analytics features provided insights we never had before. Our team productivity increased significantly.',
      rating: 4,
      avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face',
      verified: false
    },
    {
      id: 'david-kim',
      name: 'David Kim',
      title: 'Software Engineer',
      company: 'CodeCrafters',
      content: 'Clean interface, excellent documentation, and seamless integration. Everything just works as expected.',
      rating: 5,
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face',
      verified: true
    },
    {
      id: 'lisa-thompson',
      name: 'Lisa Thompson',
      title: 'Engineering Director',
      company: 'ScaleTech',
      content: 'Scalable solution that grows with our needs. The performance optimization features are game-changing.',
      rating: 5,
      avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop&crop=face',
      verified: true
    }
  ];

  singleConfig: TestimonialCarouselConfig = {
    title: 'What Our Customers Say',
    subtitle: 'Trusted by thousands of developers worldwide',
    testimonials: this.sampleTestimonials,
    autoPlay: true,
    autoPlayDelay: 5000,
    showDots: true,
    showNavigation: true,
    itemsPerView: 1,
    variant: 'card',
    showRatings: true
  };

  multiConfig: TestimonialCarouselConfig = {
    title: 'Customer Success Stories',
    testimonials: this.sampleTestimonials,
    autoPlay: false,
    showDots: true,
    showNavigation: true,
    itemsPerView: 2,
    variant: 'card',
    showRatings: true
  };

  quoteConfig: TestimonialCarouselConfig = {
    title: 'Featured Reviews',
    testimonials: this.sampleTestimonials.slice(0, 3),
    autoPlay: true,
    autoPlayDelay: 6000,
    showDots: true,
    showNavigation: false,
    itemsPerView: 1,
    variant: 'quote',
    showRatings: true
  };

  minimalConfig: TestimonialCarouselConfig = {
    testimonials: this.sampleTestimonials.slice(0, 3),
    autoPlay: false,
    showDots: true,
    showNavigation: true,
    itemsPerView: 1,
    variant: 'minimal',
    showRatings: false
  };

  configExample = `const testimonialConfig: TestimonialCarouselConfig = {
  title: 'What Our Customers Say',
  subtitle: 'Trusted by thousands of developers worldwide',
  testimonials: [
    {
      id: 'sarah-chen',
      name: 'Sarah Chen',
      title: 'CTO',
      company: 'TechCorp',
      content: 'This platform transformed our workflow...',
      rating: 5,
      avatar: 'path/to/avatar.jpg',
      verified: true
    }
    // ... more testimonials
  ],
  autoPlay: true,
  autoPlayDelay: 5000,
  showDots: true,
  showNavigation: true,
  itemsPerView: 1,
  variant: 'card',
  showRatings: true
};`;
}