"use client";
import * as React from "react";
import { ChevronDown, Clock, Search, SearchX, X } from "lucide-react";
import { useApp } from "@/components/app/store";
import { BottomSheet } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Skeleton, Spinner } from "@/components/ui/misc";
import { useIsMobile } from "@/lib/client/hooks";
import type { SearchGroup, SearchResponse } from "@/lib/client/types";
import { cn } from "@/lib/utils";
import { FilterChips } from "./filter-chips";
import { useSearch, useRecentSearches, SEARCH_EXAMPLES, SEARCH_MIN_CHARS } from "./use-search";
import { ConversationHitContent, MessageHitContent, ModelHitContent, PromptHitContent, ProjectHitContent, PresetHitContent, GROUP_LABELS, GROUP_ORDER, useSearchNavigation } from "./hits";

/**
 * Phone full-screen search (opened by `store.searchOpen`; the sidebar and bottom nav call `setSearchOpen(true)`).
 * On ≥ md the command palette handles search, so this renders nothing — `CommandPalette` mounts it once.
 */
export function SearchSheet() {
  const { searchOpen, setSearchOpen } = useApp();
  const isMobile = useIsMobile();
  if (!isMobile) return null;
  return <SearchSheetInner open={searchOpen} onOpenChange={setSearchOpen} />;
}

function SearchSheetInner({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
  const [q, setQ] = React.useState("");
  const inputRef = React.useRef<HTMLInputElement>(null);
  const search = useSearch(q, { enabled: open, limit: 10 });
  const recent = useRecentSearches();
  const close = React.useCallback(() => {
    onOpenChange(false);
    setQ("");
  }, [onOpenChange]);
  const nav = useSearchNavigation({
    onNavigate: () => {
      recent.add(q);
      close();
    },
  });

  // Focus the input once the sheet has animated in (BottomSheet blocks auto-focus to avoid jumpy layouts).
  React.useEffect(() => {
    if (!open) return;
    const t = setTimeout(() => inputRef.current?.focus(), 120);
    return () => clearTimeout(t);
  }, [open]);

  const header = (
    <div className="space-y-2 px-3 pb-2">
      <div className="flex items-center gap-2">
        <div className="relative flex-1">
          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-fg-subtle" aria-hidden />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                recent.add(q);
                (e.target as HTMLInputElement).blur();
              }
              if (e.key === "Escape") close();
            }}
            type="search"
            inputMode="search"
            enterKeyHint="search"
            autoCapitalize="off"
            autoCorrect="off"
            spellCheck={false}
            placeholder="Search chats, messages, models…"
            aria-label="Search"
            className="h-11 w-full rounded-xl border border-border bg-bg-subtle pl-9 pr-9 text-[16px] text-fg outline-none placeholder:text-fg-subtle focus:border-accent focus:bg-bg-elevated [&::-webkit-search-cancel-button]:hidden"
          />
          {q ? (
            <button type="button" onClick={() => { setQ(""); inputRef.current?.focus(); }} className="tap absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-bg-muted p-1 text-fg-muted" aria-label="Clear search">
              <X className="size-3.5" />
            </button>
          ) : null}
        </div>
        <button type="button" onClick={close} className="tap shrink-0 px-1 text-[15px] font-medium text-accent">
          Cancel
        </button>
      </div>
      <FilterChips query={q} onChange={(next) => { setQ(next); inputRef.current?.focus(); }} compact />
    </div>
  );

  return (
    <BottomSheet open={open} onOpenChange={(o) => !o && close()} snap="full" expandable={false} title="Search" hideTitle flush header={header} bodyClassName="px-2 pb-[max(16px,var(--sab))]">
      {!search.searchable ? (
        <IdleState recent={recent.list} onPick={(v) => { setQ(v); inputRef.current?.focus(); }} onRemove={recent.remove} onClear={recent.clear} q={q} />
      ) : search.loading && !search.data ? (
        <div className="space-y-2 px-1 pt-2">
          {Array.from({ length: 6 }).map((_, i) => (
            <Skeleton key={i} className="h-14" />
          ))}
        </div>
      ) : search.error ? (
        <p className="px-3 py-10 text-center text-[14px] text-fg-muted">Search is unavailable right now. Try again in a moment.</p>
      ) : search.isEmpty ? (
        <div className="flex flex-col items-center px-6 py-14 text-center">
          <SearchX className="size-6 text-fg-subtle" />
          <p className="mt-3 text-[15px] font-medium">No results for “{search.parsed.text || search.query}”</p>
          <p className="mt-1 text-[13px] text-fg-muted">Try fewer words, or remove a filter.</p>
        </div>
      ) : search.data ? (
        <Results data={search.data} terms={search.data.query.terms} nav={nav} loading={search.loading} loadingMore={search.loadingMore} nextCursor={search.nextCursor} onLoadMore={search.loadMore} />
      ) : null}
    </BottomSheet>
  );
}

