import { Layers } from "lucide-react";
import { AppShell } from "@/components/AppShell";
import { PageHeader } from "@/components/PageHeader";
import { Button } from "@/components/ui/button";
import { useHotels } from "@/hooks/useHotels";
import { useT } from "@/hooks/useSettings";

/** Rendered when "All hotels" is selected on a page that needs a single hotel. */
export function PortfolioPrompt({ pageTitle }: { pageTitle: string }) {
  const { hotels, selectHotel } = useHotels();
  const t = useT();
  return (
    <AppShell hotel={null} isLoading={false} onRefresh={() => {}}>
      <PageHeader
        eyebrow={pageTitle}
        title={t("prompt.title")}
        subtitle={t("prompt.subtitle")}
      />
      <div className="grid gap-3 sm:grid-cols-2">
        {hotels.map((h) => (
          <button
            key={h.id}
            onClick={() => selectHotel(h.id)}
            className="flex items-start gap-3 rounded-2xl border bg-card p-4 text-left shadow-[var(--shadow-elegant)] transition hover:bg-brand-soft/30"
          >
            <Layers className="mt-1 h-4 w-4 text-brand" />
            <div className="min-w-0">
              <div className="truncate font-serif text-base font-medium text-foreground">{h.hotel_name}</div>
              <div className="truncate text-xs text-muted-foreground">{h.location}</div>
            </div>
          </button>
        ))}
      </div>
      {hotels.length === 0 ? (
        <div className="mt-6">
          <Button asChild>
            <a href="/onboarding">{t("prompt.addFirst")}</a>
          </Button>
        </div>
      ) : null}
    </AppShell>
  );
}