import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeroWithImageComponent } from '../heroes/hero-with-image.component';
import { FeatureGridComponent } from '../features/feature-grid.component';
import { TestimonialCarouselComponent } from '../social-proof/testimonial-carousel.component';
import { PricingTableComponent } from '../conversion/pricing-table.component';
import { CTASectionComponent } from '../conversion/cta-section.component';
import { LandingHeaderComponent } from '../navigation/landing-header.component';
import { FooterSectionComponent } from '../navigation/footer-section.component';
import { ProductTemplateConfig } from '../../interfaces/templates.interfaces';

@Component({
  selector: 'ui-lp-product-template',
  standalone: true,
  imports: [
    CommonModule,
    HeroWithImageComponent,
    FeatureGridComponent,
    TestimonialCarouselComponent,
    PricingTableComponent,
    CTASectionComponent,
    LandingHeaderComponent,
    FooterSectionComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="ui-lp-product-template">
      @if (config().header) {
        <ui-lp-header [configuration]="config().header!"></ui-lp-header>
      }
      
      <main class="ui-lp-product-template__main">
        <!-- Hero Section with Product Image -->
        <ui-lp-hero-image [configuration]="config().hero"></ui-lp-hero-image>
        
        <!-- Features Section -->
        <ui-lp-feature-grid [configuration]="config().features"></ui-lp-feature-grid>
        
        <!-- Customer Testimonials -->
        <ui-lp-testimonial-carousel [configuration]="config().testimonials"></ui-lp-testimonial-carousel>
        
        <!-- Pricing Section -->
        <ui-pricing-table [config]="config().pricing"></ui-pricing-table>
        
        <!-- 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: './product-template.component.scss'
})
export class ProductTemplateComponent {
  config = signal<ProductTemplateConfig>({
    hero: {
      title: 'Introducing Our Latest Product',
      subtitle: 'Experience the future of innovation',
      alignment: 'left',
      backgroundType: 'image',
      minHeight: 'large'
    },
    features: {
      title: 'Key Features',
      features: []
    },
    testimonials: {
      title: 'Customer Reviews',
      testimonials: []
    },
    pricing: {
      plans: [],
      billingToggle: { monthlyLabel: 'Monthly', yearlyLabel: 'Yearly' },
      featuresComparison: false
    },
    cta: {
      title: 'Start Your Journey',
      description: 'Order now and get free shipping worldwide',
      ctaPrimary: { text: 'Order Now', variant: 'filled', action: () => {} },
      backgroundType: 'gradient'
    }
  });

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