<template>
  <div>
    <!-- Loan List (no id selected) -->
    <template v-if="!props.id">
      <div class="d-flex align-center mb-4">
        <h1 class="text-h4">Loans</h1>
      </div>

      <v-progress-linear v-if="accountsStore.loading" indeterminate color="primary" class="mb-4" />

      <v-row v-if="loanAccounts.length > 0">
        <v-col v-for="account in loanAccounts" :key="account.id" cols="12" md="6" lg="4">
          <v-card class="cursor-pointer" hover @click="navigateToLoan(account.id)">
            <v-card-title class="d-flex align-center">
              <v-icon class="mr-2">{{ accountTypeIcon(account.type) }}</v-icon>
              {{ account.name }}
            </v-card-title>
            <v-card-text>
              <div class="d-flex justify-space-between mb-1">
                <span class="text-medium-emphasis">Balance</span>
                <span class="font-weight-bold text-red">{{ formatCurrency(Math.abs(account.balance)) }}</span>
              </div>
              <div v-if="account.interestRate" class="d-flex justify-space-between mb-1">
                <span class="text-medium-emphasis">Interest Rate</span>
                <span>{{ account.interestRate }}%</span>
              </div>
              <v-chip size="x-small" :color="account.hasLoanDetail ? 'success' : 'grey'" class="mt-2">
                {{ account.hasLoanDetail ? 'Loan details configured' : 'No loan details' }}
              </v-chip>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>

      <v-card v-else-if="!accountsStore.loading" class="text-center pa-8">
        <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-bank-off</v-icon>
        <h3 class="text-h6 mb-2">No loan accounts found</h3>
        <p class="text-medium-emphasis">Create an Auto Loan, Personal Loan, or Mortgage account to track loan details.</p>
      </v-card>
    </template>

    <!-- Loan Detail (id selected) -->
    <template v-else>
      <div class="d-flex align-center mb-4">
        <v-btn icon variant="text" @click="router.push('/loans')"><v-icon>mdi-arrow-left</v-icon></v-btn>
        <h1 class="text-h4 ml-2">{{ loanDetail?.accountName || 'Loan Details' }}</h1>
        <v-spacer />
        <v-btn v-if="loanDetail" color="primary" variant="text" prepend-icon="mdi-pencil" @click="openEditDialog">Edit</v-btn>
      </div>

      <v-progress-linear v-if="loading" indeterminate color="primary" class="mb-4" />

      <!-- Setup prompt when no loan detail -->
      <v-card v-if="!loading && !loanDetail && showSetup" class="text-center pa-8 mb-4">
        <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-file-document-edit</v-icon>
        <h3 class="text-h6 mb-2">Set Up Loan Details</h3>
        <p class="text-medium-emphasis mb-4">Configure loan parameters to view amortization schedule and run payoff scenarios.</p>
        <v-btn color="primary" prepend-icon="mdi-plus" @click="openSetupDialog">Set Up Loan Details</v-btn>
      </v-card>

      <!-- Loan Summary Card -->
      <v-card v-if="loanDetail" class="mb-4">
        <v-card-title>Loan Summary</v-card-title>
        <v-card-text>
          <v-row>
            <v-col cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Original Balance</div>
              <div class="text-h6">{{ formatCurrency(loanDetail.originalBalance) }}</div>
            </v-col>
            <v-col cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Current Balance</div>
              <div class="text-h6 text-red">{{ formatCurrency(Math.abs(loanDetail.currentBalance)) }}</div>
            </v-col>
            <v-col v-if="payoffAmount != null" cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Est. Payoff Amount</div>
              <div class="text-h6 text-red">{{ formatCurrency(payoffAmount) }}</div>
            </v-col>
            <v-col cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Interest Rate</div>
              <div class="text-h6">{{ loanDetail.interestRate }}%</div>
            </v-col>
            <v-col cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Monthly Payment</div>
              <div class="text-h6">{{ formatCurrency(loanDetail.monthlyPayment) }}</div>
            </v-col>
            <v-col cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Term</div>
              <div>{{ loanDetail.termMonths }} months</div>
            </v-col>
            <v-col cols="6" md="3">
              <div class="text-medium-emphasis text-caption">First Payment Date</div>
              <div>{{ formatDate(loanDetail.originationDate) }}</div>
            </v-col>
            <v-col cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Maturity Date</div>
              <div>{{ formatDate(loanDetail.maturityDate) }}</div>
            </v-col>
            <v-col v-if="loanDetail.escrowAmount" cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Escrow</div>
              <div>{{ formatCurrency(loanDetail.escrowAmount) }}</div>
            </v-col>
            <v-col v-if="loanDetail.extraPayment" cols="6" md="3">
              <div class="text-medium-emphasis text-caption">Extra Payment</div>
              <div>{{ formatCurrency(loanDetail.extraPayment) }}</div>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>

      <v-alert v-if="loanDetail" type="info" variant="tonal" density="compact" class="mb-4">
        Amounts shown are estimates. Lines of credit and auto loans use daily interest accrual; mortgages and personal loans use standard monthly compounding. Actual values may differ due to payment timing, your lender's rounding practices, extra payments, or rate changes.
      </v-alert>

      <!-- Amortization Schedule -->
      <v-card v-if="loanDetail" class="mb-4">
        <v-card-title class="d-flex align-center">
          Amortization Schedule
          <v-spacer />
          <v-btn size="small" variant="text" @click="showPastPayments = !showPastPayments">
            {{ showPastPayments ? 'Hide' : 'Show' }} past payments
          </v-btn>
        </v-card-title>
        <v-data-table
          :headers="amortHeaders"
          :items="filteredSchedule"
          density="compact"
          :items-per-page="25"
        >
          <template #item.paymentDate="{ item }">{{ formatDate(item.paymentDate) }}</template>
          <template #item.paymentAmount="{ item }">{{ formatCurrency(item.paymentAmount) }}</template>
          <template #item.principalAmount="{ item }">{{ formatCurrency(item.principalAmount) }}</template>
          <template #item.interestAmount="{ item }">{{ formatCurrency(item.interestAmount) }}</template>
          <template #item.escrowAmount="{ item }">{{ item.escrowAmount != null ? formatCurrency(item.escrowAmount) : '-' }}</template>
          <template #item.remainingBalance="{ item }">{{ formatCurrency(item.remainingBalance) }}</template>
        </v-data-table>
      </v-card>

      <!-- Payoff Scenario Calculator -->
      <v-card v-if="loanDetail" class="mb-4">
        <v-card-title>Payoff Scenario Calculator</v-card-title>
        <v-card-text>
          <v-row>
            <v-col cols="12" md="4">
              <v-text-field
                v-model.number="payoffForm.extraMonthlyPayment"
                label="Extra Monthly Payment"
                type="number"
                prefix="$"
                min="0"
              />
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model.number="payoffForm.lumpSumPayment"
                label="Lump Sum Payment"
                type="number"
                prefix="$"
                min="0"
              />
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="payoffForm.lumpSumDate"
                label="Lump Sum Date"
                type="date"
                :disabled="!payoffForm.lumpSumPayment"
              />
            </v-col>
          </v-row>
          <v-btn color="primary" :loading="calculatingPayoff" @click="calculatePayoff">Calculate</v-btn>

          <!-- Payoff Results -->
          <div v-if="payoffResult" class="mt-6">
            <v-row>
              <v-col cols="12" md="4">
                <v-card variant="outlined" color="success">
                  <v-card-text class="text-center">
                    <div class="text-caption text-medium-emphasis">New Payoff Date</div>
                    <div class="text-h6">{{ formatDate(payoffResult.newPayoffDate) }}</div>
                  </v-card-text>
                </v-card>
              </v-col>
              <v-col cols="12" md="4">
                <v-card variant="outlined" color="success">
                  <v-card-text class="text-center">
                    <div class="text-caption text-medium-emphasis">Interest Saved</div>
                    <div class="text-h6 text-success">{{ formatCurrency(payoffResult.interestSaved) }}</div>
                  </v-card-text>
                </v-card>
              </v-col>
              <v-col cols="12" md="4">
                <v-card variant="outlined" color="success">
                  <v-card-text class="text-center">
                    <div class="text-caption text-medium-emphasis">Months Saved</div>
                    <div class="text-h6 text-success">{{ payoffResult.monthsSaved }}</div>
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>

            <v-row class="mt-2">
              <v-col cols="12" md="6">
                <div class="text-caption text-medium-emphasis">Original Total Interest</div>
                <div>{{ formatCurrency(payoffResult.totalInterestOriginal) }}</div>
              </v-col>
              <v-col cols="12" md="6">
                <div class="text-caption text-medium-emphasis">New Total Interest</div>
                <div>{{ formatCurrency(payoffResult.totalInterestNew) }}</div>
              </v-col>
            </v-row>

            <v-row class="mt-2">
              <v-col cols="12" md="6">
                <div class="text-caption text-medium-emphasis">Original Payoff Date</div>
                <div>{{ formatDate(payoffResult.originalPayoffDate) }}</div>
              </v-col>
              <v-col cols="12" md="6">
                <div class="text-caption text-medium-emphasis">New Payoff Date</div>
                <div>{{ formatDate(payoffResult.newPayoffDate) }}</div>
              </v-col>
            </v-row>
          </div>
        </v-card-text>
      </v-card>
    </template>

    <!-- Create/Edit Loan Detail Dialog -->
    <v-dialog v-model="showLoanDialog" max-width="600" persistent>
      <v-card>
        <v-card-title>{{ editingLoan ? 'Edit' : 'Set Up' }} Loan Details</v-card-title>
        <v-card-text>
          <v-alert v-if="prePopulated && !editingLoan" type="info" variant="tonal" density="compact" class="mb-4">
            Some fields have been pre-populated from your bank sync data. Please review and adjust as needed.
          </v-alert>
          <v-text-field v-model.number="loanForm.originalBalance" label="Original Balance" type="number" prefix="$" />
          <v-text-field v-model.number="loanForm.interestRate" label="Interest Rate (%)" type="number" suffix="%" step="0.125" />
          <v-text-field v-model.number="loanForm.monthlyPayment" label="Monthly Payment" type="number" prefix="$" />
          <v-text-field v-model="loanForm.originationDate" label="First Payment Date" type="date" />
          <v-text-field v-model="loanForm.maturityDate" label="Maturity Date" type="date" />
          <v-text-field v-model.number="loanForm.escrowAmount" label="Escrow Amount (optional)" type="number" prefix="$" />
          <v-text-field v-model.number="loanForm.extraPayment" label="Extra Payment (optional)" type="number" prefix="$" />
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn @click="showLoanDialog = false">Cancel</v-btn>
          <v-btn color="primary" :loading="saving" @click="saveLoanDetail">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- Snackbar -->
    <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000">{{ snackbarText }}</v-snackbar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { loansApi } from '@/services/loans'
