import type { InstalledTheme, ThemeManifest, ThemePackageInspection } from '@/contracts'

const STORAGE_KEY = 'installed-themes'
const ACTIVE_CUSTOM_KEY = 'active-custom-theme'

function loadStoredThemes(): InstalledTheme[] {
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    return raw ? (JSON.parse(raw) as InstalledTheme[]) : []
  } catch {
    return []
  }
}

function saveThemes(themes: InstalledTheme[]) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(themes))
}

function validateManifest(raw: Record<string, unknown>): { manifest: ThemeManifest; warnings: string[] } {
  const warnings: string[] = []
  const required = ['theme_id', 'name', 'version', 'author', 'min_app_version', 'css_entry']
  for (const field of required) {
    if (!raw[field]) {
      throw new Error(`THEME_MANIFEST_INVALID: missing required field '${field}'`)
    }
  }
  if (!/^[a-z0-9_-]+$/.test(String(raw.theme_id))) {
    throw new Error('THEME_MANIFEST_INVALID: theme_id must match [a-z0-9_-]+')
  }
  if (!/^\d+\.\d+\.\d+/.test(String(raw.version))) {
    warnings.push('版本号格式建议使用 semver（如 1.0.0）')
  }
  const cssEntry = String(raw.css_entry)
  if (cssEntry.includes('://') || cssEntry.startsWith('data:')) {
    throw new Error('THEME_SECURITY_VIOLATION: css_entry must be a relative path within the package')
  }
  const manifest: ThemeManifest = {
    theme_id: String(raw.theme_id),
    name: String(raw.name),
    version: String(raw.version),
    author: String(raw.author),
    description: raw.description ? String(raw.description) : undefined,
    min_app_version: String(raw.min_app_version),
    is_dark: Boolean(raw.is_dark ?? false),
    css_entry: cssEntry,
    preview: raw.preview ? String(raw.preview) : undefined,
    tags: Array.isArray(raw.tags) ? raw.tags.map(String) : undefined,
    homepage: raw.homepage ? String(raw.homepage) : undefined,
    license: raw.license ? String(raw.license) : undefined,
  }
  return { manifest, warnings }
}

function validateCssSafety(css: string): string[] {
  const warnings: string[] = []
  const lower = css.toLowerCase()
  if (lower.includes('@import')) {
    throw new Error('THEME_SECURITY_VIOLATION: @import is not allowed in theme CSS')
  }
  if (lower.includes('url(') && !lower.includes('url(data:')) {
    warnings.push('CSS 包含远程资源引用，预览时可能无法加载')
  }
  if (lower.includes('expression(') || lower.includes('javascript:')) {
    throw new Error('THEME_SECURITY_VIOLATION: CSS expressions are not allowed')
  }
  return warnings
}

function applyThemeCss(themeId: string, css: string) {
  let styleEl = document.getElementById(`theme-style-${themeId}`) as HTMLStyleElement | null
  if (!styleEl) {
    styleEl = document.createElement('style')
    styleEl.id = `theme-style-${themeId}`
    document.head.appendChild(styleEl)
  }
  styleEl.textContent = css
}

function removeThemeCss(themeId: string) {
  const styleEl = document.getElementById(`theme-style-${themeId}`)
  if (styleEl) styleEl.remove()
}

function inspectYamlContent(yamlText: string): ThemeManifest {
  const lines = yamlText.split('\n')
  const result: Record<string, unknown> = {}
  let currentKey: string | null = null
  for (const line of lines) {
    const trimmed = line.trim()
    if (!trimmed || trimmed.startsWith('#')) continue
    const match = trimmed.match(/^([a-z_]+):\s*(.*)$/i)
    if (match) {
      currentKey = match[1]
      let value = match[2].trim()
      if (value.startsWith('"') && value.endsWith('"')) value = value.slice(1, -1)
      else if (value.startsWith("'") && value.endsWith("'")) value = value.slice(1, -1)
      else if (value === 'true') result[currentKey] = true
      else if (value === 'false') result[currentKey] = false
      else if (/^\d+$/.test(value)) result[currentKey] = Number(value)
      if (currentKey && !(currentKey in result)) result[currentKey] = value
    }
  }
  const { manifest } = validateManifest(result)
  return manifest
}

