const translations = {
  en: {
    title: 'AI Stack Deployer',
    subtitle: 'Deploy your personal AI coding assistant in seconds',
    chooseStackName: 'Choose Your Stack Name',
    availableAt: 'Your AI assistant will be available at',
    stackName: 'Stack Name',
    placeholder: 'e.g., your-mom-is-fat-dev',
    inputHint: '3-20 characters, lowercase letters, numbers, and hyphens only',
    deployBtn: 'Deploy My AI Stack',
    deploying: 'Deploying Your Stack',
    stack: 'Stack',
    initializing: 'Initializing deployment...',
    successMessage: 'Your AI coding assistant is ready to use',
    stackNameLabel: 'Stack Name:',
    openStack: 'Open My AI Stack',
    deployAnother: 'Deploy Another Stack',
    tryAgain: 'Try Again',
    poweredBy: 'Powered by',
    deploymentComplete: 'Deployment Complete',
    deploymentFailed: 'Deployment Failed',
    nameRequired: 'Name is required',
    nameLengthError: 'Name must be between 3 and 20 characters',
    nameCharsError: 'Only lowercase letters, numbers, and hyphens allowed',
    nameHyphenError: 'Cannot start or end with a hyphen',
    nameReserved: 'This name is reserved',
    checkingAvailability: 'Checking availability...',
    nameAvailable: '✓ Name is available!',
    nameNotAvailable: 'Name is not available',
    checkFailed: 'Failed to check availability',
    connectionLost: 'Connection lost. Please refresh and try again.',
    deployingText: 'Deploying...',
    yournamePlaceholder: 'yourname'
  },
  nl: {
    title: 'AI Stack Deployer',
    subtitle: 'Implementeer je persoonlijke AI programmeerassistent in seconden',
    chooseStackName: 'Kies Je Stack Naam',
    availableAt: 'Je AI-assistent is beschikbaar op',
    stackName: 'Stack Naam',
    placeholder: 'bijv., je-moeder-is-dik-dev',
    inputHint: '3-20 tekens, kleine letters, cijfers en koppeltekens',
    deployBtn: 'Implementeer Mijn AI Stack',
    deploying: 'Stack Wordt Geïmplementeerd',
    stack: 'Stack',
    initializing: 'Implementatie initialiseren...',
    successMessage: 'Je AI programmeerassistent is klaar voor gebruik',
    stackNameLabel: 'Stack Naam:',
    openStack: 'Open Mijn AI Stack',
    deployAnother: 'Implementeer Nog Een Stack',
    tryAgain: 'Probeer Opnieuw',
    poweredBy: 'Mogelijk gemaakt door',
    deploymentComplete: 'Implementatie Voltooid',
    deploymentFailed: 'Implementatie Mislukt',
    nameRequired: 'Naam is verplicht',
    nameLengthError: 'Naam moet tussen 3 en 20 tekens zijn',
    nameCharsError: 'Alleen kleine letters, cijfers en koppeltekens toegestaan',
    nameHyphenError: 'Kan niet beginnen of eindigen met een koppelteken',
    nameReserved: 'Deze naam is gereserveerd',
    checkingAvailability: 'Beschikbaarheid controleren...',
    nameAvailable: '✓ Naam is beschikbaar!',
    nameNotAvailable: 'Naam is niet beschikbaar',
    checkFailed: 'Controle mislukt',
    connectionLost: 'Verbinding verbroken. Ververs de pagina en probeer opnieuw.',
    deployingText: 'Implementeren...',
    yournamePlaceholder: 'jouwnaam'
  },
  ar: {
    title: 'AI Stack Deployer',
    subtitle: 'انشر مساعد البرمجة الذكي الخاص بك في ثوانٍ',
    chooseStackName: 'اختر اسم المشروع',
    availableAt: 'سيكون مساعدك الذكي متاحًا على',
    stackName: 'اسم المشروع',
    placeholder: 'مثال: أحمد-dev',
    inputHint: '3-20 حرف، أحرف صغيرة وأرقام وشرطات فقط',
    deployBtn: 'انشر مشروعي',
    deploying: 'جاري النشر',
    stack: 'المشروع',
    initializing: 'جاري التهيئة...',
    successMessage: 'مساعد البرمجة الذكي جاهز للاستخدام',
    stackNameLabel: 'اسم المشروع:',
    openStack: 'افتح مشروعي',
    deployAnother: 'انشر مشروع آخر',
    tryAgain: 'حاول مرة أخرى',
    poweredBy: 'مدعوم من',
    deploymentComplete: 'تم النشر بنجاح',
    deploymentFailed: 'فشل النشر',
    nameRequired: 'الاسم مطلوب',
    nameLengthError: 'يجب أن يكون الاسم بين 3 و 20 حرفًا',
    nameCharsError: 'يُسمح فقط بالأحرف الصغيرة والأرقام والشرطات',
    nameHyphenError: 'لا يمكن أن يبدأ أو ينتهي بشرطة',
    nameReserved: 'هذا الاسم محجوز',
    checkingAvailability: 'جاري التحقق...',
    nameAvailable: '✓ الاسم متاح!',
    nameNotAvailable: 'الاسم غير متاح',
    checkFailed: 'فشل التحقق',
    connectionLost: 'انقطع الاتصال. يرجى تحديث الصفحة والمحاولة مرة أخرى.',
    deployingText: 'جاري النشر...',
    yournamePlaceholder: 'اسمك'
  }
};

