import { useEffect, useId, useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  CauseWiseFunnel,
  CauseWiseGoals,
  CauseWiseStats,
  CauseWiseTopPages,
  CauseWiseTrafficChart,
  DEFAULT_DASHBOARD_LAYOUT,
  chartTypeForPanel,
} from "@razorsoft/causewise-react";
import type {
  FunnelData,
  FunnelsSection,
  GoalsSection,
  OverviewStats,
  RecentEvent,
  ReportingPeriod,
  StatusNotice,
  TopPage,
  TrafficSeries,
} from "@razorsoft/causewise-react";
import componentCss from "@razorsoft/causewise-react/styles.css";
import {
  adminBarOffset,
  AnalyticsAnchor,
  RecentEventsPanel,
  SectionNav,
  SectionPlaceholder,
  type EventFilter,
} from "./analytics-screen";
import { dashboardHeadingFromCleanTitle } from "./dashboard-title";
import { Referrers } from "./referrers";
import adminCss from "./admin.css";

type RangeId = "today" | "7d" | "30d";
type ViewName = "overview" | "dashboard" | "events";
type Variant = "dashboard" | "stats" | "pageviews" | "sessions" | "traffic" | "pages";

type Referrer = { label: string; count: number };
type SiteChoice = { id: string; name: string; domain: string };

type AnalyticsPayload = {
  ok: true;
  range: string;
  site: { id: string; name: string; domain: string };
  advancedUrl: string;
  period: ReportingPeriod;
  stats: OverviewStats;
  trend: TrafficSeries | null;
  topPages: TopPage[];
  referrers: Referrer[] | null;
  goals: GoalsSection | null;
  funnels: FunnelsSection | null;
  recentEvents: RecentEvent[] | null;
  overviewError: StatusNotice | null;
  summaryError: StatusNotice | null;
};

type ErrorPayload = {
  ok: false;
  code?: string;
  message?: string;
  sites?: SiteChoice[];
};

type ClientConfig = {
  restUrl: string;
  nonce: string;
  dashboardUrl: string;
  settingsUrl: string;
};

declare global {
  interface Window {
    causewiseAnalytics?: ClientConfig;
  }
}

const trafficChart = chartTypeForPanel(DEFAULT_DASHBOARD_LAYOUT, "traffic");

const RANGES: { id: RangeId; label: string }[] = [
  { id: "today", label: "Today" },
  { id: "7d", label: "Last 7 days" },
  { id: "30d", label: "Last 30 days" },
];

const WIDGET_RANGES: { id: RangeId; label: string }[] = [
  { id: "today", label: "Today" },
  { id: "7d", label: "7 Days" },
  { id: "30d", label: "30 Days" },
];

const pending = new Map<string, Promise<AnalyticsPayload | ErrorPayload>>();

function rangeLabel(range: string | undefined) {
  return RANGES.find((item) => item.id === range)?.label ?? range ?? "";
}

function formatCount(value: number) {
  return new Intl.NumberFormat("en-US").format(value);
}

function formatDate(value: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(date);
}

function safeAdvancedUrl(url: string | undefined) {
  try {
    const parsed = new URL(url ?? "");
    if (parsed.protocol === "https:" && parsed.hostname === "causewise.io") {
      return parsed.toString();
    }
  } catch {
    /* Use the workspace dashboard when the payload has no site link. */
  }
  return "https://causewise.io/dashboard";
}

function siteHref(siteId: string | undefined, suffix: string) {
  if (!siteId || !/^[A-Za-z0-9_-]{1,64}$/.test(siteId)) {
    return "https://causewise.io/dashboard";
  }
  return safeAdvancedUrl(`https://causewise.io/sites/${encodeURIComponent(siteId)}${suffix}`);
}

function userMessage(message: string | undefined, fallback: string) {
  const text = message?.trim() ?? "";
  if (!text || /dashboard_|denominator|\bscope\b|rollup|\bpayloads?\b|property condition|visitor id|pass the overview|pass funnel|were not included|step detail was not/i.test(text)) {
    return fallback;
  }
  return text;
}

