import { useEffect, useState } from "react";
import { analyticsBlockedByBrowser, analyticsOptedOut, setAnalyticsOptOut } from "~/lib/analytics";
import { useRouteContext } from "@tanstack/react-router";
import { Panel } from "~/ui/Panel";
import { CheckboxField } from "~/ui/Field";

/** Per-browser opt-out from product analytics; hidden on instances without analytics. */
export function AnalyticsPanel() {
  const { analytics } = useRouteContext({ from: "__root__" });
  const [optedOut, setOptedOut] = useState(false);
  const [browserBlocks, setBrowserBlocks] = useState(false);
  useEffect(() => {
    setOptedOut(analyticsOptedOut());
    setBrowserBlocks(analyticsBlockedByBrowser());
  }, []);
  if (!analytics) return null;
  return (
    <Panel title="Product analytics">
      <div className="space-y-3 p-4 text-sm text-kumo-subtle">
        <p>
          This instance uses PostHog to understand how features are used. Events carry an opaque account id, never
          private repository names, file paths or query strings, and session replays mask inputs and pause on private
          repositories and settings pages.
        </p>
        {browserBlocks ? (
          <p className="text-kumo-default">
            Your browser sends Do Not Track or Global Privacy Control, so nothing is collected.
          </p>
        ) : (
          <CheckboxField
            label="Don't collect analytics in this browser"
            checked={optedOut}
            onChange={(event) => {
              setOptedOut(event.target.checked);
              setAnalyticsOptOut(event.target.checked, analytics);
            }}
          />
        )}
      </div>
    </Panel>
  );
}