/**
 * TradeMate Popup - Main UI Logic
 */
import {
  login,
  translate,
  generateReply,
  searchLeads,
  generateMarketing,
  getBalance,
  getSubscriptionPlans,
  getCreditPackages,
  ApiError,
} from '../api/client.js';

// ─── State ───────────────────────────────────────────
let creditsState = {
  balance: 0,
  dailyFreeCharsLeft: 0,
  planName: 'Free',
};

// ─── DOM refs ────────────────────────────────────────
const $ = (id) => document.getElementById(id);

const screenSettings = $('screen-settings');
const screenMain = $('screen-main');

const settingsUrl = $('settings-url');
const settingsUser = $('settings-username');
const settingsPass = $('settings-password');
const settingsLogin = $('settings-login');
const settingsStatus = $('settings-status');

const translateInput = $('translate-input');
const translateTarget = $('translate-target');
const translateBtn = $('translate-btn');
const translateResult = $('translate-result');

const replyInput = $('reply-input');
const replyTone = $('reply-tone');
const replyBtn = $('reply-btn');
const replyResult = $('reply-result');

const discoveryProduct = $('discovery-product');
const discoveryMarket = $('discovery-market');
const discoveryBtn = $('discovery-btn');
const discoveryResult = $('discovery-result');

const marketingName = $('marketing-name');
const marketingDesc = $('marketing-desc');
const marketingStyle = $('marketing-style');
const marketingBtn = $('marketing-btn');
const marketingResult = $('marketing-result');

const creditsDisplay = $('credits-display');
const btnSettings = $('btn-settings');
const upgradeBanner = $('upgrade-banner');
const upgradeBannerText = $('upgrade-banner-text');
const upgradeBannerBtn = $('upgrade-banner-btn');
const upgradeBannerClose = $('upgrade-banner-close');
const upgradeModalOverlay = $('upgrade-modal-overlay');
const modalClose = $('modal-close');
const packageModalOverlay = $('package-modal-overlay');
const pkgModalClose = $('pkg-modal-close');

// ─── CONSTANTS ───────────────────────────────────────
const CONSUMPTION_LABELS = {
  lead_search: { name: '客户搜索', cost: 10 },
  marketing_content: { name: '营销生成', cost: 5 },
  reply_suggest: { name: '智能回复', cost: 2 },
  translate_per_1000chars: { name: '翻译', cost: 1 },
  quotation: { name: '报价单', cost: 2 },
  followup_scan: { name: '跟进扫描', cost: 2 },
};

// ─── Init ────────────────────────────────────────────
async function init() {
  const { apiUrl, token } = await chrome.storage.local.get(['trademate_api_url', 'trademate_token']);

  if (apiUrl) settingsUrl.value = apiUrl;

  if (apiUrl && token) {
    showScreen('main');
    await refreshCredits();
  } else {
    showScreen('settings');
  }

  setupTabs();
  setupActions();
  setupUpgradeUI();
}

function showScreen(screen) {
  screenSettings.style.display = screen === 'settings' ? 'block' : 'none';
  screenMain.style.display = screen === 'main' ? 'block' : 'none';
}

document.addEventListener('DOMContentLoaded', init);

// ─── Credits ─────────────────────────────────────────
async function refreshCredits() {
  try {
    const bal = await getBalance();
    creditsState.balance = bal.balance;
    creditsState.dailyFreeCharsLeft = bal.dailyFreeTranslateCharsLeft;

    // Determine plan name from subscription data
    if (bal.subscription?.plan_id) {
      creditsState.planName = 'Starter';
      // Could fetch plan name from subscription-plans endpoint for accuracy
    } else {
      creditsState.planName = 'Free';
    }

    updateCreditsDisplay();
    hideUpgradeBanner(); // clear any stale credit error
    return bal;
  } catch (err) {
    console.warn('Failed to fetch credits:', err.message);
    updateCreditsDisplay(); // show fallback
    return null;
  }
}