function formatRate(value: number | null | undefined) {
  if (value == null) return "Not available";
  return `${new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 }).format(value)}%`;
}

function hasFunnelSteps(funnel: FunnelData) {
  return (funnel.steps ?? []).some(
    (step) => typeof step?.stepId === "string" && typeof step.name === "string" && typeof step.visitors === "number",
  );
}

function config(): ClientConfig | null {
  const value = window.causewiseAnalytics;
  if (!value?.restUrl || !value.nonce) return null;
  return value;
}

async function fetchAnalytics(range: string, view: ViewName): Promise<AnalyticsPayload | ErrorPayload> {
  const client = config();
  if (!client) {
    return { ok: false, code: "client_error", message: "Analytics could not be loaded." };
  }

  const url = new URL(client.restUrl, window.location.href);
  url.searchParams.set("range", range);
  url.searchParams.set("view", view);

  let response: Response;
  try {
    response = await fetch(url.toString(), {
      credentials: "same-origin",
      headers: {
        Accept: "application/json",
        "X-WP-Nonce": client.nonce,
      },
    });
  } catch {
    return { ok: false, code: "network_error", message: "CauseWise could not be reached." };
  }

  const body = (await response.json().catch(() => null)) as
    | (AnalyticsPayload & ErrorPayload)
    | null;
  if (!body || typeof body !== "object") {
    return { ok: false, code: "causewise_error", message: "Analytics could not be loaded." };
  }
  if (body.ok === false || !response.ok) {
    return {
      ok: false,
      code: typeof body.code === "string" ? body.code : "causewise_error",
      message: typeof body.message === "string" ? body.message : "Analytics could not be loaded.",
      sites: Array.isArray(body.sites) ? body.sites : undefined,
    };
  }
  return body;
}

type EventsPage = {
  ok: true;
  events: RecentEvent[];
  nextCursor: string | null;
  filter: EventFilter;
  range: string;
  limit: number;
};

function visibleEvents(value: unknown): RecentEvent[] {
  if (!Array.isArray(value)) return [];
  return value.map((item) => {
    const event = item && typeof item === "object" ? (item as Record<string, unknown>) : {};
    return {
      id: typeof event.id === "string" ? event.id : "",
      type: typeof event.type === "string" ? event.type : "",
      path: typeof event.path === "string" ? event.path : "",
      timestamp: typeof event.timestamp === "string" ? event.timestamp : "",
    };
  });
}

async function fetchEvents(input: {
  range: string;
  filter: EventFilter;
  limit: number;
  cursor?: string | null;
}): Promise<EventsPage | ErrorPayload> {
  const client = config();
  if (!client) {
    return { ok: false, code: "client_error", message: "Recent events could not be loaded." };
  }

  const url = new URL(client.restUrl, window.location.href);
  url.searchParams.set("view", "events");
  url.searchParams.set("range", input.range);
  url.searchParams.set("filter", input.filter);
  url.searchParams.set("limit", String(input.limit));
  if (input.cursor) url.searchParams.set("cursor", input.cursor);

  let response: Response;
  try {
    response = await fetch(url.toString(), {
      credentials: "same-origin",
      headers: {
        Accept: "application/json",
        "X-WP-Nonce": client.nonce,
      },
    });
  } catch {
    return { ok: false, code: "network_error", message: "CauseWise could not be reached." };
  }

  const body = (await response.json().catch(() => null)) as
    | (EventsPage & ErrorPayload & { events?: unknown; nextCursor?: unknown; filter?: unknown })
    | null;
  if (!body || typeof body !== "object") {
    return { ok: false, code: "causewise_error", message: "Recent events could not be loaded." };
  }
  if (body.ok === false || !response.ok) {
    return {
      ok: false,
      code: typeof body.code === "string" ? body.code : "causewise_error",
      message: typeof body.message === "string" ? body.message : "Recent events could not be loaded.",
    };
  }
  const filter = body.filter === "pageviews" || body.filter === "custom" ? body.filter : input.filter;
  return {
    ok: true,
    events: visibleEvents(body.events),
    nextCursor: typeof body.nextCursor === "string" && body.nextCursor ? body.nextCursor : null,
    filter,
    range: typeof body.range === "string" ? body.range : input.range,
    limit: input.limit,
  };
}

