"use client";

import { useState } from "react";
import { Badge } from "@/components/ui/Badge";
import { LinkButton } from "@/components/ui/Button";

const FAQS: { q: string; a: string }[] = [
  {
    q: "What hardware do I need to run a node?",
    a: "A node is a small field SDR device running our edge-node software — it needs an SDR dongle capable of receiving your local P25 or analog trunked system, and a network connection to reach your DRB account. Full setup instructions are provided once you add a node.",
  },
  {
    q: "What's the difference between a 'call' and an 'incident'?",
    a: "A call is a single radio transmission. An incident is the thing you actually care about — a pursuit, a fire, an accident — built by correlating related calls together, sometimes across multiple talkgroups or nodes. Incidents are the primary view; calls are the evidence behind them.",
  },
  {
    q: "Does DRB do the transcription and AI work itself, or is that a separate cost?",
    a: "Transcription and incident correlation are included in every paid plan and run automatically on every recorded call. The Community plan includes AI features on a limited call volume; Pro and Enterprise scale with your node count.",
  },
  {
    q: "Can I listen to live radio traffic without opening the dashboard?",
    a: "Yes — the Discord bot can join a voice channel and relay live audio from any of your nodes, so your team can listen without a separate scanner app.",
  },
  {
    q: "How does node ownership and team access work?",
    a: "Admins have full access. Operators are scoped to a specific list of nodes they own — they see and manage only those. Viewers get read-only access to everything the org exposes. You manage all of this from Settings → Members.",
  },
  {
    q: "What happens if I go over my plan's node or seat limit?",
    a: "You'll see a plan-limit notice in Settings → Billing before anything is blocked. In this demo build there's no live enforcement wired up yet — see the Billing settings page for what's stubbed vs. real.",
  },
  {
    q: "How long is call and incident history kept?",
    a: "Retention depends on plan — 7 days on Community, 90 days on Pro, and a year or more on Enterprise (negotiable). Historical calls remain searchable and linked to their incidents for the full retention window.",
  },
  {
    q: "Is DMR supported?",
    a: "Not yet — DMR is on the roadmap but the current release only decodes P25 and analog trunked systems.",
  },
];

function ChevronIcon({ open }: { open: boolean }) {
  return (
    <svg
      width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round"
      className={`text-gray-500 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
    >
      <polyline points="6 9 12 15 18 9" />
    </svg>
  );
}

export default function FaqPage() {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  return (
    <div className="max-w-screen-md mx-auto px-4 md:px-6 py-16 md:py-20">
      <div className="text-center">
        <Badge tone="brand">FAQ</Badge>
        <h1 className="text-display-sm md:text-display text-white mt-5">Frequently asked questions</h1>
        <p className="text-gray-400 mt-4">Can&apos;t find what you&apos;re looking for? Sign in and reach out from your account.</p>
      </div>

      <div className="mt-12 divide-y divide-gray-800 border-t border-b border-gray-800">
        {FAQS.map((item, i) => {
          const open = openIndex === i;
          return (
            <div key={item.q}>
              <button
                onClick={() => setOpenIndex(open ? null : i)}
                className="w-full flex items-center justify-between gap-4 py-5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded-lg"
                aria-expanded={open}
              >
                <span className="text-white font-semibold text-sm md:text-base">{item.q}</span>
                <ChevronIcon open={open} />
              </button>
              {open && (
                <p className="text-gray-400 text-sm leading-relaxed pb-5 pr-8 animate-fade-in">{item.a}</p>
              )}
            </div>
          );
        })}
      </div>

      <div className="text-center mt-16">
        <LinkButton href="/login" size="lg">Get started</LinkButton>
      </div>
    </div>
  );
}