import { Link, useSearchParams } from "react-router";
import type { SearchResult } from "../api";
import { useFetch } from "../hooks";
import { Badge, Empty, ErrorBox, Loading } from "../components/ui";
import { routeFor } from "../components/Graph";

export default function SearchPage() {
  const [sp] = useSearchParams(); const q = sp.get("q") ?? "";
  const { data, error, loading } = useFetch<{ query: string; results: SearchResult[] }>(q ? `search?q=${encodeURIComponent(q)}&limit=50` : null);
  const groups = new Map<string, SearchResult[]>();
  for (const r of data?.results ?? []) groups.set(r.type, [...(groups.get(r.type) ?? []), r]);
  return (
    <div>
      <h1>Search</h1><p className="hint">“{q}” — full-text and trigram search over APIs, endpoints, variables and packages.</p>
      {loading && <Loading />}<ErrorBox error={error} />
      {data && data.results.length === 0 && <Empty>No results. Register the API from <Link to="/apis">API Atlas → Discover</Link>.</Empty>}
      {Array.from(groups.entries()).map(([type, rs]) => (
        <div className="card" key={type}><h3>{type} ({rs.length})</h3>
          {rs.map((r) => (<div key={r.id} className="row between" style={{ padding: "6px 0", borderBottom: "1px solid var(--border)" }}>
            <span><Link to={routeFor(`${type}:${r.id}`) ?? `/apis/${r.api_id}`}>{r.title}</Link> <span className="hint">{r.provider}</span><div className="hint">{r.snippet?.slice(0, 140)}</div></span>
            <span className="row"><Badge v={r.lifecycle} /><Badge v={r.knowledge_state} /></span></div>))}
        </div>))}
    </div>
  );
}