import {
  Fragment,
  useCallback,
  useEffect,
  useRef,
  useState,
} from "react";
import type {
  CSSProperties,
  FocusEvent as ReactFocusEvent,
  KeyboardEvent as ReactKeyboardEvent,
  MouseEvent as ReactMouseEvent,
  PointerEvent as ReactPointerEvent,
  ReactNode,
} from "react";
import { createPortal } from "react-dom";

export type ParameterColumnLayout = {
  nameWidth: number;
  unitWidth: number;
};

export type ParameterTableRow = {
  id: string;
  name: string;
  value: ReactNode;
  unit?: ReactNode;
  help?: string;
  error?: string;
  readOnly?: boolean;
  description?: string;
  defaultValue?: string;
  range?: string;
  currentUnit?: string;
};

type ParameterTableProps = {
  ariaLabel: string;
  rows: readonly ParameterTableRow[];
  columnLayout: ParameterColumnLayout;
  availableWidth: number;
  onColumnLayoutChange: (layout: ParameterColumnLayout) => void;
};

type ColumnName = "name" | "unit";

type ColumnDragState = {
  column: ColumnName;
  pointerId: number;
  startX: number;
  startLayout: ParameterColumnLayout;
};

type HelpPreviewState = {
  rowId: string;
  left: number;
  top: number;
  transform: string;
};

type HelpPreviewAnchor = {
  rowId: string;
  clientX: number;
  clientY: number;
};

export const PARAMETER_COLUMN_LAYOUT_KEY =
  "system-simulation-flow:parameter-column-layout";

export const DEFAULT_PARAMETER_COLUMN_LAYOUT: ParameterColumnLayout = {
  nameWidth: 112,
  unitWidth: 72,
};

const MIN_NAME_WIDTH = 80;
const MAX_NAME_WIDTH = 220;
const MIN_VALUE_WIDTH = 96;
const MIN_UNIT_WIDTH = 48;
const MAX_UNIT_WIDTH = 112;
const COLUMN_KEYBOARD_STEP = 8;
const HELP_PREVIEW_DELAY_MS = 500;
const HELP_PREVIEW_GAP = 12;
const HELP_PREVIEW_MARGIN = 8;
const HELP_PREVIEW_MAX_WIDTH = 300;
const HELP_PREVIEW_ESTIMATED_HEIGHT = 156;

function boundedWidth(value: number, minimum: number, maximum: number) {
  return Math.min(maximum, Math.max(minimum, value));
}

export function loadParameterColumnLayout(): ParameterColumnLayout {
  try {
    const parsed = JSON.parse(
      localStorage.getItem(PARAMETER_COLUMN_LAYOUT_KEY) ?? "null",
    ) as Partial<ParameterColumnLayout> | null;
    if (
      !parsed ||
      !Number.isFinite(parsed.nameWidth) ||
      !Number.isFinite(parsed.unitWidth)
    ) {
      return { ...DEFAULT_PARAMETER_COLUMN_LAYOUT };
    }
    return {
      nameWidth: boundedWidth(Number(parsed.nameWidth), MIN_NAME_WIDTH, MAX_NAME_WIDTH),
      unitWidth: boundedWidth(Number(parsed.unitWidth), MIN_UNIT_WIDTH, MAX_UNIT_WIDTH),
    };
  } catch {
    return { ...DEFAULT_PARAMETER_COLUMN_LAYOUT };
  }
}

export function saveParameterColumnLayout(layout: ParameterColumnLayout) {
  try {
    localStorage.setItem(PARAMETER_COLUMN_LAYOUT_KEY, JSON.stringify(layout));
  } catch {
    // Column resizing remains available when browser storage is unavailable.
  }
}

function effectiveColumnLayout(
  preferred: ParameterColumnLayout,
  availableWidth: number,
): ParameterColumnLayout {
  const usableWidth = Number.isFinite(availableWidth)
    ? Math.max(MIN_NAME_WIDTH + MIN_VALUE_WIDTH + MIN_UNIT_WIDTH, availableWidth)
    : MIN_NAME_WIDTH + MIN_VALUE_WIDTH + MIN_UNIT_WIDTH;
  let nameWidth = boundedWidth(preferred.nameWidth, MIN_NAME_WIDTH, MAX_NAME_WIDTH);
  let unitWidth = boundedWidth(preferred.unitWidth, MIN_UNIT_WIDTH, MAX_UNIT_WIDTH);
  let overflow = nameWidth + MIN_VALUE_WIDTH + unitWidth - usableWidth;
  if (overflow > 0) {
    const unitReduction = Math.min(overflow, unitWidth - MIN_UNIT_WIDTH);
    unitWidth -= unitReduction;
    overflow -= unitReduction;
  }
  if (overflow > 0) {
    nameWidth -= Math.min(overflow, nameWidth - MIN_NAME_WIDTH);
  }
  return { nameWidth, unitWidth };
}

