import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LanguageService } from '../language.service';
import { TranslationService } from '../translation.service';

@Component({
  selector: 'app-language-popup',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div id="languagePopup" 
         class="language-popup fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
         [class.active]="showPopup">
        
        <div class="bg-white rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl popup-content">
            <!-- Header -->
            <div class="bg-gradient-to-r from-wattpad-primary to-wattpad-secondary p-3 text-white">
                <div class="flex justify-between items-center">
                    <div>
                        <h2 class="text-2xl font-bold">{{ t('CHOOSE_YOUR_LANGUAGE') }}</h2>
                        <p class="opacity-90 mt-1">{{ t('SELECT_PREFERRED_LANGUAGE') }}</p>
                    </div>
                   
                </div>
            </div>
            
            <!-- Language Options -->
            <div class="p-6">
                <div class="language-grid">
                    <!-- Hindi -->
                    <div class="language-card p-3 fade-in-up" 
                         style="animation-delay: 0.1s" 
                         (click)="selectLanguage('hi')"
                         [class.pulse-animation]="languageService.getCurrentLanguage() === 'hi'">
                        <div class="flex items-center">
                            <div class="w-14 h-14 rounded-full bg-gradient-to-r from-red-400 to-red-600 flex items-center justify-center mr-4 shadow-md">
                                <span class="language-icon text-white text-xl" style="font-family: 'Noto Sans Devanagari', sans-serif;">हि</span>
                            </div>
                            <div>
                                <div class="language-name font-bold text-lg">{{ t('HINDI') }}</div>
                                <div class="language-native text-wattpad-light text-sm" style="font-family: 'Noto Sans Devanagari', sans-serif;">हिन्दी</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- English -->
                    <div class="language-card p-3 fade-in-up" 
                         style="animation-delay: 0.2s" 
                         (click)="selectLanguage('en')"
                         [class.pulse-animation]="languageService.getCurrentLanguage() === 'en'">
                        <div class="flex items-center">
                            <div class="w-14 h-14 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center mr-4 shadow-md">
                                <span class="language-icon text-white text-xl font-bold">En</span>
                            </div>
                            <div>
                                <div class="language-name font-bold text-lg">{{ t('ENGLISH') }}</div>
                                <div class="language-native text-wattpad-light text-sm">English</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bangla -->
                    <div class="language-card p-3 fade-in-up" 
                         style="animation-delay: 0.3s" 
                         (click)="selectLanguage('bn')"
                         [class.pulse-animation]="languageService.getCurrentLanguage() === 'bn'">
                        <div class="flex items-center">
                            <div class="w-14 h-14 rounded-full bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center mr-4 shadow-md">
                                <span class="language-icon text-white text-xl" style="font-family: 'Noto Sans Bengali', sans-serif;">বা</span>
                            </div>
                            <div>
                                <div class="language-name font-bold text-lg">{{ t('BENGALI') }}</div>
                                <div class="language-native text-wattpad-light text-sm" style="font-family: 'Noto Sans Bengali', sans-serif;">বাংলা</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Marathi -->
                    <div class="language-card p-3 fade-in-up" 
                         style="animation-delay: 0.4s" 
                         (click)="selectLanguage('mr')"
                         [class.pulse-animation]="languageService.getCurrentLanguage() === 'mr'">
                        <div class="flex items-center">
                            <div class="w-14 h-14 rounded-full bg-gradient-to-r from-orange-400 to-orange-600 flex items-center justify-center mr-4 shadow-md">
                                <span class="language-icon text-white text-xl" style="font-family: 'Noto Sans Devanagari', sans-serif;">म</span>
                            </div>
                            <div>
                                <div class="language-name font-bold text-lg">{{ t('MARATHI') }}</div>
                                <div class="language-native text-wattpad-light text-sm" style="font-family: 'Noto Sans Devanagari', sans-serif;">मराठी</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Telugu -->
                    <div class="language-card p-3 fade-in-up" 
                         style="animation-delay: 0.5s" 
                         (click)="selectLanguage('te')"
                         [class.pulse-animation]="languageService.getCurrentLanguage() === 'te'">
                        <div class="flex items-center">
                            <div class="w-14 h-14 rounded-full bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center mr-4 shadow-md">
                                <span class="language-icon text-white text-xl" style="font-family: 'Noto Sans Telugu', sans-serif;">తె</span>
                            </div>
                            <div>
                                <div class="language-name font-bold text-lg">{{ t('TELUGU') }}</div>
                                <div class="language-native text-wattpad-light text-sm" style="font-family: 'Noto Sans Telugu', sans-serif;">తెలుగు</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tamil -->
                    <div class="language-card p-3 fade-in-up" 
                         style="animation-delay: 0.6s" 
                         (click)="selectLanguage('ta')"
                         [class.pulse-animation]="languageService.getCurrentLanguage() === 'ta'">
                        <div class="flex items-center">
                            <div class="w-14 h-14 rounded-full bg-gradient-to-r from-pink-400 to-pink-600 flex items-center justify-center mr-4 shadow-md">
                                <span class="language-icon text-white text-xl" style="font-family: 'Noto Sans Tamil', sans-serif;">த</span>
                            </div>
                            <div>
                                <div class="language-name font-bold text-lg">{{ t('TAMIL') }}</div>
                                <div class="language-native text-wattpad-light text-sm" style="font-family: 'Noto Sans Tamil', sans-serif;">தமிழ்</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="bg-gray-50 p-4 border-t border-gray-200 text-center">
                <p class="text-sm text-wattpad-light">
                    {{ t('SELECTION_SAVED_FUTURE') }}
                </p>
            </div>
        </div>
    </div>
  `,
  styles: [`
    :host {
        display: block;
    }
    
    .language-popup {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s;
    }
    
    .language-popup.active {
        opacity: 1;
        visibility: visible;
    }
    
    .language-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform-style: preserve-3d;
        perspective: 1000px;
        cursor: pointer;
        border-radius: 16px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    }
    
    .language-card:hover {
        transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    
    .language-icon {
        font-weight: bold;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    
    .language-card:nth-child(1):hover { background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%); }
    .language-card:nth-child(2):hover { background: linear-gradient(135deg, #589bf7 0%, #3f7ff1 100%) }
    .language-card:nth-child(3):hover { background: linear-gradient(135deg, #46da7c 0%, #3ed072 100%) }
    .language-card:nth-child(4):hover { background: linear-gradient(135deg, #ff9f43 0%, #ffb76b 100%); }
    .language-card:nth-child(5):hover { background: linear-gradient(135deg, #a29bfe 0%, #b9b4ff 100%); }
    .language-card:nth-child(6):hover { background: linear-gradient(135deg, #fd79a8 0%, #ff9ac5 100%); }
    
    .language-card:hover .language-icon {
        transform: scale(1.2);
        transition: transform 0.3s ease;
    }
    
    .language-card:hover .language-name {
        color: white;
    }
    .language-name{
      color:#000
    }
    .language-card:hover .language-native {
        color: rgba(255, 255, 255, 0.8);
    }
    
    .pulse-animation {
        animation: pulse 2s infinite;
        border: 2px solid #FF2D55;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.02); }
        100% { transform: scale(1); }
    }
    
    .fade-in-up {
        animation: fadeInUp 0.6s ease forwards;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .popup-content {
        animation: popupIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        transform: scale(0.8);
    }
    
    @keyframes popupIn {
        to {
            transform: scale(1);
        }
    }
    
    .language-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    @media (max-width: 640px) {
        .language-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Wattpad Color Variables */
    :host {
        --wattpad-primary: #FF2D55;
        --wattpad-secondary: #00B272;
        --wattpad-accent: #FF9500;
        --wattpad-dark: #1E1E1E;
        --wattpad-light: #757575;
        --wattpad-bg: #F8F8F8;
    }
  `]
})
export class LanguagePopupComponent implements OnInit {
  showPopup = false;
  availableLanguages: any[] = [];

  constructor(
    public languageService: LanguageService,
    private translationService: TranslationService
  ) {}

  ngOnInit() {
    this.availableLanguages = this.languageService.getAvailableLanguages();
    
    // Check if user has already selected language
    const hasSelectedLanguage = localStorage.getItem('hasSelectedLanguage');
    if (!hasSelectedLanguage) {
      // First time user - show popup after small delay
      setTimeout(() => {
        this.showPopup = true;
      }, 1000);
    }
  }

  // Translation helper method
  t(key: string): string {
    return this.translationService.translate(key);
  }

  selectLanguage(langCode: string) {
    this.languageService.setLanguage(langCode);
    this.translationService.setLanguage(langCode);
    localStorage.setItem('hasSelectedLanguage', 'true');
    this.showPopup = false;
    
    // Page reload for language change
    window.location.reload();
  }

  continueWithCurrent() {
    localStorage.setItem('hasSelectedLanguage', 'true');
    this.showPopup = false;
  }
}
