import { useEffect, useReducer, useRef, useState } from 'react';
import type { ActivityItem, ChatSyncStatus, DashboardEvent } from '../../../../../packages/api-contracts/src/index.js';
import { useDashboardRealtime } from '../../app/realtime-provider.js';
import { RedditUsernameLink } from '../../components/reddit-username-link.js';
import { RedditUserText } from '../../components/reddit-user-text.js';
import { OriginPostButton } from '../../components/origin-post.js';
import { AccountOwnerBadge } from '../../components/account-owner-badge.js';
import {
  createLiveConsoleState,
  reduceLiveConsoleState,
  selectVisibleConsoleEntries,
  type ConsoleEntry,
  type ConsoleLevelFilter,
} from './live-console-model.js';
import { useActivityQuery, useFetchAllChatsMutation, useLogsQuery, useSyncStatusQuery, useTriggerChatSyncMutation } from './operations-queries.js';
import type { RealtimeConnectionSnapshot } from './realtime-client.js';
import './operations.css';

function formatTimestamp(timestamp: number | string): string {
  return new Intl.DateTimeFormat(undefined, {
    dateStyle: 'medium',
    timeStyle: 'medium',
  }).format(typeof timestamp === 'number' ? timestamp : new Date(timestamp));
}

function ActivityView({ items }: { items: readonly ActivityItem[] }) {
  return items.length === 0 ? (
    <p className="feature-empty">No recent operator activity.</p>
  ) : (
    <ol className="operations-activity-list">
      {items.map((item) => (
        <li key={`${item.timestamp}-${item.message}`}>
          <span className={`activity-marker ${item.type}`} aria-hidden="true" />
          <AccountOwnerBadge owner={item.owner} />
          <div><strong>{item.postUrl && item.postTitle ? (
            <OriginPostButton post={{ title: item.postTitle, url: item.postUrl, imageUrl: item.imageUrl }}>
              {item.message}
            </OriginPostButton>
          ) : <RedditUserText>{item.message}</RedditUserText>}</strong><small>{formatTimestamp(item.timestamp)}{item.recipient && !item.message.includes(`u/${item.recipient}`) ? <> · <RedditUsernameLink username={item.recipient} /></> : null}</small></div>
        </li>
      ))}
    </ol>
  );
}

function SyncSummary({ status }: { status: ChatSyncStatus }) {
  const progress = status.progress;
  return (
    <div className="sync-summary">
      <div><span className={`pill ${status.syncing ? 'warning' : 'success'}`}>{status.syncing ? `${status.syncingKind ?? 'Unknown'} sync running` : 'Idle'}</span><strong>{status.cachedChats} cached conversations</strong></div>
      {progress ? (
        <div>
          <div className="sync-progress-label"><span>{progress.label ?? progress.phase}</span><strong>{progress.current} of {progress.total}</strong></div>
          <progress aria-label="Sync progress" max={Math.max(1, progress.total)} value={progress.current} />
        </div>
      ) : null}
      <dl className="sync-history">
        <div><dt>Last delta sync</dt><dd>{status.lastDeltaSyncAt ? formatTimestamp(status.lastDeltaSyncAt) : 'Never'}</dd></div>
        <div><dt>Last full sync</dt><dd>{status.lastFullSyncAt ? formatTimestamp(status.lastFullSyncAt) : 'Never'}</dd></div>
      </dl>
    </div>
  );
}

function connectionLabel(snapshot: RealtimeConnectionSnapshot): string {
  switch (snapshot.status) {
    case 'connected': return 'Realtime connected';
    case 'connecting': return 'Connecting to realtime updates';
    case 'reconnecting': return 'Realtime reconnecting';
    case 'closed': return 'Realtime closed';
    case 'idle': return 'Realtime unavailable';
  }
}

export interface OperationsPageProps {
  realtimeEnabled?: boolean;
}

