import { Fragment, useEffect, useMemo, useRef, useState } from 'react';

import {
  buildFleetTableViewModel,
  type FleetAuthFilter,
  type FleetFilter,
  type FleetInstance,
  type FleetSortColumn,
  type FleetStatus,
  type SortDirection,
} from './fleet-table-view-model.js';
import type { InstanceDataSource } from '../instances/instance-crud.js';
import type {
  FleetMessageLoadState,
  FleetMessagesDataSource,
} from './fleet-messages-api-data-source.js';
import { loadFleetMessageSummaries } from './fleet-messages-api-data-source.js';

export interface FleetSnapshot {
  readonly instances: readonly FleetInstance[];
  readonly statuses: ReadonlyMap<string, FleetStatus>;
}
export interface FleetDataSource {
  load(signal?: AbortSignal): Promise<FleetSnapshot>;
}
export interface FleetPageProps {
  readonly dataSource?: FleetDataSource;
  readonly messagesDataSource?: FleetMessagesDataSource;
  readonly instanceDataSource?: InstanceDataSource;
  readonly initialData?: FleetSnapshot;
  readonly refreshSignal?: number;
}
type FleetMessageState = FleetMessageLoadState;

const EMPTY_SNAPSHOT: FleetSnapshot = { instances: [], statuses: new Map() };
const STATUS_LABELS: Readonly<Record<string, string>> = {
  online: '在线',
  auth: '需要认证',
  offline: '离线',
  unknown: '未知',
};
const COLUMN_LABELS: Readonly<Record<FleetSortColumn | 'origin', string>> = {
  name: '名称',
  status: '状态',
  latency: '延迟',
  version: '版本',
  capabilities: '能力',
  tags: '标签',
  freshness: '数据新鲜度',
  anomalies: '异常',
  origin: '源地址',
};
const ALL_COLUMNS = Object.keys(COLUMN_LABELS) as readonly (FleetSortColumn | 'origin')[];
const CAPABILITY_LABELS: Readonly<Record<string, string>> = {
  overview: '概览',
  cellular: '蜂窝网络',
  'device-network': '设备网络',
  messages: '消息',
  calls: '通话',
  esim: 'eSIM',
  notifications: '通知',
  automation: '自动化',
  ota: 'OTA',
};
const FRESHNESS_LABELS: Readonly<Record<string, string>> = {
  fresh: '最新',
  stale: '可能过期',
  unknown: '未知',
};

function capabilityLabel(value: string): string {
  return CAPABILITY_LABELS[value] ?? value;
}

const percent = (value: number | undefined): string =>
  value === undefined ? '暂未获取' : `${value.toFixed(1)}%`;
const temperature = (value: number | undefined): string =>
  value === undefined ? '暂未获取' : `${value.toFixed(1)} °C`;
const messageDirection = (value: string): string =>
  value === 'incoming' || value === 'received'
    ? '收到'
    : value === 'outgoing' || value === 'sent'
      ? '发送'
      : '未知方向';

const messageTime = (value: string): string => {
  const date = new Date(value);
  return Number.isNaN(date.getTime()) ? value : date.toLocaleString('zh-CN');
};

export function canonicalHttpOrigin(value: string): string | null {
  try {
    const url = new URL(value);
    if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
    url.username = '';
    url.password = '';
    return url.origin;
  } catch {
    return null;
  }
}

