<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { toast } from 'vue-sonner'
import { Send, ArrowLeft } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { useNeptuneStore } from '@/stores/neptuneStore'
import { useNeptuneWallet } from '@/composables/useNeptuneWallet'

const router = useRouter()
const neptuneStore = useNeptuneStore()
const { getBalance, getUtxos, buildTransaction, broadcastSignedTransaction } = useNeptuneWallet()

const availableBalance = ref('0')
const loading = ref(false)
const sendLoading = ref(false)
const showConfirmModal = ref(false)

const outputAddress = ref('')
const outputAmount = ref('')
const priorityFee = ref('')

const loadBalance = async () => {
  try {
    loading.value = true
    const result = await getBalance()
    availableBalance.value = result?.balance ?? '0'
  } catch (error) {
    toast.error('Failed to load balance')
  } finally {
    loading.value = false
  }
}

const isAddressValid = computed(() => outputAddress.value.trim().length > 0)
const isAmountValid = computed(() => {
  if (!outputAmount.value) return false
  const num = parseFloat(outputAmount.value)
  if (isNaN(num) || num <= 0) return false

  const balance = parseFloat(availableBalance.value)
  if (!isNaN(balance) && num > balance) return false

  return true
})
const isFeeValid = computed(() => {
  if (!priorityFee.value) return false
  const num = parseFloat(priorityFee.value)
  return !isNaN(num) && num >= 0
})

const amountErrorMessage = computed(() => {
  if (!outputAmount.value) return ''
  const num = parseFloat(outputAmount.value)
  if (isNaN(num) || num <= 0) return 'Invalid amount'

  const balance = parseFloat(availableBalance.value)
  if (!isNaN(balance) && num > balance) {
    return `Insufficient balance. Available: ${availableBalance.value} XNT`
  }

  return ''
})

const isFormValid = computed(
  () => isAddressValid.value && isAmountValid.value && isFeeValid.value && !sendLoading.value
)

const formatDecimal = (value: string) => {
  if (!value) return ''

  let cleaned = value.replace(/[^\d.]/g, '')

  const parts = cleaned.split('.')
  if (parts.length > 2) {
    cleaned = parts[0] + '.' + parts.slice(1).join('')
  }

  if (cleaned && !cleaned.includes('.') && /^\d+$/.test(cleaned)) {
    cleaned = cleaned + '.0'
  }

  if (cleaned.includes('.')) {
    const [integer, decimal = ''] = cleaned.split('.')
    cleaned = integer + '.' + decimal.slice(0, 8)
  }

  return cleaned
}

const handleAmountBlur = () => {
  if (outputAmount.value) {
    outputAmount.value = formatDecimal(outputAmount.value)
  }
}

const handleFeeBlur = () => {
  if (priorityFee.value) {
    priorityFee.value = formatDecimal(priorityFee.value)
  }
}

const handleShowConfirm = () => {
  if (!isFormValid.value) return
  showConfirmModal.value = true
}

const handleCancelConfirm = () => {
  showConfirmModal.value = false
}

const handleConfirmSend = async () => {
  try {
    sendLoading.value = true
    showConfirmModal.value = false

    // Get UTXOs
    const utxosResult = await getUtxos()
    const utxos = utxosResult?.utxos || []

    if (!utxos.length) {
      toast.error('No UTXOs available')
      return
    }

    // Build transaction
    const inputAdditionRecords = utxos.map((utxo: any) => utxo.additionRecord || utxo.addition_record)

    const txResult = await buildTransaction({
      inputAdditionRecords,
      outputAddresses: [outputAddress.value.trim()],
      outputAmounts: [outputAmount.value],
      fee: priorityFee.value,
    })

    if (!txResult.success) {
      toast.error('Failed to build transaction')
      return
    }

    // Broadcast transaction
    await broadcastSignedTransaction(txResult.transaction)

    toast.success('Transaction sent successfully!')

    // Navigate back to wallet
    router.push('/')
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Failed to send transaction'
    toast.error('Transaction Failed', { description: message })
  } finally {
    sendLoading.value = false
  }
}

onMounted(() => {
  loadBalance()
})
</script>

