"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useTranslation } from "react-i18next"
import { Search, Filter, ArrowUpDown, Receipt, Download, Edit } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { getOrders } from "@/services/admin_page/query"
import type { Order } from "@/services/types"

export default function PaymentsPage() {
  const { t } = useTranslation()
  const [searchQuery, setSearchQuery] = useState("")
  const [sortBy, setSortBy] = useState<string>("created_at")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")
  const [activeTab, setActiveTab] = useState("all")

  // State for async data
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)

  // Fetch data on component mount
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true)
        const ordersData = await getOrders()
        console.log("orders", ordersData)
        setOrders(Array.isArray(ordersData) ? ordersData : [])
      } catch (error) {
        console.error("Error fetching orders data:", error)
        setOrders([])
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  // Create payments from orders data
  const allPayments = orders.flatMap((order) => {
    if (!order.payments || order.payments.length === 0) {
      // Create a virtual payment entry for orders without payment records
      return [
        {
          id: `order-${order.id}`,
          order_id: order.id,
          order_number: `ORD-${order.id.toString().padStart(6, "0")}`,
          customer_name: order.customer?.name || "Unknown Customer",
          customer_email: order.customer?.email || "",
          amount: Number.parseFloat(order.final_amount),
          payment_method: "Unknown",
          status: order.payment_status,
          created_at: order.created_at,
          total_amount: Number.parseFloat(order.total_amount),
          reference: "",
          description: "",
        },
      ]
    }

    return order.payments.map((payment) => ({
      id: payment.id,
      order_id: order.id,
      order_number: `ORD-${order.id.toString().padStart(6, "0")}`,
      customer_name: order.customer?.name || "Unknown Customer",
      customer_email: order.customer?.email || "",
      amount: Number.parseFloat(payment.amount_paid),
      payment_method: payment.method,
      status: payment.status,
      created_at: payment.created_at,
      total_amount: Number.parseFloat(order.total_amount),
      reference: payment.reference,
      description: payment.description,
    }))
  })

  // Filter payments based on active tab and search query
  const filteredPayments = allPayments.filter((payment) => {
    const matchesTab = activeTab === "all" || payment.status === activeTab
    const matchesSearch =
      payment.order_number.toLowerCase().includes(searchQuery.toLowerCase()) ||
      payment.customer_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      payment.customer_email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      payment.payment_method.toLowerCase().includes(searchQuery.toLowerCase()) ||
      payment.reference.toLowerCase().includes(searchQuery.toLowerCase())

    return matchesTab && matchesSearch
  })

  // Sort payments
  const sortedPayments = [...filteredPayments].sort((a, b) => {
    if (sortBy === "created_at") {
      return sortOrder === "asc"
        ? new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
        : new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
    } else if (sortBy === "amount") {
      return sortOrder === "asc" ? a.amount - b.amount : b.amount - a.amount
    } else if (sortBy === "order_number") {
      return sortOrder === "asc"
        ? a.order_number.localeCompare(b.order_number)
        : b.order_number.localeCompare(a.order_number)
    }
    return 0
  })

  // Get counts for each status
  const statusCounts = {
    all: allPayments.length,
    completed: allPayments.filter((p) => p.status === "completed").length,
    paid: allPayments.filter((p) => p.status === "paid").length,
    pending: allPayments.filter((p) => p.status === "pending").length,
    failed: allPayments.filter((p) => p.status === "failed").length,
    refunded: allPayments.filter((p) => p.status === "refunded").length,
  }

  const toggleSort = (field: string) => {
    if (sortBy === field) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc")
    } else {
      setSortBy(field)
      setSortOrder("asc")
    }
  }

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("en-MY", {
      style: "currency",
      currency: "MYR",
      minimumFractionDigits: 2,
    }).format(amount)
  }

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    }).format(date)
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold font-heading mb-2">{t("admin.payments.title", "Payments")}</h1>
          <p className="text-gray-600">{t("admin.payments.description", "Manage all payment transactions")}</p>
        </div>
        <Button className="bg-primary hover:bg-primary-dark">
          <Download className="mr-2 h-4 w-4" />
          {t("admin.payments.exportCSV", "Export Payments")}
        </Button>
      </div>

      <Card className="border-0 bg-white mb-6">
        <CardContent className="p-6">
          <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
            <div className="relative w-full md:w-96">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
              <Input
                placeholder={t("admin.payments.searchPlaceholder", "Search payments...")}
                className="pl-10 bg-gray-50"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <div className="flex gap-2 w-full md:w-auto">
              <Button variant="outline" className="flex-1 md:flex-none">
                <Filter className="mr-2 h-4 w-4" />
                {t("admin.payments.filter", "Filter")}
              </Button>
              <Button variant="outline" className="flex-1 md:flex-none">
                <Download className="mr-2 h-4 w-4" />
                {t("admin.payments.export", "Export")}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab} className="mb-6">
        <TabsList>
          <TabsTrigger value="all">
            {t("admin.payments.tabs.all", "All")}
            <Badge variant="secondary" className="ml-2">
              {statusCounts.all}
            </Badge>
          </TabsTrigger>
          <TabsTrigger value="paid">
            {t("admin.payments.tabs.paid", "Paid")}
            <Badge variant="secondary" className="ml-2">
              {statusCounts.paid}
            </Badge>
          </TabsTrigger>
          <TabsTrigger value="completed">
            {t("admin.payments.tabs.completed", "Completed")}
            <Badge variant="secondary" className="ml-2">
              {statusCounts.completed}
            </Badge>
          </TabsTrigger>
          <TabsTrigger value="pending">
            {t("admin.payments.tabs.pending", "Pending")}
            <Badge variant="secondary" className="ml-2">
              {statusCounts.pending}
            </Badge>
          </TabsTrigger>
          <TabsTrigger value="failed">
            {t("admin.payments.tabs.failed", "Failed")}
            <Badge variant="secondary" className="ml-2">
              {statusCounts.failed}
            </Badge>
          </TabsTrigger>
          <TabsTrigger value="refunded">
            {t("admin.payments.tabs.refunded", "Refunded")}
            <Badge variant="secondary" className="ml-2">
              {statusCounts.refunded}
            </Badge>
          </TabsTrigger>
        </TabsList>
      </Tabs>

      {loading && (
        <div className="flex justify-center items-center py-8">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </div>
      )}

      {!loading && (
        <>
          <Card className="border-0 bg-white">
            <CardHeader className="pb-0">
              <CardTitle className="text-xl font-heading">{t("admin.payments.allPayments", "All Payments")}</CardTitle>
              <CardDescription>
                {filteredPayments.length} {t("admin.payments.found", "payments found")}
              </CardDescription>
            </CardHeader>
            <CardContent className="p-6">
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-gray-200">
                      <th className="text-left py-3 px-4 font-medium text-gray-600">
                        <div className="flex items-center">
                          <button
                            onClick={() => toggleSort("order_number")}
                            className="flex items-center focus:outline-none"
                          >
                            {t("admin.payments.table.orderNumber", "Order")}
                            <ArrowUpDown className="ml-1 h-4 w-4" />
                          </button>
                        </div>
                      </th>
                      <th className="text-left py-3 px-4 font-medium text-gray-600">
                        {t("admin.payments.table.customer", "Customer")}
                      </th>
                      <th className="text-center py-3 px-4 font-medium text-gray-600">
                        <button
                          onClick={() => toggleSort("amount")}
                          className="flex items-center justify-center mx-auto focus:outline-none"
                        >
                          {t("admin.payments.table.amount", "Amount")}
                          <ArrowUpDown className="ml-1 h-4 w-4" />
                        </button>
                      </th>
                      <th className="text-center py-3 px-4 font-medium text-gray-600">
                        {t("admin.payments.table.paymentMethod", "Payment Method")}
                      </th>
                      <th className="text-center py-3 px-4 font-medium text-gray-600">
                        {t("admin.payments.table.reference", "Reference")}
                      </th>
                      <th className="text-center py-3 px-4 font-medium text-gray-600">
                        <button
                          onClick={() => toggleSort("created_at")}
                          className="flex items-center justify-center mx-auto focus:outline-none"
                        >
                          {t("admin.payments.table.date", "Date")}
                          <ArrowUpDown className="ml-1 h-4 w-4" />
                        </button>
                      </th>
                      <th className="text-center py-3 px-4 font-medium text-gray-600">
                        {t("admin.payments.table.status", "Status")}
                      </th>
                      <th className="text-center py-3 px-4 font-medium text-gray-600">
                        {t("admin.payments.table.actions", "Actions")}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {sortedPayments.length === 0 ? (
                      <tr>
                        <td colSpan={8} className="text-center py-8">
                          <div className="flex flex-col items-center justify-center text-muted-foreground">
                            <Receipt className="h-12 w-12 mb-2 opacity-20" />
                            <p>{t("admin.payments.noPayments", "No payments found")}</p>
                            <p className="text-sm">
                              {t("admin.payments.tryDifferentFilters", "Try different filters or search terms")}
                            </p>
                          </div>
                        </td>
                      </tr>
                    ) : (
                      sortedPayments.map((payment, index) => (
                        <tr
                          key={payment.id}
                          className={`border-b border-gray-100 ${index % 2 === 0 ? "bg-gray-50" : "bg-white"}`}
                        >
                          <td className="py-4 px-4">
                            <div className="flex items-center">
                              <div>
                                <span className="font-medium text-gray-900">{payment.order_number}</span>
                              </div>
                            </div>
                          </td>
                          <td className="py-4 px-4">
                            <div className="font-medium text-gray-900">{payment.customer_name}</div>
                            <div className="text-sm text-gray-500">{payment.customer_email}</div>
                          </td>
                          <td className="text-center py-4 px-4">
                            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                              {formatCurrency(payment.amount)}
                            </Badge>
                          </td>
                          <td className="text-center py-4 px-4 text-gray-500 capitalize">
                            {payment.payment_method.replace("_", " ")}
                          </td>
                          <td className="text-center py-4 px-4 text-gray-500 text-sm">
                            {payment.reference
                              ? payment.reference.substring(0, 12) + (payment.reference.length > 12 ? "..." : "")
                              : "-"}
                          </td>
                          <td className="text-center py-4 px-4 text-gray-500">{formatDate(payment.created_at)}</td>
                          <td className="text-center py-4 px-4">
                            <StatusBadge status={payment.status} />
                          </td>
                          <td className="text-center py-4 px-4">
                            <div className="flex gap-2 justify-center">
                              <Button variant="outline" size="sm" asChild>
                                <Link href={`/admin/payments/${payment.order_id}`}>
                                  <Edit className="h-4 w-4 mr-1" />
                                  Edit
                                </Link>
                              </Button>
                              {payment.status === "completed" && (
                                <Button variant="outline" size="sm" asChild>
                                  <Link
                                    href={`/admin/payment/receipt?id=${payment.order_id}&email=${encodeURIComponent(payment.customer_email)}`}
                                  >
                                    <Receipt className="h-4 w-4 mr-1" />
                                    Receipt
                                  </Link>
                                </Button>
                              )}
                            </div>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </>
      )}
    </div>
  )
}

function StatusBadge({ status }: { status: string }) {
  const { t } = useTranslation()

  const statusStyles = {
    completed: "bg-green-100 text-green-800 hover:bg-green-100",
    paid: "bg-green-100 text-green-800 hover:bg-green-100",
    pending: "bg-yellow-100 text-yellow-800 hover:bg-yellow-100",
    failed: "bg-red-100 text-red-800 hover:bg-red-100",
    refunded: "bg-purple-100 text-purple-800 hover:bg-purple-100",
  }

  return (
    <Badge className={`${statusStyles[status] || "bg-gray-100 text-gray-800"} cursor-default`}>
      {t(`admin.payments.status.${status}`, status)}
    </Badge>
  )
}