FAQ Search

"use client";

import { useId, useMemo, useState } from "react";
import { Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqSearchItem {
  question: string;
  answer: string;
  tags?: string[];
}

export interface FaqSearchProps {
  kicker?: string;
  title?: string;
  placeholder?: string;
  items?: FaqSearchItem[];
  className?: string;
}

const DEFAULT_ITEMS: FaqSearchItem[] = [
  {
    question: "How do I connect GitHub?",
    answer: "Settings → Integrations → GitHub, then pick the repositories. Only PR metadata is read.",
    tags: ["setup", "github"],
  },
  {
    question: "Can I import an existing changelog?",
    answer: "Yes: paste a Markdown file, point us at an RSS feed or use the API. Dates and links are kept.",
    tags: ["migration"],
  },
  {
    question: "How do I add a custom domain?",
    answer: "Add a CNAME to cname.shipyard.dev and click verify. TLS is provisioned automatically.",
    tags: ["setup", "domain"],
  },
  {
    question: "Can I schedule a release?",
    answer: "Pick a date and time in the publish menu. Digests follow the same schedule.",
    tags: ["publishing"],
  },
  {
    question: "How do I hide a release from the widget?",
    answer: "Toggle 'Widget' off in the release sidebar. It stays on the public page.",
    tags: ["widget"],
  },
  {
    question: "Where do I find invoices?",
    answer: "Billing → Invoices. You can add a VAT number and a billing email there.",
    tags: ["billing"],
  },
];

export function FaqSearch({
  kicker = "[ 07 ] Docs, the short version",
  title = "Search the FAQ.",
  placeholder = "Try “domain”, “github” or “invoice”",
  items = DEFAULT_ITEMS,
  className,
}: FaqSearchProps) {
  const [query, setQuery] = useState("");
  const inputId = useId();
  const results = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return items;
    return items.filter((i) => `${i.question} ${i.answer} ${i.tags?.join(" ") ?? ""}`.toLowerCase().includes(q));
  }, [items, query]);

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby={`${inputId}-title`}>
      <div className="da-container">
        <div className="mx-auto max-w-4xl">
          <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
          <h2 id={`${inputId}-title`} className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
            {title}
          </h2>
          <div className="da-stroke mt-8 flex items-center gap-3 bg-da-input px-4 shadow-da-md focus-within:translate-x-[3px] focus-within:translate-y-[3px] focus-within:shadow-none focus-within:outline-[length:var(--da-ring-width)] focus-within:outline-offset-[var(--da-ring-offset)] focus-within:outline-da-ring focus-within:outline-solid">
            <Search aria-hidden className="size-6 shrink-0" strokeWidth={3} />
            <label htmlFor={inputId} className="sr-only">
              Search questions
            </label>
            <input
              id={inputId}
              type="search"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder={placeholder}
              className="h-16 min-w-0 flex-1 bg-transparent text-xl font-bold text-da-fg outline-none placeholder:font-medium placeholder:text-da-muted-fg"
            />
          </div>
          <p className="mt-4 font-da-mono text-xs font-bold text-da-muted-fg uppercase" aria-live="polite">
            {results.length} result{results.length === 1 ? "" : "s"}
          </p>
          <ul className="mt-4 flex flex-col gap-4">
            {results.map((r) => (
              <li key={r.question} className="da-stroke bg-da-surface p-5 text-da-surface-fg">
                <details className="group">
                  <summary className="da-focus flex cursor-pointer list-none items-center justify-between gap-4 text-lg font-bold [&::-webkit-details-marker]:hidden">
                    {r.question}
                    <span
                      aria-hidden
                      className="da-stroke grid size-8 shrink-0 place-items-center bg-da-primary font-da-mono text-da-primary-fg group-open:bg-da-fg group-open:text-da-bg"
                    >
                      <span className="group-open:hidden">+</span>
                      <span className="hidden group-open:inline">−</span>
                    </span>
                  </summary>
                  <p className="mt-3 text-da-muted-fg">{r.answer}</p>
                  {r.tags && (
                    <p className="mt-3 flex flex-wrap gap-2">
                      {r.tags.map((t) => (
                        <span key={t} className="da-stroke bg-da-surface-2 px-1.5 py-0.5 font-da-mono text-[11px] font-bold uppercase">
                          #{t}
                        </span>
                      ))}
                    </p>
                  )}
                </details>
              </li>
            ))}
          </ul>
          {results.length === 0 && (
            <p className="da-stroke bg-da-accent p-6 font-bold text-da-accent-fg">
              No answer for “{query}”. Our engineers reply to support@shipyard.dev in under 2h.
            </p>
          )}
        </div>
      </div>
    </section>
  );
}

export default FaqSearch;