import { getCustomers, deleteCustomer } from "@/lib/customers/actions"
import { CustomerForm } from "@/components/dashboard/customer-form"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Trash, Edit } from "lucide-react"

export default async function CustomersPage() {
    const { data: customers } = await getCustomers()

    return (
        <div className="flex-1 space-y-4 p-8 pt-6">
            <div className="flex items-center justify-between space-y-2">
                <h2 className="text-3xl font-bold tracking-tight">Müşteriler</h2>
                <div className="flex items-center space-x-2">
                    <CustomerForm />
                </div>
            </div>

            <div className="rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Ad Soyad</TableHead>
                            <TableHead>E-Posta</TableHead>
                            <TableHead>Telefon</TableHead>
                            <TableHead>Adres</TableHead>
                            <TableHead className="w-[100px]">İşlemler</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {customers?.length === 0 && (
                            <TableRow>
                                <TableCell colSpan={5} className="h-24 text-center">
                                    Henüz müşteri bulunmuyor.
                                </TableCell>
                            </TableRow>
                        )}
                        {customers?.map((customer) => (
                            <TableRow key={customer.id}>
                                <TableCell className="font-medium">{customer.full_name}</TableCell>
                                <TableCell>{customer.email || "-"}</TableCell>
                                <TableCell>{customer.phone || "-"}</TableCell>
                                <TableCell className="truncate max-w-[200px]">{customer.address || "-"}</TableCell>
                                <TableCell className="flex items-center gap-2">
                                    <CustomerForm
                                        customer={customer}
                                        trigger={
                                            <Button variant="ghost" size="icon" className="h-8 w-8">
                                                <Edit className="h-4 w-4" />
                                            </Button>
                                        }
                                    />
                                    <form action={async () => {
                                        'use server'
                                        await deleteCustomer(customer.id)
                                    }}>
                                        <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive">
                                            <Trash className="h-4 w-4" />
                                        </Button>
                                    </form>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
}