"use client";

import { ArrowRightIcon, LoaderCircleIcon } from "lucide-react";
import { type FormEvent, useId, useRef, useState } from "react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";

export interface FaqEntry {
  id: string;
  question: string;
  answer: string;
}

export interface FaqAnswer {
  status: "answered" | "not_covered";
  answer: string | null;
  sources: FaqEntry[];
}

export type FaqEvent = "question_opened" | "question_submitted" | "answer_shown" | "answer_missing";

interface InfiniteFaqProps {
  questions: FaqEntry[];
  onAsk: (question: string) => Promise<FaqAnswer>;
  label?: string;
  description?: string;
  onEvent?: (event: FaqEvent) => void;
}

type AnswerState = { kind: "idle" } | { kind: "loading" } | { kind: "error" } | { kind: "ready"; result: FaqAnswer };

export function InfiniteFaq({
  questions,
  onAsk,
  label = "Ask anything else",
  description = "Answers from this FAQ. No invented details.",
  onEvent
}: InfiniteFaqProps) {
  const id = useId();
  const [question, setQuestion] = useState("");
  const [state, setState] = useState<AnswerState>({ kind: "idle" });
  const request = useRef(0);
  const busy = state.kind === "loading";

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const query = question.trim();
    if (!query || busy) return;
    const current = ++request.current;
    setState({ kind: "loading" });
    onEvent?.("question_submitted");
    try {
      const result = await onAsk(query);
      if (current !== request.current) return;
      setState({ kind: "ready", result });
      onEvent?.(result.status === "answered" ? "answer_shown" : "answer_missing");
    } catch {
      if (current === request.current) setState({ kind: "error" });
    }
  }

  return (
    <div
      className="min-w-0 text-foreground motion-reduce:[&_*]:animate-none motion-reduce:[&_*]:transition-none"
      data-infinite-faq
    >
      <Accordion type="single" collapsible onValueChange={value => value && onEvent?.("question_opened")}>
        {questions.map(entry => (
          <AccordionItem key={entry.id} value={entry.id} className="border-border">
            <AccordionTrigger className="py-5 text-base font-medium hover:no-underline">
              {entry.question}
            </AccordionTrigger>
            <AccordionContent className="whitespace-pre-wrap break-words text-base leading-relaxed text-muted-foreground">
              {entry.answer}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
      <form onSubmit={submit} className="mt-5 border-t border-border pt-5">
        <Label htmlFor={`${id}-question`} className="mb-3 block text-base font-medium">
          {label}
        </Label>
        <div className="flex items-center gap-2">
          <Input
            id={`${id}-question`}
            name="question"
            value={question}
            onChange={event => {
              ++request.current;
              setQuestion(event.target.value);
              setState({ kind: "idle" });
            }}
            placeholder="What's on your mind?"
            maxLength={500}
            autoComplete="off"
            aria-describedby={description ? `${id}-description` : undefined}
            className="h-12 min-w-0 flex-1 border-border bg-background text-base"
            data-ph-no-capture
          />
          <Button
            type="submit"
            size="icon"
            className="size-12 shrink-0"
            disabled={busy || !question.trim()}
            aria-label="Find answer"
          >
            {busy ? (
              <LoaderCircleIcon className="size-5 animate-spin motion-reduce:animate-none" />
            ) : (
              <ArrowRightIcon className="size-5" />
            )}
          </Button>
        </div>
        {description && (
          <p id={`${id}-description`} className="mt-3 text-xs leading-relaxed text-muted-foreground">
            {description}
          </p>
        )}
      </form>
      <div role="status" aria-live="polite" aria-atomic="true" aria-busy={busy}>
        {busy && <p className="mt-5 text-sm text-muted-foreground">Looking through the questions…</p>}
        {state.kind === "error" && (
          <p className="mt-5 rounded-lg border border-border bg-muted p-4 text-sm">
            Couldn't load an answer. Try again.
          </p>
        )}
        {state.kind === "ready" && (
          <div className="mt-5 rounded-lg border border-border bg-muted/50 p-5">
            {state.result.status === "answered" ? (
              <>
                <p className="whitespace-pre-wrap break-words text-sm leading-relaxed">{state.result.answer}</p>
                <div className="mt-4 border-t border-border pt-3 text-xs text-muted-foreground">
                  <span className="font-medium">Source</span>
                  {state.result.sources.map(source => (
                    <p key={source.id} className="mt-1">
                      {source.question}
                    </p>
                  ))}
                </div>
              </>
            ) : (
              <p className="text-sm leading-relaxed">
                That’s not covered in these questions. Try a more specific question, or contact the team for help.
              </p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}