<template>
  <div class="min-h-screen bg-gray-50">
    <nav class="bg-white shadow">
      <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between">
        <router-link to="/" class="text-2xl font-bold text-red-600">Food Delivery</router-link>
        <router-link to="/profile" class="text-gray-700 hover:text-red-600">Profile</router-link>
      </div>
    </nav>

    <div class="max-w-4xl mx-auto px-4 py-8">
      <h1 class="text-3xl font-bold mb-8">My Wallet</h1>

      <div class="bg-gradient-to-r from-red-500 to-red-600 rounded-lg shadow-lg p-8 text-white mb-8">
        <div class="text-sm mb-2">Available Balance</div>
        <div class="text-5xl font-bold mb-4">${{ wallet.balance || 0 }}</div>
        <button @click="showAddFunds = true" class="bg-white text-red-600 px-6 py-2 rounded-lg font-bold hover:bg-gray-100">
          + Add Funds
        </button>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-bold mb-4">Transaction History</h2>
        
        <div v-if="transactions.length === 0" class="text-center py-8 text-gray-500">
          No transactions yet
        </div>

        <div v-else class="space-y-3">
          <div v-for="transaction in transactions" :key="transaction.id" class="flex justify-between items-center border-b pb-3">
            <div>
              <div class="font-medium">{{ transaction.description }}</div>
              <div class="text-sm text-gray-500">{{ formatDate(transaction.created_at) }}</div>
            </div>
            <div :class="transaction.type === 'credit' ? 'text-green-600' : 'text-red-600'" class="font-bold">
              {{ transaction.type === 'credit' ? '+' : '-' }}${{ transaction.amount }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Add Funds Modal -->
    <div v-if="showAddFunds" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-full max-w-md">
        <h3 class="text-xl font-bold mb-4">Add Funds</h3>
        <input v-model.number="addAmount" type="number" placeholder="Enter amount" class="w-full px-4 py-2 border rounded-lg mb-4">
        <div class="flex gap-3">
          <button @click="addFunds" class="flex-1 bg-red-600 text-white py-2 rounded-lg hover:bg-red-700">
            Add Funds
          </button>
          <button @click="showAddFunds = false" class="flex-1 bg-gray-300 text-gray-700 py-2 rounded-lg hover:bg-gray-400">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '../services/api';

const wallet = ref({});
const transactions = ref([]);
const showAddFunds = ref(false);
const addAmount = ref(0);

const fetchWallet = async () => {
  try {
    const walletRes = await api.get('/wallet/balance');
    wallet.value = walletRes.data;

    const transactionsRes = await api.get('/wallet/transactions');
    transactions.value = transactionsRes.data.data;
  } catch (error) {
    console.error('Error:', error);
  }
};

const addFunds = async () => {
  try {
    await api.post('/wallet/add-funds', { amount: addAmount.value });
    showAddFunds.value = false;
    addAmount.value = 0;
    await fetchWallet();
  } catch (error) {
    alert('Failed to add funds');
  }
};

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
};

onMounted(fetchWallet);
</script>
