Faq Search

"use client";

import { useId, useState } from "react";
import { Accordion } from "radix-ui";
import { Plus, Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqSearchProps {
  eyebrow?: string;
  title?: string;
  items?: { question: string; answer: string; tag: string }[];
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

const DEFAULT_ITEMS = [
  {
    tag: "Recording",
    question: "How do I stop Halo from joining a meeting?",
    answer: "Remove it from the invite, or toggle auto-join off per calendar in Settings → Recording.",
  },
  { tag: "Recording", question: "Can participants opt out?", answer: "Yes. Anyone can type “halo stop” in chat to pause recording; the recap marks the gap." },
  { tag: "Privacy", question: "Where is my data stored?", answer: "US by default; EU (Frankfurt) on request. Encrypted with AES-256 at rest." },
  {
    tag: "Privacy",
    question: "How long are recordings kept?",
    answer: "90 days by default, configurable from 7 days to forever — transcripts can outlive videos.",
  },
  { tag: "Billing", question: "Do guests need a seat?", answer: "No. Only members who record meetings are billed; viewers and guests are free." },
  {
    tag: "Billing",
    question: "Can I switch between monthly and yearly?",
    answer: "Any time. Switching to yearly applies a 20% discount pro-rated to your next invoice.",
  },
];

/** Glass FAQ with a live search field filtering a frosted accordion (Radix) and category counts; matching text is highlighted. */
export function FaqSearch({ eyebrow = "Help center", title = "How can we help?", items = DEFAULT_ITEMS, className }: FaqSearchProps) {
  const [q, setQ] = useState("");
  const id = useId();
  const query = q.trim().toLowerCase();
  const shown = items.filter((i) => `${i.question} ${i.answer} ${i.tag}`.toLowerCase().includes(query));

  const mark = (text: string) => {
    if (!query) return text;
    const at = text.toLowerCase().indexOf(query);
    if (at < 0) return text;
    return (
      <>
        {text.slice(0, at)}
        <mark className="rounded-[4px] bg-da-primary/20 text-inherit">{text.slice(at, at + query.length)}</mark>
        {text.slice(at + query.length)}
      </>
    );
  };

  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2 id={`${id}-t`} className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display">
            {title}
          </h2>
          <div className={cn("relative mt-8 rounded-da-pill shadow-da-md", GLASS)}>
            <Search aria-hidden className="pointer-events-none absolute top-1/2 left-5 size-5 -translate-y-1/2 text-da-muted-fg" />
            <label htmlFor={`${id}-q`} className="sr-only">
              Search questions
            </label>
            <input
              id={`${id}-q`}
              type="search"
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Search “recording”, “billing”, “privacy”…"
              className="da-focus h-14 w-full rounded-da-pill bg-transparent pr-5 pl-14 text-[15px] outline-none placeholder:text-da-muted-fg"
            />
          </div>
          <p aria-live="polite" className="mt-3 text-sm text-da-muted-fg">
            {query ? `${shown.length} result${shown.length === 1 ? "" : "s"}` : `${items.length} questions`}
          </p>
        </div>
        <Accordion.Root type="single" collapsible className="mx-auto mt-8 grid max-w-2xl gap-3">
          {shown.map((it) => (
            <Accordion.Item key={it.question} value={it.question} className={cn("rounded-da-lg shadow-da-sm", GLASS)}>
              <Accordion.Header>
                <Accordion.Trigger className="da-focus group flex w-full items-center gap-3 rounded-da-lg px-5 py-4 text-left font-medium">
                  <span className="rounded-da-pill bg-da-surface-2 px-2 py-0.5 text-[11px] font-semibold text-da-muted-fg">{it.tag}</span>
                  <span className="flex-1">{mark(it.question)}</span>
                  <Plus aria-hidden className="da-transition size-4 shrink-0 group-data-[state=open]:rotate-45" />
                </Accordion.Trigger>
              </Accordion.Header>
              <Accordion.Content className="overflow-hidden text-[15px] text-da-muted-fg data-[state=closed]:hidden">
                <p className="px-5 pb-5">{mark(it.answer)}</p>
              </Accordion.Content>
            </Accordion.Item>
          ))}
          {shown.length === 0 && (
            <p className={cn("rounded-da-lg p-6 text-center text-da-muted-fg", GLASS)}>No answer for “{q}” yet — try another word or contact support.</p>
          )}
        </Accordion.Root>
      </div>
    </section>
  );
}

export default FaqSearch;