import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SaaSTemplateComponent } from '../../../../../ui-landing-pages/src/lib/components/templates/saas-template.component';
import { ProductTemplateComponent } from '../../../../../ui-landing-pages/src/lib/components/templates/product-template.component';
import { AgencyTemplateComponent } from '../../../../../ui-landing-pages/src/lib/components/templates/agency-template.component';
import { AgencyTemplateConfig, ProductTemplateConfig, SaaSTemplateConfig } from '../../../../../ui-landing-pages/src/lib/interfaces/templates.interfaces';

@Component({
  selector: 'app-landing-templates-demo',
  standalone: true,
  imports: [CommonModule, SaaSTemplateComponent, ProductTemplateComponent, AgencyTemplateComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="demo-container">
      <div class="demo-header">
        <h1>Landing Page Templates Demo</h1>
        <p>Complete, production-ready landing page templates for different business types.</p>
      </div>

      <div class="demo-navigation">
        <button 
          [class.active]="activeTemplate === 'saas'"
          (click)="setActiveTemplate('saas')">
          SaaS Template
        </button>
        <button 
          [class.active]="activeTemplate === 'product'"
          (click)="setActiveTemplate('product')">
          Product Template
        </button>
        <button 
          [class.active]="activeTemplate === 'agency'"
          (click)="setActiveTemplate('agency')">
          Agency Template
        </button>
      </div>

      <div class="template-container">
        @switch (activeTemplate) {
          @case ('saas') {
            <ui-lp-saas-template [configuration]="saasConfig"></ui-lp-saas-template>
          }
          @case ('product') {
            <ui-lp-product-template [configuration]="productConfig"></ui-lp-product-template>
          }
          @case ('agency') {
            <ui-lp-agency-template [configuration]="agencyConfig"></ui-lp-agency-template>
          }
        }
      </div>
    </div>
  `,
  styles: [`
    .demo-container {
      min-height: 100vh;
    }

    .demo-header {
      text-align: center;
      padding: 3rem 2rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    .demo-header h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .demo-header p {
      font-size: 1.125rem;
      opacity: 0.9;
    }

    .demo-navigation {
      display: flex;
      justify-content: center;
      gap: 1rem;
      padding: 2rem;
      background: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
    }

    .demo-navigation button {
      padding: 0.75rem 1.5rem;
      border: 2px solid #6c757d;
      background: white;
      color: #6c757d;
      border-radius: 0.5rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .demo-navigation button:hover {
      background: #6c757d;
      color: white;
    }

    .demo-navigation button.active {
      background: #007bff;
      border-color: #007bff;
      color: white;
    }

    .template-container {
      min-height: calc(100vh - 200px);
    }

    @media (max-width: 768px) {
      .demo-navigation {
        flex-direction: column;
        align-items: center;
      }
      
      .demo-navigation button {
        width: 200px;
      }
    }
  `]
})
export class LandingTemplatesDemoComponent {
  activeTemplate: 'saas' | 'product' | 'agency' = 'saas';

  setActiveTemplate(template: 'saas' | 'product' | 'agency'): void {
    this.activeTemplate = template;
  }

  saasConfig: SaaSTemplateConfig = {
    hero: {
      title: 'Build Amazing SaaS Applications',
      subtitle: 'The complete toolkit for modern software development with enterprise-grade security and scalability.',
      ctaPrimary: {
        text: 'Start Free Trial',
        variant: 'tonal',
        size: 'large',
        action: () => console.log('Start trial clicked')
      },
      ctaSecondary: {
        text: 'View Demo',
        variant: 'outlined',
        size: 'large',
        action: () => console.log('View demo clicked')
      },
      alignment: 'center',
      backgroundType: 'gradient',
      minHeight: 'full'
    },
    features: {
      title: 'Why Choose Our Platform',
      subtitle: 'Everything you need to build, deploy, and scale your applications',
      features: [
        {
          id: '1',
          title: 'Lightning Fast Performance',
          description: 'Optimized architecture delivers sub-second response times and 99.99% uptime.',
          icon: 'rocket'
        },
        {
          id: '2',
          title: 'Enterprise Security',
          description: 'SOC 2 compliant with end-to-end encryption and advanced threat protection.',
          icon: 'shield'
        },
        {
          id: '3',
          title: 'Seamless Integrations',
          description: 'Connect with 100+ popular tools through our robust API and webhooks.',
          icon: 'plug'
        }
      ]
    },
    socialProof: {
      title: 'Trusted by Industry Leaders',
      statistics: [
        { id: '1', label: 'Active Users', value: '50,000+' },
        { id: '2', label: 'Countries', value: '120+' },
        { id: '3', label: 'Uptime', value: '99.99%' },
        { id: '4', label: 'Support Rating', value: '4.9/5' }
      ]
    },
    testimonials: {
      title: 'What Our Customers Say',
      testimonials: [
        {
          id: '1',
          content: 'This platform transformed our development workflow. We ship features 3x faster now.',
          name: 'Sarah Chen',
          title: 'CTO at TechCorp',
          avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b5ff?w=100&h=100&fit=crop&crop=face'
        }
      ]
    },
    pricing: {
      billingToggle: {
        monthlyLabel: 'Monthly',
        yearlyLabel: 'Yearly',
        discountText: 'Save 20%'
      },
      featuresComparison: false,
      plans: [
        {
          id: '1',
          name: 'Starter',
          price: {
            monthly: 29,
            yearly: 290,
            currency: 'USD',
            suffix: 'per user'
          },
          features: [
            { name: '5 Projects', included: true },
            { name: '10GB Storage', included: true },
            { name: 'Email Support', included: true }
          ],
          cta: {
            text: 'Get Started',
            variant: 'filled',
            action: () => console.log('Starter plan selected')
          }
        }
      ]
    },
    faq: {
      title: 'Frequently Asked Questions',
      items: [
        {
          id: '1',
          question: 'Can I cancel my subscription anytime?',
          answer: 'Yes, you can cancel your subscription at any time with no penalties.'
        }
      ]
    },
    cta: {
      title: 'Ready to Get Started?',
      subtitle: 'Join thousands of developers building the future',
      ctaPrimary: {
        text: 'Start Free Trial',
        variant: 'filled',
        action: () => console.log('Start trial clicked')
      },
      backgroundType: 'gradient'
    }
  };

  productConfig: ProductTemplateConfig = {
    hero: {
      title: 'Introducing the Future of Productivity',
      subtitle: 'Revolutionary new product that will transform how you work and collaborate.',
      ctaPrimary: {
        text: 'Order Now',
        variant: 'tonal',
        size: 'large',
        action: () => console.log('Order now clicked')
      },
      ctaSecondary: {
        text: 'Learn More',
        variant: 'tonal',
        size: 'large',
        action: () => console.log('Learn more clicked')
      },
      alignment: 'left',
      backgroundType: 'image',
      minHeight: 'large'
    },
    features: {
      title: 'Key Features',
      subtitle: 'Designed with you in mind',
      features: [
        {
          id: '1',
          title: 'Intuitive Design',
          description: 'Beautiful interface that anyone can use without training.',
          icon: 'star'
        },
        {
          id: '2',
          title: 'Premium Materials',
          description: 'Built with the finest materials for durability and style.',
          icon: 'check'
        }
      ]
    },
    testimonials: {
      title: 'Customer Reviews',
      testimonials: [
        {
          id: '1',
          content: 'This product exceeded all my expectations. Highly recommended!',
          name: 'Mike Johnson',
          title: 'Verified Customer',
          rating: 5
        }
      ]
    },
    pricing: {
      billingToggle: {
        monthlyLabel: 'One-time',
        yearlyLabel: 'Bundle',
        discountText: 'Best Value'
      },
      featuresComparison: false,
      plans: [
        {
          id: '1',
          name: 'Standard Edition',
          price: {
            monthly: 199,
            yearly: 199,
            currency: 'USD',
            suffix: 'one-time'
          },
          features: [
            { name: '2-Year Warranty', included: true },
            { name: 'Free Shipping', included: true }
          ],
          cta: {
            text: 'Order Now',
            variant: 'filled',
            action: () => console.log('Product ordered')
          }
        }
      ]
    },
    cta: {
      title: 'Start Your Journey',
      subtitle: 'Order now and get free shipping worldwide',
      ctaPrimary: {
        text: 'Order Now',
        variant: 'filled',
        action: () => console.log('Order now clicked')
      },
      backgroundType: 'gradient'
    }
  };

  agencyConfig: AgencyTemplateConfig = {
    hero: {
      title: 'Your Vision, Our Expertise',
      subtitle: 'We create exceptional digital experiences that drive results for businesses of all sizes.',
      ctaPrimary: {
        text: 'Start Project',
        variant: 'tonal',
        size: 'large',
        action: () => console.log('Start project clicked')
      },
      ctaSecondary: {
        text: 'View Portfolio',
        variant: 'outlined',
        size: 'large',
        action: () => console.log('View portfolio clicked')
      },
      alignment: 'left',
      backgroundType: 'gradient',
      minHeight: 'large'
    },
    services: {
      title: 'Our Services',
      subtitle: 'Comprehensive solutions for your digital needs',
      features: [
        {
          id: '1',
          title: 'Web Development',
          description: 'Custom websites and web applications built with modern technologies.',
          icon: 'code'
        },
        {
          id: '2',
          title: 'UI/UX Design',
          description: 'User-centered design that converts visitors into customers.',
          icon: 'palette'
        },
        {
          id: '3',
          title: 'Digital Marketing',
          description: 'Strategic campaigns that grow your online presence.',
          icon: 'megaphone'
        }
      ]
    },
    team: {
      title: 'Meet Our Team',
      subtitle: 'The talented individuals behind our success',
      members: [
        {
          id: '1',
          name: 'Alex Rivera',
          role: 'Creative Director',
          bio: 'Award-winning designer with 10+ years of experience in digital creativity.',
          image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop&crop=face',
          social: {
            linkedin: 'https://linkedin.com/in/alexrivera'
          }
        }
      ],
      columns: 3,
      showSocial: true,
      showBio: true
    },
    timeline: {
      title: 'Our Journey',
      subtitle: 'Milestones that define our growth',
      items: [
        {
          id: '1',
          title: 'Agency Founded',
          description: 'Started with a mission to help businesses succeed online.',
          date: '2018',
          status: 'completed',
          icon: 'rocket'
        },
        {
          id: '2',
          title: '100+ Happy Clients',
          description: 'Reached major milestone serving clients across industries.',
          date: '2020',
          status: 'completed',
          icon: 'star'
        },
        {
          id: '3',
          title: 'Award Recognition',
          description: 'Won Best Digital Agency award from Industry Association.',
          date: '2022',
          status: 'current',
          icon: 'check',
          badge: 'Latest'
        }
      ],
      orientation: 'vertical',
      showDates: true
    },
    testimonials: {
      title: 'Client Success Stories',
      subtitle: 'What our partners say about working with us',
      testimonials: [
        {
          id: '1',
          content: 'Working with this agency was a game-changer for our business. They delivered beyond our expectations.',
          name: 'Emma Watson',
          title: 'CEO at StartupXYZ',
          avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face'
        }
      ]
    },
    cta: {
      title: 'Ready to Start Your Project?',
      subtitle: 'Let\'s discuss how we can bring your vision to life',
      ctaPrimary: {
        text: 'Get Started',
        variant: 'filled',
        action: () => console.log('Get started clicked')
      },
      backgroundType: 'gradient'
    }
  };
}