myeasycms-v2/apps/web/app/[locale]/home/[account]/bookings/[bookingId]/page.tsx

import Link from 'next/link';

import {
  ArrowLeft,
  BedDouble,
  CalendarDays,
  LogIn,
  LogOut,
  XCircle,
  User,
} from 'lucide-react';
import { getTranslations } from 'next-intl/server';

import { formatDate, formatCurrencyAmount } from '@kit/shared/dates';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@kit/ui/card';

import { AccountNotFound } from '~/components/account-not-found';
import { CmsPageShell } from '~/components/cms-page-shell';
import {
  BOOKING_STATUS_VARIANT as STATUS_BADGE_VARIANT,
  BOOKING_STATUS_LABEL_KEYS as STATUS_LABEL_KEYS,
} from '~/lib/status-badges';

interface PageProps {
  params: Promise<{ account: string; bookingId: string }>;
}

export default async function BookingDetailPage({ params }: PageProps) {
  const { account, bookingId } = await params;
  const client = getSupabaseServerClient();
  const t = await getTranslations('bookings');

  const { data: acct } = await client
    .from('accounts')
    .select('id')
    .eq('slug', account)
    .single();

  if (!acct) {
    return (
      <CmsPageShell account={account} title={t('detail.title')}>
        <AccountNotFound />
      </CmsPageShell>
    );
  }

  // Load booking directly
  const { data: booking } = await client
    .from('bookings')
    .select('*')
    .eq('id', bookingId)
    .eq('account_id', acct.id)
    .single();

  if (!booking) {
    return (
      <CmsPageShell account={account} title={t('detail.notFound')}>
        <div className="flex flex-col items-center gap-4 py-12">
          <p className="text-muted-foreground">
            {t('detail.notFoundDesc', { id: bookingId })}
          </p>
          <Button variant="outline" asChild>
            <Link href={`/home/${account}/bookings`}>
              <ArrowLeft className="mr-2 h-4 w-4" />
              {t('detail.backToBookings')}
            </Link>
          </Button>
        </div>
      </CmsPageShell>
    );
  }

  // Load related room and guest data
  const [roomResult, guestResult] = await Promise.all([
    booking.room_id
      ? client.from('rooms').select('*').eq('id', booking.room_id).single()
      : Promise.resolve({ data: null }),
    booking.guest_id
      ? client.from('guests').select('*').eq('id', booking.guest_id).single()
      : Promise.resolve({ data: null }),
  ]);

  const room = roomResult.data;
  const guest = guestResult.data;
  const status = String(booking.status ?? 'pending');

  return (
    <CmsPageShell account={account} title={t('detail.title')}>
      <div className="flex w-full flex-col gap-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" asChild aria-label={t('detail.backToBookings')}>
              <Link href={`/home/${account}/bookings`}>
                <ArrowLeft className="h-4 w-4" aria-hidden="true" />
              </Link>
            </Button>
            <div>
              <div className="flex items-center gap-3">
                <Badge variant={STATUS_BADGE_VARIANT[status] ?? 'secondary'}>
                  {t(STATUS_LABEL_KEYS[status] ?? status)}
                </Badge>
              </div>
              <p className="text-muted-foreground text-sm">ID: {bookingId}</p>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
          {/* Room */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <BedDouble className="h-5 w-5" />
                {t('detail.room')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {room ? (
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground text-sm">
                      {t('detail.roomNumber')}
                    </span>
                    <span className="font-medium">
                      {String(room.room_number)}
                    </span>
                  </div>
                  {room.name && (
                    <div className="flex justify-between">
                      <span className="text-muted-foreground text-sm">
                        {t('rooms.name')}
                      </span>
                      <span className="font-medium">{String(room.name)}</span>
                    </div>
                  )}
                  <div className="flex justify-between">
                    <span className="text-muted-foreground text-sm">
                      {t('detail.type')}
                    </span>
                    <span className="font-medium">
                      {String(room.room_type ?? '—')}
                    </span>
                  </div>
                </div>
              ) : (
                <p className="text-muted-foreground text-sm">
                  {t('detail.noRoom')}
                </p>
              )}
            </CardContent>
          </Card>

          {/* Guest */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <User className="h-5 w-5" />
                {t('detail.guest')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {guest ? (
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground text-sm">
                      {t('guests.name')}
                    </span>
                    <span className="font-medium">
                      {String(guest.first_name)} {String(guest.last_name)}
                    </span>
                  </div>
                  {guest.email && (
                    <div className="flex justify-between">
                      <span className="text-muted-foreground text-sm">
                        {t('detail.email')}
                      </span>
                      <span className="font-medium">{String(guest.email)}</span>
                    </div>
                  )}
                  {guest.phone && (
                    <div className="flex justify-between">
                      <span className="text-muted-foreground text-sm">
                        {t('detail.phone')}
                      </span>
                      <span className="font-medium">{String(guest.phone)}</span>
                    </div>
                  )}
                </div>
              ) : (
                <p className="text-muted-foreground text-sm">
                  {t('detail.noGuest')}
                </p>
              )}
            </CardContent>
          </Card>

          {/* Stay */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <CalendarDays className="h-5 w-5" />
                {t('detail.stay')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-muted-foreground text-sm">
                    {t('list.checkIn')}
                  </span>
                  <span className="font-medium">
                    {formatDate(booking.check_in)}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground text-sm">
                    {t('list.checkOut')}
                  </span>
                  <span className="font-medium">
                    {formatDate(booking.check_out)}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground text-sm">
                    {t('detail.adults')}
                  </span>
                  <span className="font-medium">{booking.adults ?? '—'}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground text-sm">
                    {t('detail.children')}
                  </span>
                  <span className="font-medium">{booking.children ?? 0}</span>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Amount */}
          <Card>
            <CardHeader>
              <CardTitle>{t('detail.amount')}</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-muted-foreground text-sm">
                    {t('detail.totalPrice')}
                  </span>
                  <span className="text-2xl font-bold">
                    {booking.total_price != null
                      ? formatCurrencyAmount(booking.total_price as number)
                      : '—'}
                  </span>
                </div>
                {booking.notes && (
                  <div className="border-t pt-2">
                    <span className="text-muted-foreground text-sm">
                      {t('detail.notes')}
                    </span>
                    <p className="mt-1 text-sm">{String(booking.notes)}</p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Status Workflow */}
        <Card>
          <CardHeader>
            <CardTitle>{t('detail.actions')}</CardTitle>
            <CardDescription>{t('detail.changeStatus')}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-3">
              {(status === 'pending' || status === 'confirmed') && (
                <Button variant="default">
                  <LogIn className="mr-2 h-4 w-4" />
                  {t('detail.checkIn')}
                </Button>
              )}

              {status === 'checked_in' && (
                <Button variant="default">
                  <LogOut className="mr-2 h-4 w-4" />
                  {t('detail.checkOut')}
                </Button>
              )}

              {status !== 'cancelled' &&
                status !== 'checked_out' &&
                status !== 'no_show' && (
                  <Button variant="destructive">
                    <XCircle className="mr-2 h-4 w-4" />
                    {t('detail.cancel')}
                  </Button>
                )}

              {status === 'cancelled' || status === 'checked_out' ? (
                <p className="text-muted-foreground py-2 text-sm">
                  {t('detail.noMoreActions', {
                    statusLabel:
                      status === 'cancelled'
                        ? t('detail.cancelledStatus')
                        : t('detail.completedStatus'),
                  })}
                </p>
              ) : null}
            </div>
          </CardContent>
        </Card>
      </div>
    </CmsPageShell>
  );
}