"use client";

import { useState } from "react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import type { GuestProfile } from "@/data/platform-mock";
import { usePlatformStore } from "@/stores/platform/platform-store";

export default function GuestsPage() {
  const guests = usePlatformStore((s) => s.guests);
  const reservations = usePlatformStore((s) => s.reservations);
  const [selected, setSelected] = useState<GuestProfile | null>(null);

  const history = selected
    ? reservations.filter((r) => selected.reservationIds.includes(r.id))
    : [];

  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Guests</h1>
        <p className="text-sm text-muted-foreground">Basic guest profiles and reservation history</p>
      </div>
      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
        {guests.map((g) => (
          <Card
            key={g.id}
            className="cursor-pointer hover:border-primary/40"
            onClick={() => setSelected(g)}
          >
            <CardHeader>
              <CardTitle className="text-base">{g.name}</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-muted-foreground">
              <p>{g.email}</p>
              <p>{g.phone}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <Sheet open={!!selected} onOpenChange={(o) => !o && setSelected(null)}>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>{selected?.name}</SheetTitle>
            <SheetDescription>Guest profile — read only PoC</SheetDescription>
          </SheetHeader>
          {selected && (
            <div className="mt-6 space-y-4 text-sm">
              <p><span className="text-muted-foreground">Phone:</span> {selected.phone}</p>
              <p><span className="text-muted-foreground">Email:</span> {selected.email}</p>
              {selected.preferences && (
                <p><span className="text-muted-foreground">Preferences:</span> {selected.preferences}</p>
              )}
              <div>
                <p className="font-medium mb-2">Reservation history</p>
                <ul className="space-y-2">
                  {history.map((r) => (
                    <li key={r.id} className="rounded border px-3 py-2">
                      {r.date} {r.time} — {r.status}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}
        </SheetContent>
      </Sheet>
    </div>
  );
}