let currentLang = 'en';

function detectLanguage() {
  const browserLang = navigator.language || navigator.userLanguage;
  const lang = browserLang.split('-')[0].toLowerCase();

  if (translations[lang]) {
    return lang;
  }
  return 'en';
}

function t(key) {
  return translations[currentLang][key] || translations['en'][key] || key;
}

function setLanguage(lang) {
  if (!translations[lang]) return;

  currentLang = lang;
  localStorage.setItem('preferredLanguage', lang);

  document.documentElement.lang = lang;
  document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';

  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    el.textContent = t(key);
  });

  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
    const key = el.getAttribute('data-i18n-placeholder');
    el.placeholder = t(key);
  });

  document.querySelectorAll('.lang-btn').forEach(btn => {
    btn.classList.remove('active');
    if (btn.getAttribute('data-lang') === lang) {
      btn.classList.add('active');
    }
  });

  const previewNameEl = document.getElementById('preview-name');
  if (previewNameEl && !stackNameInput?.value) {
    previewNameEl.textContent = t('yournamePlaceholder');
  }

  const typewriterTarget = document.getElementById('typewriter-target');
  if (typewriterTarget && currentState === STATE.FORM) {
    typewriter(typewriterTarget, t('chooseStackName'));
  }
}

function initLanguage() {
  const saved = localStorage.getItem('preferredLanguage');
  const lang = saved || detectLanguage();
  setLanguage(lang);

  document.querySelectorAll('.lang-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      setLanguage(btn.getAttribute('data-lang'));
    });
  });
}

// Track active typewriter instances to prevent race conditions
let activeTypewriters = new Map();

function typewriter(element, text, speed = 50) {
  // Cancel any existing typewriter on this element
  const elementId = element.id || 'default';
  if (activeTypewriters.has(elementId)) {
    clearTimeout(activeTypewriters.get(elementId));
    activeTypewriters.delete(elementId);
  }

  let i = 0;
  element.innerHTML = '';

  const cursor = document.createElement('span');
  cursor.className = 'typing-cursor';

  const existingCursor = element.parentNode.querySelector('.typing-cursor');
  if (existingCursor) {
    existingCursor.remove();
  }

  element.parentNode.insertBefore(cursor, element.nextSibling);

  function type() {
    if (i < text.length) {
      element.textContent += text.charAt(i);
      i++;
      const timeoutId = setTimeout(type, speed);
      activeTypewriters.set(elementId, timeoutId);
    } else {
      activeTypewriters.delete(elementId);
    }
  }
  type();
}

// State Machine for Deployment
const STATE = {
  FORM: 'form',
  PROGRESS: 'progress',
  SUCCESS: 'success',
  ERROR: 'error'
};

let currentState = STATE.FORM;
let deploymentId = null;
let deploymentUrl = null;
let eventSource = null;

// DOM Elements
const formState = document.getElementById('form-state');
const progressState = document.getElementById('progress-state');
const successState = document.getElementById('success-state');
const errorState = document.getElementById('error-state');