function IdleState({ recent, onPick, onRemove, onClear, q }: { recent: string[]; onPick: (v: string) => void; onRemove: (v: string) => void; onClear: () => void; q: string }) {
  return (
    <div className="space-y-6 px-1 pt-2">
      {q.trim().length > 0 && q.trim().length < SEARCH_MIN_CHARS ? <p className="px-2 text-[13px] text-fg-subtle">Keep typing — at least {SEARCH_MIN_CHARS} characters.</p> : null}
      {recent.length ? (
        <section>
          <div className="flex items-center justify-between px-2 pb-1">
            <h3 className="text-[11px] font-medium uppercase tracking-wide text-fg-subtle">Recent</h3>
            <button type="button" onClick={onClear} className="tap text-[12px] text-fg-subtle hover:text-fg">
              Clear
            </button>
          </div>
          <ul>
            {recent.map((r) => (
              <li key={r} className="flex items-center">
                <button type="button" onClick={() => onPick(r)} className="flex min-h-[46px] min-w-0 flex-1 items-center gap-3 rounded-lg px-2 text-left text-[15px] text-fg active:bg-bg-muted">
                  <Clock className="size-4 shrink-0 text-fg-subtle" />
                  <span className="truncate">{r}</span>
                </button>
                <button type="button" onClick={() => onRemove(r)} className="tap p-2 text-fg-subtle" aria-label={`Remove “${r}” from recent searches`}>
                  <X className="size-4" />
                </button>
              </li>
            ))}
          </ul>
        </section>
      ) : null}
      <section>
        <h3 className="px-2 pb-1.5 text-[11px] font-medium uppercase tracking-wide text-fg-subtle">Search syntax</h3>
        <div className="flex flex-wrap gap-1.5 px-2">
          {SEARCH_EXAMPLES.map((e) => (
            <button key={e.label} type="button" onClick={() => onPick(e.q)} className="rounded-full border border-border bg-bg-elevated px-3 py-1.5 font-mono text-[12px] text-fg-muted active:bg-bg-muted">
              {e.label}
            </button>
          ))}
        </div>
        <p className="mt-3 px-2 text-[12.5px] leading-5 text-fg-subtle">
          Combine free text with <code className="font-mono">model:</code> <code className="font-mono">provider:</code> <code className="font-mono">project:</code> <code className="font-mono">folder:</code> <code className="font-mono">after:</code> <code className="font-mono">before:</code> <code className="font-mono">role:</code> <code className="font-mono">is:</code>. Quote phrases: <code className="font-mono">&quot;exact words&quot;</code>.
        </p>
      </section>
    </div>
  );
}

type Nav = ReturnType<typeof useSearchNavigation>;

function Results({ data, terms, nav, loading, loadingMore, nextCursor, onLoadMore }: { data: SearchResponse; terms: string[]; nav: Nav; loading: boolean; loadingMore: boolean; nextCursor: string | null; onLoadMore: () => Promise<void> }) {
  const row = "flex min-h-[56px] w-full items-center gap-3 rounded-xl px-2 py-2 text-left active:bg-bg-muted";
  const groups = GROUP_ORDER.filter((g) => (data[g] as unknown[]).length > 0);
  return (
    <div className={cn("space-y-5 pt-1 transition-opacity", loading && "opacity-60")}>
      <p className="px-2 text-[11.5px] tabular-nums text-fg-subtle">
        {groups.reduce((n, g) => n + (data[g] as unknown[]).length, 0)} result{groups.length === 1 && (data[groups[0]] as unknown[]).length === 1 ? "" : "s"} · {data.tookMs} ms
      </p>
      {groups.map((g: SearchGroup) => (
        <section key={g} aria-label={GROUP_LABELS[g]}>
          <h3 className="px-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-fg-subtle">
            {GROUP_LABELS[g]} <span className="font-normal text-fg-subtle/70">{(data[g] as unknown[]).length}</span>
          </h3>
          <ul className="space-y-px">
            {g === "conversations" &&
              data.conversations.map((c) => (
                <li key={c.id}>
                  <button type="button" className={row} onClick={() => nav.openConversation(c)}>
                    <ConversationHitContent hit={c} terms={terms} />
                  </button>
                </li>
              ))}
            {g === "messages" &&
              data.messages.map((m) => (
                <li key={m.id}>
                  <button type="button" className={cn(row, "items-start")} onClick={() => nav.openMessage(m)}>
                    <MessageHitContent hit={m} terms={terms} />
                  </button>
                </li>
              ))}
            {g === "models" &&
              data.models.map((m) => (
                <li key={m.key}>
                  <button type="button" className={row} onClick={() => nav.openModel(m)}>
                    <ModelHitContent hit={m} />
                  </button>
                </li>
              ))}
            {g === "prompts" &&
              data.prompts.map((p) => (
                <li key={`${p.kind}-${p.id}`}>
                  <button type="button" className={row} onClick={() => nav.openPrompt(p)}>
                    <PromptHitContent hit={p} terms={terms} />
                  </button>
                </li>
              ))}
            {g === "projects" &&
              data.projects.map((p) => (
                <li key={p.id}>
                  <button type="button" className={row} onClick={() => nav.openProject(p)}>
                    <ProjectHitContent hit={p} terms={terms} />
                  </button>
                </li>
              ))}
            {g === "presets" &&
              data.presets.map((p) => (
                <li key={p.id}>
                  <button type="button" className={row} onClick={() => nav.openPreset(p)}>
                    <PresetHitContent hit={p} terms={terms} />
                  </button>
                </li>
              ))}
          </ul>
        </section>
      ))}
      {nextCursor ? (
        <div className="px-2 pb-2">
          <Button variant="outline" size="lg" className="w-full" onClick={() => void onLoadMore()} loading={loadingMore}>
            {loadingMore ? null : <ChevronDown />} Load more
          </Button>
        </div>
      ) : null}
      {loading ? (
        <div className="flex justify-center py-2">
          <Spinner />
        </div>
      ) : null}
    </div>
  );
}