<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { accountApi } from '@/api/accountApi'
import IconBtn from '@/components/ui/IconBtn.vue'

const route = useRoute()
const router = useRouter()
const editId = route.params.id ? Number(route.params.id) : null
const isEdit = editId != null

const TYPES = [
  { key: 'BANK', label: '은행계좌' },
  { key: 'CASH', label: '현금' },
  { key: 'CARD', label: '신용/체크카드' },
  { key: 'LOAN', label: '대출' },
  { key: 'MINUS', label: '마이너스통장' },
  { key: 'INVEST', label: '투자' },
]
const CARD_TYPES = [
  { value: 'CREDIT', label: '신용카드' },
  { value: 'CHECK', label: '체크카드' },
]
const LOAN_METHODS = [
  { value: 'EQUAL_PAYMENT', label: '원리금균등' },
  { value: 'EQUAL_PRINCIPAL', label: '원금균등' },
  { value: 'BULLET', label: '만기일시' },
  { value: '', label: '선택안함' },
]

const isLiability = (t) => t === 'CARD' || t === 'LOAN' || t === 'MINUS'

const form = reactive({
  type: 'BANK',
  name: '',
  issuer: '',
  accountNumber: '',
  cardType: 'CREDIT',
  openingBalance: 0,
  openingDate: '',
  currentValue: null,
  loanAmount: null,
  loanRate: null,
  loanMethod: '',
  loanMonths: null,
  loanStart: '',
  loanPayment: null,
})
const loading = ref(false)
const submitting = ref(false)
const formError = ref(null)

const typeLabel = (t) => TYPES.find((x) => x.key === t)?.label || ''
function issuerLabel(t) {
  return t === 'BANK' || t === 'MINUS' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
}
function openingLabel(t) {
  if (t === 'BANK' || t === 'CASH') return '초기 잔액'
  if (t === 'CARD') return '초기 미결제 금액'
  if (t === 'INVEST') return '투자금(투입원금)'
  if (t === 'MINUS') return '기록 시작 시 사용 잔액'
  return '기록 시작 시 잔액'
}

async function load() {
  if (!isEdit) return
  loading.value = true
  try {
    const ws = await accountApi.wallets()
    const w = ws.find((x) => x.id === editId)
    if (!w) {
      formError.value = '계좌를 찾을 수 없습니다.'
      return
    }
    Object.assign(form, {
      type: w.type,
      name: w.name,
      issuer: w.issuer || '',
      accountNumber: w.accountNumber || '',
      cardType: w.cardType || 'CREDIT',
      // 부채는 음수 저장값 → 화면엔 절대값(갚을 금액)으로
      openingBalance: isLiability(w.type) ? -(w.openingBalance || 0) : w.openingBalance || 0,
      openingDate: w.openingDate || '',
      currentValue: w.currentValue ?? null,
      loanAmount: w.loanAmount ?? null,
      loanRate: w.loanRate ?? null,
      loanMethod: w.loanMethod || '',
      loanMonths: w.loanMonths ?? null,
      loanStart: w.loanStart || '',
      loanPayment: w.loanPayment ?? null,
    })
  } catch (e) {
    formError.value = e.response?.data?.message || '불러오지 못했습니다.'
  } finally {
    loading.value = false
  }
}
onMounted(load)

function goBack() {
  if (window.history.length > 1) router.back()
  else router.replace('/account/wallets')
}

