"use client"

import { useState, useEffect } from "react"
import { useTranslation } from "react-i18next"
import { useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { format } from "date-fns"
import { ArrowLeft, Download, Printer, Send, CheckCircle2 } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"

import { orders } from "@/services/orders/query"
import { getOrderItemsByOrderId } from "@/services/order_items/query"
import { getPaymentsByOrderId } from "@/services/order_payments/query"

export default function InvoiceDetailPage({ params }: { params: { id: string } }) {
  const { t } = useTranslation()
  const router = useRouter()
  const orderId = Number.parseInt(params.id)

  const [order, setOrder] = useState<any>(null)
  const [items, setItems] = useState<any[]>([])
  const [payment, setPayment] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Find the order
    const foundOrder = orders.find((o) => o.id === orderId)
    if (!foundOrder) {
      router.push("/admin/payments")
      return
    }

    // Get order items
    const orderItemsList = getOrderItemsByOrderId(orderId)

    // Get payment
    const payments = getPaymentsByOrderId(orderId)
    const primaryPayment = payments.length > 0 ? payments[0] : null

    setOrder(foundOrder)
    setItems(orderItemsList)
    setPayment(primaryPayment)
    setLoading(false)
  }, [orderId, router])

  if (loading) {
    return <div>{t("admin.loading", "Loading...")}</div>
  }

  if (!order) {
    return <div>{t("admin.notFound", "Invoice not found")}</div>
  }

  // Format currency
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("zh-CN", {
      style: "currency",
      currency: "CNY",
    }).format(amount)
  }

  // Company details
  const companyDetails = {
    name: "WorldMind Education",
    address: {
      line1: "789 Beijing Road",
      city: "Beijing",
      state: "Beijing",
      postalCode: "100000",
      country: "China",
    },
    taxId: "TAX-123456789",
    phone: "+86 10 1234 5678",
    email: "billing@worldmind.edu",
  }

  // Customer details (mock since we don't have full customer data in the order)
  const customerDetails = {
    name: `Customer #${order.student_id}`,
    address: {
      line1: "Customer Address",
      city: "Customer City",
      state: "Customer State",
      postalCode: "000000",
      country: "China",
    },
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <Button variant="ghost" size="sm" asChild>
          <Link href={`/admin/payment/${payment ? payment.id : order.id}`}>
            <ArrowLeft className="h-4 w-4 mr-1" />
            {t("admin.invoice.backToPayment", "Back to payment")}
          </Link>
        </Button>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm">
            <Send className="h-4 w-4 mr-1" />
            {t("admin.invoice.sendToCustomer", "Send to Customer")}
          </Button>
          <Button variant="outline" size="sm">
            <Printer className="h-4 w-4 mr-1" />
            {t("admin.invoice.print", "Print")}
          </Button>
          <Button variant="outline" size="sm">
            <Download className="h-4 w-4 mr-1" />
            {t("admin.invoice.download", "Download PDF")}
          </Button>
        </div>
      </div>

      <Card className="border-0 shadow-md bg-white">
        <CardContent className="p-8">
          <div className="space-y-8">
            {/* Header */}
            <div className="flex justify-between items-start">
              <div>
                <div className="h-12 w-48 relative mb-2">
                  <Image
                    src="/world-mind-logo.png"
                    alt="WorldMind Logo"
                    fill
                    style={{ objectFit: "contain" }}
                    className="object-left"
                  />
                </div>
                <div>
                  <p className="font-medium">{companyDetails.name}</p>
                  <p>{companyDetails.address.line1}</p>
                  <p>
                    {companyDetails.address.city}, {companyDetails.address.state} {companyDetails.address.postalCode}
                  </p>
                  <p>{companyDetails.address.country}</p>
                </div>
              </div>
              <div className="text-right">
                <h1 className="text-2xl font-bold mb-1">{t("admin.invoice.invoice", "INVOICE")}</h1>
                <p className="text-muted-foreground mb-4">#{order.id}</p>
                <div className="space-y-1">
                  <div className="flex justify-end gap-4">
                    <span className="text-muted-foreground">{t("admin.invoice.issueDate", "Issue Date")}:</span>
                    <span>{format(new Date(order.created_at), "PPP")}</span>
                  </div>
                  <div className="flex justify-end gap-4">
                    <span className="text-muted-foreground">{t("admin.invoice.status", "Status")}:</span>
                    <Badge className="bg-green-100 text-green-700 hover:bg-green-100">
                      <CheckCircle2 className="h-3 w-3 mr-1" />
                      {order.payment_status.toUpperCase()}
                    </Badge>
                  </div>
                  {payment && (
                    <div className="flex justify-end gap-4">
                      <span className="text-muted-foreground">{t("admin.invoice.paymentDate", "Payment Date")}:</span>
                      <span>{format(new Date(payment.paid_at), "PPP")}</span>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Bill To / Payment Method */}
            <div className="grid grid-cols-2 gap-8">
              <div>
                <h2 className="text-lg font-semibold mb-2">{t("admin.invoice.billTo", "Bill To")}</h2>
                <div className="space-y-1">
                  <p className="font-medium">{customerDetails.name}</p>
                  <p>{customerDetails.address.line1}</p>
                  <p>
                    {customerDetails.address.city}, {customerDetails.address.state} {customerDetails.address.postalCode}
                  </p>
                  <p>{customerDetails.address.country}</p>
                </div>
              </div>
              <div>
                <h2 className="text-lg font-semibold mb-2">{t("admin.invoice.paymentMethod", "Payment Method")}</h2>
                <p>{payment ? payment.method : t("admin.invoice.notSpecified", "Not specified")}</p>
                <p className="text-muted-foreground">
                  {t("admin.invoice.orderNumber", "Order Number")}: {order.id}
                </p>
                {payment && (
                  <p className="text-muted-foreground">
                    {t("admin.invoice.reference", "Reference")}: {payment.reference}
                  </p>
                )}
              </div>
            </div>

            {/* Items */}
            <div>
              <table className="w-full">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-3 font-semibold">{t("admin.invoice.item", "Item")}</th>
                    <th className="text-right py-3 font-semibold">{t("admin.invoice.quantity", "Quantity")}</th>
                    <th className="text-right py-3 font-semibold">{t("admin.invoice.unitPrice", "Unit Price")}</th>
                    <th className="text-right py-3 font-semibold">{t("admin.invoice.amount", "Amount")}</th>
                  </tr>
                </thead>
                <tbody>
                  {items.length > 0 ? (
                    items.map((item) => (
                      <tr key={item.id} className="border-b">
                        <td className="py-4">
                          <div>
                            <p className="font-medium">{item.item_type}</p>
                            <p className="text-sm text-muted-foreground">Item #{item.item_id}</p>
                          </div>
                        </td>
                        <td className="py-4 text-right">{item.quantity}</td>
                        <td className="py-4 text-right">{formatCurrency(item.unit_price)}</td>
                        <td className="py-4 text-right">{formatCurrency(item.total_price)}</td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan={4} className="py-4 text-center text-muted-foreground">
                        {t("admin.invoice.noItems", "No items found for this order")}
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>

            {/* Totals */}
            <div className="flex justify-end">
              <div className="w-64 space-y-2">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">{t("admin.invoice.subtotal", "Subtotal")}:</span>
                  <span>{formatCurrency(order.total_amount)}</span>
                </div>
                {order.discount_amount > 0 && (
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{t("admin.invoice.discount", "Discount")}:</span>
                    <span>-{formatCurrency(order.discount_amount)}</span>
                  </div>
                )}
                <Separator />
                <div className="flex justify-between font-semibold">
                  <span>{t("admin.invoice.total", "Total")}:</span>
                  <span>{formatCurrency(order.final_amount)}</span>
                </div>
                {payment && (
                  <div className="flex justify-between font-semibold text-green-600">
                    <span>{t("admin.invoice.amountPaid", "Amount Paid")}:</span>
                    <span>{formatCurrency(payment.amount_paid)}</span>
                  </div>
                )}
              </div>
            </div>

            {/* Footer */}
            <div className="border-t pt-6 text-center text-sm text-muted-foreground">
              <p>
                {t("admin.invoice.contactInfo", "If you have any questions, please contact us at")}{" "}
                {companyDetails.email} {t("admin.invoice.or", "or")} {companyDetails.phone}
              </p>
              <p className="mt-1">{t("admin.invoice.thankYou", "Thank you for choosing WorldMind Education!")}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}