/**
 * 主题包是单文件文本格式：YAML 清单 + 一行 `---` + 主题 CSS。
 *
 *   theme_id: my-theme
 *   name: My Theme
 *   ...
 *   ---
 *   [data-theme="my-theme"] { --color-... }
 *
 * 浏览器端没有解压能力，所以不支持 ZIP —— 与其把二进制当文本解析出
 * 一堆乱码再报「清单无效」，不如直接告诉用户格式不支持。
 */
export function parseThemePackage(packageData: string): { manifestText: string; css: string } {
  if (looksLikeZip(packageData)) {
    throw new Error(
      'THEME_PACKAGE_UNSUPPORTED_FORMAT: 暂不支持 ZIP 主题包，请提供「YAML 清单 + --- + CSS」的单文件主题。',
    )
  }

  const lines = packageData.split(/\r?\n/)
  const separatorIndex = lines.findIndex((line) => line.trim() === '---')
  if (separatorIndex < 0) {
    throw new Error(
      'THEME_PACKAGE_INVALID: 主题包缺少 `---` 分隔行，无法区分清单与 CSS。',
    )
  }

  const manifestText = lines.slice(0, separatorIndex).join('\n')
  const css = lines.slice(separatorIndex + 1).join('\n').trim()
  if (!css) {
    throw new Error('THEME_CSS_INVALID: 主题包内没有 CSS 内容。')
  }
  return { manifestText, css }
}

/** ZIP 的魔数是 PK\x03\x04；base64 形式（readAsDataURL）开头是 UEsDB。 */
function looksLikeZip(data: string): boolean {
  if (data.startsWith('PK')) return true
  return /^data:.*;base64,UEsDB/.test(data) || data.startsWith('UEsDB')
}

export async function selectThemePackage(): Promise<string | null> {
  return new Promise((resolve) => {
    const input = document.createElement('input')
    input.type = 'file'
    // 只接受能在浏览器里解析的单文件主题；ZIP 需要 Host 端解压，暂不支持。
    input.accept = '.yaml,.yml,.theme'
    input.multiple = false
    input.onchange = () => {
      const file = input.files?.[0]
      if (!file) { resolve(null); return }
      const reader = new FileReader()
      reader.onload = () => resolve(reader.result as string)
      reader.onerror = () => resolve(null)
      reader.readAsText(file)
    }
    input.oncancel = () => resolve(null)
    input.click()
  })
}

export async function inspectThemePackage(packageData: string): Promise<ThemePackageInspection> {
  const package_id = `theme_pkg_${Date.now()}`
  try {
    const { manifestText, css } = parseThemePackage(packageData)
    const manifest = inspectYamlContent(manifestText)
    // CSS 的安全校验放在这里，不合规的包在「预览」阶段就该被拒，
    // 而不是等到用户点安装。
    const warnings = validateCssSafety(css)
    if (!css.includes(`[data-theme="${manifest.theme_id}"]`)) {
      warnings.push(`CSS 未包含 [data-theme="${manifest.theme_id}"] 选择器，主题可能不会生效。`)
    }
    return {
      package_id,
      manifest,
      preview_url: '',
      warnings,
      compatible: true,
      css,
    }
  } catch (error) {
    const message = error instanceof Error ? error.message : '未知错误'
    const error_code = message.startsWith('THEME_') ? message.split(':')[0] : 'THEME_MANIFEST_INVALID'
    return {
      package_id,
      manifest: {} as ThemeManifest,
      preview_url: '',
      warnings: [message],
      compatible: false,
      error_code,
      css: '',
    }
  }
}