function updateCreditsDisplay() {
  const { balance, planName, dailyFreeCharsLeft } = creditsState;

  let parts = [];
  if (planName !== 'Free') {
    parts.push(`⚡ ${planName}`);
  }
  if (balance > 0) {
    parts.push(`${balance} 积分`);
  }
  parts.push(`剩余`);

  creditsDisplay.textContent = parts.join(' · ');

  // Make credits clickable to upgrade
  creditsDisplay.style.cursor = 'pointer';
  creditsDisplay.title = '点击查看套餐';
  creditsDisplay.onclick = () => showUpgradeModal();
}

function showCreditErrorBanner(detail, actionLabel = '升级') {
  upgradeBannerText.textContent = detail || '次数不足';
  upgradeBannerBtn.textContent = actionLabel;
  upgradeBanner.style.display = 'flex';
}

function hideUpgradeBanner() {
  upgradeBanner.style.display = 'none';
}

// ─── Low Credit Warning ──────────────────────────────
function checkLowCredits(consumed) {
  const cost = consumed || 0;
  const remaining = creditsState.balance - cost;
  if (remaining <= 5 && creditsState.planName === 'Free') {
    // Almost out - show subtle hint in footer
    creditsDisplay.textContent = `⚠ 仅剩 ${Math.max(0, remaining)} 积分 · 升级 ↑`;
    creditsDisplay.style.cursor = 'pointer';
    creditsDisplay.onclick = () => showLowCreditsPrompt();
  }
}

function showLowCreditsPrompt() {
  showCreditErrorBanner('体验积分即将用完，升级后继续使用', '查看套餐');
}

// ─── Upgrade Banner ──────────────────────────────────
upgradeBannerBtn.addEventListener('click', () => {
  showUpgradeModal();
});

upgradeBannerClose.addEventListener('click', () => {
  hideUpgradeBanner();
});

// ─── Upgrade Modal ───────────────────────────────────
function showUpgradeModal() {
  upgradeModalOverlay.style.display = 'flex';
}

function hideUpgradeModal() {
  upgradeModalOverlay.style.display = 'none';
}

modalClose.addEventListener('click', hideUpgradeModal);
upgradeModalOverlay.addEventListener('click', (e) => {
  if (e.target === upgradeModalOverlay) hideUpgradeModal();
});

// ─── Package Modal (low-commitment) ──────────────────
function showPackageModal() {
  packageModalOverlay.style.display = 'flex';
}

function hidePackageModal() {
  packageModalOverlay.style.display = 'none';
}

pkgModalClose.addEventListener('click', hidePackageModal);
packageModalOverlay.addEventListener('click', (e) => {
  if (e.target === packageModalOverlay) hidePackageModal();
});

// ─── Plan/Pkg button handlers ────────────────────────
function setupUpgradeUI() {
  document.querySelectorAll('.plan-btn[data-plan]').forEach(btn => {
    btn.addEventListener('click', () => {
      const plan = btn.dataset.plan;
      // Open backend payment page or settings page
      // For now, open the workspace credits page
      chrome.tabs.create({
        url: `${settingsUrl.value?.replace(/\/+$/, '') || 'https://trade.yuzhiran.com'}/workspace/credits`,
      });
      hideUpgradeModal();
    });
  });

  document.querySelectorAll('.plan-btn[data-pkg]').forEach(btn => {
    btn.addEventListener('click', () => {
      const pkg = btn.dataset.pkg;
      chrome.tabs.create({
        url: `${settingsUrl.value?.replace(/\/+$/, '') || 'https://trade.yuzhiran.com'}/workspace/credits`,
      });
      hidePackageModal();
    });
  });

  // Package link in upgrade modal footer
  const pkgLink = document.createElement('a');
  pkgLink.href = '#';
  pkgLink.textContent = '购买积分包（低至 ¥2.9）';
  pkgLink.style.cssText = 'font-size:12px;color:#2563eb;cursor:pointer;';
  pkgLink.onclick = (e) => {
    e.preventDefault();
    hideUpgradeModal();
    showPackageModal();
  };
  document.querySelector('.modal-footer .hint')?.after(pkgLink);
}

