import { useEffect, useId, useRef, useState, type CSSProperties } from "react";
import {
  applyLayoutPreference,
  dashboardLayout,
  layoutPreference,
  packLayout,
  panelNavItem,
  panelStyle,
  renderableChartType,
  setPanelVisible,
  visiblePanels,
  type DashboardLayout,
  type DashboardPanel,
  type DashboardSectionKey,
} from "./dashboard-layout";
import { DashboardEditor } from "./dashboard-editor";
import {
  clearDashboardLayout,
  dashboardLayoutKey,
  readDashboardLayout,
  writeDashboardLayout,
  type DashboardLayoutStore,
} from "./dashboard-storage";
import { CauseWiseFunnel } from "./funnel";
import { formatDate, formatRange } from "./format";
import { CauseWiseGoals } from "./goals";
import { CauseWiseRecentEvents } from "./recent-events";
import { CauseWiseReferrers } from "./referrers";
import { sectionInRoot, useCurrentNavSection } from "./nav-section";
import { Root } from "./section";
import { CauseWiseStats } from "./stats";
import { CauseWiseTopPages } from "./top-pages";
import { CauseWiseTrafficChart } from "./traffic-chart";
import type {
  DashboardSections,
  FunnelsSection,
  FunnelData,
  GoalsSection,
  GoalRow,
  OverviewStats,
  RecentEvent,
  Referrer,
  ReportingPeriod,
  StatusNotice,
  ThemeName,
  TopPage,
  TrafficPoint,
  TrafficSeries,
  ViewState,
} from "./types";

const RANGE_OPTIONS = [
  { id: "today", label: "Today" },
  { id: "7d", label: "Last 7 days" },
  { id: "30d", label: "Last 30 days" },
] as const;

export type CauseWiseDashboardProps = {
  title?: string;
  subtitle?: string;
  period?: ReportingPeriod | null;
  stats?: OverviewStats | null;
  trend?: TrafficSeries | TrafficPoint[] | null;
  topPages?: TopPage[] | null;
  referrers?: Referrer[] | null;
  goals?: GoalsSection | GoalRow[] | null;
  funnels?: FunnelsSection | FunnelData[] | null;
  recentEvents?: RecentEvent[] | null;
  sections?: DashboardSections;
  /** Fixed layout for this release. Visibility and range can override the default. */
  layout?: DashboardLayout;
  /** Section flags or a comma-separated allowlist. Ignored when `layout` is passed. */
  sectionVisibility?: Partial<Record<DashboardSectionKey, boolean>> | string;
  range?: string;
  onRangeChange?: (range: "today" | "7d" | "30d") => void;
  advancedHref?: string;
  notice?: string | null;
  theme?: ThemeName;
  state?: ViewState;
  error?: StatusNotice | null;
  className?: string;
  /**
   * Enables Customize layout for one authorized viewer.
   * `layoutStore` is the account preference. `storage` is only the temporary browser copy.
   * Pass `storage: null` when localStorage cannot be used. The edit still works for this visit.
   */
  layoutScope?: {
    site: string;
    userId: string | number;
    instance: string;
    storage?: Storage | null;
    layoutStore?: DashboardLayoutStore;
  };
};

function shown(flag: boolean | undefined, present: boolean) {
  if (flag === false) return false;
  if (flag === true) return true;
  return present;
}

function safeAdvancedHref(url: string | undefined) {
  try {
    const parsed = new URL(url ?? "");
    if (parsed.protocol === "https:" && parsed.hostname === "causewise.io") return parsed.toString();
  } catch {
    /* Fall through to the public workspace. */
  }
  return "https://causewise.io/dashboard";
}

export function CauseWiseDashboard(props: CauseWiseDashboardProps) {
  if (props.layout || props.sectionVisibility !== undefined || props.onRangeChange) {
    const layout =
      props.layout ??
      dashboardLayout({
        range: props.range,
        sections: props.sectionVisibility,
      });
    return <LayoutDashboard {...props} layout={layout} />;
  }
  return <StackedDashboard {...props} />;
}

