import { useId, useRef, type ReactNode } from "react";
import {
  DEFAULT_DASHBOARD_LAYOUT,
  displayPath,
  panelNavItem,
  sectionInRoot,
  useCurrentNavSection,
  visiblePanels,
  type RecentEvent,
} from "@razorsoft/causewise-react";

export const ANALYTICS_SECTIONS = visiblePanels(DEFAULT_DASHBOARD_LAYOUT).map((panel) => panelNavItem(panel.type));

export type AnalyticsSectionId = (typeof ANALYTICS_SECTIONS)[number]["id"];
export type EventFilter = "all" | "pageviews" | "custom";

const EVENT_FILTERS: { id: EventFilter; label: string }[] = [
  { id: "all", label: "All" },
  { id: "pageviews", label: "Pageviews" },
  { id: "custom", label: "Custom Events" },
];

export function isPageview(type: string | null | undefined) {
  return (type ?? "").trim().toLowerCase() === "pageview";
}

export function eventName(type: string | null | undefined) {
  const name = (type ?? "").trim();
  return name || "Custom event";
}

export function filterEvents<T extends { type: string }>(events: T[], filter: EventFilter) {
  if (filter === "pageviews") return events.filter((event) => isPageview(event.type));
  if (filter === "custom") return events.filter((event) => !isPageview(event.type));
  return events;
}

export function adminBarOffset(doc: Document = document) {
  const bar = doc.getElementById("wpadminbar");
  if (!bar) return 0;
  const height = bar.getBoundingClientRect().height;
  return Number.isFinite(height) && height > 0 ? Math.round(height) : 0;
}

export function sectionScrollOffset(adminBarHeight: number, navHeight: number) {
  const bar = Number.isFinite(adminBarHeight) && adminBarHeight > 0 ? adminBarHeight : 0;
  const nav = Number.isFinite(navHeight) && navHeight > 0 ? navHeight : 48;
  return bar + nav + 8;
}

export function activateSectionLink(link: HTMLAnchorElement, id: string) {
  const target = sectionInRoot(link, id);
  if (!target) return false;
  const nav = link.closest("nav");
  const offset = sectionScrollOffset(adminBarOffset(link.ownerDocument), nav?.getBoundingClientRect().height ?? 0);
  target.style.scrollMarginTop = `${offset}px`;
  if (typeof target.scrollIntoView === "function") {
    target.scrollIntoView({ behavior: "smooth", block: "start" });
  }
  return true;
}

export function AnalyticsAnchor({ id, children }: { id: AnalyticsSectionId; children: ReactNode }) {
  return (
    <div id={id} className="causewise-anchor">
      {children}
    </div>
  );
}

export function SectionPlaceholder({ id, title }: { id: AnalyticsSectionId; title: string }) {
  return (
    <section id={id} className="cw-root cw-section causewise-anchor" aria-busy="true">
      <h2 className="cw-title">{title}</h2>
      <p className="cw-status">Loading</p>
    </section>
  );
}

export function SectionNav({ watch = "ready" }: { watch?: string }) {
  const navRef = useRef<HTMLElement>(null);
  const sectionIds = ANALYTICS_SECTIONS.map((section) => section.id);
  const { active, activate } = useCurrentNavSection(
    navRef,
    sectionIds,
    (nav) => sectionScrollOffset(adminBarOffset(nav.ownerDocument), nav.getBoundingClientRect().height),
    watch,
  );

  return (
    <nav ref={navRef} className="causewise-nav" aria-label="Analytics sections">
      {ANALYTICS_SECTIONS.map((section) => (
        <a
          key={section.id}
          href={`#${section.id}`}
          aria-current={active === section.id ? "location" : undefined}
          onClick={(event) => {
            const link = event.currentTarget;
            if (!sectionInRoot(link, section.id)) return;
            event.preventDefault();
            activate(section.id);
            activateSectionLink(link, section.id);
          }}
        >
          {section.label}
        </a>
      ))}
    </nav>
  );
}

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

function eventFields(event: RecentEvent) {
  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 : "",
  };
}

