"use client";

import Link from "next/link";

import { Calendar, ChevronRight, MapPin, Phone, UtensilsCrossed } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { APP_CONFIG } from "@/config/app-config";
import { useBookableVenues } from "@/stores/platform/use-platform-selectors";

export default function BookLandingPage() {
  const venues = useBookableVenues();

  return (
    <div className="mx-auto max-w-3xl px-6 py-12 md:py-16">
      <div className="mb-10 flex items-center gap-3">
        <div className="flex size-12 items-center justify-center rounded-xl bg-amber-500/15 text-amber-700">
          <UtensilsCrossed className="size-6" />
        </div>
        <div>
          <h1 className="text-3xl font-bold">{APP_CONFIG.name}</h1>
          <p className="text-muted-foreground">Choose a restaurant and reserve your table</p>
        </div>
      </div>

      <p className="mb-4 text-sm font-medium text-muted-foreground">
        {venues.length} locations available
      </p>

      <div className="grid gap-4 sm:grid-cols-2">
        {venues.map((venue) => (
          <Link key={venue.id} href={`/book/reserve?venue=${venue.id}`} className="group block">
            <Card className="h-full transition-shadow hover:shadow-md hover:border-amber-400/40">
              <CardContent className="flex h-full flex-col p-5">
                <div className="mb-3 flex items-start justify-between gap-2">
                  <h2 className="text-lg font-semibold group-hover:text-amber-800">{venue.name}</h2>
                  <ChevronRight className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
                </div>
                <Badge variant="secondary" className="mb-3 w-fit text-[10px]">
                  {venue.floorLabel}
                </Badge>
                <div className="mt-auto space-y-2 text-sm text-muted-foreground">
                  <p className="flex items-start gap-2">
                    <MapPin className="mt-0.5 size-4 shrink-0" />
                    <span className="line-clamp-2">{venue.address}</span>
                  </p>
                  <p className="flex items-center gap-2">
                    <Phone className="size-4 shrink-0" />
                    {venue.contact}
                  </p>
                  <p className="flex items-center gap-2">
                    <Calendar className="size-4 shrink-0" />
                    {venue.openingHours}
                  </p>
                </div>
                <p className="mt-4 text-sm font-medium text-amber-700">Book a table →</p>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>

      <p className="mt-10 text-center text-sm text-muted-foreground">
        <Link href="/login" className="underline hover:text-foreground">
          Staff sign in
        </Link>
      </p>
    </div>
  );
}