function StackedDashboard({
  title = "Analytics",
  period,
  stats,
  trend,
  topPages,
  goals,
  funnels,
  recentEvents,
  sections,
  theme = "system",
  state = "ready",
  error,
  className,
}: CauseWiseDashboardProps) {
  const funnelList = Array.isArray(funnels)
    ? funnels
    : funnels?.available
      ? funnels.funnels
      : [];
  const funnelUnavailable = !Array.isArray(funnels) && funnels?.available === false;
  const showPeriod = shown(sections?.period, period != null);
  const showStats = shown(sections?.stats, stats != null);
  const showTraffic = shown(sections?.traffic, trend != null);
  const showPages = shown(sections?.topPages, topPages != null);
  const showGoals = shown(sections?.goals, goals != null);
  const showFunnels = shown(sections?.funnels, funnels != null);
  const showEvents = shown(sections?.recentEvents, recentEvents != null);

  return (
    <Root theme={theme} className={["cw-dashboard", className].filter(Boolean).join(" ")}>
      <header className="cw-dashboard-head">
        <h2 className="cw-title">{title}</h2>
        {state === "ready" && showPeriod && period ? (
          <p className="cw-period">
            {formatRange(period.range)}
            {period.start && period.end ? `, ${formatDate(period.start)} to ${formatDate(period.end)}` : ""}
            {period.retentionDays != null ? `. Retention ${period.retentionDays} days.` : ""}
          </p>
        ) : null}
        {state === "ready" && showPeriod && !period ? (
          <p className="cw-status">No reporting period was included.</p>
        ) : null}
      </header>
      {state === "loading" ? <p className="cw-status">Loading</p> : null}
      {state === "error" ? (
        <p className="cw-status cw-status-error" role="alert">
          {error?.message ?? "Analytics could not be displayed."}
        </p>
      ) : null}
      {state === "ready" ? (
        <div className="cw-stack">
          {showStats ? <CauseWiseStats stats={stats} headingLevel={3} /> : null}
          {showTraffic ? <CauseWiseTrafficChart series={trend} headingLevel={3} /> : null}
          {showPages ? <CauseWiseTopPages pages={topPages} headingLevel={3} /> : null}
          {showGoals ? <CauseWiseGoals goals={goals} headingLevel={3} /> : null}
          {showFunnels && funnelUnavailable && !Array.isArray(funnels) ? (
            <section className="cw-section" aria-label="Funnels">
              <h3 className="cw-title">Funnels</h3>
              <p className="cw-status">{funnels?.reason}</p>
            </section>
          ) : null}
          {showFunnels && !funnelUnavailable
            ? funnelList.map((funnel) => (
                <CauseWiseFunnel key={funnel.id} funnel={funnel} headingLevel={3} />
              ))
            : null}
          {showFunnels && !funnelUnavailable && funnelList.length === 0 ? (
            <section className="cw-section" aria-label="Funnels">
              <h3 className="cw-title">Funnels</h3>
              <p className="cw-status">No funnels were included.</p>
            </section>
          ) : null}
          {!Array.isArray(funnels) && funnels?.available && funnels.truncated ? (
            <p className="cw-note">The funnel list is truncated.</p>
          ) : null}
          {showEvents ? <CauseWiseRecentEvents events={recentEvents} headingLevel={3} /> : null}
        </div>
      ) : null}
    </Root>
  );
}

