"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";

import { Suspense, useState } from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { DEFAULT_VENUE_ID } from "@/data/platform-mock";
import { usePlatformStore } from "@/stores/platform/platform-store";
import { useVenue } from "@/stores/platform/use-platform-selectors";

function ReserveForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const venueId = searchParams.get("venue") ?? DEFAULT_VENUE_ID;
  const venue = useVenue(venueId);
  const submitBooking = usePlatformStore((s) => s.submitBooking);

  const [guestName, setGuestName] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [partySize, setPartySize] = useState(2);
  const [date, setDate] = useState("2026-05-19");
  const [time, setTime] = useState("19:00");
  const [notes, setNotes] = useState("");

  if (!venue || venue.status !== "active") {
    return (
      <div className="mx-auto max-w-lg px-6 py-12 text-center">
        <p className="text-muted-foreground">This venue is not available for online booking.</p>
        <Button asChild className="mt-4">
          <Link href="/book">Choose another restaurant</Link>
        </Button>
      </div>
    );
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const id = submitBooking({
      guestName,
      phone,
      email,
      partySize,
      date,
      time,
      notes: notes || undefined,
      venueId: venue.id,
    });
    router.push(`/book/confirmation?id=${id}`);
  };

  return (
    <div className="mx-auto max-w-lg px-6 py-12">
      <p className="mb-1 text-sm text-muted-foreground">
        <Link href="/book" className="hover:underline">
          ← All restaurants
        </Link>
      </p>
      <h1 className="text-2xl font-bold mb-1">{venue.name}</h1>
      <p className="text-sm text-muted-foreground mb-8">{venue.address}</p>

      <form onSubmit={handleSubmit} className="space-y-4 rounded-xl border bg-card p-6 shadow-sm">
        <div>
          <Label>Name</Label>
          <Input value={guestName} onChange={(e) => setGuestName(e.target.value)} required />
        </div>
        <div>
          <Label>Phone number</Label>
          <Input value={phone} onChange={(e) => setPhone(e.target.value)} required />
        </div>
        <div>
          <Label>Email</Label>
          <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
        </div>
        <div>
          <Label>Number of guests</Label>
          <Input
            type="number"
            min={1}
            max={12}
            value={partySize}
            onChange={(e) => setPartySize(Number(e.target.value))}
          />
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <Label>Date</Label>
            <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} required />
          </div>
          <div>
            <Label>Time</Label>
            <Input value={time} onChange={(e) => setTime(e.target.value)} required />
          </div>
        </div>
        <div>
          <Label>Notes</Label>
          <Textarea
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            placeholder="Allergies, occasion, seating preference…"
          />
        </div>
        <Button type="submit" className="w-full h-11">
          Submit reservation
        </Button>
        <Button type="button" variant="ghost" className="w-full" asChild>
          <Link href="/book">Back</Link>
        </Button>
      </form>
    </div>
  );
}

export default function BookReservePage() {
  return (
    <Suspense fallback={<div className="p-12 text-center text-muted-foreground">Loading…</div>}>
      <ReserveForm />
    </Suspense>
  );
}