async function submit() {
  formError.value = null
  if (!form.name.trim()) {
    formError.value = '이름을 입력하세요.'
    return
  }
  submitting.value = true
  const magnitude = Number(form.openingBalance) || 0
  const isLoan = form.type === 'LOAN'
  const payload = {
    type: form.type,
    name: form.name.trim(),
    issuer: form.issuer || null,
    accountNumber: form.type === 'BANK' || form.type === 'MINUS' ? form.accountNumber || null : null,
    cardType: form.type === 'CARD' ? form.cardType : null,
    // 부채는 음수로 저장 (갚을 금액)
    openingBalance: isLiability(form.type) ? -magnitude : magnitude,
    openingDate: form.openingDate || null,
    currentValue:
      form.type === 'INVEST' && form.currentValue !== '' && form.currentValue != null
        ? Number(form.currentValue)
        : null,
    loanAmount: isLoan && form.loanAmount ? Number(form.loanAmount) : null,
    loanRate: isLoan && form.loanRate !== null && form.loanRate !== '' ? Number(form.loanRate) : null,
    loanMethod: isLoan && form.loanMethod ? form.loanMethod : null,
    loanMonths: isLoan && form.loanMonths ? Number(form.loanMonths) : null,
    loanStart: isLoan && form.loanStart ? form.loanStart : null,
    loanPayment: isLoan && form.loanPayment ? Number(form.loanPayment) : null,
  }
  try {
    if (isEdit) await accountApi.updateWallet(editId, payload)
    else await accountApi.createWallet(payload)
    router.replace('/account/wallets')
  } catch (e) {
    formError.value = e.response?.data?.message || '저장에 실패했습니다.'
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <section class="wform">
    <header class="wf-head">
      <span class="wf-title">{{ isEdit ? `${typeLabel(form.type)} 수정` : '계좌 추가' }}</span>
    </header>

    <p v-if="loading" class="msg">불러오는 중...</p>

    <form v-else class="wallet-form" @submit.prevent="submit">
      <!-- 종류 선택(생성 시에만) -->
      <div v-if="!isEdit" class="field">
        <span class="field-label">계좌 종류</span>
        <div class="chip-group">
          <button
            v-for="t in TYPES" :key="t.key"
            type="button" class="chip" :class="{ active: form.type === t.key }"
            :disabled="submitting" @click="form.type = t.key"
          >{{ t.label }}</button>
        </div>
      </div>

      <label>이름(별칭)<input v-model="form.name" type="text" placeholder="예: 월급통장 / 메인카드 / 신용대출" :disabled="submitting" /></label>
      <label v-if="form.type !== 'CASH'">{{ issuerLabel(form.type) }}<input v-model="form.issuer" type="text" :disabled="submitting" /></label>
      <label v-if="form.type === 'BANK' || form.type === 'MINUS'">계좌번호<input v-model="form.accountNumber" type="text" placeholder="(선택)" :disabled="submitting" /></label>
      <div v-if="form.type === 'CARD'" class="field">
        <span class="field-label">카드 종류</span>
        <div class="chip-group">
          <button
            v-for="c in CARD_TYPES" :key="c.value"
            type="button" class="chip" :class="{ active: form.cardType === c.value }"
            :disabled="submitting" @click="form.cardType = c.value"
          >{{ c.label }}</button>
        </div>
      </div>
      <label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label>
      <template v-if="form.type === 'INVEST'">
        <label>현재 평가액
          <input v-model.number="form.currentValue" type="number" min="0" placeholder="예: 현재 계좌 평가금액" :disabled="submitting" />
        </label>
        <p class="form-hint">
          <b>투자금</b>(투입원금)과 <b>현재 평가액</b>만 입력하면 손익이 자동 계산됩니다. (퇴직연금·연금·증권계좌 공통)<br />
          평가액은 <b>수정</b>에서 주기적으로 갱신하세요.
        </p>
      </template>
      <label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>

      <!-- 대출 전용 -->
      <template v-if="form.type === 'LOAN'">
        <label>대출 실행 금액(원금)
          <input v-model.number="form.loanAmount" type="number" min="0"
            placeholder="처음 빌린 금액 (예: 10000000)" :disabled="submitting" />
        </label>
        <label>연이자율(%)
          <input v-model.number="form.loanRate" type="number" min="0" max="100" step="0.001"
            placeholder="예: 5.253" :disabled="submitting" />
        </label>
        <div class="field">
          <span class="field-label">상환방식</span>
          <div class="chip-group">
            <button
              v-for="m in LOAN_METHODS" :key="m.value"
              type="button" class="chip" :class="{ active: form.loanMethod === m.value }"
              :disabled="submitting" @click="form.loanMethod = m.value"
            >{{ m.label }}</button>
          </div>
        </div>
        <label>대출기간(개월)
          <input v-model.number="form.loanMonths" type="number" min="1"
            placeholder="예: 120 (10년)" :disabled="submitting" />
        </label>
        <label>대출시작일
          <input v-model="form.loanStart" type="date" :disabled="submitting" />
        </label>
        <label v-if="form.loanMethod === 'EQUAL_PAYMENT' || form.loanMethod === ''">월 상환금(선택)
          <input v-model.number="form.loanPayment" type="number" min="0"
            placeholder="은행 조회 고정 월납입금 (예: 697868)" :disabled="submitting" />
        </label>
        <p v-if="form.loanMethod === 'EQUAL_PAYMENT' || form.loanMethod === ''" class="form-hint">
          원리금균등은 <b>월 상환금</b>을 입력하면 상환표의 원금·이자가 은행 조회액과 정확히 일치합니다. (미입력 시 잔액·개월수로 추정)
        </p>
      </template>

      <p v-if="formError" class="msg error">{{ formError }}</p>

      <div class="buttons">
        <IconBtn icon="close" title="취소" @click="goBack" />
        <IconBtn icon="save" :title="isEdit ? '수정' : '등록'" variant="primary" type="submit" :disabled="submitting" />
      </div>
    </form>
  </section>
</template>

<style scoped>
.wform {
  max-width: 460px;
  margin: 0 auto;
}
.wf-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.wf-title {
  font-size: 1.2rem;
  font-weight: 700;
}
.msg {
  margin: 1rem 0;
}
.msg.error {
  color: #c0392b;
}
.wallet-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wallet-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.wallet-form input {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background-soft);
  color: var(--color-text);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.field-label {
  font-size: 0.82rem;
  opacity: 0.7;
}
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip {
  padding: 0.28rem 0.75rem;
  border: 1.5px solid var(--color-border);
  border-radius: 100px;
  background: var(--color-background-soft);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chip.active {
  border-color: hsla(160, 100%, 37%, 1);
  background: hsla(160, 100%, 37%, 1);
  color: #fff;
}
.form-hint {
  font-size: 0.76rem;
  opacity: 0.65;
  margin: -0.2rem 0 0.1rem;
}
.buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
</style>
