<script setup>
import { computed, onMounted, ref } from 'vue'
import { RouterLink } from 'vue-router'
import { Preferences } from '@capacitor/preferences'
import { useDialog } from '@/composables/dialog'
import { useUiStore } from '@/stores/ui'
import { useAuthStore } from '@/stores/auth'
import { exportBackup, importBackup } from '@/utils/backup'
import { reminders } from '@/native/reminders'
import { appLock, PIN_LENGTH } from '@/composables/appLock'
import PinPad from '@/components/PinPad.vue'
import { accountApi } from '@/api/accountApi'

const dialog = useDialog()
const ui = useUiStore()
const auth = useAuthStore()
const isPremium = computed(() => auth.isPremium) // 데이터 백업/복구는 유료 전용

// ===== 알림(로컬) 설정 — 앱에서만 =====
const notifSupported = reminders.isNative()
const notifEnabled = ref(false)
const notifHour = ref(21)
const notifSaving = ref(false)

function subFromUser() {
  return { premium: auth.isPremium, autoRenew: !!auth.user?.planAutoRenew, expiresAt: auth.user?.planExpiresAt }
}

onMounted(async () => {
  if (!notifSupported) return
  const s = await reminders.getSettings()
  notifEnabled.value = s.enabled
  notifHour.value = s.hour
})

async function toggleNotif() {
  if (notifSaving.value) return
  const next = !notifEnabled.value
  notifSaving.value = true
  try {
    if (next) {
      const ok = await reminders.ensurePermission()
      if (!ok) {
        await dialog.alert('알림 권한이 꺼져 있어요. 기기 설정에서 알림을 허용해 주세요.')
        return
      }
    }
    notifEnabled.value = next
    await reminders.setSettings({ enabled: next, hour: notifHour.value })
    if (next) {
      await reminders.scheduleEntryReminder(false)
      await reminders.scheduleExpiryReminder(subFromUser())
    } else {
      await reminders.cancelAll()
    }
  } finally {
    notifSaving.value = false
  }
}

async function changeNotifHour(v) {
  notifHour.value = Number(v)
  await reminders.setSettings({ enabled: notifEnabled.value, hour: notifHour.value })
  if (notifEnabled.value) await reminders.scheduleEntryReminder(false)
}

// ===== 앱 잠금(PIN) =====
const lockEnabled = computed(() => appLock.state.enabled)
const lockSetupOpen = ref(false)
const setupStep = ref(1) // 1: 입력, 2: 확인
const setupPin = ref('')
const setupFirst = ref('')
const setupError = ref('')

function toggleLock() {
  if (lockEnabled.value) confirmDisableLock()
  else openLockSetup()
}
function openLockSetup() {
  setupStep.value = 1
  setupPin.value = ''
  setupFirst.value = ''
  setupError.value = ''
  lockSetupOpen.value = true
}
async function onSetupComplete(p) {
  if (setupStep.value === 1) {
    setupFirst.value = p
    setupPin.value = ''
    setupStep.value = 2
    setupError.value = ''
  } else if (p === setupFirst.value) {
    await appLock.setPin(p)
    lockSetupOpen.value = false
  } else {
    setupError.value = 'PIN이 일치하지 않아요. 처음부터 다시 설정해주세요.'
    setupStep.value = 1
    setupPin.value = ''
    setupFirst.value = ''
  }
}
async function confirmDisableLock() {
  const ok = await dialog.confirm('앱 잠금을 끌까요? 다음 실행부터 PIN 없이 열립니다.', { title: '앱 잠금 해제' })
  if (ok) appLock.disable()
}

const exporting = ref(false)
async function doExport() {
  if (exporting.value) return
  exporting.value = true
  try {
    await exportBackup()
  } catch (e) {
    window.alert(e?.message || '내보내기에 실패했습니다.')
  } finally {
    exporting.value = false
  }
}