// ─── Loading / Result helpers ────────────────────────
function setLoading(btn, loading) {
  btn.disabled = loading;
  btn.textContent = loading ? '处理中...' : btn.dataset.originalText || btn.textContent;
  if (!btn.dataset.originalText) btn.dataset.originalText = btn.textContent;
}

function showResult(el, html) {
  el.innerHTML = html;
}

function showError(el, msg) {
  el.innerHTML = `<div class="error">${escapeHtml(msg)}</div>`;
}

function handleApiError(el, err) {
  if (err instanceof ApiError && err.isCreditError) {
    // 402 - out of credits: show result + upgrade banner
    showResult(el, `<div class="error credit-error">
      ⚡ 积分不足<br>
      <span class="credit-error-hint">${escapeHtml(err.message)}</span>
    </div>`);
    showCreditErrorBanner('积分不足，升级后继续使用');
  } else {
    showError(el, err.message);
  }
}

function escapeHtml(str) {
  const d = document.createElement('div');
  d.textContent = str;
  return d.innerHTML;
}

// ─── Tabs ────────────────────────────────────────────
function setupTabs() {
  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
      tab.classList.add('active');
      const target = document.getElementById(`tab-${tab.dataset.tab}`);
      if (target) target.classList.add('active');
    });
  });
}

// ─── Settings ────────────────────────────────────────
settingsLogin.addEventListener('click', async () => {
  const url = settingsUrl.value.trim();
  const username = settingsUser.value.trim();
  const password = settingsPass.value.trim();

  if (!url) { settingsStatus.textContent = '请输入 API 地址'; settingsStatus.className = 'status error'; return; }
  if (!username || !password) { settingsStatus.textContent = '请输入用户名和密码'; settingsStatus.className = 'status error'; return; }

  setLoading(settingsLogin, true);
  settingsStatus.textContent = '';

  try {
    const token = await login(username, password, url);
    await chrome.storage.local.set({
      trademate_api_url: url,
      trademate_token: token,
    });

    settingsStatus.textContent = '登录成功！';
    settingsStatus.className = 'status success';

    setTimeout(() => {
      showScreen('main');
      refreshCredits();
    }, 800);
  } catch (err) {
    settingsStatus.textContent = err.message;
    settingsStatus.className = 'status error';
  } finally {
    setLoading(settingsLogin, false);
  }
});

btnSettings.addEventListener('click', () => {
  settingsPass.value = '';
  showScreen('settings');
});

