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

interface Feature {
  icon: SafeHtml;
  title: string;
  description: string;
  link: string;
}

@Component({
  selector: 'app-features-section',
  standalone: true,
  imports: [CommonModule, RouterLink, InViewportDirective],
  templateUrl: './features-section.component.html',
  styleUrls: ['./features-section.component.scss'],
  animations: [staggeredFadeInUp]
})
export class FeaturesSectionComponent {
  messageCircleIcon: SafeHtml;
  layoutDashboardIcon: SafeHtml;
  usersIcon: SafeHtml;
  truckIcon: SafeHtml;
  barChart3Icon: SafeHtml;
  paletteIcon: SafeHtml;

  features: Feature[];
  isInView = false;

  constructor(private sanitizer: DomSanitizer) {
    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.layoutDashboardIcon = 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-layout-dashboard w-6 h-6 text-primary group-hover:text-primary-foreground">
        <rect width="7" height="9" x="3" y="3" rx="1" />
        <rect width="7" height="5" x="14" y="3" rx="1" />
        <rect width="7" height="9" x="14" y="12" rx="1" />
        <rect width="7" height="5" x="3" y="16" rx="1" />
      </svg>
    `);

    this.usersIcon = 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-users 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" />
        <path d="M16 3.128a4 4 0 0 1 0 7.744" />
        <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
        <circle cx="9" cy="7" r="4" />
      </svg>
    `);

    this.truckIcon = 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-truck w-6 h-6 text-primary group-hover:text-primary-foreground">
        <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" />
        <path d="M15 18H9" />
        <path d="M19 18h2a1 1 0 0 0 1-1v-3.28a1 1 0 0 0-.684-.948l-1.916-.639a4 4 0 0 0-3.132-.098L14 12" />
        <path d="M3 11h11" />
        <path d="M9 18v3" />
        <path d="M14 18v3" />
        <path d="M19 18v3" />
        <circle cx="6" cy="18" r="3" />
        <circle cx="18" cy="18" r="3" />
      </svg>
    `);

    this.barChart3Icon = 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-bar-chart-3 w-6 h-6 text-primary group-hover:text-primary-foreground">
        <path d="M3 3v18h18" />
        <path d="M18 17V9" />
        <path d="M13 17V5" />
        <path d="M8 17v-3" />
      </svg>
    `);

    this.paletteIcon = 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-palette w-6 h-6 text-primary group-hover:text-primary-foreground">
        <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
        <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
        <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
        <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
        <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.308 2.192-.709C15.875 20.007 17 18.59 17 17c0-1.41-1.125-2.993-2.808-3.291C13.648 13.308 12.926 13 12 13c-5.5 0-10-4.5-10-10S6.5 2 12 2Z"/>
        <path d="M22 17c0 1.41-1.125 2.993-2.808 3.291C18.352 20.692 17.629 21 17 21c-2.071 0-3.75-1.679-3.75-3.75S14.929 13.5 17 13.5c2.071 0 3.75 1.679 3.75 3.75 0 .34-.02.675-.062 1ZM17 17h.01"/>
      </svg>
    `);

    this.features = [
      {
        icon: this.messageCircleIcon,
        title: "WhatsApp AI Ordering",
        description: "24/7 AI-powered chat handles customer inquiries and orders automatically",
        link: "/features#ai-ordering",
      },
      {
        icon: this.layoutDashboardIcon,
        title: "Store Dashboard",
        description: "Complete control over orders, products, and inventory in one place",
        link: "/features#dashboard",
      },
      {
        icon: this.usersIcon,
        title: "Customer Management",
        description: "Build your customer database and send targeted offers anytime",
        link: "/features#customers",
      },
      {
        icon: this.truckIcon,
        title: "Delivery Management",
        description: "Dedicated app for delivery with order assignment & tracking",
        link: "/features#delivery",
      },
      {
        icon: this.barChart3Icon,
        title: "Analytics & Reports",
        description: "Track sales, popular products, and customer repeat rates",
        link: "/features#analytics",
      },
      {
        icon: this.paletteIcon,
        title: "Customization",
        description: "Your store, your brand. Customize everything to match your identity",
        link: "/features#customization",
      },
    ];
  }

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