"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"
import { getOrderById } from "@/services/orders/query"
import { getPaymentsByOrderId, updatePayment } from "@/services/order_payments/query"
import { PaymentStatus } from "@/services/types"
import type { Order, OrderPayment } from "@/services/types"

export default function PaymentDetailsPage() {
  const params = useParams()
  const orderId = Number.parseInt(params.id as string)
  const { toast } = useToast()

  const [order, setOrder] = useState<Order | null>(null)
  const [payments, setPayments] = useState<OrderPayment[]>([])
  const [loading, setLoading] = useState(true)
  const [updatingPayment, setUpdatingPayment] = useState<number | null>(null)

  useEffect(() => {
    loadData()
  }, [orderId])

  const loadData = async () => {
    try {
      console.log("Loading order and payments data for order:", orderId)
      setLoading(true)

      // Fetch order details
      const orderResponse = await getOrderById(orderId)
      console.log("[Order]", { id: orderResponse.id, total_amount: orderResponse.total_amount })
      setOrder(orderResponse)

      // Fetch payments for this order
      const paymentsResponse = await getPaymentsByOrderId(orderId)
      console.log(
        "[Payments]",
        paymentsResponse.map((p) => ({ id: p.id, method: p.method, status: p.status })),
      )
      setPayments(paymentsResponse)
    } catch (error) {
      console.error("Error loading data:", error)
      toast({
        title: "Error",
        description: "Failed to load payment data",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

  const handleStatusUpdate = async (paymentId: number, newStatus: PaymentStatus) => {
    try {
      console.log("Updating payment status:", paymentId, "to:", newStatus)
      setUpdatingPayment(paymentId)

      await updatePayment(paymentId, { status: newStatus })
      console.log("[Payment Updated]", { id: paymentId, status: newStatus })

      // Refresh payments data
      const updatedPayments = await getPaymentsByOrderId(orderId)
      setPayments(updatedPayments)

      toast({
        title: "Success",
        description: "Payment status updated successfully",
      })
    } catch (error) {
      console.error("Error updating payment status:", error)
      toast({
        title: "Error",
        description: "Failed to update payment status",
        variant: "destructive",
      })
    } finally {
      setUpdatingPayment(null)
    }
  }

  const getStatusBadgeVariant = (status: PaymentStatus) => {
    switch (status) {
      case PaymentStatus.PAID:
        return "default"
      case PaymentStatus.PENDING:
        return "secondary"
      case PaymentStatus.FAILED:
        return "destructive"
      case PaymentStatus.REFUNDED:
        return "outline"
      default:
        return "secondary"
    }
  }

  const formatCurrency = (amount: string) => {
    return `$${Number.parseFloat(amount).toFixed(2)}`
  }

  const formatDate = (dateString: string | null) => {
    if (!dateString) return "N/A"
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

  if (loading) {
    return (
      <div className="container mx-auto py-6">
        <div className="flex items-center justify-center h-64">
          <div className="text-lg">Loading payment details...</div>
        </div>
      </div>
    )
  }

  if (!order) {
    return (
      <div className="container mx-auto py-6">
        <div className="flex items-center justify-center h-64">
          <div className="text-lg text-muted-foreground">Order not found</div>
        </div>
      </div>
    )
  }

  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* Page Title */}
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Payments for Order {orderId}</h1>
        <p className="text-muted-foreground">Manage payment details and status for this order</p>
      </div>

      {/* Order Details */}
      <Card>
        <CardHeader>
          <CardTitle>Order Details</CardTitle>
          <CardDescription>Basic information about this order</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
              <div className="text-sm font-medium text-muted-foreground">Order ID</div>
              <div className="text-lg font-semibold">{order.id}</div>
            </div>
            <div>
              <div className="text-sm font-medium text-muted-foreground">Student ID</div>
              <div className="text-lg font-semibold">{order.student_id}</div>
            </div>
            <div>
              <div className="text-sm font-medium text-muted-foreground">Total Amount</div>
              <div className="text-lg font-semibold">{formatCurrency(order.total_amount)}</div>
            </div>
            <div>
              <div className="text-sm font-medium text-muted-foreground">Final Amount</div>
              <div className="text-lg font-semibold">{formatCurrency(order.final_amount)}</div>
            </div>
            <div>
              <div className="text-sm font-medium text-muted-foreground">Order Status</div>
              <Badge variant="outline">{order.status}</Badge>
            </div>
            <div>
              <div className="text-sm font-medium text-muted-foreground">Payment Status</div>
              <Badge variant={getStatusBadgeVariant(order.payment_status as PaymentStatus)}>
                {order.payment_status}
              </Badge>
            </div>
            <div>
              <div className="text-sm font-medium text-muted-foreground">Discount</div>
              <div className="text-lg font-semibold">{formatCurrency(order.discount_amount)}</div>
            </div>
            <div>
              <div className="text-sm font-medium text-muted-foreground">Created</div>
              <div className="text-sm">{formatDate(order.created_at)}</div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Separator />

      {/* Payments Table */}
      <Card>
        <CardHeader>
          <CardTitle>Payment Records</CardTitle>
          <CardDescription>All payment transactions for this order ({payments.length} records)</CardDescription>
        </CardHeader>
        <CardContent>
          {payments.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">No payment records found for this order</div>
          ) : (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Method</TableHead>
                    <TableHead>Description</TableHead>
                    <TableHead>Amount Paid</TableHead>
                    <TableHead>Reference</TableHead>
                    <TableHead>Paid At</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Update Status</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {payments.map((payment) => (
                    <TableRow key={payment.id}>
                      <TableCell>
                        <Badge variant="outline">{payment.method.replace("_", " ").toUpperCase()}</Badge>
                      </TableCell>
                      <TableCell>{payment.description}</TableCell>
                      <TableCell className="font-medium">{formatCurrency(payment.amount_paid)}</TableCell>
                      <TableCell className="font-mono text-sm">{payment.reference || "N/A"}</TableCell>
                      <TableCell>{formatDate(payment.paid_at)}</TableCell>
                      <TableCell>
                        <Badge variant={getStatusBadgeVariant(payment.status as PaymentStatus)}>{payment.status}</Badge>
                      </TableCell>
                      <TableCell>
                        <Select
                          value={payment.status}
                          onValueChange={(value) => handleStatusUpdate(payment.id, value as PaymentStatus)}
                          disabled={updatingPayment === payment.id}
                        >
                          <SelectTrigger className="w-32">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value={PaymentStatus.PAID}>Paid</SelectItem>
                            <SelectItem value={PaymentStatus.PENDING}>Pending</SelectItem>
                            <SelectItem value={PaymentStatus.FAILED}>Failed</SelectItem>
                            <SelectItem value={PaymentStatus.REFUNDED}>Refunded</SelectItem>
                          </SelectContent>
                        </Select>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}