function loadAnalytics(range: string, view: ViewName) {
  const key = `${view}:${range}`;
  const existing = pending.get(key);
  if (existing) return existing;
  const request = fetchAnalytics(range, view).finally(() => {
    pending.delete(key);
  });
  pending.set(key, request);
  return request;
}

function SettingsLink({ code }: { code?: string }) {
  const href = config()?.settingsUrl;
  if (!href) return null;
  const label = code === "not_configured" || code === "site_required" ? "Open settings" : "Review settings";
  return (
    <p>
      <a className="causewise-text-link" href={href}>
        {label}
      </a>
    </p>
  );
}

function Notice({
  title,
  message,
  code,
  sites,
  tone,
}: {
  title: string;
  message: string;
  code?: string;
  sites?: SiteChoice[];
  tone: "error" | "empty";
}) {
  const titleId = useId();
  return (
    <section className="cw-root cw-section" data-theme="light" aria-labelledby={titleId}>
      <h2 id={titleId} className="cw-title">
        {title}
      </h2>
      <p className={tone === "error" ? "cw-status cw-status-error" : "cw-status"} role={tone === "error" ? "alert" : undefined}>
        {userMessage(message, "Analytics could not be loaded. Check the connection in settings.")}
      </p>
      {sites && sites.length > 0 ? (
        <>
          <p className="cw-note">Use one of these site IDs in settings.</p>
          <ul className="causewise-sites">
          {sites.map((site) => (
            <li key={site.id}>
              <span>{[site.name, site.domain].filter(Boolean).join(" · ") || "Site"}</span>
              <code>{site.id}</code>
            </li>
          ))}
          </ul>
        </>
      ) : null}
      <SettingsLink code={code} />
    </section>
  );
}

function PeriodLine({ period }: { period?: ReportingPeriod | null }) {
  if (!period) return null;
  const dates = period.start && period.end ? `, ${formatDate(period.start)} to ${formatDate(period.end)}` : "";
  const retention = period.retentionDays != null ? `. CauseWise keeps this data for ${period.retentionDays} days.` : "";
  return (
    <p className="cw-period">
      {rangeLabel(period.range)}
      {dates}
      {retention}
    </p>
  );
}

function ExternalLink({ href, children }: { href: string; children: string }) {
  return (
    <p>
      <a className="causewise-text-link" href={href} target="_blank" rel="noopener noreferrer">
        {children}
      </a>
    </p>
  );
}

function EmptyGuide({
  title,
  headline,
  body,
  href,
  linkLabel,
}: {
  title: string;
  headline: string;
  body: string;
  href: string;
  linkLabel: string;
}) {
  const titleId = useId();
  return (
    <section className="cw-root cw-section" data-theme="light" aria-labelledby={titleId}>
      <h2 id={titleId} className="cw-title">
        {title}
      </h2>
      <p className="cw-status">{headline}</p>
      <p className="cw-note">{body}</p>
      <ExternalLink href={href}>{linkLabel}</ExternalLink>
    </section>
  );
}

function GoalsPanel({ goals, siteId }: { goals: GoalsSection; siteId: string }) {
  const manageHref = siteHref(siteId, "#goals");
  if (!goals.available) {
    return (
      <Notice
        title="Goals"
        message={userMessage(
          goals.reason,
          "Goals are not available for this connection. Update the key in CauseWise, then save it again in settings.",
        )}
        tone="error"
      />
    );
  }
  if (goals.goals.length === 0) {
    return (
      <EmptyGuide
        title="Goals"
        headline="No goals have been configured yet."
        body="Track registrations, purchases, form submissions, and other important actions by creating a goal in CauseWise."
        href={manageHref}
        linkLabel="Manage Goals"
      />
    );
  }
  return (
    <>
      <CauseWiseGoals
        goals={{
          available: true,
          activeGoalCount: goals.activeGoalCount,
          totalConversions: goals.totalConversions,
          conversionRate: goals.conversionRate,
          truncated: false,
          goals: goals.goals,
        }}
      />
      {goals.truncated ? (
        <p className="cw-note">
          Some goals are not shown here.{" "}
          <a className="causewise-text-link" href={manageHref} target="_blank" rel="noopener noreferrer">
            Manage Goals
          </a>
        </p>
      ) : null}
    </>
  );
}