// ─── Action Handlers ─────────────────────────────────
function setupActions() {
  // Translate
  translateBtn.addEventListener('click', async () => {
    const text = translateInput.value.trim();
    if (!text) return;
    setLoading(translateBtn, true);
    showResult(translateResult, '<div class="loading"><span class="spinner"></span>翻译中...</div>');
    try {
      const result = await translate(text, translateTarget.value);
      const translated = result.translated_text || '(无结果)';
      showResult(translateResult, `
        <button class="copy-btn" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('.t-text').textContent)">复制</button>
        <div class="t-text">${escapeHtml(translated)}</div>
        ${result.provider_used ? `<div style="color:#94a3b8;font-size:11px;margin-top:4px;">provider: ${result.provider_used}</div>` : ''}
      `);
      // Refresh credits (translation may consume daily free or credits)
      refreshCredits();
    } catch (err) {
      handleApiError(translateResult, err);
    } finally {
      setLoading(translateBtn, false);
    }
  });

  // Reply
  replyBtn.addEventListener('click', async () => {
    const inquiry = replyInput.value.trim();
    if (!inquiry) return;
    setLoading(replyBtn, true);
    showResult(replyResult, '<div class="loading"><span class="spinner"></span>生成中...</div>');
    try {
      const result = await generateReply(inquiry, replyTone.value);
      const suggestions = result.suggestions || result.results || [];
      let html = suggestions.map((s, i) => `
        <div class="item">
          <div class="item-label">回复 ${i + 1}${s.tone ? ` (${s.tone})` : ''}</div>
          <button class="copy-btn" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('.r-text').textContent)">复制</button>
          <div class="r-text">${escapeHtml(s.reply || s.content || s)}</div>
        </div>
      `).join('');
      if (!html) html = '(无回复建议)';
      showResult(replyResult, html);
      refreshCredits();
    } catch (err) {
      handleApiError(replyResult, err);
    } finally {
      setLoading(replyBtn, false);
    }
  });

  // Discovery
  discoveryBtn.addEventListener('click', async () => {
    const product = discoveryProduct.value.trim();
    if (!product) return;
    setLoading(discoveryBtn, true);
    showResult(discoveryResult, '<div class="loading"><span class="spinner"></span>搜索中...</div>');
    try {
      const result = await searchLeads(product, discoveryMarket.value.trim() || 'US');
      const leads = result.data || result.results || [];

      // Response may include credits_remaining
      if (result.credits_remaining !== undefined) {
        creditsState.balance = result.credits_remaining;
        updateCreditsDisplay();
        checkLowCredits(0);
      }

      if (!Array.isArray(leads)) {
        showResult(discoveryResult, escapeHtml(JSON.stringify(leads, null, 2)));
        return;
      }
      let html = leads.map((l, i) => `
        <div class="item">
          <div class="item-label">${escapeHtml(l.title || l.company_name || `结果 ${i+1}`)}</div>
          <div>${escapeHtml(l.description || l.snippet || '')}</div>
          ${l.url ? `<div><a href="${escapeHtml(l.url)}" target="_blank" style="color:#2563eb;font-size:12px;">${escapeHtml(l.url)}</a></div>` : ''}
          ${l.emails?.length ? `<div style="font-size:12px;color:#64748b;">📧 ${l.emails.join(', ')}</div>` : ''}
          ${l.relevance_score ? `<div style="font-size:11px;color:#94a3b8;">评分: ${l.relevance_score}</div>` : ''}
        </div>
      `).join('');
      if (!html) html = '未找到匹配客户';
      showResult(discoveryResult, html);
      refreshCredits();
    } catch (err) {
      handleApiError(discoveryResult, err);
    } finally {
      setLoading(discoveryBtn, false);
    }
  });

  // Marketing
  marketingBtn.addEventListener('click', async () => {
    const name = marketingName.value.trim();
    const desc = marketingDesc.value.trim();
    if (!name || !desc) return;
    setLoading(marketingBtn, true);
    showResult(marketingResult, '<div class="loading"><span class="spinner"></span>生成中...</div>');
    try {
      const result = await generateMarketing(name, desc, marketingStyle.value);
      const contents = result.results || [];

      if (result.credits_remaining !== undefined) {
        creditsState.balance = result.credits_remaining;
        updateCreditsDisplay();
        checkLowCredits(5);
      }

      let html = contents.map((c, i) => `
        <div class="item">
          <div class="item-label">文案 ${i + 1}</div>
          <button class="copy-btn" onclick="navigator.clipboard.writeText(this.parentElement.querySelector('.m-text').textContent)">复制</button>
          <div class="m-text">${escapeHtml(c.content || c)}</div>
        </div>
      `).join('');
      if (!html) html = '(无结果)';
      showResult(marketingResult, html);
      refreshCredits();
    } catch (err) {
      handleApiError(marketingResult, err);
    } finally {
      setLoading(marketingBtn, false);
    }
  });

  // Enter key support
  [translateInput, replyInput, discoveryProduct, marketingName].forEach(el => {
    el.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        const btn = el.closest('.tab-content')?.querySelector('.btn-primary');
        if (btn) btn.click();
      }
    });
  });
}

// Auto-init on load
init();