import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeroSplitScreenComponent } from '../heroes/hero-split-screen.component';
import { FeatureGridComponent } from '../features/feature-grid.component';
import { TeamGridComponent } from '../content/team-grid.component';
import { TimelineSectionComponent } from '../content/timeline-section.component';
import { TestimonialCarouselComponent } from '../social-proof/testimonial-carousel.component';
import { CTASectionComponent } from '../conversion/cta-section.component';
import { LandingHeaderComponent } from '../navigation/landing-header.component';
import { FooterSectionComponent } from '../navigation/footer-section.component';
import { AgencyTemplateConfig } from '../../interfaces/templates.interfaces';

@Component({
  selector: 'ui-lp-agency-template',
  standalone: true,
  imports: [
    CommonModule,
    HeroSplitScreenComponent,
    FeatureGridComponent,
    TeamGridComponent,
    TimelineSectionComponent,
    TestimonialCarouselComponent,
    CTASectionComponent,
    LandingHeaderComponent,
    FooterSectionComponent
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="ui-lp-agency-template">
      @if (config().header) {
        <ui-lp-header [configuration]="config().header!"></ui-lp-header>
      }
      
      <main class="ui-lp-agency-template__main">
        <!-- Hero Section -->
        <ui-lp-hero-split [configuration]="config().hero"></ui-lp-hero-split>
        
        <!-- Services Section -->
        <ui-lp-feature-grid [configuration]="config().services"></ui-lp-feature-grid>
        
        <!-- Company Timeline -->
        <ui-lp-timeline [configuration]="config().timeline"></ui-lp-timeline>
        
        <!-- Team Section -->
        <ui-lp-team-grid [configuration]="config().team"></ui-lp-team-grid>
        
        <!-- Client Testimonials -->
        <ui-lp-testimonial-carousel [configuration]="config().testimonials"></ui-lp-testimonial-carousel>
        
        <!-- Contact 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: './agency-template.component.scss'
})
export class AgencyTemplateComponent {
  config = signal<AgencyTemplateConfig>({
    hero: {
      title: 'Your Vision, Our Expertise',
      subtitle: 'We create exceptional digital experiences that drive results',
      alignment: 'left',
      backgroundType: 'gradient',
      minHeight: 'large'
    },
    services: {
      title: 'Our Services',
      subtitle: 'Comprehensive solutions for your digital needs',
      features: []
    },
    team: {
      title: 'Meet Our Team',
      subtitle: 'The talented individuals behind our success',
      members: [],
      columns: 3,
      showSocial: true,
      showBio: true
    },
    timeline: {
      title: 'Our Journey',
      subtitle: 'Milestones that define our growth',
      items: [],
      orientation: 'vertical',
      showDates: true
    },
    testimonials: {
      title: 'Client Success Stories',
      subtitle: 'What our partners say about working with us',
      testimonials: []
    },
    cta: {
      title: 'Ready to Start Your Project?',
      description: 'Let\'s discuss how we can bring your vision to life',
      ctaPrimary: { text: 'Get Started', variant: 'filled', action: () => {} },
      backgroundType: 'gradient'
    }
  });

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