import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { staggeredFadeInUp, fadeInRight } from '../../../../shared/animations';
import { InViewportDirective } from '../../../../shared/directives/in-viewport.directive';

interface Step {
  icon: SafeHtml;
  step: string;
  title: string;
  description: string;
}

@Component({
  selector: 'app-how-it-works-section',
  standalone: true,
  imports: [CommonModule, InViewportDirective],
  templateUrl: './how-it-works-section.component.html',
  styleUrls: ['./how-it-works-section.component.scss'],
  animations: [staggeredFadeInUp, fadeInRight]
})
export class HowItWorksSectionComponent {
  userPlusIcon: SafeHtml;
  packageIcon: SafeHtml;
  messageCircleIcon: SafeHtml;
  rocketIcon: SafeHtml;

  steps: Step[];
  isInView = false;

  constructor(private sanitizer: DomSanitizer) {
    this.userPlusIcon = this.sanitizer.bypassSecurityTrustHtml(`
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus w-6 h-6 text-primary group-hover:text-primary-foreground">
        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
        <circle cx="9" cy="7" r="4"/>
        <line x1="22" x2="19" y1="11" y2="11"/>
        <line x1="19" x2="19" y1="8" y2="14"/>
      </svg>
    `);

    this.packageIcon = this.sanitizer.bypassSecurityTrustHtml(`
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package w-6 h-6 text-primary group-hover:text-primary-foreground">
        <path d="m7.5 4.274 6.135 2.863a1 1 0 0 0 .73 0L21 3"/>
        <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7"/>
        <path d="M12 12v6"/>
        <path d="m12 12-4-2-4 2"/>
        <path d="m12 12 4-2 4 2"/>
        <path d="M3 7 12 3l9 4"/>
      </svg>
    `);

    this.messageCircleIcon = this.sanitizer.bypassSecurityTrustHtml(`
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle w-6 h-6 text-primary group-hover:text-primary-foreground">
        <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
      </svg>
    `);

    this.rocketIcon = this.sanitizer.bypassSecurityTrustHtml(`
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket w-6 h-6 text-primary group-hover:text-primary-foreground">
        <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.75-.75 1.39-1.72 1.6-2.9A6 6 0 1 0 4.5 16.5Z"/>
        <path d="m14 2-3-3a2.25 2.25 0 0 0-3 3l3 3a2.25 2.25 0 0 0 3-3Z"/>
        <path d="m8 16 6-6"/>
      </svg>
    `);

    this.steps = [
      {
        icon: this.userPlusIcon,
        step: "01",
        title: "Register Your Store",
        description: "Sign up with your business details in minutes",
      },
      {
        icon: this.packageIcon,
        step: "02",
        title: "Upload Your Catalog",
        description: "Add products with prices and images",
      },
      {
        icon: this.messageCircleIcon,
        step: "03",
        title: "Connect WhatsApp",
        description: "Link your WhatsApp Business number",
      },
      {
        icon: this.rocketIcon,
        step: "04",
        title: "Start Selling",
        description: "Receive and manage orders instantly",
      },
    ];
  }

  onInViewport(inViewport: boolean) {
    if (inViewport && !this.isInView) {
      this.isInView = true;
    }
  }
}
