import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterSectionComponent, FooterConfig, FooterLink } from 'ui-landing-pages';
import { ButtonComponent } from 'ui-essentials';
import { VStackComponent } from 'ui-essentials';
import { SectionComponent } from 'ui-essentials';

@Component({
  selector: 'app-landing-footer-demo',
  standalone: true,
  imports: [CommonModule, FooterSectionComponent, ButtonComponent, VStackComponent, SectionComponent],
  template: `
    <ui-vstack [spacing]="'xl'">
      <ui-section>
        <h2>Landing Footer - Light Theme</h2>
        <p>Comprehensive footer with multiple columns, newsletter signup, and social links.</p>
        
        <ui-lp-footer
          [configuration]="lightFooterConfig()"
          (linkClicked)="onLinkClicked($event)"
          (newsletterSubmitted)="onNewsletterSubmitted($event)">
        </ui-lp-footer>
      </ui-section>
      
      <ui-section>
        <h2>Landing Footer - Dark Theme</h2>
        <p>Dark theme footer with company branding and legal links.</p>
        
        <ui-lp-footer
          [configuration]="darkFooterConfig()"
          (linkClicked)="onLinkClicked($event)"
          (newsletterSubmitted)="onNewsletterSubmitted($event)">
        </ui-lp-footer>
      </ui-section>
      
      <ui-section>
        <h2>Landing Footer - Minimal</h2>
        <p>Simple footer with just essential links and copyright.</p>
        
        <ui-lp-footer
          [configuration]="minimalFooterConfig()"
          (linkClicked)="onLinkClicked($event)">
        </ui-lp-footer>
      </ui-section>
      
      <ui-section>
        <h2>Configuration Options</h2>
        <div class="demo-controls">
          <ui-button
            [variant]="'outlined'"
            (clicked)="toggleTheme()"
            class="demo-control">
            Theme: {{ lightFooterConfig().theme }}
          </ui-button>
          
          <ui-button
            [variant]="'outlined'"
            (clicked)="toggleDivider()"
            class="demo-control">
            Show Divider: {{ lightFooterConfig().showDivider ? 'ON' : 'OFF' }}
          </ui-button>
          
          <ui-button
            [variant]="'outlined'"
            (clicked)="addColumn()"
            class="demo-control">
            Add Column
          </ui-button>
          
          <ui-button
            [variant]="'outlined'"
            (clicked)="removeColumn()"
            class="demo-control">
            Remove Column
          </ui-button>
        </div>
      </ui-section>
    </ui-vstack>
  `,
  styles: [`
    .demo-controls {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }
    
    .demo-control {
      min-width: 150px;
    }
    
    :host {
      display: block;
      padding-bottom: 2rem;
    }
  `]
})
export class LandingFooterDemoComponent {
  lightFooterConfig = signal<FooterConfig>({
    logo: {
      text: 'UI Suite',
      url: '/'
    },
    columns: [
      {
        id: 'product',
        title: 'Product',
        items: [
          { id: 'features', label: 'Features', route: '/features' },
          { id: 'pricing', label: 'Pricing', route: '/pricing' },
          { id: 'integrations', label: 'Integrations', route: '/integrations' },
          { id: 'api', label: 'API', route: '/api' }
        ]
      },
      {
        id: 'company',
        title: 'Company',
        items: [
          { id: 'about', label: 'About Us', route: '/about' },
          { id: 'careers', label: 'Careers', route: '/careers', badge: '5 open' },
          { id: 'blog', label: 'Blog', route: '/blog' },
          { id: 'press', label: 'Press', route: '/press' }
        ]
      },
      {
        id: 'resources',
        title: 'Resources',
        items: [
          { id: 'docs', label: 'Documentation', route: '/docs' },
          { id: 'guides', label: 'Guides', route: '/guides' },
          { id: 'help', label: 'Help Center', route: '/help' },
          { id: 'community', label: 'Community', url: 'https://discord.gg/example', target: '_blank' }
        ]
      },
      {
        id: 'legal',
        title: 'Legal',
        items: [
          { id: 'privacy', label: 'Privacy Policy', route: '/privacy' },
          { id: 'terms', label: 'Terms of Service', route: '/terms' },
          { id: 'cookies', label: 'Cookie Policy', route: '/cookies' },
          { id: 'gdpr', label: 'GDPR', route: '/gdpr' }
        ]
      }
    ],
    newsletter: {
      title: 'Stay Updated',
      description: 'Get the latest news and updates delivered to your inbox.',
      placeholder: 'Enter your email',
      buttonText: 'Subscribe',
      onSubmit: (email: string) => {
        console.log('Newsletter signup:', email);
      }
    },
    socialLinks: [
      { id: 'twitter', platform: 'twitter', url: 'https://twitter.com/example' },
      { id: 'facebook', platform: 'facebook', url: 'https://facebook.com/example' },
      { id: 'linkedin', platform: 'linkedin', url: 'https://linkedin.com/company/example' },
      { id: 'github', platform: 'github', url: 'https://github.com/example' }
    ],
    copyright: '© 2024 UI Suite. All rights reserved.',
    legalLinks: [
      { id: 'privacy', label: 'Privacy', route: '/privacy' },
      { id: 'terms', label: 'Terms', route: '/terms' },
      { id: 'cookies', label: 'Cookies', route: '/cookies' }
    ],
    theme: 'light',
    showDivider: true
  });
  