export function FleetPage({
  dataSource,
  messagesDataSource,
  instanceDataSource,
  initialData,
  refreshSignal = 0,
}: FleetPageProps) {
  const [snapshot, setSnapshot] = useState<FleetSnapshot | null>(initialData ?? null);
  const [error, setError] = useState<string | null>(null);
  const [attempt, setAttempt] = useState(0);
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState<FleetFilter>('all');
  const [auth, setAuth] = useState<FleetAuthFilter>('all');
  const [capability, setCapability] = useState('');
  const [version, setVersion] = useState('');
  const [tag, setTag] = useState('');
  const [page, setPage] = useState(1);
  const [sort, setSort] = useState<{ column: FleetSortColumn; direction: SortDirection }>({
    column: 'name',
    direction: 'asc',
  });
  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
  const [shownColumns, setShownColumns] = useState<ReadonlySet<string>>(new Set(ALL_COLUMNS));
  const [columnsOpen, setColumnsOpen] = useState(false);
  const [batchOpen, setBatchOpen] = useState(false);
  const [deleteId, setDeleteId] = useState<string>();
  const [deleteOwner, setDeleteOwner] = useState<Readonly<{ id: string; revision: number }>>();
  const [deleteConfirmation, setDeleteConfirmation] = useState('');
  const [deleteBusy, setDeleteBusy] = useState(false);
  const deleteRequestRef = useRef(0);
  const [deleteStatus, setDeleteStatus] =
    useState<Readonly<{ id: string; kind: 'success' | 'error'; message: string }>>();
  const selectAllRef = useRef<HTMLInputElement>(null);
  const messagesOwner = useRef(0);
  const [messageStates, setMessageStates] = useState<ReadonlyMap<string, FleetMessageState>>(
    new Map(),
  );

  useEffect(() => {
    if (initialData && refreshSignal === 0) {
      setSnapshot(initialData);
      setError(null);
      return;
    }
    if (!dataSource) {
      setSnapshot(EMPTY_SNAPSHOT);
      return;
    }
    let active = true;
    setSnapshot(null);
    setError(null);
    void dataSource.load().then(
      (data) => {
        if (active) setSnapshot(data);
      },
      () => {
        if (active) setError('实例加载失败。');
      },
    );
    return () => {
      active = false;
    };
  }, [attempt, dataSource, initialData, refreshSignal]);

  useEffect(() => {
    const request = ++messagesOwner.current;
    const controller = new AbortController();
    const instances = snapshot?.instances;
    setMessageStates(new Map<string, FleetMessageState>());
    if (!messagesDataSource || !instances) return () => controller.abort();
    void loadFleetMessageSummaries(
      messagesDataSource,
      instances.map((instance) => instance.id),
      controller.signal,
    ).then((entries) => {
      if (request === messagesOwner.current && !controller.signal.aborted)
        setMessageStates(entries);
    });
    return () => controller.abort();
  }, [messagesDataSource, snapshot]);

  const model = useMemo(
    () =>
      buildFleetTableViewModel(snapshot?.instances ?? [], snapshot?.statuses ?? new Map(), {
        query,
        filter,
        auth,
        ...(capability ? { capability } : {}),
        ...(version ? { version } : {}),
        ...(tag ? { tag } : {}),
        sort,
        selectedIds,
        page,
      }),
    [auth, capability, filter, page, query, selectedIds, snapshot, sort, tag, version],
  );

  const fleetSummary = useMemo(() => {
    const statuses = [...(snapshot?.statuses.values() ?? [])];
    const online = statuses.filter(
      (status) => status.reachable && status.authenticated !== false,
    ).length;
    return {
      total: snapshot?.instances.length ?? 0,
      online,
      attention: (snapshot?.instances.length ?? 0) - online,
    };
  }, [snapshot]);

  useEffect(() => {
    if (selectAllRef.current) {
      selectAllRef.current.indeterminate = model.visibleSelection.indeterminate;
    }
  }, [model.visibleSelection.indeterminate]);
  useEffect(() => {
    if (page !== model.page) setPage(model.page);
  }, [model.page, page]);

  function resetPage(action: () => void): void {
    action();
    setPage(1);
  }
  function changeSort(column: FleetSortColumn): void {
    setSort((current) => ({
      column,
      direction: current.column === column && current.direction === 'asc' ? 'desc' : 'asc',
    }));
    setPage(1);
  }
  function toggleOne(id: string, checked: boolean): void {
    setSelectedIds((current) => {
      const next = new Set(current);
      if (checked) next.add(id);
      else next.delete(id);
      return next;
    });
  }
  function toggleVisible(checked: boolean): void {
    setSelectedIds((current) => {
      const next = new Set(current);
      for (const row of model.rows) {
        if (checked) next.add(row.id);
        else next.delete(row.id);
      }
      return next;
    });
  }
  function toggleColumn(column: string): void {
    setShownColumns((current) => {
      const next = new Set(current);
      if (next.has(column)) next.delete(column);
      else next.add(column);
      return next;
    });
  }

  async function beginDelete(id: string): Promise<void> {
    const request = ++deleteRequestRef.current;
    setDeleteId(id);
    setDeleteOwner(undefined);
    setDeleteConfirmation('');
    setDeleteStatus(undefined);
    if (!instanceDataSource) {
      setDeleteStatus({ id, kind: 'error', message: '无法准备删除，请稍后重试。' });
      return;
    }
    setDeleteBusy(true);
    try {
      const current = await instanceDataSource.get(id);
      if (request !== deleteRequestRef.current) return;
      if (current.id !== id) throw new Error('owner mismatch');
      setDeleteOwner({ id: current.id, revision: current.revision });
    } catch {
      if (request === deleteRequestRef.current) {
        setDeleteStatus({ id, kind: 'error', message: '无法准备删除，请稍后重试。' });
      }
    } finally {
      if (request === deleteRequestRef.current) setDeleteBusy(false);
    }
  }

  async function remove(id: string): Promise<void> {
    if (!instanceDataSource || deleteOwner?.id !== id || deleteConfirmation !== id) return;
    setDeleteBusy(true);
    setDeleteStatus(undefined);
    try {
      await instanceDataSource.delete(id, deleteOwner.revision);
      setDeleteStatus({ id, kind: 'success', message: '删除请求已提交。' });
      setDeleteId(undefined);
      setDeleteConfirmation('');
    } catch {
      setDeleteStatus({ id, kind: 'error', message: '删除请求失败，请稍后重试。' });
    } finally {
      setDeleteBusy(false);
    }
  }

  const selectFilter = (
    label: string,
    value: string,
    setValue: (value: string) => void,
    choices: readonly string[],
    allLabel: string,
    displayChoice: (choice: string) => string = (choice) => choice,
  ) => (
    <label>
      <span>{label}</span>
      <select
        value={value}
        onChange={(event) => resetPage(() => setValue(event.currentTarget.value))}
      >
        <option value="">{allLabel}</option>
        {choices.map((choice) => (
          <option key={choice} value={choice}>
            {displayChoice(choice)}
          </option>
        ))}
      </select>
    </label>
  );

  return (
    <section className="fleet-panel" aria-labelledby="fleet-title">
      <div className="fleet-heading">
        <div>
          <h1 id="fleet-title">实例总览</h1>
          <p>查找、对比并管理所有 SimAdmin 实例。</p>
        </div>
        <div className="fleet-actions">
          <a className="primary-action" href="/instances/new">
            添加实例
          </a>
          <span className="selection-summary" aria-live="polite">
            已选择 {model.selectedIds.length} 项
          </span>
          <button
            type="button"
            disabled={model.selectedIds.length === 0}
            onClick={() => setBatchOpen((open) => !open)}
          >
            批量操作
          </button>
        </div>
      </div>
      {snapshot ? (
        <section className="fleet-status-summary" aria-label="实例状态摘要">
          <div>
            <span>实例总数</span>
            <strong>{fleetSummary.total}</strong>
          </div>
          <div>
            <span>在线</span>
            <strong>{fleetSummary.online}</strong>
          </div>
          <div>
            <span>需处理</span>
            <strong>{fleetSummary.attention}</strong>
          </div>
        </section>
      ) : null}
      {batchOpen ? (
        <div className="batch-entry" role="region" aria-label="批量操作入口">
          请为已选择的 {model.selectedIds.length} 项选择操作。
        </div>
      ) : null}
      <div className="fleet-toolbar">
        <div className="fleet-toolbar-primary">
          <label>
            <span>搜索实例</span>
            <input
              type="search"
              value={query}
              onChange={(event) => resetPage(() => setQuery(event.currentTarget.value))}
              placeholder="名称、ID、标签、源地址…"
            />
          </label>
          <label>
            <span>状态</span>
            <select
              value={filter}
              onChange={(event) =>
                resetPage(() => setFilter(event.currentTarget.value as FleetFilter))
              }
            >
              <option value="all">全部状态</option>
              <option value="online">在线</option>
              <option value="auth">需要认证</option>
              <option value="offline">离线</option>
              <option value="unknown">未知</option>
            </select>
          </label>
        </div>
        <details className="fleet-advanced-filters">
          <summary>更多筛选与列设置</summary>
          <div className="fleet-advanced-filter-grid">
            <label>
              <span>认证</span>
              <select
                value={auth}
                onChange={(event) =>
                  resetPage(() => setAuth(event.currentTarget.value as FleetAuthFilter))
                }
              >
                <option value="all">全部认证状态</option>
                <option value="authenticated">已认证</option>
                <option value="required">需要认证</option>
                <option value="unknown">未知</option>
              </select>
            </label>
            {selectFilter(
              '能力',
              capability,
              setCapability,
              model.facets.capabilities,
              '全部能力',
              capabilityLabel,
            )}
            {selectFilter('版本', version, setVersion, model.facets.versions, '全部版本')}
            {selectFilter('标签', tag, setTag, model.facets.tags, '全部标签')}
            <div className="column-picker">
              <button
                type="button"
                aria-expanded={columnsOpen}
                onClick={() => setColumnsOpen((open) => !open)}
              >
                选择列
              </button>
              {columnsOpen ? (
                <fieldset>
                  <legend>显示的列</legend>
                  {ALL_COLUMNS.map((column) => (
                    <label key={column}>
                      <input
                        type="checkbox"
                        aria-label={`显示${COLUMN_LABELS[column]}列`}
                        checked={shownColumns.has(column)}
                        onChange={() => toggleColumn(column)}
                      />
                      {COLUMN_LABELS[column]}
                    </label>
                  ))}
                </fieldset>
              ) : null}
            </div>
          </div>
        </details>
      </div>

      {!snapshot && !error ? (
        <p role="status" aria-label="实例加载状态">
          正在加载实例…
        </p>
      ) : null}
      {error ? (
        <div className="state-panel state-error" role="alert">
          <p>无法加载实例。{error}</p>
          <button type="button" onClick={() => setAttempt((value) => value + 1)}>
            重试加载实例
          </button>
        </div>
      ) : null}
      {snapshot && model.emptyReason ? (
        <div className="state-panel">
          {model.emptyReason === 'config' ? (
            <>
              <p>尚未配置实例。</p>
              <a className="primary-action" href="/instances/new">
                添加实例
              </a>
            </>
          ) : null}
          {model.emptyReason === 'search' ? <p>没有实例符合搜索与筛选条件。</p> : null}
          {model.emptyReason === 'filter' ? <p>没有实例符合当前筛选条件。</p> : null}
        </div>
      ) : null}
      {snapshot && model.rows.length > 0 ? (
        <>
          <section className="fleet-card-section" aria-label="实例卡片">
            <div className="fleet-card-grid">
              {model.rows.map((row) => (
                <article
                  className="fleet-card"
                  aria-label={`${row.displayName} 实例概览`}
                  key={row.id}
                >
                  <header>
                    <a
                      className="fleet-card-entry"
                      href={`/instances/${encodeURIComponent(row.id)}/overview`}
                      aria-label={`打开 ${row.displayName} 实例仪表盘`}
                    >
                      <h2>{row.displayName}</h2>
                      <code>{row.id}</code>
                      <span className="fleet-card-entry-label">进入仪表盘</span>
                    </a>
                    <span className={`status status-${row.statusKind}`}>
                      {STATUS_LABELS[row.statusKind]}
                    </span>
                  </header>
                  <dl className="fleet-card-metrics">
                    <div className="fleet-card-phone">
                      <dt>手机号</dt>
                      <dd>
                        {row.status?.summary?.resources?.phoneNumbers?.join('、') || '暂未获取'}
                      </dd>
                    </div>
                    <div>
                      <dt>CPU</dt>
                      <dd>
                        {row.status?.summary?.resources?.cpuPercent === undefined ? (
                          '暂未获取'
                        ) : (
                          <>
                            <meter
                              min="0"
                              max="100"
                              value={row.status.summary.resources.cpuPercent}
                              aria-label="CPU 使用率"
                            />
                            {percent(row.status.summary.resources.cpuPercent)}
                          </>
                        )}
                      </dd>
                    </div>
                    <div>
                      <dt>内存</dt>
                      <dd>
                        {row.status?.summary?.resources?.memoryPercent === undefined ? (
                          '暂未获取'
                        ) : (
                          <>
                            <meter
                              min="0"
                              max="100"
                              value={row.status.summary.resources.memoryPercent}
                              aria-label="内存使用率"
                            />
                            {percent(row.status.summary.resources.memoryPercent)}
                          </>
                        )}
                      </dd>
                    </div>
                    <div>
                      <dt>最高温度</dt>
                      <dd>{temperature(row.status?.summary?.resources?.maxTemperatureCelsius)}</dd>
                    </div>
                  </dl>
                  {row.capabilities.length > 0 ? (
                    <div className="capability-tags" aria-label="能力">
                      {row.capabilities.map((item) => (
                        <span key={item}>{capabilityLabel(item)}</span>
                      ))}
                    </div>
                  ) : null}
                  <section className="fleet-card-sms" aria-label="最近短信">
                    <h3>最近短信</h3>
                    {messageStates.get(row.id)?.unavailable ? (
                      <p className="fleet-card-sms-empty">短信暂不可用</p>
                    ) : messageStates.get(row.id)?.latest ? (
                      <dl>
                        <div>
                          <dt>方向</dt>
                          <dd>{messageDirection(messageStates.get(row.id)!.latest!.direction)}</dd>
                        </div>
                        <div>
                          <dt>号码</dt>
                          <dd>{messageStates.get(row.id)!.latest!.phoneNumber}</dd>
                        </div>
                        <div>
                          <dt>时间</dt>
                          <dd>{messageTime(messageStates.get(row.id)!.latest!.timestamp)}</dd>
                        </div>
                      </dl>
                    ) : (
                      <p className="fleet-card-sms-empty">暂无短信</p>
                    )}
                  </section>
                  <div
                    className="fleet-card-actions fleet-card-admin-actions"
                    role="group"
                    aria-label="实例管理操作"
                  >
                    <a
                      href={`/settings/instances/${encodeURIComponent(row.id)}`}
                      aria-label={`编辑 ${row.displayName}`}
                    >
                      编辑
                    </a>
                    <button
                      type="button"
                      className="danger-button"
                      aria-label={`删除 ${row.displayName}`}
                      onClick={() => void beginDelete(row.id)}
                    >
                      删除
                    </button>
                  </div>
                  {deleteId === row.id ? (
                    <div className="card-delete-confirmation">
                      <p>删除后无法撤销。</p>
                      <label>
                        输入 {row.id} 以确认删除
                        <input
                          value={deleteConfirmation}
                          onChange={(event) => setDeleteConfirmation(event.currentTarget.value)}
                        />
                      </label>
                      <div className="fleet-card-actions">
                        <button
                          type="button"
                          className="danger-button"
                          disabled={
                            deleteBusy ||
                            deleteOwner?.id !== row.id ||
                            deleteConfirmation !== row.id
                          }
                          aria-label={`确认删除 ${row.displayName}`}
                          onClick={() => void remove(row.id)}
                        >
                          确认删除
                        </button>
                        <button
                          type="button"
                          onClick={() => {
                            setDeleteId(undefined);
                            setDeleteConfirmation('');
                            setDeleteStatus(undefined);
                          }}
                        >
                          取消
                        </button>
                      </div>
                    </div>
                  ) : null}
                  {deleteStatus?.id === row.id ? (
                    <p
                      role={deleteStatus.kind === 'error' ? 'alert' : 'status'}
                      className={
                        deleteStatus.kind === 'error'
                          ? 'card-operation-error'
                          : 'card-operation-success'
                      }
                    >
                      {deleteStatus.message}
                    </p>
                  ) : null}
                </article>
              ))}
            </div>
          </section>
          <section className="fleet-details" aria-labelledby="fleet-details-title">
            <h2 id="fleet-details-title">高级详细列表</h2>
            <div className="table-scroll" tabIndex={0}>
              <table className="dense-table">
                <caption>实例列表</caption>
                <thead>
                  <tr>
                    <th scope="col" className="select-column">
                      <label className="touch-target">
                        <input
                          ref={selectAllRef}
                          type="checkbox"
                          aria-label="选择当前页全部实例"
                          checked={model.visibleSelection.checked}
                          onChange={(event) => toggleVisible(event.currentTarget.checked)}
                        />
                      </label>
                    </th>
                    {ALL_COLUMNS.filter((column) => shownColumns.has(column)).map((column) => (
                      <th
                        key={column}
                        scope="col"
                        aria-sort={
                          column !== 'origin' && sort.column === column
                            ? sort.direction === 'asc'
                              ? 'ascending'
                              : 'descending'
                            : undefined
                        }
                      >
                        {column === 'origin' ? (
                          COLUMN_LABELS[column]
                        ) : (
                          <button
                            type="button"
                            onClick={() => changeSort(column)}
                            aria-label={`按${COLUMN_LABELS[column]}排序`}
                          >
                            {COLUMN_LABELS[column]}
                          </button>
                        )}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {model.rows.map((row) => {
                    const origin = canonicalHttpOrigin(row.instance.url);
                    const cells: Readonly<Record<string, React.ReactNode>> = {
                      name: (
                        <th scope="row">
                          <a href={`/instances/${encodeURIComponent(row.id)}/overview`}>
                            {row.displayName}
                          </a>
                          <small>{row.id}</small>
                        </th>
                      ),
                      status: (
                        <td>
                          <span className={`status status-${row.statusKind}`}>
                            {STATUS_LABELS[row.statusKind]}
                          </span>
                        </td>
                      ),
                      latency: <td>{row.latencyMs === undefined ? '—' : `${row.latencyMs} ms`}</td>,
                      version: <td>{row.version ?? '—'}</td>,
                      capabilities: (
                        <td>{row.capabilities.map(capabilityLabel).join(', ') || '—'}</td>
                      ),
                      tags: <td>{row.tags.join(', ') || '—'}</td>,
                      freshness: <td>{FRESHNESS_LABELS[row.freshness] ?? row.freshness}</td>,
                      anomalies: <td>{row.anomalies.join(', ') || '—'}</td>,
                      origin: <td>{origin ? <span>{origin}</span> : <span>源地址无效</span>}</td>,
                    };
                    return (
                      <tr key={row.id} aria-selected={row.selected}>
                        <td>
                          <label className="touch-target">
                            <input
                              type="checkbox"
                              aria-label={`选择 ${row.displayName}`}
                              checked={row.selected}
                              onChange={(event) => toggleOne(row.id, event.currentTarget.checked)}
                            />
                          </label>
                        </td>
                        {ALL_COLUMNS.filter((column) => shownColumns.has(column)).map((column) => (
                          <Fragment key={column}>{cells[column]}</Fragment>
                        ))}
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            <nav className="pagination" aria-label="实例分页">
              <button
                type="button"
                aria-label="上一页"
                disabled={model.page === 1}
                onClick={() => setPage((value) => value - 1)}
              >
                上一页
              </button>
              <span>
                第 {model.page} 页，共 {model.pageCount} 页
              </span>
              <button
                type="button"
                aria-label="下一页"
                disabled={model.page === model.pageCount}
                onClick={() => setPage((value) => value + 1)}
              >
                下一页
              </button>
            </nav>
          </section>
        </>
      ) : null}
    </section>
  );
}