import { useAccountsStore } from '@/stores/accounts'
import { formatCurrency, formatDate, accountTypeIcon } from '@/utils/formatters'
import type { LoanDefaults, LoanDetail, PayoffScenario } from '@/types'

const props = defineProps<{ id?: string }>()
const router = useRouter()
const accountsStore = useAccountsStore()

const loanDetail = ref<LoanDetail | null>(null)
const payoffResult = ref<PayoffScenario | null>(null)
const loading = ref(false)
const saving = ref(false)
const calculatingPayoff = ref(false)
const showLoanDialog = ref(false)
const showSetup = ref(false)
const editingLoan = ref(false)
const prePopulated = ref(false)
const snackbar = ref(false)
const snackbarText = ref('')
const snackbarColor = ref('success')
const showPastPayments = ref(false)

const loanAccountTypes = ['AutoLoan', 'PersonalLoan', 'Mortgage', 'LineOfCredit']
const loanAccounts = computed(() =>
  accountsStore.accounts.filter(a => a.hasLoanDetail || loanAccountTypes.includes(a.type))
)

const filteredSchedule = computed(() => {
  if (!loanDetail.value) return []
  if (showPastPayments.value) return loanDetail.value.amortizationSchedule
  const now = new Date()
  const monthStart = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-01`
  return loanDetail.value.amortizationSchedule.filter(e => e.paymentDate.split('T')[0] >= monthStart)
})

const payoffAmount = computed(() => {
  if (!loanDetail.value || !props.id) return null
  const balance = Math.abs(loanDetail.value.currentBalance)
  if (balance === 0) return 0
  const rate = loanDetail.value.interestRate / 100
  const today = new Date()
  const todayStr = today.toISOString().split('T')[0]
  const schedule = loanDetail.value.amortizationSchedule
  const lastPast = [...schedule].reverse().find(e => e.paymentDate.split('T')[0] <= todayStr)
  if (!lastPast) return balance
  const lastDate = new Date(lastPast.paymentDate.split('T')[0] + 'T00:00:00')
  const todayMidnight = new Date(todayStr + 'T00:00:00')
  const days = Math.round((todayMidnight.getTime() - lastDate.getTime()) / 86400000)
  if (days <= 0) return balance
  // Payoff quotes always use daily per-diem interest regardless of loan type
  const accruedInterest = balance * rate / 365 * days
  return balance + accruedInterest
})

const amortHeaders = [
  { title: '#', key: 'paymentNumber', width: '60px' },
  { title: 'Date', key: 'paymentDate', width: '110px' },
  { title: 'Payment', key: 'paymentAmount', align: 'end' as const },
  { title: 'Principal', key: 'principalAmount', align: 'end' as const },
  { title: 'Interest', key: 'interestAmount', align: 'end' as const },
  { title: 'Escrow', key: 'escrowAmount', align: 'end' as const },
  { title: 'Balance', key: 'remainingBalance', align: 'end' as const },
]

const payoffForm = ref({
  extraMonthlyPayment: 0,
  lumpSumPayment: 0,
  lumpSumDate: '',
})

const loanForm = ref({
  originalBalance: 0,
  interestRate: 0,
  monthlyPayment: 0,
  originationDate: '',
  maturityDate: '',
  escrowAmount: null as number | null,
  extraPayment: null as number | null,
})

function navigateToLoan(accountId: string) {
  router.push(`/loans/${accountId}`)
}

async function loadLoanDetail() {
  if (!props.id) return
  loading.value = true
  loanDetail.value = null
  payoffResult.value = null
  showSetup.value = false
  try {
    const { data } = await loansApi.getLoanDetail(props.id)
    loanDetail.value = data
  } catch (err: any) {
    if (err.response?.status === 404) {
      showSetup.value = true
    } else {
      showSnackbar('Failed to load loan details', 'error')
    }
  } finally {
    loading.value = false
  }
}

async function openSetupDialog() {
  editingLoan.value = false
  prePopulated.value = false
  loanForm.value = {
    originalBalance: 0,
    interestRate: 0,
    monthlyPayment: 0,
    originationDate: new Date().toISOString().split('T')[0],
    maturityDate: '',
    escrowAmount: null,
    extraPayment: null,
  }

  if (props.id) {
    try {
      const { data } = await loansApi.getLoanDefaults(props.id)
      if (data.originalBalance > 0) loanForm.value.originalBalance = data.originalBalance
      if (data.interestRate > 0) loanForm.value.interestRate = data.interestRate
      prePopulated.value = data.hasSyncData
    } catch {
      // Fall back to zero defaults
    }
  }

  showLoanDialog.value = true
}

function openEditDialog() {
  if (!loanDetail.value) return
  editingLoan.value = true
  loanForm.value = {
    originalBalance: loanDetail.value.originalBalance,
    interestRate: loanDetail.value.interestRate,
    monthlyPayment: loanDetail.value.monthlyPayment,
    originationDate: loanDetail.value.originationDate.split('T')[0],
    maturityDate: loanDetail.value.maturityDate.split('T')[0],
    escrowAmount: loanDetail.value.escrowAmount,
    extraPayment: loanDetail.value.extraPayment,
  }
  showLoanDialog.value = true
}

async function saveLoanDetail() {
  if (!props.id) return
  saving.value = true
  try {
    const [sY, sM, sD] = loanForm.value.originationDate.split('-').map(Number)
    const [eY, eM, eD] = loanForm.value.maturityDate.split('-').map(Number)
    const termMonths = (eY - sY) * 12 + (eM - sM) + 1

    const payload = {
      originalBalance: loanForm.value.originalBalance,
      interestRate: loanForm.value.interestRate,
      termMonths,
      monthlyPayment: loanForm.value.monthlyPayment,
      originationDate: new Date(Date.UTC(sY, sM - 1, sD)).toISOString(),
      maturityDate: new Date(Date.UTC(eY, eM - 1, eD)).toISOString(),
      escrowAmount: loanForm.value.escrowAmount || undefined,
      extraPayment: loanForm.value.extraPayment || undefined,
    }
    if (editingLoan.value) {
      await loansApi.updateLoanDetail(props.id, payload)
      showSnackbar('Loan details updated')
    } else {
      await loansApi.createLoanDetail(props.id, payload)
      showSnackbar('Loan details created')
    }
  } catch {
    showSnackbar('Failed to save loan details', 'error')
  } finally {
    saving.value = false
    showLoanDialog.value = false
    await nextTick()
    await loadLoanDetail()
  }
}

async function calculatePayoff() {
  if (!props.id) return
  calculatingPayoff.value = true
  payoffResult.value = null
  try {
    const { data } = await loansApi.calculatePayoff(props.id, {
      extraMonthlyPayment: payoffForm.value.extraMonthlyPayment || undefined,
      lumpSumPayment: payoffForm.value.lumpSumPayment || undefined,
      lumpSumDate: payoffForm.value.lumpSumDate || undefined,
    })
    payoffResult.value = data
  } catch {
    showSnackbar('Failed to calculate payoff scenario', 'error')
  } finally {
    calculatingPayoff.value = false
  }
}

function showSnackbar(text: string, color = 'success') {
  snackbarText.value = text
  snackbarColor.value = color
  snackbar.value = true
}

watch(() => props.id, () => {
  if (props.id) loadLoanDetail()
})

onMounted(async () => {
  await accountsStore.fetchAccounts()
  if (props.id) await loadLoanDetail()
})
</script>
