import { getAllInvoices } from "@/lib/actions/invoice.actions"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FileText, Plus, TrendingUp, AlertCircle, CheckCircle2 } from "lucide-react"
import { InvoicesTable } from "@/components/admin/invoices-table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"

export const dynamic = "force-dynamic"

export const metadata = {
  title: "Számlák - Admin - FABRIKA NABYTOK",
  description: "Számla kezelés és kiállítás",
}

interface PageProps {
  searchParams: Promise<{
    status?: string
    paymentStatus?: string
    search?: string
  }>
}

export default async function InvoicesPage({ searchParams }: PageProps) {
  const params = await searchParams
  const result = await getAllInvoices(params)

  const invoices = result.success ? result.invoices : []

  // Calculate stats
  const totalInvoices = invoices.length
  const paidInvoices = invoices.filter((i: any) => i.paymentStatus === "paid").length
  const unpaidInvoices = invoices.filter((i: any) => i.paymentStatus === "unpaid").length
  const overdueInvoices = invoices.filter((i: any) => {
    return i.paymentStatus !== "paid" && new Date(i.dueDate) < new Date()
  }).length
  
  const totalRevenue = invoices.reduce((sum: number, i: any) => sum + (i.totalGross || 0), 0)
  const totalPaid = invoices.reduce((sum: number, i: any) => sum + (i.paidAmount || 0), 0)
  const totalOutstanding = totalRevenue - totalPaid

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Számlák</h1>
          <p className="text-muted-foreground mt-2">Számlák kezelése és kiállítása</p>
        </div>
        <Button asChild>
          <Link href="/admin/invoices/create">
            <Plus className="w-4 h-4 mr-2" />
            Új számla
          </Link>
        </Button>
      </div>

      {/* Stats */}
      <div className="grid gap-6 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Összes számla</CardTitle>
            <FileText className="w-4 h-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalInvoices}</div>
            <p className="text-xs text-muted-foreground mt-1">
              {paidInvoices} fizetve
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Teljes bevétel</CardTitle>
            <TrendingUp className="w-4 h-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totalRevenue.toLocaleString("hu-HU")} Ft
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              Összes kiállított számla
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Kinnlévőség</CardTitle>
            <AlertCircle className="w-4 h-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-orange-600">
              {totalOutstanding.toLocaleString("hu-HU")} Ft
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              {unpaidInvoices} számla
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Lejárt</CardTitle>
            <AlertCircle className="w-4 h-4 text-destructive" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-destructive">
              {overdueInvoices}
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              Lejárt számlák
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Invoices Table */}
      <Card>
        <CardHeader>
          <CardTitle>Összes számla</CardTitle>
          <CardDescription>Kezelje a kiállított számlákat</CardDescription>
        </CardHeader>
        <CardContent>
          <InvoicesTable invoices={invoices} />
        </CardContent>
      </Card>
    </div>
  )
}