const deployForm = document.getElementById('deploy-form');
const stackNameInput = document.getElementById('stack-name');
const deployBtn = document.getElementById('deploy-btn');
const validationMessage = document.getElementById('validation-message');
const previewName = document.getElementById('preview-name');

const progressBar = document.getElementById('progress-fill');
const progressPercent = document.getElementById('progress-percent');
const deployingName = document.getElementById('deploying-name');
const deployingUrl = document.getElementById('deploying-url');
const progressLog = document.getElementById('progress-log');

const successName = document.getElementById('success-name');
const successUrl = document.getElementById('success-url');
const openStackBtn = document.getElementById('open-stack-btn');
const deployAnotherBtn = document.getElementById('deploy-another-btn');

const errorMessage = document.getElementById('error-message');
const tryAgainBtn = document.getElementById('try-again-btn');

// State Management
function setState(newState) {
  currentState = newState;

  const states = [formState, progressState, successState, errorState];

  states.forEach(state => {
    state.style.display = 'none';
    state.classList.remove('fade-in');
  });

  let activeState;
  switch (newState) {
    case STATE.FORM:
      activeState = formState;
      break;
    case STATE.PROGRESS:
      activeState = progressState;
      break;
    case STATE.SUCCESS:
      activeState = successState;
      break;
    case STATE.ERROR:
      activeState = errorState;
      break;
  }

  if (activeState) {
    activeState.style.display = 'block';
    // Add a slight delay to ensure the display property has taken effect before adding the class
    setTimeout(() => {
      activeState.classList.add('fade-in');
    }, 10);
  }
}

function validateName(name) {
  if (!name) {
    return { valid: false, error: t('nameRequired') };
  }

  const trimmedName = name.trim().toLowerCase();

  if (trimmedName.length < 3 || trimmedName.length > 20) {
    return { valid: false, error: t('nameLengthError') };
  }

  if (!/^[a-z0-9-]+$/.test(trimmedName)) {
    return { valid: false, error: t('nameCharsError') };
  }

  if (trimmedName.startsWith('-') || trimmedName.endsWith('-')) {
    return { valid: false, error: t('nameHyphenError') };
  }

  const reservedNames = ['admin', 'api', 'www', 'root', 'system', 'test', 'demo', 'portal'];
  if (reservedNames.includes(trimmedName)) {
    return { valid: false, error: t('nameReserved') };
  }

  return { valid: true, name: trimmedName };
}

// Real-time Name Validation
let checkTimeout;
stackNameInput.addEventListener('input', (e) => {
  const value = e.target.value.toLowerCase();
  e.target.value = value;

  previewName.textContent = value || t('yournamePlaceholder');

  // Clear previous timeout
  clearTimeout(checkTimeout);

  // Validate format first
  const validation = validateName(value);

  if (!validation.valid) {
    stackNameInput.classList.remove('success');
    stackNameInput.classList.add('error');
    validationMessage.textContent = validation.error;
    validationMessage.className = 'validation-message error';
    deployBtn.disabled = true;
    return;
  }

  stackNameInput.classList.remove('error', 'success');
  validationMessage.textContent = t('checkingAvailability');
  validationMessage.className = 'validation-message';

  checkTimeout = setTimeout(async () => {
    try {
      const response = await fetch(`/api/check/${validation.name}`);
      const data = await response.json();

      if (data.available && data.valid) {
        stackNameInput.classList.add('success');
        validationMessage.textContent = t('nameAvailable');
        validationMessage.className = 'validation-message success';
        deployBtn.disabled = false;
      } else {
        stackNameInput.classList.add('error');
        validationMessage.textContent = data.error || t('nameNotAvailable');
        validationMessage.className = 'validation-message error';
        deployBtn.disabled = true;
      }
    } catch (error) {
      console.error('Failed to check name availability:', error);
      validationMessage.textContent = t('checkFailed');
      validationMessage.className = 'validation-message error';
      deployBtn.disabled = true;
    }
  }, 500);
});

