feat(events): Add Lightning Network ticket purchase flow with QR code generation

- Integrate QRCode library for Lightning payment QR code generation
- Create PurchaseTicketDialog component for ticket purchase workflow
- Implement dynamic ticket purchase API integration with error handling
- Add Lightning wallet payment QR code and deep linking support
- Update events page to trigger ticket purchase dialog
- Configure environment variables for ticket purchase API endpoint

src/pages/events.vue

@@ -1,17 +1,36 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useEvents } from '@/composables/useEvents'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Button } from '@/components/ui/button'
 import { format } from 'date-fns'
+import PurchaseTicketDialog from '@/components/events/PurchaseTicketDialog.vue'
 
 const { upcomingEvents, pastEvents, isLoading, error, refresh } = useEvents()
+const showPurchaseDialog = ref(false)
+const selectedEvent = ref<{
+  id: string
+  name: string
+  price_per_ticket: number
+  currency: string
+} | null>(null)
 
 function formatDate(dateStr: string) {
   return format(new Date(dateStr), 'PPP')
 }
+
+function handlePurchaseClick(event: {
+  id: string
+  name: string
+  price_per_ticket: number
+  currency: string
+}) {
+  selectedEvent.value = event
+  showPurchaseDialog.value = true
+}
 </script>
 
 <template>
@@ -63,7 +82,12 @@ function formatDate(dateStr: string) {
                 </div>
               </CardContent>
               <CardFooter>
-                <Button class="w-full" variant="default" :disabled="event.amount_tickets <= event.sold">
+                <Button 
+                  class="w-full" 
+                  variant="default" 
+                  :disabled="event.amount_tickets <= event.sold"
+                  @click="handlePurchaseClick(event)"
+                >
                   Buy Ticket
                 </Button>
               </CardFooter>
@@ -111,5 +135,11 @@ function formatDate(dateStr: string) {
         </div>
       </TabsContent>
     </Tabs>
+
+    <PurchaseTicketDialog
+      v-if="selectedEvent"
+      :event="selectedEvent"
+      v-model:is-open="showPurchaseDialog"
+    />
   </div>
 </template>