import { createClient } from "@/lib/supabase/server"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Plus, Calendar as CalendarIcon, Clock, MapPin, User, Package } from "lucide-react"
import Link from "next/link"
import { format } from "date-fns"
import { tr } from "date-fns/locale"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"

export default async function ReservationsPage() {
    const supabase = await createClient()

    const { data: reservations } = await supabase
        .from('reservations')
        .select(`
      id,
      start_time,
      end_time,
      status,
      halls (name),
      customers (full_name),
      packages (name, price)
    `)
        .order('start_time', { ascending: true })

    const getStatusBadge = (status: string) => {
        switch (status) {
            case 'confirmed': return <Badge className="bg-green-600">Onaylandı</Badge>
            case 'pending': return <Badge variant="secondary">Bekliyor</Badge>
            case 'cancelled': return <Badge variant="destructive">İptal</Badge>
            case 'completed': return <Badge variant="outline">Tamamlandı</Badge>
            default: return <Badge>{status}</Badge>
        }
    }

    return (
        <div className="space-y-6">
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <h2 className="text-3xl font-bold tracking-tight">Rezervasyonlar</h2>
                <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
                    <Link href="/dashboard/calendar" className="w-full sm:w-auto">
                        <Button variant="outline" className="w-full">
                            <CalendarIcon className="mr-2 h-4 w-4" /> Takvim Görünümü
                        </Button>
                    </Link>
                    <Link href="/dashboard/reservations/new" className="w-full sm:w-auto">
                        <Button className="w-full">
                            <Plus className="mr-2 h-4 w-4" /> Yeni Rezervasyon
                        </Button>
                    </Link>
                </div>
            </div>

            {/* Desktop View */}
            <div className="hidden md:block rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Tarih</TableHead>
                            <TableHead>Saat</TableHead>
                            <TableHead>Salon</TableHead>
                            <TableHead>Müşteri</TableHead>
                            <TableHead>Paket</TableHead>
                            <TableHead>Durum</TableHead>
                            <TableHead className="text-right">İşlemler</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {reservations?.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={7} className="text-center h-24 text-muted-foreground">
                                    Henüz rezervasyon yok.
                                </TableCell>
                            </TableRow>
                        ) : (
                            reservations?.map((res) => (
                                <TableRow key={res.id}>
                                    <TableCell className="font-medium">
                                        {format(new Date(res.start_time), 'd MMMM yyyy', { locale: tr })}
                                    </TableCell>
                                    <TableCell>
                                        {format(new Date(res.start_time), 'HH:mm')} - {format(new Date(res.end_time), 'HH:mm')}
                                    </TableCell>
                                    <TableCell>{res.halls?.name}</TableCell>
                                    <TableCell>{res.customers?.full_name}</TableCell>
                                    <TableCell>
                                        {res.packages?.name}
                                        {res.packages?.price && <span className="text-xs text-muted-foreground block">₺{res.packages.price}</span>}
                                    </TableCell>
                                    <TableCell>{getStatusBadge(res.status || 'pending')}</TableCell>
                                    <TableCell className="text-right">
                                        <Link href={`/dashboard/reservations/${res.id}`}>
                                            <Button variant="ghost" size="sm">Detay</Button>
                                        </Link>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>

            {/* Mobile View */}
            <div className="grid grid-cols-1 gap-4 md:hidden">
                {reservations?.length === 0 ? (
                    <div className="text-center p-8 border rounded-lg bg-muted/10 text-muted-foreground">
                        Henüz rezervasyon yok.
                    </div>
                ) : (
                    reservations?.map((res) => (
                        <Card key={res.id} className="overflow-hidden">
                            <CardHeader className="bg-muted/20 p-4 flex flex-row items-center justify-between space-y-0">
                                <span className="font-semibold">
                                    {format(new Date(res.start_time), 'd MMMM yyyy', { locale: tr })}
                                </span>
                                {getStatusBadge(res.status || 'pending')}
                            </CardHeader>
                            <CardContent className="p-4 space-y-3">
                                <div className="flex items-center text-sm">
                                    <Clock className="mr-2 h-4 w-4 text-muted-foreground" />
                                    {format(new Date(res.start_time), 'HH:mm')} - {format(new Date(res.end_time), 'HH:mm')}
                                </div>
                                <div className="flex items-center text-sm">
                                    <MapPin className="mr-2 h-4 w-4 text-muted-foreground" />
                                    {res.halls?.name}
                                </div>
                                <div className="flex items-center text-sm">
                                    <User className="mr-2 h-4 w-4 text-muted-foreground" />
                                    {res.customers?.full_name}
                                </div>
                                {res.packages?.name && (
                                    <div className="flex items-center text-sm">
                                        <Package className="mr-2 h-4 w-4 text-muted-foreground" />
                                        <span>{res.packages.name}</span>
                                        {res.packages.price && <span className="ml-1 text-muted-foreground">(₺{res.packages.price})</span>}
                                    </div>
                                )}
                            </CardContent>
                            <CardFooter className="p-4 pt-0">
                                <Link href={`/dashboard/reservations/${res.id}`} className="w-full">
                                    <Button variant="outline" className="w-full">Detayları Gör</Button>
                                </Link>
                            </CardFooter>
                        </Card>
                    ))
                )}
            </div>
        </div>
    )
}