function FunnelBlock({ funnel, manageHref }: { funnel: FunnelData; manageHref: string }) {
  if (!hasFunnelSteps(funnel)) {
    const titleId = useId();
    return (
      <section className="cw-root cw-section" data-theme="light" aria-labelledby={titleId}>
        <h2 id={titleId} className="cw-title">
          {funnel.name || "Funnel"}
        </h2>
        <dl className="cw-inline-metrics">
          <div>
            <dt>Entered</dt>
            <dd>{formatCount(funnel.entryVisitors)}</dd>
          </div>
          <div>
            <dt>Completed</dt>
            <dd>{formatCount(funnel.completionCount)}</dd>
          </div>
          <div>
            <dt>Completion rate</dt>
            <dd>{formatRate(funnel.overallConversionRate)}</dd>
          </div>
        </dl>
        <p className="cw-note">Open CauseWise to see each step of this funnel.</p>
        <ExternalLink href={manageHref}>Manage Funnels</ExternalLink>
      </section>
    );
  }
  return (
    <CauseWiseFunnel
      funnel={{
        id: funnel.id,
        name: funnel.name,
        isActive: funnel.isActive,
        displayState: funnel.displayState,
        entryVisitors: funnel.entryVisitors,
        completionCount: funnel.completionCount,
        overallConversionRate: funnel.overallConversionRate,
        conversionWindow: funnel.conversionWindow,
        largestDropOff: funnel.largestDropOff,
        steps: funnel.steps,
        medianConversionTime: funnel.medianConversionTime,
      }}
    />
  );
}

function FunnelsPanel({ funnels, siteId }: { funnels: FunnelsSection; siteId: string }) {
  const manageHref = siteHref(siteId, "/funnels");
  if (!funnels.available) {
    return (
      <Notice
        title="Funnels"
        message={userMessage(
          funnels.reason,
          "Funnels are not available for this connection. Update the key in CauseWise, then save it again in settings.",
        )}
        tone="error"
      />
    );
  }
  if (funnels.funnels.length === 0) {
    return (
      <EmptyGuide
        title="Funnels"
        headline="No funnels have been configured yet."
        body="See how visitors move between steps, such as from a landing page to a signup or purchase, by creating a funnel in CauseWise."
        href={manageHref}
        linkLabel="Manage Funnels"
      />
    );
  }
  return (
    <>
      {funnels.funnels.map((funnel) => (
        <FunnelBlock key={funnel.id || funnel.name} funnel={funnel} manageHref={manageHref} />
      ))}
      {funnels.truncated ? (
        <p className="cw-note">
          Some funnels are not shown here.{" "}
          <a className="causewise-text-link" href={manageHref} target="_blank" rel="noopener noreferrer">
            Manage Funnels
          </a>
        </p>
      ) : null}
    </>
  );
}

function MissingSection({ title, message }: { title: string; message: string }) {
  const titleId = useId();
  return (
    <section className="cw-root cw-section" data-theme="light" aria-labelledby={titleId}>
      <h2 id={titleId} className="cw-title">
        {title}
      </h2>
      <p className="cw-status">{message}</p>
    </section>
  );
}

function TrafficEmpty() {
  const titleId = useId();
  return (
    <section className="cw-root cw-section" data-theme="light" aria-labelledby={titleId}>
      <h2 id={titleId} className="cw-title">
        Traffic
      </h2>
      <p className="cw-status">No traffic in this period.</p>
    </section>
  );
}

