"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Search, Filter, Receipt, ChevronUp, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { getStudentOrders } from "@/services/students/query"
import type { Order, OrderPayment } from "@/services/types"
import { PaymentStatus } from "@/services/types"

export default function StudentPaymentsPage() {
  const router = useRouter()
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [sortField, setSortField] = useState<"id" | "created_at" | "final_amount">("created_at")
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc")

  // Mock student ID - in real app, get from auth context
  const studentId = 1

  useEffect(() => {
    const fetchOrders = async () => {
      try {
        setLoading(true)
        console.log("[payments] Fetching orders for student:", studentId)
        const ordersData = await getStudentOrders(studentId)
        console.log("[payments] Orders fetched:", ordersData)
        setOrders(ordersData)
        setError(null)
      } catch (err) {
        console.error("[payments] Error fetching orders:", err)
        setError("Failed to load orders")
      } finally {
        setLoading(false)
      }
    }

    fetchOrders()
  }, [studentId])

  const handleSort = (field: "id" | "created_at" | "final_amount") => {
    if (sortField === field) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortField(field)
      setSortDirection("desc")
    }
  }

  const filteredOrders = orders.filter((order) => {
    const searchLower = searchTerm.toLowerCase()
    const orderIdMatch = order.id.toString().includes(searchLower)
    const itemsMatch =
      order.items?.some(
        (item) => item.item_type.toLowerCase().includes(searchLower) || item.item_id.toString().includes(searchLower),
      ) || false
    const paymentMatch =
      order.payments?.some(
        (payment) =>
          payment.method.toLowerCase().includes(searchLower) ||
          payment.description.toLowerCase().includes(searchLower) ||
          payment.reference.toLowerCase().includes(searchLower),
      ) || false

    return orderIdMatch || itemsMatch || paymentMatch
  })

  const sortedOrders = [...filteredOrders].sort((a, b) => {
    let aValue: any
    let bValue: any

    switch (sortField) {
      case "id":
        aValue = a.id
        bValue = b.id
        break
      case "created_at":
        aValue = new Date(a.created_at)
        bValue = new Date(b.created_at)
        break
      case "final_amount":
        aValue = Number.parseFloat(a.final_amount)
        bValue = Number.parseFloat(b.final_amount)
        break
      default:
        return 0
    }

    if (sortDirection === "asc") {
      return aValue > bValue ? 1 : -1
    } else {
      return aValue < bValue ? 1 : -1
    }
  })

  const getStatusBadge = (status: string) => {
    const variants: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
      completed: "default",
      pending: "secondary",
      cancelled: "destructive",
      refunded: "outline",
    }
    return <Badge variant={variants[status] || "outline"}>{status.charAt(0).toUpperCase() + status.slice(1)}</Badge>
  }

  /*const getPaymentStatusBadge = (status: string) => {
    const variants: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
      paid: "default",
      pending: "secondary",
      failed: "destructive",
      refunded: "outline",
    }
    return <Badge variant={variants[status] || "outline"}>{status.charAt(0).toUpperCase() + status.slice(1)}</Badge>
  }*/

  const getPaymentStatusBadge = (status: PaymentStatus) => {

  const variants: Record<PaymentStatus, "default" | "secondary" | "destructive" | "outline"> = {
    [PaymentStatus.PAID]: "default",
    [PaymentStatus.PENDING]: "secondary",
    [PaymentStatus.FAILED]: "destructive",
    [PaymentStatus.REFUNDED]: "outline",
  };


  return (
    <Badge variant={variants[status]}>
      {status.charAt(0).toUpperCase() + status.slice(1)}
    </Badge>
  );
};

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

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

  const getItemsDisplay = (items: Order["items"]) => {
    if (!items || items.length === 0) {
      return <span className="text-muted-foreground">No items</span>
    }

    return (
      <div className="space-y-1">
        {items.map((item, index) => (
          <div key={index} className="text-sm">
            <span className="font-medium">
              {item.item_type === "course_package" ? "Package" : "Course"} #{item.item_id}
            </span>
            {item.quantity > 1 && <span className="text-muted-foreground"> × {item.quantity}</span>}
            <div className="text-xs text-muted-foreground">{formatAmount(item.unit_price)} each</div>
          </div>
        ))}
      </div>
    )
  }

  const getPaymentDisplay = (payments: Order["payments"]) => {
    if (!payments || payments.length === 0) {
      return <span className="text-muted-foreground">No payment</span>
    }

    const payment = payments[0] // Show first payment
    return (
      <div className="space-y-1">
        <div className="font-medium capitalize">{payment.method.replace("_", " ")}</div>
        <div className="text-sm text-muted-foreground">{payment.description}</div>
        {payment.reference && <div className="text-xs text-muted-foreground">Ref: {payment.reference}</div>}
      </div>
    )
  }

  const SortButton = ({
    field,
    children,
  }: { field: "id" | "created_at" | "final_amount"; children: React.ReactNode }) => (
    <Button variant="ghost" size="sm" className="h-auto p-0 font-medium" onClick={() => handleSort(field)}>
      {children}
      {sortField === field &&
        (sortDirection === "asc" ? <ChevronUp className="ml-1 h-3 w-3" /> : <ChevronDown className="ml-1 h-3 w-3" />)}
    </Button>
  )

  if (loading) {
    return (
      <div className="p-6">
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="p-6">
        <Card>
          <CardContent className="p-6">
            <div className="text-center">
              <p className="text-red-600 mb-4">{error}</p>
              <Button onClick={() => window.location.reload()}>Try Again</Button>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Payment History</h1>
          <p className="text-muted-foreground">View and manage your order payments</p>
        </div>
      </div>

      <div className="flex items-center justify-end mb-4">
        <div className="flex items-center gap-2">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search orders..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-9 w-64"
            />
          </div>
          <Button variant="outline" size="sm">
            <Filter className="h-4 w-4 mr-2" />
            Filter
          </Button>
        </div>
      </div>

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>
                <SortButton field="id">Order ID</SortButton>
              </TableHead>
              <TableHead>
                <SortButton field="created_at">Date</SortButton>
              </TableHead>
              <TableHead>Items</TableHead>
              <TableHead>
                <SortButton field="final_amount">Amount</SortButton>
              </TableHead>
       
              <TableHead>Payment Status</TableHead>
              <TableHead className="w-12">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {sortedOrders.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="h-[300px] text-center">
                  <div className="flex flex-col items-center justify-center gap-2">
                    <p className="text-lg font-medium">No orders found</p>
                    <p className="text-sm text-muted-foreground">
                      {searchTerm ? "Try adjusting your search" : "You haven't made any orders yet"}
                    </p>
                  </div>
                </TableCell>
              </TableRow>
            ) : (
              sortedOrders.map((order) => (
                <TableRow
                  key={order.id}
                  className="cursor-pointer hover:bg-muted/50"
                  onClick={() => router.push(`/student/payment/${order.id}/receipt`)}
                >
                  <TableCell className="font-medium">#{order.id.toString().padStart(6, "0")}</TableCell>
                  <TableCell>{formatDate(order.created_at)}</TableCell>
                  <TableCell>{getItemsDisplay(order.items)}</TableCell>
                  <TableCell>
                    <div className="space-y-1">
                      {Number.parseFloat(order.discount_amount || "0") > 0 && (
                        <div className="text-sm text-muted-foreground line-through">
                          {formatAmount(order.total_amount)}
                        </div>
                      )}
                      <div className="font-medium">{formatAmount(order.final_amount)}</div>
                      {Number.parseFloat(order.discount_amount || "0") > 0 && (
                        <div className="text-sm text-green-600">-{formatAmount(order.discount_amount)} discount</div>
                      )}
                    </div>
                  </TableCell>
                  
                  <TableCell>{ getPaymentStatusBadge(order.payments?.[0]?.status ?? PaymentStatus.PENDING) }</TableCell>
                  <TableCell onClick={(e) => e.stopPropagation()}>
                    <div className="flex items-center gap-1">
                      {order.payments?.[0]?.status === PaymentStatus.PAID && (
                        <Button
                          variant="outline"
                          size="sm"
                          className="flex items-center gap-1"
                          onClick={(e) => {
                            e.stopPropagation()
                            router.push(`/student/payment/${order.id}/receipt`)
                          }}
                        >
                          <Receipt className="h-4 w-4" />
                          <span>Receipt</span>
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* Summary Information */}
      {orders.length > 0 && (
        <Card>
          <CardContent className="p-4">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
              <div>
                <span className="text-muted-foreground">Total Orders:</span>
                <span className="ml-2 font-medium">{orders.length}</span>
              </div>
              <div>
                <span className="text-muted-foreground">Completed:</span>
                <span className="ml-2 font-medium text-green-600">
                  {orders.filter((o) => o.status === "completed").length}
                </span>
              </div>
              <div>
                <span className="text-muted-foreground">Pending:</span>
                <span className="ml-2 font-medium text-yellow-600">
                  {orders.filter((o) => o.status === "pending").length}
                </span>
              </div>
              <div>
                <span className="text-muted-foreground">Total Spent:</span>
                <span className="ml-2 font-medium">
                  {formatAmount(
                    orders
                      .filter((o) => o.status === "completed")
                      .reduce((sum, order) => sum + Number.parseFloat(order.final_amount), 0)
                      .toString(),
                  )}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}