function LayoutDashboard({
  title = "Analytics",
  subtitle,
  period,
  stats,
  trend,
  topPages,
  referrers,
  goals,
  funnels,
  recentEvents,
  layout,
  range,
  onRangeChange,
  advancedHref,
  notice,
  theme = "system",
  state = "ready",
  error,
  className,
  layoutScope,
}: CauseWiseDashboardProps & { layout: DashboardLayout }) {
  const prefix = useId().replace(/:/g, "");
  const storageKey = layoutScope
    ? dashboardLayoutKey(layoutScope.site, String(layoutScope.userId), layoutScope.instance)
    : "";
  const storage = layoutScope ? resolveLayoutStorage(layoutScope.storage) : null;
  const layoutStore = layoutScope?.layoutStore;
  const authorSignature = layout.panels.map((item) => `${item.id}:${item.visible ? 1 : 0}:${item.w}`).join("|");
  const authorLayout = useRef(layout);
  authorLayout.current = layout;
  const [viewerLayout, setViewerLayout] = useState(() =>
    layoutStore ? packLayout(layout) : savedViewerLayout(layout, storage, storageKey),
  );
  const [editing, setEditing] = useState(false);
  const [layoutReady, setLayoutReady] = useState(!layoutStore);
  const [layoutMessage, setLayoutMessage] = useState("");
  const edited = useRef(false);
  const generation = useRef(0);
  const pendingLayout = useRef<DashboardLayout | null>(null);
  const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const inflight = useRef<Promise<void> | null>(null);
  const persistRef = useRef<(next: DashboardLayout, gen: number) => Promise<void>>(async () => undefined);
  persistRef.current = async (next, gen) => {
    if (!layoutStore || gen !== generation.current) return;
    const run = (async () => {
      try {
        await layoutStore.save(layoutPreference(next));
        if (gen !== generation.current) return;
        clearDashboardLayout(storage, storageKey);
      } catch {
        if (gen !== generation.current) return;
        const kept = writeDashboardLayout(storage, storageKey, next);
        setLayoutMessage(
          kept
            ? "The layout could not be saved to WordPress. This browser will keep it for now."
            : "This browser could not save the layout. The change lasts for this visit.",
        );
      }
    })();
    inflight.current = run;
    await run;
  };
  function flushSave() {
    if (saveTimer.current) clearTimeout(saveTimer.current);
    saveTimer.current = null;
    const next = pendingLayout.current;
    pendingLayout.current = null;
    if (next) void persistRef.current(next, generation.current);
  }
  const flushRef = useRef(flushSave);
  flushRef.current = flushSave;
  useEffect(() => () => flushRef.current(), []);
  useEffect(() => {
    if (!storageKey) return;
    if (!layoutStore) {
      setViewerLayout(savedViewerLayout(authorLayout.current, storage, storageKey));
      setLayoutReady(true);
      return;
    }
    let cancelled = false;
    setLayoutReady(false);
    layoutStore
      .load()
      .then((saved) => {
        if (cancelled || edited.current) return;
        clearDashboardLayout(storage, storageKey);
        setViewerLayout(
          saved ? applyLayoutPreference(authorLayout.current, saved) : packLayout(authorLayout.current),
        );
        setLayoutMessage("");
      })
      .catch(() => {
        if (cancelled || edited.current) return;
        const local = readDashboardLayout(storage, storageKey);
        if (local) {
          setViewerLayout(applyLayoutPreference(authorLayout.current, local));
          setLayoutMessage("The saved layout could not be loaded from WordPress. Showing the copy from this browser.");
        } else {
          setViewerLayout(packLayout(authorLayout.current));
          setLayoutMessage("The saved layout could not be loaded from WordPress.");
        }
      })
      .finally(() => {
        if (!cancelled) setLayoutReady(true);
      });
    return () => {
      cancelled = true;
    };
  }, [authorSignature, layoutStore, storage, storageKey]);
  const displayed = storageKey ? viewerLayout : layout;
  const panels = visiblePanels(displayed);
  const navRef = useRef<HTMLElement>(null);
  const sectionIds = panels.map((panelItem) => `${prefix}-${panelItem.id}`);
  const { active: activeSection, activate } = useCurrentNavSection(navRef, sectionIds, () => 8, authorSignature);
  const selected = range === "today" || range === "30d" || range === "7d" ? range : layout.range;
  const funnelList = Array.isArray(funnels) ? funnels : funnels?.available ? funnels.funnels : [];
  const goalSection = Array.isArray(goals) ? { available: true as const, goals } : goals;

  function panelId(panelItem: DashboardPanel) {
    return `${prefix}-${panelItem.id}`;
  }

  function updateLayout(next: DashboardLayout, message: string) {
    const packed = packLayout(next);
    edited.current = true;
    setViewerLayout(packed);
    setLayoutMessage(message);
    if (!storageKey) return;
    if (!layoutStore) {
      if (!writeDashboardLayout(storage, storageKey, packed)) {
        setLayoutMessage("This browser could not save the layout. The change lasts for this visit.");
      }
      return;
    }
    pendingLayout.current = packed;
    if (saveTimer.current) clearTimeout(saveTimer.current);
    saveTimer.current = setTimeout(() => {
      saveTimer.current = null;
      const queued = pendingLayout.current;
      pendingLayout.current = null;
      if (queued) void persistRef.current(queued, generation.current);
    }, 300);
  }

  return (
    <Root theme={theme} className={["cw-dashboard", className].filter(Boolean).join(" ")}>
      <div className="cw-dashboard-toolbar">
        <div>
          <h2 className="cw-title">{title}</h2>
          {subtitle ? <p className="cw-period">{subtitle}</p> : null}
          {state === "ready" && period?.start && period.end ? (
            <p className="cw-period">
              {formatRange(period.range)}, {formatDate(period.start)} to {formatDate(period.end)}
            </p>
          ) : null}
        </div>
        <div className="cw-dashboard-actions">
          <div className="cw-dashboard-ranges" role="group" aria-label="Date range">
            {RANGE_OPTIONS.map((item) => (
              <button
                key={item.id}
                type="button"
                aria-pressed={selected === item.id}
                onClick={() => onRangeChange?.(item.id)}
              >
                {item.label}
              </button>
            ))}
          </div>
          <a className="cw-dashboard-advanced" href={safeAdvancedHref(advancedHref)} target="_blank" rel="noopener noreferrer">
            Advanced analytics
          </a>
          {storageKey && layoutReady ? (
            <div className="cw-layout-tools" role="group" aria-label="Layout">
              <button
                type="button"
                aria-pressed={editing}
                onClick={() => {
                  if (editing) flushSave();
                  setEditing((current) => !current);
                }}
              >
                {editing ? "Done" : "Customize layout"}
              </button>
              {editing ? (
                <button
                  type="button"
                  onClick={() => {
                    const previous = displayed;
                    generation.current += 1;
                    if (saveTimer.current) clearTimeout(saveTimer.current);
                    saveTimer.current = null;
                    pendingLayout.current = null;
                    edited.current = true;
                    setViewerLayout(packLayout(layout));
                    setLayoutMessage("Layout reset to the page default.");
                    const pending = inflight.current;
                    void (async () => {
                      try {
                        await pending;
                        if (layoutStore) await layoutStore.reset();
                        clearDashboardLayout(storage, storageKey);
                      } catch {
                        setViewerLayout(previous);
                        setLayoutMessage("The layout could not be reset in WordPress.");
                      }
                    })();
                  }}
                >
                  Reset layout
                </button>
              ) : null}
            </div>
          ) : null}
        </div>
      </div>
      {layoutMessage ? (
        <p className="cw-layout-status" aria-live="polite">
          {layoutMessage}
        </p>
      ) : null}
      {panels.length > 0 ? (
        <nav ref={navRef} className="cw-dashboard-nav" aria-label="Dashboard sections">
          {panels.map((panelItem) => {
            const nav = panelNavItem(panelItem.type);
            const id = panelId(panelItem);
            return (
              <a
                key={panelItem.id}
                href={`#${id}`}
                aria-current={activeSection === id ? "location" : undefined}
                onClick={(event) => {
                  const target = sectionInRoot(event.currentTarget, id);
                  if (!target) return;
                  event.preventDefault();
                  activate(id);
                  target.scrollIntoView({ behavior: "smooth", block: "start" });
                }}
              >
                {nav.label}
              </a>
            );
          })}
        </nav>
      ) : (
        <p className="cw-status">Choose a dashboard section.</p>
      )}
      {state === "error" ? (
        <p className="cw-status cw-status-error" role="alert">
          {error?.message ?? "Analytics could not be displayed."}
        </p>
      ) : null}
      {state === "ready" && notice ? (
        <p className="cw-status cw-status-error" role="alert">
          {notice}
        </p>
      ) : null}
      {state !== "error" && panels.length > 0 ? (
        editing ? (
          <DashboardEditor
            layout={displayed}
            onCommit={updateLayout}
            onHide={(panelItem) => updateLayout(setPanelVisible(displayed, panelItem.id, false), `${panelNavItem(panelItem.type).label} hidden.`)}
            panelDomId={panelId}
            renderPanel={(panelItem) =>
              renderPanel(panelItem, {
                state,
                stats,
                trend,
                topPages,
                referrers,
                goalSection,
                funnelList,
                funnels,
                recentEvents,
                error,
              })
            }
          />
        ) : (
          <div className="cw-layout">
            {panels.map((panelItem) => (
              <div
                key={panelItem.id}
                id={panelId(panelItem)}
                className="cw-panel"
                style={panelStyle(panelItem) as CSSProperties}
                data-panel={panelItem.type}
              >
                {renderPanel(panelItem, {
                  state,
                  stats,
                  trend,
                  topPages,
                  referrers,
                  goalSection,
                  funnelList,
                  funnels,
                  recentEvents,
                  error,
                })}
              </div>
            ))}
          </div>
        )
      ) : null}
    </Root>
  );
}

