import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeroSectionComponent } from '../heroes/hero-section.component';
import { FeatureGridComponent } from '../features/feature-grid.component';
import { StatisticsDisplayComponent } from '../social-proof/statistics-display.component';
import { TestimonialCarouselComponent } from '../social-proof/testimonial-carousel.component';
import { PricingTableComponent } from '../conversion/pricing-table.component';
import { CTASectionComponent } from '../conversion/cta-section.component';
import { FAQSectionComponent } from '../content/faq-section.component';
import { LandingHeaderComponent } from '../navigation/landing-header.component';
import { FooterSectionComponent } from '../navigation/footer-section.component';
import { SaaSTemplateConfig } from '../../interfaces/templates.interfaces';

@Component({
  selector: 'ui-lp-saas-template',
  standalone: true,
  imports: [
    CommonModule,
    HeroSectionComponent,
    FeatureGridComponent,
    StatisticsDisplayComponent,
    TestimonialCarouselComponent,
    PricingTableComponent,
    CTASectionComponent,
    FAQSectionComponent,
    LandingHeaderComponent,
    FooterSectionComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="ui-lp-saas-template">
      @if (config().header) {
        <ui-lp-header [configuration]="config().header!"></ui-lp-header>
      }
      
      <main class="ui-lp-saas-template__main">
        <!-- Hero Section -->
        <ui-lp-hero [configuration]="config().hero"></ui-lp-hero>
        
        <!-- Statistics Section -->
        <ui-lp-statistics-display [configuration]="config().socialProof"></ui-lp-statistics-display>
        
        <!-- Features Section -->
        <ui-lp-feature-grid [configuration]="config().features"></ui-lp-feature-grid>
        
        <!-- Testimonials Section -->
        <ui-lp-testimonial-carousel [configuration]="config().testimonials"></ui-lp-testimonial-carousel>
        
        <!-- Pricing Section -->
        <ui-pricing-table [config]="config().pricing"></ui-pricing-table>
        
        <!-- FAQ Section -->
        <ui-lp-faq [configuration]="config().faq"></ui-lp-faq>
        
        <!-- Final CTA Section -->
        <ui-cta-section [config]="config().cta"></ui-cta-section>
      </main>
      
      @if (config().footer) {
        <ui-lp-footer [configuration]="config().footer!"></ui-lp-footer>
      }
    </div>
  `,
  styleUrl: './saas-template.component.scss'
})
export class SaaSTemplateComponent {
  config = signal<SaaSTemplateConfig>({
    hero: {
      title: 'Build Amazing SaaS Applications',
      subtitle: 'The complete toolkit for modern software development',
      alignment: 'center',
      backgroundType: 'gradient',
      minHeight: 'full'
    },
    features: {
      title: 'Why Choose Our Platform',
      features: []
    },
    socialProof: {
      title: 'Trusted by Industry Leaders',
      statistics: []
    },
    testimonials: {
      title: 'What Our Customers Say',
      testimonials: []
    },
    pricing: {
      plans: [],
      billingToggle: { monthlyLabel: 'Monthly', yearlyLabel: 'Yearly' },
      featuresComparison: false
    },
    faq: {
      title: 'Frequently Asked Questions',
      items: []
    },
    cta: {
      title: 'Ready to Get Started?',
      description: 'Join thousands of developers building the future',
      ctaPrimary: { text: 'Get Started', variant: 'filled', action: () => {} },
      backgroundType: 'gradient'
    }
  });

  @Input() set configuration(value: SaaSTemplateConfig) {
    this.config.set(value);
  }
}