const importing = ref(false)
const fileInput = ref(null)
function pickImportFile() {
  if (importing.value) return
  fileInput.value?.click()
}
async function onImportFile(e) {
  const file = e.target.files?.[0]
  e.target.value = '' // 같은 파일 다시 선택 가능하게 초기화
  if (!file) return
  const ok = await dialog.confirm(
    '가져오기를 하면 현재 가계부의 모든 데이터가 백업 파일 내용으로 교체됩니다.\n(투자 종목·매매내역은 백업에 없어 사라집니다)\n계속하시겠습니까?',
    { title: '데이터 가져오기', okText: '가져오기', danger: true },
  )
  if (!ok) return
  importing.value = true
  try {
    await importBackup(file)
    await dialog.alert('가져오기가 완료되었습니다. 화면을 새로고침합니다.')
    window.location.reload()
  } catch (err) {
    window.alert(err?.response?.data?.message || err?.message || '가져오기에 실패했습니다.')
  } finally {
    importing.value = false
  }
}
const THEMES = [
  { value: 'system', label: '시스템' },
  { value: 'light', label: '라이트' },
  { value: 'dark', label: '다크' },
]
const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '-'
const clearing = ref(false)

// PC(데스크톱) 전용: 창 크기(가로·세로 각각) 변경 (Electron preload 의 window.desktop 존재 시에만)
const isDesktop = typeof window !== 'undefined' && !!window.desktop
const WIDTHS = [900, 1024, 1280, 1366, 1600, 1920]
const HEIGHTS = [700, 800, 900, 1000, 1080, 1200]
// 한 축만 바꾸고 나머지 축은 현재 창 크기를 유지
async function setDim(dim, value) {
  const v = Number(value)
  if (!v) return
  let cur = [1024, 768]
  try {
    cur = (await window.desktop?.getWindowSize?.()) || cur
  } catch {
    /* 무시 */
  }
  const w = dim === 'w' ? v : cur[0]
  const h = dim === 'h' ? v : cur[1]
  window.desktop?.setWindowSize(w, h)
}

// ===== 가계부 데이터 전체 삭제 =====
const resetModalOpen = ref(false)
const resetting = ref(false)
const resetToast = ref(false)
let resetToastTimer = null

function openResetModal() {
  if (resetting.value) return
  resetModalOpen.value = true
}

async function doResetWithExport() {
  resetModalOpen.value = false
  resetting.value = true
  try {
    await exportBackup()
    await accountApi.deleteAllData()
    showResetToast()
  } catch (e) {
    window.alert(e?.message || '처리에 실패했습니다.')
  } finally {
    resetting.value = false
  }
}

async function doResetOnly() {
  resetModalOpen.value = false
  const ok = await dialog.confirm(
    '엑셀 백업 없이 모든 데이터를 삭제합니다. 삭제된 데이터는 복구할 수 없습니다. 계속하시겠습니까?',
    { title: '데이터 삭제 확인', okText: '삭제', danger: true },
  )
  if (!ok) return
  resetting.value = true
  try {
    await accountApi.deleteAllData()
    showResetToast()
  } catch (e) {
    window.alert(e?.response?.data?.message || e?.message || '삭제에 실패했습니다.')
  } finally {
    resetting.value = false
  }
}

function showResetToast() {
  resetToast.value = true
  clearTimeout(resetToastTimer)
  resetToastTimer = setTimeout(() => { resetToast.value = false }, 3000)
}

async function clearAppData() {
  if (clearing.value) return
  const ok = await dialog.confirm(
    '앱에 저장된 모든 데이터(로그인 정보·캐시)를 삭제합니다.\n삭제 후 로그아웃되며 첫 화면으로 이동합니다.\n계속하시겠습니까?',
    { title: 'App Data 삭제', okText: '삭제', danger: true },
  )
  if (!ok) return
  clearing.value = true
  try {
    try { await Preferences.clear() } catch { /* 네이티브 저장소 없음 무시 */ }
    try { localStorage.clear() } catch { /* 무시 */ }
    try { sessionStorage.clear() } catch { /* 무시 */ }
    try {
      if (window.caches?.keys) {
        const keys = await window.caches.keys()
        await Promise.all(keys.map((k) => window.caches.delete(k)))
      }
    } catch { /* 무시 */ }
  } finally {
    // 초기화 상태로 첫 화면 재시작
    window.location.replace('/')
  }
}
</script>