function rowHasHelpPreview(row: ParameterTableRow) {
  return Boolean(
    row.description ||
      (typeof row.help === "string" && row.help) ||
      row.defaultValue ||
      row.range ||
      row.currentUnit,
  );
}

function helpPreviewPosition(clientX: number, clientY: number) {
  const placeOnRight =
    clientX + HELP_PREVIEW_GAP + HELP_PREVIEW_MAX_WIDTH <=
    window.innerWidth - HELP_PREVIEW_MARGIN;
  const placeBelow =
    clientY + HELP_PREVIEW_GAP + HELP_PREVIEW_ESTIMATED_HEIGHT <=
    window.innerHeight - HELP_PREVIEW_MARGIN;
  return {
    left: clientX + (placeOnRight ? HELP_PREVIEW_GAP : -HELP_PREVIEW_GAP),
    top: clientY + (placeBelow ? HELP_PREVIEW_GAP : -HELP_PREVIEW_GAP),
    transform: `translate(${placeOnRight ? "0" : "-100%"}, ${
      placeBelow ? "0" : "-100%"
    })`,
  };
}

export function ParameterTable({
  ariaLabel,
  rows,
  columnLayout,
  availableWidth,
  onColumnLayoutChange,
}: ParameterTableProps) {
  const effectiveLayout = effectiveColumnLayout(columnLayout, availableWidth);
  const columnDragRef = useRef<ColumnDragState | null>(null);
  const helpPreviewTimerRef = useRef<number | null>(null);
  const helpPreviewAnchorRef = useRef<HelpPreviewAnchor | null>(null);
  const [activeColumnResize, setActiveColumnResize] =
    useState<ColumnName | null>(null);
  const [helpPreview, setHelpPreview] = useState<HelpPreviewState | null>(null);

  const dismissHelpPreview = useCallback(() => {
    if (helpPreviewTimerRef.current !== null) {
      window.clearTimeout(helpPreviewTimerRef.current);
      helpPreviewTimerRef.current = null;
    }
    helpPreviewAnchorRef.current = null;
    setHelpPreview(null);
  }, []);

  const scheduleHelpPreview = useCallback(
    (
      target: HTMLElement,
      row: ParameterTableRow,
      pointer?: { clientX: number; clientY: number },
    ) => {
      dismissHelpPreview();
      if (!rowHasHelpPreview(row)) {
        return;
      }
      const bounds = target.getBoundingClientRect();
      const fallbackAnchor = {
        clientX: bounds.left + bounds.width / 2,
        clientY: bounds.top + bounds.height / 2,
      };
      helpPreviewAnchorRef.current = {
        rowId: row.id,
        ...(pointer ?? fallbackAnchor),
      };
      helpPreviewTimerRef.current = window.setTimeout(() => {
        helpPreviewTimerRef.current = null;
        const anchor =
          helpPreviewAnchorRef.current?.rowId === row.id
            ? helpPreviewAnchorRef.current
            : { rowId: row.id, ...fallbackAnchor };
        setHelpPreview({
          rowId: row.id,
          ...helpPreviewPosition(anchor.clientX, anchor.clientY),
        });
      }, HELP_PREVIEW_DELAY_MS);
    },
    [dismissHelpPreview],
  );

  const trackHelpPointer = (
    event: ReactMouseEvent<HTMLTableRowElement>,
    row: ParameterTableRow,
  ) => {
    helpPreviewAnchorRef.current = {
      rowId: row.id,
      clientX: event.clientX,
      clientY: event.clientY,
    };
  };

  useEffect(() => {
    const dismissOnViewportChange = () => dismissHelpPreview();
    window.addEventListener("scroll", dismissOnViewportChange, true);
    window.addEventListener("resize", dismissOnViewportChange);
    return () => {
      window.removeEventListener("scroll", dismissOnViewportChange, true);
      window.removeEventListener("resize", dismissOnViewportChange);
      if (helpPreviewTimerRef.current !== null) {
        window.clearTimeout(helpPreviewTimerRef.current);
        helpPreviewTimerRef.current = null;
      }
    };
  }, [dismissHelpPreview]);

  const changeColumnLayout = (
    column: ColumnName,
    boundaryDelta: number,
    startLayout = effectiveLayout,
  ) => {
    const proposed =
      column === "name"
        ? { ...startLayout, nameWidth: startLayout.nameWidth + boundaryDelta }
        : { ...startLayout, unitWidth: startLayout.unitWidth - boundaryDelta };
    onColumnLayoutChange(effectiveColumnLayout(proposed, availableWidth));
  };

  const startColumnResize = (
    event: ReactPointerEvent<HTMLDivElement>,
    column: ColumnName,
  ) => {
    dismissHelpPreview();
    event.preventDefault();
    event.currentTarget.setPointerCapture(event.pointerId);
    columnDragRef.current = {
      column,
      pointerId: event.pointerId,
      startX: event.clientX,
      startLayout: effectiveLayout,
    };
    setActiveColumnResize(column);
  };

  const moveColumnResize = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = columnDragRef.current;
    if (!drag || drag.pointerId !== event.pointerId) {
      return;
    }
    changeColumnLayout(drag.column, event.clientX - drag.startX, drag.startLayout);
  };

  const stopColumnResize = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (columnDragRef.current?.pointerId !== event.pointerId) {
      return;
    }
    columnDragRef.current = null;
    setActiveColumnResize(null);
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
  };

  const resizeColumnWithKeyboard = (
    event: ReactKeyboardEvent<HTMLDivElement>,
    column: ColumnName,
  ) => {
    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
      return;
    }
    event.preventDefault();
    dismissHelpPreview();
    const step = event.shiftKey ? COLUMN_KEYBOARD_STEP * 3 : COLUMN_KEYBOARD_STEP;
    changeColumnLayout(column, event.key === "ArrowRight" ? step : -step);
  };

  const nameColumnMaximum = Math.max(
    MIN_NAME_WIDTH,
    Math.min(MAX_NAME_WIDTH, availableWidth - MIN_VALUE_WIDTH - effectiveLayout.unitWidth),
  );
  const unitColumnMaximum = Math.max(
    MIN_UNIT_WIDTH,
    Math.min(MAX_UNIT_WIDTH, availableWidth - MIN_VALUE_WIDTH - effectiveLayout.nameWidth),
  );
  const tableStyle = {
    "--parameter-name-width": `${effectiveLayout.nameWidth}px`,
    "--parameter-unit-width": `${effectiveLayout.unitWidth}px`,
  } as CSSProperties;
  const previewRow = helpPreview
    ? rows.find((row) => row.id === helpPreview.rowId) ?? null
    : null;
  const previewDescription = previewRow?.description ||
    (typeof previewRow?.help === "string" ? previewRow.help : "");

  const renderColumnResizer = (column: ColumnName) => {
    const currentWidth =
      column === "name" ? effectiveLayout.nameWidth : effectiveLayout.unitWidth;
    const minimum = column === "name" ? MIN_NAME_WIDTH : MIN_UNIT_WIDTH;
    const maximum = column === "name" ? nameColumnMaximum : unitColumnMaximum;
    const label = column === "name" ? "调整参数名列宽" : "调整单位列宽";
    return (
      <div
        aria-label={label}
        aria-orientation="vertical"
        aria-valuemax={Math.round(maximum)}
        aria-valuemin={minimum}
        aria-valuenow={Math.round(currentWidth)}
        aria-valuetext={`${column === "name" ? "参数名" : "单位"}列 ${Math.round(currentWidth)} 像素`}
        className="parameter-table-column-resizer"
        data-column={column}
        onDoubleClick={() => {
          dismissHelpPreview();
          onColumnLayoutChange({ ...DEFAULT_PARAMETER_COLUMN_LAYOUT });
        }}
        onKeyDown={(event) => resizeColumnWithKeyboard(event, column)}
        onLostPointerCapture={stopColumnResize}
        onPointerCancel={stopColumnResize}
        onPointerDown={(event) => startColumnResize(event, column)}
        onPointerMove={moveColumnResize}
        onPointerUp={stopColumnResize}
        role="separator"
        tabIndex={0}
      />
    );
  };

  const rowBlurred = (event: ReactFocusEvent<HTMLTableRowElement>) => {
    if (!event.currentTarget.contains(event.relatedTarget as globalThis.Node | null)) {
      dismissHelpPreview();
    }
  };

  return (
    <div
      className={`parameter-table-wrap ${activeColumnResize ? `resizing-${activeColumnResize}` : ""}`}
      data-resizing-column={activeColumnResize ?? undefined}
    >
      <table aria-label={ariaLabel} className="parameter-table" style={tableStyle}>
        <colgroup>
          <col style={{ width: effectiveLayout.nameWidth }} />
          <col />
          <col style={{ width: effectiveLayout.unitWidth }} />
        </colgroup>
        <thead className="parameter-table-head">
          <tr className="parameter-table-row parameter-table-head-row">
            <th className="parameter-table-cell parameter-table-name-cell" scope="col">
              参数
              {renderColumnResizer("name")}
            </th>
            <th className="parameter-table-cell parameter-table-value-cell" scope="col">
              值
              {renderColumnResizer("unit")}
            </th>
            <th className="parameter-table-cell parameter-table-unit-cell" scope="col">
              单位
            </th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => {
            const hasPreview = rowHasHelpPreview(row);
            const hasUnit = row.unit !== undefined && row.unit !== null;
            return (
              <Fragment key={row.id}>
                <tr
                  aria-describedby={
                    helpPreview?.rowId === row.id
                      ? "parameter-help-preview"
                      : undefined
                  }
                  className={`parameter-table-row ${row.error ? "invalid" : ""} ${hasUnit ? "" : "unitless"} ${row.readOnly ? "read-only" : ""}`}
                  onBlurCapture={rowBlurred}
                  onFocusCapture={(event) =>
                    scheduleHelpPreview(event.currentTarget, row)
                  }
                  onMouseEnter={(event) =>
                    scheduleHelpPreview(event.currentTarget, row, {
                      clientX: event.clientX,
                      clientY: event.clientY,
                    })
                  }
                  onMouseLeave={dismissHelpPreview}
                  onMouseMove={(event) => trackHelpPointer(event, row)}
                  tabIndex={row.readOnly && hasPreview ? 0 : undefined}
                >
                  <th
                    className="parameter-table-cell parameter-table-name-cell"
                    scope="row"
                  >
                    {row.name}
                  </th>
                  <td className="parameter-table-cell parameter-table-value-cell">
                    {row.value}
                  </td>
                  <td className="parameter-table-cell parameter-table-unit-cell">
                    {hasUnit ? row.unit : <span aria-label="无单位">—</span>}
                  </td>
                </tr>
                {row.error ? (
                  <tr className="parameter-table-message-row">
                    <td className="parameter-table-cell" colSpan={3}>
                      <small className="field-error">{row.error}</small>
                    </td>
                  </tr>
                ) : null}
              </Fragment>
            );
          })}
        </tbody>
      </table>
      {helpPreview && previewRow && typeof document !== "undefined"
        ? createPortal(
            <div
              className="parameter-help-preview"
              id="parameter-help-preview"
              role="tooltip"
              style={{
                left: helpPreview.left,
                position: "fixed",
                top: helpPreview.top,
                transform: helpPreview.transform,
              }}
            >
              <strong className="parameter-help-preview-title">
                {previewRow.name}
              </strong>
              {previewDescription ? (
                <span className="parameter-help-preview-description">
                  {previewDescription}
                </span>
              ) : null}
              {previewRow.defaultValue ||
              previewRow.range ||
              previewRow.currentUnit ? (
                <span className="parameter-help-preview-meta">
                  {previewRow.defaultValue ? (
                    <span>默认值：{previewRow.defaultValue}</span>
                  ) : null}
                  {previewRow.range ? <span>范围：{previewRow.range}</span> : null}
                  {previewRow.currentUnit ? (
                    <span>当前单位：{previewRow.currentUnit}</span>
                  ) : null}
                </span>
              ) : null}
            </div>,
            document.body,
          )
        : null}
    </div>
  );
}