// Form Submission
deployForm.addEventListener('submit', async (e) => {
  e.preventDefault();

  const validation = validateName(stackNameInput.value);
  if (!validation.valid) {
    return;
  }

  deployBtn.disabled = true;
  deployBtn.innerHTML = `<span class="btn-text">${t('deployingText')}</span>`;

  try {
    const response = await fetch('/api/deploy', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: validation.name
      })
    });

    const data = await response.json();

    if (!response.ok || !data.success) {
      throw new Error(data.error || 'Deployment failed');
    }

    deploymentId = data.deploymentId;
    deploymentUrl = data.url;

    // Update progress UI
    deployingName.textContent = validation.name;
    deployingUrl.textContent = deploymentUrl;

    // Switch to progress state
    setState(STATE.PROGRESS);

    // Start SSE connection
    startProgressStream(deploymentId);

  } catch (error) {
    console.error('Deployment error:', error);
    showError(error.message);
    deployBtn.disabled = false;
    deployBtn.innerHTML = `
            <span class="btn-text" data-i18n="deployBtn">${t('deployBtn')}</span>
            <svg class="btn-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M10 4V16M4 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
        `;
  }
});

// SSE Progress Streaming
function startProgressStream(deploymentId) {
  eventSource = new EventSource(`/api/status/${deploymentId}`);

  eventSource.addEventListener('progress', (event) => {
    const data = JSON.parse(event.data);
    updateProgress(data);
  });

  eventSource.addEventListener('complete', (event) => {
    const data = JSON.parse(event.data);
    eventSource.close();
    showSuccess(data);
  });

  eventSource.addEventListener('error', (event) => {
    const data = event.data ? JSON.parse(event.data) : { message: 'Unknown error' };
    eventSource.close();
    showError(data.message);
  });

  eventSource.onerror = () => {
    eventSource.close();
    showError(t('connectionLost'));
  };
}

// Update Progress UI
function updateProgress(data) {
  // Update progress bar
  progressBar.style.width = `${data.progress}%`;
  progressPercent.textContent = `${data.progress}%`;

  // Update current step
  const stepContainer = document.querySelector('.progress-steps');
  stepContainer.innerHTML = `
        <div class="step active">
            <div class="step-icon">⚙️</div>
            <div class="step-text">${data.currentStep}</div>
        </div>
    `;

  // Add to log
  const logEntry = document.createElement('div');
  logEntry.className = 'log-entry';
  logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${data.currentStep}`;
  progressLog.appendChild(logEntry);
  progressLog.scrollTop = progressLog.scrollHeight;
}

function showSuccess(data) {
  successName.textContent = deployingName.textContent;
  successUrl.textContent = deploymentUrl;
  successUrl.href = deploymentUrl;
  openStackBtn.href = deploymentUrl;

  setState(STATE.SUCCESS);
  const targetSpan = document.getElementById('success-title');
  if (targetSpan) {
    typewriter(targetSpan, t('deploymentComplete'));
  }
}

function showError(message) {
  errorMessage.textContent = message;
  setState(STATE.ERROR);
  const targetSpan = document.getElementById('error-title');
  if (targetSpan) {
    typewriter(targetSpan, t('deploymentFailed'), 30);
  }
}

function resetToForm() {
  deploymentId = null;
  deploymentUrl = null;
  stackNameInput.value = '';
  previewName.textContent = t('yournamePlaceholder');
  validationMessage.textContent = '';
  validationMessage.className = 'validation-message';
  stackNameInput.classList.remove('error', 'success');
  progressLog.innerHTML = '';
  progressBar.style.width = '0%';
  progressPercent.textContent = '0%';

  deployBtn.disabled = false;
  deployBtn.innerHTML = `
        <span class="btn-text" data-i18n="deployBtn">${t('deployBtn')}</span>
        <svg class="btn-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 4V16M4 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
    `;

  setState(STATE.FORM);
  const targetSpan = document.getElementById('typewriter-target');
  if (targetSpan) {
    typewriter(targetSpan, t('chooseStackName'));
  }
}

// Event Listeners
deployAnotherBtn.addEventListener('click', resetToForm);
tryAgainBtn.addEventListener('click', resetToForm);

document.addEventListener('DOMContentLoaded', () => {
  initLanguage();
  setState(STATE.FORM);
  const targetSpan = document.getElementById('typewriter-target');
  if (targetSpan) {
    typewriter(targetSpan, t('chooseStackName'));
  }
  console.log('AI Stack Deployer initialized');
});
