import { getSettings, saveSettings, getEntries, generateId } from '../storage.js'
import type { Settings } from '../types.js'

const form = document.getElementById('settings-form') as HTMLFormElement
const savedMsg = document.getElementById('saved-msg') as HTMLSpanElement
const logoPreview = document.getElementById('logo-preview') as HTMLDivElement
const logoFile = document.getElementById('logo-file') as HTMLInputElement

const fields: Record<keyof Settings, HTMLInputElement> = {
  userName: document.getElementById('user-name') as HTMLInputElement,
  userEmail: document.getElementById('user-email') as HTMLInputElement,
  hourlyRate: document.getElementById('hourly-rate') as HTMLInputElement,
  currency: document.getElementById('currency') as HTMLInputElement,
  defaultClient: document.getElementById('default-client') as HTMLInputElement,
  defaultProject: document.getElementById('default-project') as HTMLInputElement,
  logoDataUrl: document.createElement('input'), // hidden, managed separately
}

let currentLogo = ''

async function init(): Promise<void> {
  const settings = await getSettings()
  fields.userName.value = settings.userName
  fields.userEmail.value = settings.userEmail
  fields.hourlyRate.value = String(settings.hourlyRate)
  fields.currency.value = settings.currency
  fields.defaultClient.value = settings.defaultClient
  fields.defaultProject.value = settings.defaultProject
  currentLogo = settings.logoDataUrl

  if (currentLogo) {
    logoPreview.innerHTML = `<img src="${currentLogo}" alt="Logo">`
  }
}

logoFile.addEventListener('change', async () => {
  const file = logoFile.files?.[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = (e) => {
    currentLogo = e.target?.result as string
    logoPreview.innerHTML = `<img src="${currentLogo}" alt="Logo">`
  }
  reader.readAsDataURL(file)
})

form.addEventListener('submit', async (e) => {
  e.preventDefault()

  const settings: Settings = {
    userName: fields.userName.value.trim() || 'Your Name',
    userEmail: fields.userEmail.value.trim() || 'you@example.com',
    hourlyRate: parseFloat(fields.hourlyRate.value) || 0,
    currency: fields.currency.value.trim() || '$',
    defaultClient: fields.defaultClient.value.trim() || 'Client',
    defaultProject: fields.defaultProject.value.trim() || 'Project',
    logoDataUrl: currentLogo,
  }

  await saveSettings(settings)
  savedMsg.classList.add('show')
  setTimeout(() => savedMsg.classList.remove('show'), 2000)
})

document.getElementById('export-btn')?.addEventListener('click', async () => {
  const entries = await getEntries()
  const settings = await getSettings()
  const data = { entries, settings, exportedAt: new Date().toISOString() }
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `ticksimple-export-${new Date().toISOString().slice(0, 10)}.json`
  a.click()
  URL.revokeObjectURL(url)
})

document.getElementById('clear-btn')?.addEventListener('click', async () => {
  if (!confirm('Delete ALL time entries and settings? This cannot be undone.')) return
  await chrome.storage.local.clear()
  location.reload()
})

init().catch(console.error)