import type { Metadata } from "next";
import Link from "next/link";
import { hubURL } from "@/lib/links";

export const metadata: Metadata = { title: "FAQ" };

const issues = "https://git.t5de.dev/t5de/t5de/issues";

function Path({ children }: { children: React.ReactNode }) {
  return <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs break-all text-foreground">{children}</code>;
}

const questions: { q: string; a: React.ReactNode }[] = [
  {
    q: "What is T5DE?",
    a: (
      <p>
        An unofficial patch for the IMVU Classic client for Windows. It adds a modern renderer, community products and
        rooms hosted by T5DE&apos;s hub, removes ads and tracking, and fixes small things. It isn&apos;t made by or
        affiliated with IMVU. Use it at your own risk.
      </p>
    ),
  },
  {
    q: "What do I need?",
    a: (
      <p>
        Windows, and IMVU Classic installed from imvu.com. T5DE&apos;s setup patches a copy of it, so your IMVU
        Classic stays as it is and both can be installed side by side.
      </p>
    ),
  },
  {
    q: "Windows says it protected my PC. Is the setup safe?",
    a: (
      <p>
        The setup isn&apos;t code-signed yet, so Windows warns about it. Click More info, then Run anyway. You can
        compare the file&apos;s checksum with the one on the{" "}
        <Link href="/download" className="text-foreground underline underline-offset-4">
          download page
        </Link>{" "}
        first. T5DE&apos;s source is public on git.t5de.dev.
      </p>
    ),
  },
  {
    q: "Does T5DE see my IMVU password?",
    a: (
      <p>
        No. You sign in to IMVU as usual, and your IMVU sign-in never leaves your computer. The{" "}
        <a href={hubURL} className="text-foreground underline underline-offset-4">
          hub
        </a>{" "}
        has its own account; you link avatars to it by putting a code in their tagline.
      </p>
    ),
  },
  {
    q: "How do I update?",
    a: (
      <p>
        T5DE checks for updates when it starts and offers them in the client, keeping your patches and settings. A
        newer setup run by hand offers to update too.
      </p>
    ),
  },
  {
    q: "How do I change patches, repair or uninstall?",
    a: (
      <p>
        Run the setup again, or open T5DE in Windows&apos; Apps &amp; features (Installed apps), to change patches,
        repair or uninstall.
      </p>
    ),
  },
  {
    q: "What does T5DE send, and to whom?",
    a: (
      <p>
        Nothing goes to IMVU&apos;s analytics or crash reporting. With your consent, T5DE sends anonymous usage
        statistics and crash reports to T5DE; you can turn both off in the client&apos;s Settings, under T5DE.
      </p>
    ),
  },
  {
    q: "What are nightlies and the staging hub?",
    a: (
      <p>
        Nightly builds have the latest changes for testers and use the staging hub (hub.staging.t5de.dev), with its
        own accounts. Releases use hub.t5de.dev. Either can switch in Settings, under T5DE, T5DE Hub, Server.
      </p>
    ),
  },
  {
    q: "Something went wrong. Where are the logs?",
    a: (
      <p>
        The client&apos;s log is <Path>%APPDATA%\T5DE\IMVULog.log</Path>, and T5DE&apos;s proxy&apos;s is{" "}
        <Path>%TEMP%\t5de-proxy.log</Path>. Please report bugs on{" "}
        <a href={issues} className="text-foreground underline underline-offset-4">
          git.t5de.dev
        </a>
        , with what happened and the logs if you can (they may contain your avatar name).
      </p>
    ),
  },
];

export default function FAQPage() {
  return (
    <div className="max-w-2xl space-y-8">
      <h1 className="text-3xl font-semibold tracking-tight">FAQ</h1>
      <div className="divide-y border-y">
        {questions.map(({ q, a }) => (
          <details key={q} className="group py-4">
            <summary className="cursor-pointer list-none font-medium marker:hidden">
              <span className="flex items-center justify-between gap-4">
                {q}
                <span className="text-muted-foreground transition-transform group-open:rotate-45">+</span>
              </span>
            </summary>
            <div className="pt-3 text-sm text-muted-foreground">{a}</div>
          </details>
        ))}
      </div>
    </div>
  );
}