export function OperationsPage({ realtimeEnabled = true }: OperationsPageProps) {
  const realtime = useDashboardRealtime();
  const activityQuery = useActivityQuery();
  const logsQuery = useLogsQuery();
  const syncQuery = useSyncStatusQuery();
  const syncMutation = useTriggerChatSyncMutation();
  const fetchAllMutation = useFetchAllChatsMutation();
  const [consoleClearNotice, setConsoleClearNotice] = useState(false);
  const [consoleState, dispatchConsole] = useReducer(
    reduceLiveConsoleState,
    createLiveConsoleState(500),
  );
  const connection = realtimeEnabled ? realtime.connection : { status: 'idle', isStale: true } as const;
  const consoleEnd = useRef<HTMLDivElement>(null);

  useEffect(() => {
    logsQuery.data?.forEach((entry, index) => {
      dispatchConsole({
        type: 'append',
        entry: {
          id: `initial-${entry.timestamp}-${index}`,
          occurredAt: new Date(entry.timestamp).toISOString(),
          level: entry.level,
          message: entry.message,
          data: entry.data,
        },
      });
    });
  }, [logsQuery.data]);

  useEffect(() => {
    if (!realtimeEnabled) return;
    function onEvent(event: DashboardEvent): void {
      if (event.type === 'log.created') {
        const entry: ConsoleEntry = {
          id: event.id,
          occurredAt: event.occurredAt,
          level: event.payload.level,
          message: event.payload.message,
          data: event.payload.data,
        };
        dispatchConsole({ type: 'append', entry });
      }
    }
    return realtime.subscribe(onEvent);
  }, [realtime, realtimeEnabled]);

  const visibleEntries = selectVisibleConsoleEntries(consoleState);
  const syncBusy = syncQuery.data?.syncing === true || syncMutation.isPending || fetchAllMutation.isPending;

  function confirmAndRun(kind: 'full' | 'fetch-all') {
    const confirmed = globalThis.confirm(kind === 'full'
      ? 'Run a full chat cache sync? This can take significantly longer than a delta sync.'
      : 'Fetch every chat now? This is a legacy blocking operation and may take a while.');
    if (!confirmed) return;
    if (kind === 'full') syncMutation.mutate('full'); else fetchAllMutation.mutate();
  }
  useEffect(() => {
    if (
      consoleState.isAutoScrollEnabled &&
      !consoleState.isPaused &&
      typeof consoleEnd.current?.scrollIntoView === 'function'
    ) {
      consoleEnd.current.scrollIntoView({ block: 'nearest' });
    }
  }, [consoleState.entries, consoleState.isAutoScrollEnabled, consoleState.isPaused]);

  return (
    <div className="page operations-page">
      <header className="page-header"><div><span className="eyebrow">Observability</span><h1>Operations</h1><p>Human-readable activity, background work, and raw diagnostic output in distinct views.</p></div></header>
      <div aria-label="Realtime connection" className={`connection-banner ${connection.isStale ? 'stale' : ''}`} role="status">
        <strong>{connectionLabel(connection)}</strong>
        {connection.isStale ? <span>State may be stale</span> : <span>Events are updating live</span>}
      </div>
      <div className="operations-summary-grid">
        <section aria-labelledby="operations-activity-heading" className="panel feature-panel" role="region">
          <div className="panel-heading"><div><span className="eyebrow">Readable history</span><h2 id="operations-activity-heading">Activity</h2></div></div>
          {activityQuery.isPending ? <p role="status">Loading activity…</p> : activityQuery.isError ? <p role="alert">{activityQuery.error.message}</p> : <ActivityView items={activityQuery.data} />}
        </section>
        <section aria-labelledby="sync-jobs-heading" className="panel feature-panel" role="region">
          <div className="panel-heading"><div><span className="eyebrow">Background work</span><h2 id="sync-jobs-heading">Sync jobs</h2></div></div>
          {syncQuery.isPending ? <p role="status">Loading sync state…</p> : syncQuery.isError ? <p role="alert">{syncQuery.error.message}</p> : <><SyncSummary status={syncQuery.data} /><div className="header-actions"><button className="button secondary" disabled={syncBusy} onClick={() => syncMutation.mutate('delta')} type="button">Sync latest chats</button><button className="button secondary" disabled={syncBusy} onClick={() => confirmAndRun('full')} type="button">Full cache sync</button><button className="button secondary" disabled={syncBusy} onClick={() => confirmAndRun('fetch-all')} type="button">Fetch all chats</button></div></>}
          {syncMutation.isSuccess ? <p role="status">{syncMutation.data.kind === 'delta' ? 'Delta' : 'Full'} sync started. Progress is shown from server status.</p> : null}
          {fetchAllMutation.isSuccess ? <p role="status">Fetched {fetchAllMutation.data.count} chats.</p> : null}
          {syncMutation.isError ? <p role="alert">{syncMutation.error.message}</p> : null}
          {fetchAllMutation.isError ? <p role="alert">{fetchAllMutation.error.message}</p> : null}
        </section>
      </div>
      <section aria-labelledby="live-console-heading" className="panel console-panel" role="region">
        <div className="panel-heading"><div><span className="eyebrow">Raw diagnostics</span><h2 id="live-console-heading">Live console</h2></div><span className="console-count">{consoleState.entries.length} retained</span></div>
        <div className="console-controls">
          <button aria-pressed={consoleState.isPaused} className="button secondary" onClick={() => dispatchConsole({ type: 'set-paused', paused: !consoleState.isPaused })} type="button">{consoleState.isPaused ? `Resume console (${consoleState.pendingEntries.length})` : 'Pause console'}</button>
          <button className="button secondary" onClick={() => { dispatchConsole({ type: 'clear' }); setConsoleClearNotice(true); }} type="button">Clear local console</button>
          <label>Log level<select aria-label="Log level" onChange={(event) => dispatchConsole({ type: 'set-level', level: event.target.value as ConsoleLevelFilter })} value={consoleState.level}><option value="all">All levels</option><option value="debug">Debug</option><option value="info">Info</option><option value="warn">Warning</option><option value="error">Error</option></select></label>
          <label>Search logs<input aria-label="Search logs" onChange={(event) => dispatchConsole({ type: 'set-search', search: event.target.value })} placeholder="Message or metadata" type="search" value={consoleState.search} /></label>
          <label className="checkbox-control"><input checked={consoleState.isAutoScrollEnabled} onChange={(event) => dispatchConsole({ type: 'set-auto-scroll', enabled: event.target.checked })} type="checkbox" />Auto-scroll</label>
        </div>
        {consoleClearNotice ? <p role="status">Cleared from this browser view. Server logs were not deleted.</p> : null}
        <div aria-live="polite" className="live-console" role="log">
          {logsQuery.isPending ? <p>Loading logs…</p> : visibleEntries.length === 0 ? <p>No logs match the current filters.</p> : visibleEntries.map((entry) => (
            <article className={`console-entry ${entry.level}`} key={entry.id}><time dateTime={entry.occurredAt}>{formatTimestamp(entry.occurredAt)}</time><strong>{entry.level.toUpperCase()}</strong><span><RedditUserText>{entry.message}</RedditUserText></span></article>
          ))}
          <div ref={consoleEnd} />
        </div>
      </section>
    </div>
  );
}