export function DashboardScreen({ initialRange }: { initialRange: string }) {
  const [requested, setRequested] = useState(initialRange);
  const [payload, setPayload] = useState<AnalyticsPayload | null>(null);
  const [error, setError] = useState<ErrorPayload | null>(null);
  const [loading, setLoading] = useState(true);
  const [eventFilter, setEventFilter] = useState<EventFilter>("all");
  const [pageSize, setPageSize] = useState(20);
  const [eventRows, setEventRows] = useState<RecentEvent[] | null>(null);
  const [nextCursor, setNextCursor] = useState<string | null>(null);
  const [eventsLoading, setEventsLoading] = useState(true);
  const [eventsRefreshing, setEventsRefreshing] = useState(false);
  const [eventsLoadingMore, setEventsLoadingMore] = useState(false);
  const [eventsError, setEventsError] = useState<string | null>(null);
  const requestSerial = useRef(0);
  const eventsSerial = useRef(0);

  useEffect(() => {
    const serial = ++requestSerial.current;
    let cancelled = false;
    setLoading(true);
    loadAnalytics(requested, "dashboard").then((result) => {
      if (cancelled || serial !== requestSerial.current) return;
      setLoading(false);
      if (result.ok) {
        setPayload(result);
        setError(null);
      } else {
        setPayload(null);
        setError(result);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [requested]);

  useEffect(() => {
    const serial = ++eventsSerial.current;
    let cancelled = false;
    setEventsLoading(true);
    setEventsRefreshing(false);
    setEventsLoadingMore(false);
    setEventsError(null);
    setEventRows(null);
    setNextCursor(null);
    fetchEvents({ range: requested, filter: eventFilter, limit: pageSize }).then((result) => {
      if (cancelled || serial !== eventsSerial.current) return;
      setEventsLoading(false);
      if (result.ok) {
        setEventRows(result.events);
        setNextCursor(result.nextCursor);
      } else {
        setEventRows(null);
        setEventsError(userMessage(result.message, "Recent events could not be loaded."));
      }
    });
    return () => {
      cancelled = true;
    };
  }, [requested, eventFilter, pageSize]);

  function refreshEvents() {
    const serial = ++eventsSerial.current;
    const range = requested;
    const filter = eventFilter;
    const limit = pageSize;
    setEventsRefreshing(true);
    setEventsLoading(false);
    setEventsError(null);
    fetchEvents({ range, filter, limit }).then((result) => {
      if (serial !== eventsSerial.current) return;
      setEventsRefreshing(false);
      if (result.ok) {
        setEventRows(result.events);
        setNextCursor(result.nextCursor);
      } else {
        setEventsError(userMessage(result.message, "Recent events could not be refreshed."));
      }
    });
  }

  function loadMoreEvents() {
    if (!nextCursor || eventsLoadingMore) return;
    const serial = eventsSerial.current;
    const cursor = nextCursor;
    setEventsLoadingMore(true);
    setEventsError(null);
    fetchEvents({ range: requested, filter: eventFilter, limit: pageSize, cursor }).then((result) => {
      if (serial !== eventsSerial.current) return;
      setEventsLoadingMore(false);
      if (result.ok) {
        setEventRows((current) => [...(current ?? []), ...result.events]);
        setNextCursor(result.nextCursor);
      } else {
        setEventsError(userMessage(result.message, "More events could not be loaded."));
      }
    });
  }

  const active = payload?.range || requested;

  function selectRange(next: RangeId) {
    if (next === requested && !error) return;
    setRequested(next);
    const url = new URL(window.location.href);
    url.searchParams.set("range", next);
    window.history.replaceState(null, "", url);
  }

  const screenWatch = loading ? "loading" : payload ? "ready" : "error";

  return (
    <div
      className="cw-root causewise-page"
      data-theme="light"
      style={{ ["--causewise-sticky-offset" as string]: `${adminBarOffset()}px` }}
    >
      <div className="causewise-toolbar">
        <div>
          <h2 className="causewise-heading">{payload ? dashboardHeadingFromCleanTitle(payload.site.name.trim()) : "Analytics"}</h2>
          {payload?.site.domain ? <p className="cw-period">{payload.site.domain}</p> : null}
          {payload ? <PeriodLine period={payload.period} /> : <p className="cw-period">{rangeLabel(requested)}</p>}
        </div>
        <div className="causewise-actions">
          <div className="causewise-ranges" role="group" aria-label="Date range">
            {RANGES.map((range) => (
              <button
                key={range.id}
                type="button"
                aria-pressed={active === range.id}
                onClick={() => selectRange(range.id)}
              >
                {range.label}
              </button>
            ))}
          </div>
          <a className="causewise-advanced" href={safeAdvancedUrl(payload?.advancedUrl)} target="_blank" rel="noopener noreferrer">
            Advanced analytics
          </a>
        </div>
      </div>

      {loading || payload ? <SectionNav watch={screenWatch} /> : null}

      {loading ? (
        <>
          <AnalyticsAnchor id="causewise-overview">
            <CauseWiseStats state="loading" />
          </AnalyticsAnchor>
          <AnalyticsAnchor id="causewise-traffic">
            <CauseWiseTrafficChart chartType={trafficChart} state="loading" />
          </AnalyticsAnchor>
          <div className="cw-admin-grid">
            <AnalyticsAnchor id="causewise-pages">
              <CauseWiseTopPages state="loading" />
            </AnalyticsAnchor>
            <AnalyticsAnchor id="causewise-referrers">
              <Referrers referrers={null} state="loading" />
            </AnalyticsAnchor>
          </div>
          <SectionPlaceholder id="causewise-goals" title="Goals" />
          <SectionPlaceholder id="causewise-funnels" title="Funnels" />
          <SectionPlaceholder id="causewise-recent-events" title="Recent events" />
        </>
      ) : null}

      {!loading && error ? (
        <Notice
          title={error.code === "not_configured" ? "Connect CauseWise" : "Analytics unavailable"}
          message={error.message || "Analytics could not be loaded."}
          code={error.code}
          sites={error.sites}
          tone="error"
        />
      ) : null}

      {!loading && payload ? (
        <>
          {payload.summaryError ? (
            <p className="cw-status cw-status-error" role="alert">
              {userMessage(payload.summaryError.message, "Some analytics could not be loaded. Check the connection in settings.")}
            </p>
          ) : null}
          <AnalyticsAnchor id="causewise-overview">
            <CauseWiseStats stats={payload.stats} />
          </AnalyticsAnchor>
          <AnalyticsAnchor id="causewise-traffic">
            {payload.trend && payload.trend.trend.length > 0 ? (
              <CauseWiseTrafficChart chartType={trafficChart} series={payload.trend} />
            ) : payload.trend ? (
              <TrafficEmpty />
            ) : (
              <CauseWiseTrafficChart chartType={trafficChart}
                state="error"
                error={{
                  code: payload.overviewError?.code,
                  message: userMessage(payload.overviewError?.message, "Traffic could not be loaded."),
                }}
              />
            )}
          </AnalyticsAnchor>
          <div className="cw-admin-grid">
            <AnalyticsAnchor id="causewise-pages">
              <CauseWiseTopPages pages={payload.topPages} />
            </AnalyticsAnchor>
            <AnalyticsAnchor id="causewise-referrers">
              <Referrers
                referrers={payload.referrers}
                state={payload.referrers ? "ready" : "error"}
                error={payload.overviewError}
              />
            </AnalyticsAnchor>
          </div>
          <AnalyticsAnchor id="causewise-goals">
            {payload.goals ? (
              <GoalsPanel goals={payload.goals} siteId={payload.site.id} />
            ) : (
              <MissingSection title="Goals" message="Goals could not be loaded." />
            )}
          </AnalyticsAnchor>
          <AnalyticsAnchor id="causewise-funnels">
            {payload.funnels ? (
              <FunnelsPanel funnels={payload.funnels} siteId={payload.site.id} />
            ) : (
              <MissingSection title="Funnels" message="Funnels could not be loaded." />
            )}
          </AnalyticsAnchor>
          <RecentEventsPanel
            events={eventsLoading && eventRows === null ? null : eventRows}
            activityHref={siteHref(payload.site.id, "/events")}
            filter={eventFilter}
            pageSize={pageSize}
            hasMore={Boolean(nextCursor)}
            loading={eventsLoading}
            loadingMore={eventsLoadingMore}
            refreshing={eventsRefreshing}
            error={eventsError}
            onFilter={setEventFilter}
            onPageSize={setPageSize}
            onLoadMore={loadMoreEvents}
            onRefresh={refreshEvents}
          />
        </>
      ) : null}
    </div>
  );
}

function isRangeId(value: string | null | undefined): value is RangeId {
  return value === "today" || value === "7d" || value === "30d";
}

function storedStatsRange(fallback: string): RangeId {
  try {
    const saved = window.localStorage.getItem("causewise-stats-range");
    if (isRangeId(saved)) return saved;
  } catch {
    /* Storage can be blocked. The widget still works for this visit. */
  }
  return isRangeId(fallback) ? fallback : "7d";
}

function useOverview(range: string) {
  const [payload, setPayload] = useState<AnalyticsPayload | null>(null);
  const [error, setError] = useState<ErrorPayload | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    loadAnalytics(range, "overview").then((result) => {
      if (cancelled) return;
      setLoading(false);
      if (result.ok) {
        setPayload(result);
        setError(null);
      } else {
        setPayload(null);
        setError(result);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [range]);

  return { payload, error, loading };
}

function StatsWidget({ initialRange }: { initialRange: string }) {
  const [range, setRange] = useState<RangeId>(() => storedStatsRange(initialRange));
  const [tab, setTab] = useState<"pages" | "referrers">("pages");
  const { payload, error, loading } = useOverview(range);

  function selectRange(next: RangeId) {
    setRange(next);
    try {
      window.localStorage.setItem("causewise-stats-range", next);
    } catch {
      /* The selected range still applies until the page is reloaded. */
    }
  }

  return (
    <div className="cw-root causewise-widget causewise-stats" data-theme="light" aria-busy={loading || undefined}>
      <div className="causewise-ranges" role="group" aria-label="Date range">
        {WIDGET_RANGES.map((item) => (
          <button key={item.id} type="button" aria-pressed={range === item.id} onClick={() => selectRange(item.id)}>
            {item.label}
          </button>
        ))}
      </div>

      {loading ? <p className="cw-status">Loading</p> : null}

      {!loading && error ? (
        <div>
          <p className="cw-status cw-status-error" role="alert">
            {userMessage(error.message, "Analytics could not be loaded. Check the connection in settings.")}
          </p>
          {error.sites && error.sites.length > 0 ? (
            <ul className="causewise-sites">
              {error.sites.map((site) => (
                <li key={site.id}>
                  <span>{[site.name, site.domain].filter(Boolean).join(" · ") || "Site"}</span>
                  <code>{site.id}</code>
                </li>
              ))}
            </ul>
          ) : null}
          <SettingsLink code={error.code} />
        </div>
      ) : null}

      {!loading && !error && payload ? (
        <>
          <div className="causewise-stat-row">
            <div>
              <p className="causewise-kicker">Page views</p>
              <p className="causewise-value">{formatCount(payload.stats.pageviews)}</p>
            </div>
            <div>
              <p className="causewise-kicker">Unique sessions</p>
              <p className="causewise-value">{formatCount(payload.stats.sessions)}</p>
            </div>
          </div>
          {payload.trend && payload.trend.trend.length > 0 ? (
            <CauseWiseTrafficChart chartType={trafficChart} headingLevel={3} series={payload.trend} />
          ) : (
            <p className="cw-status">No traffic in this period.</p>
          )}
          <div className="causewise-tabs" role="tablist" aria-label="Traffic details">
            <button
              id="causewise-tab-pages"
              type="button"
              role="tab"
              aria-selected={tab === "pages"}
              aria-controls="causewise-stats-panel"
              onClick={() => setTab("pages")}
            >
              Top Pages
            </button>
            <button
              id="causewise-tab-referrers"
              type="button"
              role="tab"
              aria-selected={tab === "referrers"}
              aria-controls="causewise-stats-panel"
              onClick={() => setTab("referrers")}
            >
              Referrers
            </button>
          </div>
          <div
            id="causewise-stats-panel"
            className="causewise-tab-panel"
            role="tabpanel"
            aria-labelledby={tab === "pages" ? "causewise-tab-pages" : "causewise-tab-referrers"}
          >
            {tab === "pages" ? (
              <CauseWiseTopPages headingLevel={3} pages={payload.topPages.slice(0, 5)} />
            ) : (
              <Referrers
                referrers={payload.referrers}
                state={payload.referrers ? "ready" : "error"}
                error={payload.overviewError}
              />
            )}
          </div>
        </>
      ) : null}
    </div>
  );
}

function MetricWidget({
  range,
  pick,
}: {
  range: string;
  pick: (stats: OverviewStats) => number;
}) {
  const { payload, error, loading } = useOverview(range);
  if (loading) {
    return (
      <div className="cw-root causewise-compact" data-theme="light">
        <p className="cw-status">Loading</p>
      </div>
    );
  }
  if (error || !payload) {
    return (
      <div className="cw-root causewise-compact" data-theme="light">
        <p className="cw-status cw-status-error" role="alert">
          {userMessage(error?.message, "Analytics could not be loaded. Check the connection in settings.")}
        </p>
        <SettingsLink code={error?.code} />
      </div>
    );
  }
  return (
    <div className="cw-root causewise-compact" data-theme="light">
      <p className="causewise-kicker">{rangeLabel(payload.range)}</p>
      <p className="causewise-value">{formatCount(pick(payload.stats))}</p>
    </div>
  );
}

function TrafficWidget({ range }: { range: string }) {
  const { payload, error, loading } = useOverview(range);
  const points = payload?.trend?.trend ?? [];
  if (!loading && !error && payload && points.length === 0) {
    return (
      <div className="cw-root causewise-compact" data-theme="light">
        <p className="cw-status">No traffic in this period.</p>
      </div>
    );
  }
  return (
    <div className="causewise-widget">
      <CauseWiseTrafficChart chartType={trafficChart}
        headingLevel={3}
        series={points.length > 0 ? payload?.trend : undefined}
        state={loading ? "loading" : error ? "error" : "ready"}
        error={error ? { code: error.code, message: userMessage(error.message, "Traffic could not be loaded.") } : null}
      />
    </div>
  );
}

function PagesWidget({ range }: { range: string }) {
  const { payload, error, loading } = useOverview(range);
  const pages = payload?.topPages?.slice(0, 5) ?? null;
  return (
    <div className="causewise-widget">
      <CauseWiseTopPages
        headingLevel={3}
        pages={pages}
        state={loading ? "loading" : error ? "error" : "ready"}
        error={error ? { code: error.code, message: userMessage(error.message, "Top pages could not be loaded.") } : null}
      />
    </div>
  );
}

export function WidgetApp({ variant, range }: { variant: Variant; range: string }) {
  if (variant === "stats") return <StatsWidget initialRange={range} />;
  if (variant === "pageviews") return <MetricWidget range={range} pick={(stats) => stats.pageviews} />;
  if (variant === "sessions") return <MetricWidget range={range} pick={(stats) => stats.sessions} />;
  if (variant === "traffic") return <TrafficWidget range={range} />;
  if (variant === "pages") return <PagesWidget range={range} />;
  return <DashboardScreen initialRange={range} />;
}

const styles = `${componentCss}\n${adminCss}`;
const mounted = new WeakSet<HTMLElement>();

function boot() {
  document.querySelectorAll<HTMLElement>("[data-causewise-mount]").forEach((host) => {
    if (mounted.has(host)) return;
    mounted.add(host);
    const variant = (host.dataset.variant || "dashboard") as Variant;
    const range = host.dataset.range || "7d";
    const shadow = host.attachShadow({ mode: "open" });
    const style = document.createElement("style");
    style.textContent = styles;
    const mount = document.createElement("div");
    shadow.append(style, mount);
    createRoot(mount).render(<WidgetApp variant={variant} range={range} />);
  });
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", boot);
} else {
  boot();
}