import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, ContainerComponent, FlexComponent, SwitchComponent } from 'ui-essentials';
import { PricingTableConfig, PricingPlan } from '../../interfaces/conversion.interfaces';

@Component({
  selector: 'ui-pricing-table',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ButtonComponent,
    ContainerComponent,
    FlexComponent,
    SwitchComponent
  ],
  template: `
    <section class="pricing-table">
      <ui-container>
        
        <!-- Billing Toggle -->
        <div class="pricing-table__header">
          <div class="billing-toggle">
            <span 
              class="billing-toggle__label"
              [class.billing-toggle__label--active]="!isYearly">
              {{ config.billingToggle.monthlyLabel }}
            </span>
            
            <ui-switch
              [(ngModel)]="isYearly"
              class="billing-toggle__switch">
            </ui-switch>
            
            <span 
              class="billing-toggle__label"
              [class.billing-toggle__label--active]="isYearly">
              {{ config.billingToggle.yearlyLabel }}
              <span *ngIf="config.billingToggle.discountText" class="billing-toggle__discount">
                {{ config.billingToggle.discountText }}
              </span>
            </span>
          </div>
        </div>

        <!-- Pricing Plans Grid -->
        <div class="pricing-table__grid">
          <div 
            *ngFor="let plan of config.plans" 
            class="pricing-table__plan"
            [class.pricing-table__plan--popular]="plan.popular"
            [class.pricing-table__plan--highlighted]="config.highlightedPlan === plan.id">
            
            <!-- Plan Badge -->
            <div *ngIf="plan.badge || plan.popular" class="pricing-plan__badge">
              {{ plan.badge || 'Most Popular' }}
            </div>

            <!-- Plan Header -->
            <div class="pricing-plan__header">
              <h3 class="pricing-plan__name">{{ plan.name }}</h3>
              <p *ngIf="plan.description" class="pricing-plan__description">
                {{ plan.description }}
              </p>
            </div>

            <!-- Plan Price -->
            <div class="pricing-plan__price">
              <span class="pricing-plan__currency">{{ plan.price.currency }}</span>
              <span class="pricing-plan__amount">
                {{ isYearly ? plan.price.yearly : plan.price.monthly }}
              </span>
              <span *ngIf="plan.price.suffix" class="pricing-plan__suffix">
                {{ plan.price.suffix }}
              </span>
            </div>

            <!-- Plan Features -->
            <ul class="pricing-plan__features">
              <li 
                *ngFor="let feature of plan.features"
                class="pricing-plan__feature"
                [class.pricing-plan__feature--included]="feature.included"
                [class.pricing-plan__feature--excluded]="!feature.included"
                [class.pricing-plan__feature--highlight]="feature.highlight">
                
                <span class="pricing-plan__feature-icon" 
                      [class.pricing-plan__feature-icon--check]="feature.included"
                      [class.pricing-plan__feature-icon--cross]="!feature.included">
                </span>
                
                <span class="pricing-plan__feature-text">
                  {{ feature.name }}
                  <span *ngIf="feature.description" class="pricing-plan__feature-description">
                    {{ feature.description }}
                  </span>
                </span>
              </li>
            </ul>

            <!-- Plan CTA -->
            <div class="pricing-plan__cta">
              <ui-button
                [variant]="plan.popular ? 'filled' : (plan.cta.variant || 'outlined')"
                [size]="plan.cta.size || 'large'"
                [disabled]="plan.cta.disabled || false"
                [loading]="plan.cta.loading || false"
                (click)="plan.cta.action()"
                class="pricing-plan__button">
                {{ plan.cta.text }}
              </ui-button>
            </div>
          </div>
        </div>

        <!-- Features Comparison Table (if enabled) -->
        <div *ngIf="config.featuresComparison" class="pricing-table__comparison">
          <h3 class="comparison__title">Feature Comparison</h3>
          <div class="comparison__table">
            <div class="comparison__header">
              <div class="comparison__cell comparison__cell--feature">Features</div>
              <div *ngFor="let plan of config.plans" class="comparison__cell comparison__cell--plan">
                {{ plan.name }}
              </div>
            </div>
            
            <div *ngFor="let featureName of getAllFeatureNames()" class="comparison__row">
              <div class="comparison__cell comparison__cell--feature">{{ featureName }}</div>
              <div *ngFor="let plan of config.plans" class="comparison__cell comparison__cell--value">
                <span 
                  class="comparison__icon"
                  [class.comparison__icon--check]="planHasFeature(plan, featureName)"
                  [class.comparison__icon--cross]="!planHasFeature(plan, featureName)">
                </span>
              </div>
            </div>
          </div>
        </div>
      </ui-container>
    </section>
  `,
  styleUrls: ['./pricing-table.component.scss']
})
export class PricingTableComponent {
  @Input() config!: PricingTableConfig;
  
  isYearly = false;

  getAllFeatureNames(): string[] {
    const allFeatures = new Set<string>();
    this.config.plans.forEach(plan => {
      plan.features.forEach(feature => {
        allFeatures.add(feature.name);
      });
    });
    return Array.from(allFeatures);
  }

  planHasFeature(plan: PricingPlan, featureName: string): boolean {
    const feature = plan.features.find(f => f.name === featureName);
    return feature?.included || false;
  }
}