"use client";

import { ArrowRight, Search } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { openPalette } from "@/components/command-palette";
import { Kbd } from "@/components/ui/kbd";
import { routes } from "@/lib/routes";

const SUGGESTIONS = ["Northern Virginia", "hyperscale in Ireland", "> 100 MW under construction", "Equinix", "Japan"];

export function HeroSearch() {
  const router = useRouter();
  const [q, setQ] = useState("");
  return (
    <div className="mt-5 max-w-2xl">
      <form
        role="search"
        onSubmit={(e) => {
          e.preventDefault();
          if (q.trim()) router.push(routes.search(q.trim()));
          else openPalette();
        }}
        className="flex h-12 items-center rounded-sm border border-hair-2 bg-surface focus-within:border-ink sm:h-14"
      >
        <Search className="ml-3.5 size-5 shrink-0 text-ink-3" strokeWidth={1.75} aria-hidden />
        <input
          value={q}
          onChange={(e) => setQ(e.target.value)}
          onFocus={(e) => {
            if (window.matchMedia("(min-width: 640px)").matches) {
              e.currentTarget.blur();
              openPalette();
            }
          }}
          placeholder="Search a data center, operator, market or country…"
          aria-label="Search the index"
          className="h-full min-w-0 flex-1 bg-transparent px-3 text-[15px] outline-none placeholder:text-ink-4 sm:text-[16px]"
          autoComplete="off"
          enterKeyHint="search"
        />
        <span className="mr-3 hidden items-center gap-0.5 sm:inline-flex">
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </span>
        <button type="submit" aria-label="Search" className="mr-1 inline-flex size-10 items-center justify-center rounded-sm bg-ink text-paper hover:bg-ink-2 sm:mr-1.5">
          <ArrowRight className="size-4" />
        </button>
      </form>
      <div className="mt-2.5 -mx-3 flex gap-1.5 overflow-x-auto px-3 no-scrollbar sm:mx-0 sm:flex-wrap sm:px-0">
        <span className="shrink-0 py-1 text-[11.5px] text-ink-4">Try</span>
        {SUGGESTIONS.map((s) => (
          <button key={s} type="button" onClick={() => router.push(routes.search(s))} className="inline-flex h-10 shrink-0 items-center rounded-sm border border-hair px-2.5 text-[12px] text-ink-2 hover:border-hair-2 hover:text-ink sm:h-auto sm:px-2 sm:py-1 sm:text-[11.5px]">
            {s}
          </button>
        ))}
      </div>
    </div>
  );
}