  darkFooterConfig = signal<FooterConfig>({
    logo: {
      text: 'Dark UI Pro',
      url: '/'
    },
    columns: [
      {
        id: 'solutions',
        title: 'Solutions',
        items: [
          { id: 'enterprise', label: 'Enterprise', route: '/enterprise' },
          { id: 'startups', label: 'Startups', route: '/startups' },
          { id: 'agencies', label: 'Agencies', route: '/agencies' },
          { id: 'developers', label: 'Developers', route: '/developers' }
        ]
      },
      {
        id: 'support',
        title: 'Support',
        items: [
          { id: 'contact', label: 'Contact Us', route: '/contact' },
          { id: 'chat', label: 'Live Chat', action: () => alert('Chat opened!') },
          { id: 'tickets', label: 'Support Tickets', route: '/support' },
          { id: 'status', label: 'System Status', url: 'https://status.example.com', target: '_blank' }
        ]
      },
      {
        id: 'developers',
        title: 'Developers',
        items: [
          { id: 'api-docs', label: 'API Documentation', route: '/api-docs' },
          { id: 'sdk', label: 'SDK', route: '/sdk' },
          { id: 'webhooks', label: 'Webhooks', route: '/webhooks' },
          { id: 'changelog', label: 'Changelog', route: '/changelog' }
        ]
      }
    ],
    newsletter: {
      title: 'Developer Newsletter',
      description: 'Weekly updates on new features, API changes, and developer resources.',
      placeholder: 'developer@company.com',
      buttonText: 'Join',
      onSubmit: (email: string) => {
        console.log('Developer newsletter signup:', email);
      }
    },
    socialLinks: [
      { id: 'github', platform: 'github', url: 'https://github.com/example' },
      { id: 'twitter', platform: 'twitter', url: 'https://twitter.com/example' },
      { id: 'youtube', platform: 'youtube', url: 'https://youtube.com/example' }
    ],
    copyright: '© 2024 Dark UI Pro. Built with ❤️ by developers.',
    legalLinks: [
      { id: 'privacy', label: 'Privacy Policy', route: '/privacy' },
      { id: 'terms', label: 'Terms of Service', route: '/terms' },
      { id: 'security', label: 'Security', route: '/security' }
    ],
    theme: 'dark',
    showDivider: true
  });
  
  minimalFooterConfig = signal<FooterConfig>({
    columns: [
      {
        id: 'quick-links',
        title: 'Quick Links',
        items: [
          { id: 'home', label: 'Home', route: '/' },
          { id: 'about', label: 'About', route: '/about' },
          { id: 'contact', label: 'Contact', route: '/contact' }
        ]
      }
    ],
    copyright: '© 2024 Minimal Footer Example',
    legalLinks: [
      { id: 'privacy', label: 'Privacy', route: '/privacy' },
      { id: 'terms', label: 'Terms', route: '/terms' }
    ],
    theme: 'light',
    showDivider: false
  });
  
  toggleTheme(): void {
    const current = this.lightFooterConfig();
    this.lightFooterConfig.set({
      ...current,
      theme: current.theme === 'light' ? 'dark' : 'light'
    });
  }
  
  toggleDivider(): void {
    const current = this.lightFooterConfig();
    this.lightFooterConfig.set({
      ...current,
      showDivider: !current.showDivider
    });
  }
  
  addColumn(): void {
    const current = this.lightFooterConfig();
    const newColumn = {
      id: `column-${current.columns.length + 1}`,
      title: `Column ${current.columns.length + 1}`,
      items: [
        { id: `item-1`, label: 'Item 1', route: '/item-1' },
        { id: `item-2`, label: 'Item 2', route: '/item-2' }
      ]
    };
    
    this.lightFooterConfig.set({
      ...current,
      columns: [...current.columns, newColumn]
    });
  }
  
  removeColumn(): void {
    const current = this.lightFooterConfig();
    if (current.columns.length > 1) {
      this.lightFooterConfig.set({
        ...current,
        columns: current.columns.slice(0, -1)
      });
    }
  }
  
  onLinkClicked(link: FooterLink): void {
    console.log('Footer link clicked:', link);
  }
  
  onNewsletterSubmitted(email: string): void {
    console.log('Newsletter submitted:', email);
    alert(`Newsletter subscription for: ${email}`);
  }
}