function resolveLayoutStorage(storage: Storage | null | undefined): Storage | null {
  if (storage === null) return null;
  if (storage) return storage;
  try {
    return window.localStorage;
  } catch {
    return null;
  }
}

function savedViewerLayout(author: DashboardLayout, storage: Storage | null, key: string): DashboardLayout {
  if (!key) return packLayout(author);
  return applyLayoutPreference(author, readDashboardLayout(storage, key));
}

function renderPanel(
  panelItem: DashboardPanel,
  data: {
    state: ViewState;
    stats?: OverviewStats | null;
    trend?: TrafficSeries | TrafficPoint[] | null;
    topPages?: TopPage[] | null;
    referrers?: Referrer[] | null;
    goalSection?: GoalsSection | null;
    funnelList: FunnelData[];
    funnels?: FunnelsSection | FunnelData[] | null;
    recentEvents?: RecentEvent[] | null;
    error?: StatusNotice | null;
  },
) {
  const view = data.state === "loading" ? "loading" : "ready";
  if (panelItem.type === "stats") {
    return <CauseWiseStats stats={data.stats} state={view} headingLevel={3} />;
  }
  if (panelItem.type === "traffic") {
    const points = Array.isArray(data.trend) ? data.trend : data.trend?.trend;
    if (view === "ready" && points && points.length === 0) {
      return (
        <section className="cw-section" aria-label="Traffic">
          <h3 className="cw-title">Traffic</h3>
          <p className="cw-status">No traffic in this period.</p>
        </section>
      );
    }
    const trafficState = view === "loading" ? "loading" : data.trend ? "ready" : "error";
    return (
      <CauseWiseTrafficChart
        series={data.trend}
        chartType={renderableChartType(panelItem.chartType)}
        state={trafficState}
        error={trafficState === "error" ? data.error : undefined}
        headingLevel={3}
        emptyMessage="No traffic in this period."
      />
    );
  }
  if (panelItem.type === "top-pages") {
    return <CauseWiseTopPages pages={data.topPages} state={view} headingLevel={3} />;
  }
  if (panelItem.type === "referrers") {
    return (
      <CauseWiseReferrers
        referrers={data.referrers}
        state={view === "loading" ? "loading" : data.referrers ? "ready" : "error"}
        error={data.error}
        headingLevel={3}
      />
    );
  }
  if (panelItem.type === "goals") {
    if (view === "ready" && data.goalSection?.available === true && data.goalSection.goals.length === 0) {
      return (
        <section className="cw-section" aria-label="Goals">
          <h3 className="cw-title">Goals</h3>
          <p className="cw-status">No goals have been configured yet.</p>
        </section>
      );
    }
    return <CauseWiseGoals goals={data.goalSection} state={view === "ready" && !data.goalSection ? "error" : view} error={data.error} headingLevel={3} />;
  }
  if (panelItem.type === "funnels") {
    if (view === "loading") {
      return (
        <section className="cw-section" aria-label="Funnels" aria-busy="true">
          <h3 className="cw-title">Funnels</h3>
          <p className="cw-status">Loading</p>
        </section>
      );
    }
    if (!Array.isArray(data.funnels) && data.funnels?.available === false) {
      return (
        <section className="cw-section" aria-label="Funnels">
          <h3 className="cw-title">Funnels</h3>
          <p className="cw-status">{data.funnels.reason}</p>
        </section>
      );
    }
    if (data.funnelList.length === 0) {
      return (
        <section className="cw-section" aria-label="Funnels">
          <h3 className="cw-title">Funnels</h3>
          <p className="cw-status">No funnels have been configured yet.</p>
        </section>
      );
    }
    return (
      <div className="cw-panel-stack">
        {data.funnelList.map((funnel) => (
          <CauseWiseFunnel key={funnel.id} funnel={funnel} headingLevel={3} />
        ))}
        {!Array.isArray(data.funnels) && data.funnels?.available && data.funnels.truncated ? (
          <p className="cw-note">The funnel list is truncated.</p>
        ) : null}
      </div>
    );
  }
  return <CauseWiseRecentEvents events={data.recentEvents} state={view} headingLevel={3} />;
}