export async function installTheme(
  manifest: ThemeManifest,
  cssContent: string,
): Promise<InstalledTheme> {
  // validateCssSafety 会对 @import / expression() / javascript: 抛错，
  // 必须在 applyThemeCss 之前调用 —— 未校验的 CSS 一律不许进入页面。
  const warnings = validateCssSafety(cssContent)
  if (warnings.length > 0) {
    console.warn('[theme] CSS validation warnings:', warnings)
  }
  const installed: InstalledTheme = {
    theme_id: manifest.theme_id,
    name: manifest.name,
    version: manifest.version,
    author: manifest.author,
    description: manifest.description,
    is_dark: manifest.is_dark,
    builtin: false,
    enabled: false,
    installed_at: new Date().toISOString(),
    manifest,
    code_theme: manifest.is_dark ? 'github-dark' : 'github-light',
  }
  const existing = loadStoredThemes()
  const idx = existing.findIndex((t) => t.theme_id === manifest.theme_id)
  if (idx >= 0) existing[idx] = installed
  else existing.push(installed)
  localStorage.setItem(`${STORAGE_KEY}-css-${manifest.theme_id}`, cssContent)
  saveThemes(existing)
  return installed
}

export async function listInstalledThemes(): Promise<InstalledTheme[]> {
  return loadStoredThemes()
}

export async function enableTheme(themeId: string): Promise<InstalledTheme> {
  const themes = loadStoredThemes()
  const theme = themes.find((t) => t.theme_id === themeId)
  if (!theme) throw new Error('THEME_PACKAGE_NOT_FOUND')
  theme.enabled = true
  saveThemes(themes)
  return theme
}

export async function disableTheme(themeId: string): Promise<void> {
  const themes = loadStoredThemes()
  const theme = themes.find((t) => t.theme_id === themeId)
  if (theme) {
    theme.enabled = false
    saveThemes(themes)
  }
}

export async function uninstallTheme(themeId: string): Promise<void> {
  const themes = loadStoredThemes()
  const idx = themes.findIndex((t) => t.theme_id === themeId)
  if (idx >= 0) {
    themes.splice(idx, 1)
    saveThemes(themes)
  }
  removeThemeCss(themeId)
  localStorage.removeItem(`${STORAGE_KEY}-css-${themeId}`)
  const active = localStorage.getItem(ACTIVE_CUSTOM_KEY)
  if (active === themeId) localStorage.removeItem(ACTIVE_CUSTOM_KEY)
}

export function getActiveCustomTheme(): string | null {
  return localStorage.getItem(ACTIVE_CUSTOM_KEY)
}

export function setActiveCustomTheme(themeId: string | null) {
  const css = themeId ? localStorage.getItem(`${STORAGE_KEY}-css-${themeId}`) : null
  // Validate before changing the current page. Only the selected theme owns a style node.
  if (css) validateCssSafety(css)
  document.head.querySelectorAll('style[id^="theme-style-"]').forEach(style => style.remove())
  if (themeId && css) applyThemeCss(themeId, css)
  if (themeId) localStorage.setItem(ACTIVE_CUSTOM_KEY, themeId)
  else localStorage.removeItem(ACTIVE_CUSTOM_KEY)
}

export const mockCommunityThemes: ThemeManifest[] = [
  {
    theme_id: 'ocean-blue',
    name: 'Ocean Blue',
    version: '1.2.0',
    author: 'community',
    description: '宁静的海洋蓝色主题，适合长时间阅读',
    min_app_version: '0.2.0',
    is_dark: false,
    css_entry: 'theme.css',
    tags: ['浅色', '蓝色', '阅读'],
    license: 'MIT',
  },
  {
    theme_id: 'forest-green',
    name: 'Forest Green',
    version: '1.0.1',
    author: 'nature-collection',
    description: '森林绿色护眼主题',
    min_app_version: '0.2.0',
    is_dark: false,
    css_entry: 'theme.css',
    tags: ['浅色', '绿色', '护眼'],
    license: 'MIT',
  },
  {
    theme_id: 'midnight-purple',
    name: 'Midnight Purple',
    version: '2.0.0',
    author: 'night-owl',
    description: '深紫色暗夜主题，适合编码',
    min_app_version: '0.2.0',
    is_dark: true,
    css_entry: 'theme.css',
    tags: ['深色', '紫色', '极客'],
    license: 'Apache-2.0',
  },
  {
    theme_id: 'solarized-light',
    name: 'Solarized Light',
    version: '1.1.0',
    author: 'solarized',
    description: '经典 Solarized 浅色主题',
    min_app_version: '0.1.0',
    is_dark: false,
    css_entry: 'theme.css',
    tags: ['浅色', '经典', '阅读'],
    license: 'MIT',
  },
  {
    theme_id: 'dracula',
    name: 'Dracula',
    version: '3.0.0',
    author: 'dracula-theme',
    description: '流行的 Dracula 暗色主题',
    min_app_version: '0.2.0',
    is_dark: true,
    css_entry: 'theme.css',
    tags: ['深色', '紫色', '高对比'],
    license: 'MIT',
  },
]