export const EVENT_PAGE_SIZES = [10, 20, 50] as const;

export function RecentEventsPanel({
  events,
  activityHref,
  filter,
  pageSize,
  hasMore,
  loading,
  loadingMore,
  refreshing,
  error,
  onFilter,
  onPageSize,
  onLoadMore,
  onRefresh,
}: {
  events: RecentEvent[] | null;
  activityHref: string;
  filter: EventFilter;
  pageSize: number;
  hasMore: boolean;
  loading: boolean;
  loadingMore: boolean;
  refreshing: boolean;
  error: string | null;
  onFilter: (filter: EventFilter) => void;
  onPageSize: (size: number) => void;
  onLoadMore: () => void;
  onRefresh: () => void;
}) {
  const titleId = useId();
  const rows = events ? events.map(eventFields) : [];
  const busy = loading || loadingMore || refreshing;
  const emptyCopy =
    filter === "pageviews"
      ? "No pageviews in this period."
      : filter === "custom"
        ? "No custom events in this period."
        : "No activity in this period.";

  return (
    <section id="causewise-recent-events" className="cw-root cw-section causewise-anchor" data-theme="light" aria-labelledby={titleId} aria-busy={busy || undefined}>
      <div className="causewise-event-toolbar">
        <h2 id={titleId} className="cw-title">
          Recent events
        </h2>
        <button type="button" className="causewise-refresh" onClick={onRefresh} disabled={busy} aria-busy={refreshing || undefined}>
          {refreshing ? "Refreshing events" : "Refresh events"}
        </button>
      </div>
      <div className="causewise-event-controls">
        <div className="causewise-event-filters" role="group" aria-label="Filter events">
          {EVENT_FILTERS.map((item) => (
            <button key={item.id} type="button" aria-pressed={filter === item.id} onClick={() => onFilter(item.id)} disabled={busy}>
              {item.label}
            </button>
          ))}
        </div>
        <label className="causewise-page-size">
          Page size
          <select
            value={pageSize}
            disabled={busy}
            onChange={(event) => onPageSize(Number(event.target.value))}
          >
            {EVENT_PAGE_SIZES.map((size) => (
              <option key={size} value={size}>
                {size}
              </option>
            ))}
          </select>
        </label>
      </div>
      {error ? (
        <p className="cw-status cw-status-error" role="alert">
          {error}
        </p>
      ) : null}
      {loading && events === null ? <p className="cw-status">Loading recent events.</p> : null}
      {!loading && events === null && !error ? <p className="cw-status">Recent events could not be loaded.</p> : null}
      {events && events.length === 0 ? (
        <>
          <p className="cw-status">{emptyCopy}</p>
          <p className="cw-note">Page views and other actions appear here after people visit your site.</p>
        </>
      ) : null}
      {rows.length > 0 ? (
        <div className="cw-table-wrap" aria-live="polite">
          <table>
            <thead>
              <tr>
                <th scope="col">Event</th>
                <th scope="col">Type</th>
                <th scope="col">Time</th>
                <th scope="col">Path</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((event) => {
                const pageview = isPageview(event.type);
                return (
                  <tr key={event.id || `${event.timestamp}-${event.path}-${event.type}`}>
                    <th scope="row">
                      <span className="causewise-event-name">{pageview ? "Pageview" : eventName(event.type)}</span>
                    </th>
                    <td>{pageview ? "Pageview" : "Custom event"}</td>
                    <td>{formatTimestamp(event.timestamp)}</td>
                    <td className="cw-path" title={displayPath(event.path) || "—"}>
                      {displayPath(event.path) || "—"}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      ) : null}
      {hasMore ? (
        <p>
          <button type="button" className="causewise-refresh" onClick={onLoadMore} disabled={busy} aria-busy={loadingMore || undefined}>
            {loadingMore ? "Loading more events" : "Load more"}
          </button>
        </p>
      ) : null}
      <p>
        <a className="causewise-text-link" href={activityHref} target="_blank" rel="noopener noreferrer">
          View activity
        </a>
      </p>
    </section>
  );
}