"use client";

import { useState } from "react";

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

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 { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { DEFAULT_VENUE_ID } from "@/data/platform-mock";
import { getAuthUser } from "@/lib/auth";
import { usePlatformStore } from "@/stores/platform/platform-store";
import { useVenueTables } from "@/stores/platform/use-platform-selectors";

export default function NewReservationPage() {
  const router = useRouter();
  const user = getAuthUser();
  const venueId = user?.venueId ?? DEFAULT_VENUE_ID;
  const tables = useVenueTables(venueId);
  const createReservation = usePlatformStore((s) => s.createReservation);

  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 [tableId, setTableId] = useState("");
  const [notes, setNotes] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const id = createReservation({
      venueId,
      guestName,
      phone,
      email,
      partySize,
      date,
      time,
      tableId: tableId || null,
      notes: notes || undefined,
      status: tableId ? "reserved" : "confirmed",
    });
    router.push(`/manager/reservations/${id}`);
  };

  const availableTables = tables.filter((t) => t.status === "available");

  return (
    <div className="p-6 max-w-xl space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Create reservation</h1>
        <p className="text-sm text-muted-foreground">Manual booking for {user?.venueName}</p>
      </div>
      <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border bg-card p-6">
        <div>
          <Label>Guest name</Label>
          <Input value={guestName} onChange={(e) => setGuestName(e.target.value)} required />
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <Label>Phone</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>
        <div className="grid grid-cols-3 gap-3">
          <div>
            <Label>Party size</Label>
            <Input type="number" min={1} value={partySize} onChange={(e) => setPartySize(Number(e.target.value))} />
          </div>
          <div>
            <Label>Date</Label>
            <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
          </div>
          <div>
            <Label>Time</Label>
            <Input value={time} onChange={(e) => setTime(e.target.value)} />
          </div>
        </div>
        <div>
          <Label>Assign table (optional)</Label>
          <NativeSelect value={tableId} onChange={(e) => setTableId(e.target.value)}>
            <NativeSelectOption value="">No table yet</NativeSelectOption>
            {availableTables.map((t) => (
              <NativeSelectOption key={t.id} value={t.id}>
                Table {t.number} ({t.capacity} seats)
              </NativeSelectOption>
            ))}
          </NativeSelect>
        </div>
        <div>
          <Label>Notes</Label>
          <Textarea value={notes} onChange={(e) => setNotes(e.target.value)} />
        </div>
        <div className="flex gap-2">
          <Button type="submit">Create reservation</Button>
          <Button type="button" variant="outline" asChild>
            <Link href="/manager/reservations">Cancel</Link>
          </Button>
        </div>
      </form>
    </div>
  );
}