function buildCommunityThemeCss(themeId: string, isDark: boolean, accent: string): string {
  const palettes: Record<string, { primary: string; soft: string; hover: string }> = {
    'ocean-blue': { primary: '#0077b6', soft: '#e0f0fa', hover: '#005f92' },
    'forest-green': { primary: '#2d6a4f', soft: '#e8f5ec', hover: '#1b4332' },
    'midnight-purple': { primary: '#9d4edd', soft: '#2b1a3e', hover: '#7b2cbf' },
    'solarized-light': { primary: '#b58900', soft: '#fdf6e3', hover: '#8a6d0b' },
    'dracula': { primary: '#bd93f9', soft: '#2d2a3e', hover: '#a77bf5' },
  }
  const p = palettes[themeId] ?? palettes['ocean-blue']
  if (isDark) {
    return `[data-theme="${themeId}"] {
  --color-background-primary: #1a1b26;
  --color-background-secondary: #24283b;
  --color-background-tertiary: #2f334d;
  --color-background-hover: #2d2f45;
  --color-background-active: #3d4261;
  --color-surface-primary: #24283b;
  --color-surface-secondary: #1a1b26;
  --color-surface-elevated: #2f334d;
  --color-text-primary: #c0caf5;
  --color-text-secondary: #9aa5ce;
  --color-text-tertiary: #565f89;
  --color-text-link: ${p.primary};
  --color-accent-primary: ${p.primary};
  --color-accent-primary-hover: ${p.hover};
  --color-accent-soft: ${p.soft};
  --color-border-default: #3b3f5c;
  --color-border-subtle: #2f334d;
  --color-border-focus: ${p.primary};
  --color-success: #9ece6a;
  --color-success-soft: #1f2a1a;
  --color-warning: #e0af68;
  --color-warning-soft: #2d2418;
  --color-error: #f7768e;
  --color-error-soft: #2d1a1f;
  --color-info: #7aa2f7;
  --color-info-soft: #1a2030;
}`
  }
  return `[data-theme="${themeId}"] {
  --color-background-primary: #ffffff;
  --color-background-secondary: #f8fafc;
  --color-background-tertiary: #eef2f7;
  --color-background-hover: #f1f5f9;
  --color-background-active: #e2e8f0;
  --color-surface-primary: #ffffff;
  --color-surface-secondary: #fafbfc;
  --color-surface-elevated: #ffffff;
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-tertiary: #94a3b8;
  --color-text-link: ${p.primary};
  --color-accent-primary: ${p.primary};
  --color-accent-primary-hover: ${p.hover};
  --color-accent-soft: ${p.soft};
  --color-border-default: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-border-focus: ${p.primary};
  --color-success: #10b981;
  --color-success-soft: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-soft: #fef3c7;
  --color-error: #ef4444;
  --color-error-soft: #fee2e2;
  --color-info: #3b82f6;
  --color-info-soft: #dbeafe;
}`
}

export async function installCommunityTheme(themeId: string): Promise<InstalledTheme> {
  const themeManifest = mockCommunityThemes.find((t) => t.theme_id === themeId)
  if (!themeManifest) throw new Error('THEME_PACKAGE_NOT_FOUND')
  const css = buildCommunityThemeCss(themeId, themeManifest.is_dark, themeManifest.theme_id)
  return installTheme(themeManifest, css)
}

export function getCommunityThemePreviewCss(themeId: string): string {
  const t = mockCommunityThemes.find((m) => m.theme_id === themeId)
  if (!t) return ''
  return buildCommunityThemeCss(themeId, t.is_dark, themeId)
}