<template>
  <div class="settings">

    <section class="card">
      <div class="row">
        <div class="row-main">
          <span class="row-label">화면 테마</span>
          <span class="row-sub">라이트 / 다크 모드 선택</span>
        </div>
        <div class="theme-seg">
          <button
            v-for="t in THEMES"
            :key="t.value"
            type="button"
            class="seg-btn"
            :class="{ active: ui.theme === t.value }"
            @click="ui.setTheme(t.value)"
          >{{ t.label }}</button>
        </div>
      </div>
    </section>

    <!-- 알림 (앱 전용 — 로컬 알림) -->
    <section v-if="notifSupported" class="card">
      <div class="row">
        <div class="row-main">
          <span class="row-label">알림 받기</span>
          <span class="row-sub">가계부 기록 리마인더 · 구독 만료 안내</span>
        </div>
        <button
          type="button" class="switch" :class="{ on: notifEnabled }"
          :disabled="notifSaving" role="switch" :aria-checked="notifEnabled"
          @click="toggleNotif"
        ><span class="knob"></span></button>
      </div>
      <div v-if="notifEnabled" class="row">
        <div class="row-main">
          <span class="row-label">리마인더 시간</span>
          <span class="row-sub">오늘 기록이 없으면 이 시각에 알려드려요</span>
        </div>
        <select class="res-select" :value="notifHour" @change="changeNotifHour($event.target.value)">
          <option v-for="h in 24" :key="h - 1" :value="h - 1">{{ String(h - 1).padStart(2, '0') }}:00</option>
        </select>
      </div>
    </section>

    <!-- 앱 잠금 (PIN) -->
    <section class="card">
      <div class="row">
        <div class="row-main">
          <span class="row-label">앱 잠금 (PIN)</span>
          <span class="row-sub">앱 실행·복귀 시 {{ PIN_LENGTH }}자리 PIN 입력</span>
        </div>
        <button
          type="button" class="switch" :class="{ on: lockEnabled }"
          role="switch" :aria-checked="lockEnabled"
          @click="toggleLock"
        ><span class="knob"></span></button>
      </div>
    </section>

    <!-- PC(데스크톱) 전용: 창 크기 (가로·세로 각각) -->
    <section v-if="isDesktop" class="card">
      <div class="row">
        <div class="row-main">
          <span class="row-label">창 크기</span>
          <span class="row-sub">가로·세로를 각각 선택</span>
        </div>
        <div class="size-selects">
          <select class="res-select" title="가로(폭)" @change="setDim('w', $event.target.value)">
            <option value="">가로</option>
            <option v-for="w in WIDTHS" :key="w" :value="w">{{ w }}</option>
          </select>
          <span class="x">×</span>
          <select class="res-select" title="세로(높이)" @change="setDim('h', $event.target.value)">
            <option value="">세로</option>
            <option v-for="h in HEIGHTS" :key="h" :value="h">{{ h }}</option>
          </select>
        </div>
      </div>
    </section>

    <!-- 데이터 백업 (유료 전용) -->
    <section class="card">
      <template v-if="isPremium">
        <button type="button" class="row row-btn" :disabled="exporting" @click="doExport">
          <div class="row-main">
            <span class="row-label">엑셀로 내보내기</span>
            <span class="row-sub">가계부 전체 데이터를 .xlsx 파일로 저장</span>
          </div>
          <span class="row-value">{{ exporting ? '내보내는 중…' : '내보내기' }}</span>
        </button>
        <button type="button" class="row row-btn" :disabled="importing" @click="pickImportFile">
          <div class="row-main">
            <span class="row-label">엑셀에서 가져오기</span>
            <span class="row-sub">백업 파일로 데이터 복구 (기존 데이터 덮어씀)</span>
          </div>
          <span class="row-value">{{ importing ? '복구 중…' : '가져오기' }}</span>
        </button>
        <input ref="fileInput" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" class="hidden-file" @change="onImportFile" />
      </template>
      <RouterLink v-else to="/upgrade" class="row row-link">
        <div class="row-main">
          <span class="row-label">데이터 백업 / 복구 👑</span>
          <span class="row-sub">엑셀 내보내기·가져오기는 유료 멤버십 기능입니다</span>
        </div>
        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 18l6-6-6-6" />
        </svg>
      </RouterLink>
    </section>

    <section class="card">
      <RouterLink to="/settings/account" class="row row-link">
        <div class="row-main">
          <span class="row-label">계정정보</span>
          <span class="row-sub">아이디·이름·이메일 확인 및 변경</span>
        </div>
        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 18l6-6-6-6" />
        </svg>
      </RouterLink>

      <RouterLink to="/privacy" class="row row-link">
        <div class="row-main">
          <span class="row-label">개인정보처리방침</span>
        </div>
        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 18l6-6-6-6" />
        </svg>
      </RouterLink>

      <RouterLink to="/terms" class="row row-link">
        <div class="row-main">
          <span class="row-label">이용약관</span>
        </div>
        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 18l6-6-6-6" />
        </svg>
      </RouterLink>

      <div class="row">
        <div class="row-main">
          <span class="row-label">앱 버전 정보</span>
        </div>
        <span class="row-value">v{{ appVersion }}</span>
      </div>

      <button type="button" class="row row-btn" :disabled="resetting || clearing" @click="openResetModal">
        <div class="row-main">
          <span class="row-label danger">가계부 데이터 초기화</span>
          <span class="row-sub">내역·계좌·분류·예산·고정지출 등 모든 데이터 삭제</span>
        </div>
        <span class="row-value danger">초기화</span>
      </button>

      <button type="button" class="row row-btn" :disabled="clearing" @click="clearAppData">
        <div class="row-main">
          <span class="row-label danger">App Data 삭제</span>
          <span class="row-sub">저장된 로그인 정보·캐시를 모두 비웁니다</span>
        </div>
        <span class="row-value danger">{{ clearing ? '삭제 중…' : '삭제' }}</span>
      </button>
    </section>

    <p class="copyright">© 2026 돈돼지 가계부. All rights reserved.</p>

    <!-- 데이터 초기화 경고 모달 -->
    <Teleport to="body">
      <div v-if="resetModalOpen" class="reset-backdrop" @click.self="resetModalOpen = false">
        <div class="reset-modal" role="dialog" aria-modal="true">
          <h2 class="reset-title">가계부 데이터 초기화</h2>
          <p class="reset-warn">
            ⚠️ 내역·계좌·분류·태그·예산·고정지출·투자 내역이 <b>모두 삭제</b>됩니다.<br>
            삭제된 데이터는 복구할 수 없습니다.<br><br>
            엑셀 파일로 먼저 백업하시겠습니까?
          </p>
          <div class="reset-actions">
            <button type="button" class="reset-btn export" @click="doResetWithExport">
              엑셀로 내보낸 후 삭제
            </button>
            <button type="button" class="reset-btn danger" @click="doResetOnly">
              백업 없이 바로 삭제
            </button>
            <button type="button" class="reset-btn cancel" @click="resetModalOpen = false">
              취소
            </button>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 삭제 진행 중 상태바 -->
    <Teleport to="body">
      <div v-if="resetting" class="reset-progress-wrap" role="status" aria-label="데이터 삭제 중">
        <div class="reset-progress-bar"></div>
        <span class="reset-progress-label">데이터를 삭제하는 중입니다…</span>
      </div>
    </Teleport>

    <!-- 완료 토스트 -->
    <Teleport to="body">
      <div v-if="resetToast" class="reset-toast" role="status">데이터 초기화가 완료되었습니다.</div>
    </Teleport>

    <!-- PIN 설정 모달 -->
    <Teleport to="body">
      <div v-if="lockSetupOpen" class="pin-backdrop" @click.self="lockSetupOpen = false">
        <div class="pin-modal" role="dialog" aria-modal="true" aria-label="PIN 설정">
          <button type="button" class="pin-close" aria-label="닫기" @click="lockSetupOpen = false">×</button>
          <h2 class="pin-h">{{ setupStep === 1 ? 'PIN 설정' : 'PIN 다시 입력' }}</h2>
          <p class="pin-sub" :class="{ err: setupError }">
            {{ setupError || (setupStep === 1 ? `사용할 ${PIN_LENGTH}자리 PIN을 입력하세요` : '확인을 위해 한 번 더 입력하세요') }}
          </p>
          <PinPad :value="setupPin" :length="PIN_LENGTH" @update:value="(v) => { setupPin = v; setupError = '' }" @complete="onSetupComplete" />
        </div>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.settings {
  max-width: 560px;
  margin: 0 auto;
}
/* PIN 설정 모달 */
.pin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
}
.pin-modal {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 1.6rem 1.2rem 1.8rem;
  border-radius: 14px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  text-align: center;
}
.pin-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 1.4rem;
  cursor: pointer;
}
.pin-h {
  font-size: 1.1rem;
  color: var(--color-heading);
}
.pin-sub {
  margin: 0.4rem 0 1.4rem;
  font-size: 0.85rem;
  opacity: 0.7;
}
.pin-sub.err {
  color: #c0392b;
  opacity: 1;
  font-weight: 600;
}
.page-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.card {
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.row:last-child {
  border-bottom: 0;
}
.row-link,
.row-btn {
  cursor: pointer;
}
.row-link:hover,
.row-btn:hover:not(:disabled) {
  background: var(--color-background-mute);
}
.row-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.row-label {
  font-size: 0.98rem;
  font-weight: 600;
}
.row-sub {
  font-size: 0.78rem;
  opacity: 0.6;
}
.row-value {
  font-size: 0.9rem;
  opacity: 0.8;
  white-space: nowrap;
}
.danger {
  color: #c0392b;
}
.theme-seg {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.size-selects {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
}
.size-selects .x {
  opacity: 0.5;
}
.res-select {
  flex: none;
  max-width: 90px;
}
.hidden-file {
  display: none;
}
.switch {
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #b0b0b0;
  position: relative;
  cursor: pointer;
  transition: background 0.18s;
  padding: 0;
}
.switch.on {
  background: hsla(160, 100%, 37%, 1);
}
.switch:disabled {
  opacity: 0.6;
  cursor: default;
}
.switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s;
}
.switch.on .knob {
  transform: translateX(20px);
}
.seg-btn {
  padding: 0.4rem 0.7rem;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  font-size: 0.85rem;
  cursor: pointer;
}
.seg-btn:first-child {
  border-left: 0;
}
.seg-btn.active {
  background: hsla(160, 100%, 37%, 1);
  color: #fff;
  font-weight: 600;
}
.chevron {
  width: 18px;
  height: 18px;
  opacity: 0.5;
  flex-shrink: 0;
}
.copyright {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.5;
}

/* 데이터 초기화 모달 */
.reset-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.55);
}
.reset-modal {
  width: 100%;
  max-width: 360px;
  padding: 1.6rem 1.4rem 1.4rem;
  border-radius: 14px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
}
.reset-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #c0392b;
  margin-bottom: 0.9rem;
}
.reset-warn {
  font-size: 0.88rem;
  line-height: 1.65;
  opacity: 0.85;
  margin-bottom: 1.3rem;
}
.reset-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.reset-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-background-soft);
  color: var(--color-text);
  text-align: center;
}
.reset-btn.export {
  border-color: hsla(160, 100%, 37%, 1);
  color: hsla(160, 100%, 37%, 1);
}
.reset-btn.danger {
  border-color: #c0392b;
  color: #c0392b;
}
.reset-btn.cancel {
  opacity: 0.6;
}

/* 삭제 진행 상태바 */
.reset-progress-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  background: var(--color-background-soft);
  border-bottom: 1px solid var(--color-border);
  padding: 0.6rem 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.reset-progress-bar {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, hsla(160,100%,37%,1) 0%, hsla(160,100%,37%,0.3) 100%);
  background-size: 200% 100%;
  animation: progress-slide 1.2s linear infinite;
}
@keyframes progress-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.reset-progress-label {
  font-size: 0.82rem;
  opacity: 0.75;
}

/* 완료 토스트 */
.reset-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  background: #2ecc71;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: toast-in 0.2s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
</style>