<template>
  <div class="p-4">
    <div class="mx-auto max-w-2xl space-y-6">
      <!-- Header -->
      <div class="flex items-center gap-3">
        <Button variant="ghost" size="icon" @click="router.push('/')">
          <ArrowLeft class="size-5" />
        </Button>
        <div>
          <h1 class="text-2xl font-bold text-foreground">Send Transaction</h1>
          <p class="text-sm text-muted-foreground">Send XNT to another address</p>
        </div>
      </div>

      <!-- Send Form -->
      <Card>
        <CardHeader>
          <CardTitle class="flex items-center gap-2">
            <Send class="size-5" />
            Transaction Details
          </CardTitle>
        </CardHeader>
        <CardContent class="space-y-4">
          <!-- Recipient Address -->
          <div class="space-y-2">
            <Label for="recipient">
              Recipient Address <span class="text-destructive">*</span>
            </Label>
            <Textarea
              id="recipient"
              v-model="outputAddress"
              placeholder="Enter recipient address"
              rows="3"
              class="font-mono text-sm"
              :disabled="sendLoading"
            />
            <p v-if="outputAddress && !isAddressValid" class="text-xs text-destructive">
              Address is required
            </p>
          </div>

          <!-- Amount and Fee Row -->
          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="space-y-2">
              <div class="flex items-center justify-between">
                <Label for="amount">
                  Amount <span class="text-destructive">*</span>
                </Label>
                <Badge variant="secondary" class="text-xs">
                  Available: {{ availableBalance }} XNT
                </Badge>
              </div>
              <Input
                id="amount"
                v-model="outputAmount"
                type="text"
                placeholder="0.0"
                :disabled="sendLoading"
                @blur="handleAmountBlur"
              />
              <p v-if="amountErrorMessage" class="text-xs text-destructive">
                {{ amountErrorMessage }}
              </p>
            </div>

            <div class="space-y-2">
              <Label for="fee">
                Priority Fee <span class="text-destructive">*</span>
              </Label>
              <Input
                id="fee"
                v-model="priorityFee"
                type="text"
                placeholder="0.0"
                :disabled="sendLoading"
                @blur="handleFeeBlur"
              />
              <p v-if="priorityFee && !isFeeValid" class="text-xs text-destructive">
                Invalid fee
              </p>
            </div>
          </div>

          <!-- Send Button -->
          <Button
            class="w-full gap-2"
            :disabled="!isFormValid || sendLoading"
            @click="handleShowConfirm"
          >
            <Send class="size-4" />
            {{ sendLoading ? 'Sending...' : 'Review & Send' }}
          </Button>
        </CardContent>
      </Card>
    </div>

    <!-- Confirm Transaction Modal -->
    <Dialog v-model:open="showConfirmModal">
      <DialogContent class="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>Confirm Transaction</DialogTitle>
          <DialogDescription>Please review the transaction details before sending</DialogDescription>
        </DialogHeader>

        <div class="space-y-4 py-4">
          <!-- Recipient -->
          <div class="space-y-2">
            <Label class="text-sm text-muted-foreground">Recipient Address</Label>
            <div class="break-all rounded-lg border border-border bg-muted/50 p-3 font-mono text-sm">
              {{ outputAddress }}
            </div>
          </div>

          <!-- Amount and Fee -->
          <div class="grid grid-cols-2 gap-4">
            <div class="space-y-2">
              <Label class="text-sm text-muted-foreground">Amount</Label>
              <div class="rounded-lg border border-border bg-muted/50 p-3 font-semibold">
                {{ outputAmount }} XNT
              </div>
            </div>
            <div class="space-y-2">
              <Label class="text-sm text-muted-foreground">Priority Fee</Label>
              <div class="rounded-lg border border-border bg-muted/50 p-3 font-semibold">
                {{ priorityFee }} XNT
              </div>
            </div>
          </div>

          <Alert>
            <AlertDescription>
              This action cannot be undone. Make sure all details are correct before proceeding.
            </AlertDescription>
          </Alert>
        </div>

        <DialogFooter class="gap-2">
          <Button variant="outline" @click="handleCancelConfirm" :disabled="sendLoading">
            Cancel
          </Button>
          <Button @click="handleConfirmSend" :disabled="sendLoading">
            <span
              v-if="sendLoading"
              class="mr-2 size-4 animate-spin rounded-full border-2 border-white border-t-transparent"
            />
            {{ sendLoading ? 'Sending...' : 'Confirm & Send' }}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</template>

