import React, { useCallback, useMemo, useRef, useState } from 'react';
import type { Theme } from '../../types';
import {
  readStoredBool,
  readStoredSize,
  storeBool,
  storeSize,
  usePanelResize,
} from '../strategyEditor/usePanelResize';
import '../../styles/strategyEditorTheme.css';
import '../../styles/builderPageShell.css';
import '../../styles/paperDashboard.css';
import '../../styles/tradeRightPanel.css';

const LEFT_MIN = 220;
const LEFT_MAX = 520;
const LEFT_DEFAULT = 280;
const RIGHT_MIN = 260;
const RIGHT_MAX = 520;
const RIGHT_DEFAULT = 280;
const FOOTER_MIN = 88;
const FOOTER_MAX = 420;
const FOOTER_DEFAULT = 140;

export interface BuilderPageShellProps {
  theme: Theme;
  title: string;
  subtitle?: string;
  headerActions?: React.ReactNode;
  /** 타이틀 우측·중앙 그리드 시작선 정렬 (가상투자 등) */
  headerCenter?: React.ReactNode;
  /** grid: 좌패널폭 기준 3열 / between: 타이틀·버튼 사이 중앙 (모의투자 안내 등) */
  headerCenterMode?: 'grid' | 'between';
  pageClassName?: string;
  banner?: React.ReactNode;
  leftTitle?: string;
  leftTabs?: React.ReactNode;
  leftActions?: React.ReactNode;
  left: React.ReactNode;
  centerHead?: React.ReactNode;
  center: React.ReactNode;
  rightTitle?: string;
  rightTabs?: React.ReactNode;
  right?: React.ReactNode;
  footerLabel?: string;
  footer?: React.ReactNode;
  leftStorageKey?: string;
  leftDefaultWidth?: number;
  rightStorageKey?: string;
  rightDefaultWidth?: number;
  footerStorageKey?: string;
  /** 실시간 차트처럼 좌·우 패널 접기/펼치기 */
  collapsiblePanels?: boolean;
  leftCollapsedStorageKey?: string;
  rightCollapsedStorageKey?: string;
  loading?: boolean;
  loadingText?: string;
}

function PanelCollapseHandle({
  side,
  open,
  onToggle,
  label,
}: {
  side: 'left' | 'right';
  open: boolean;
  onToggle: () => void;
  label: string;
}) {
  return (
    <button
      type="button"
      className={`bps-panel-handle bps-panel-handle--${side}${open ? ' bps-panel-handle--open' : ''}`}
      onClick={e => {
        e.stopPropagation();
        onToggle();
      }}
      title={open ? `${label} 닫기` : `${label} 열기`}
      aria-expanded={open}
      aria-label={open ? `${label} 닫기` : `${label} 열기`}
    >
      <svg
        width="8"
        height="14"
        viewBox="0 0 8 14"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden
      >
        {side === 'left' ? (
          open ? <polyline points="6,1 2,7 6,13" /> : <polyline points="2,1 6,7 2,13" />
        ) : (
          open ? <polyline points="2,1 6,7 2,13" /> : <polyline points="6,1 2,7 6,13" />
        )}
      </svg>
    </button>
  );
}

export default function BuilderPageShell({
  theme,
  title,
  subtitle,
  headerActions,
  headerCenter,
  headerCenterMode = 'grid',
  pageClassName,
  banner,
  leftTitle,
  leftTabs,
  leftActions,
  left,
  centerHead,
  center,
  rightTitle,
  rightTabs,
  right,
  footerLabel,
  footer,
  leftStorageKey = 'bps-left-width',
  leftDefaultWidth = LEFT_DEFAULT,
  rightStorageKey = 'bps-right-width',
  rightDefaultWidth = RIGHT_DEFAULT,
  footerStorageKey = 'bps-footer-height',
  collapsiblePanels = false,
  leftCollapsedStorageKey,
  rightCollapsedStorageKey,
  loading = false,
  loadingText = '로딩 중…',
}: BuilderPageShellProps) {
  const [leftWidth, setLeftWidth] = useState(() => readStoredSize(leftStorageKey, leftDefaultWidth));
  const [rightWidth, setRightWidth] = useState(() => readStoredSize(rightStorageKey, rightDefaultWidth));
  const [leftOpen, setLeftOpen] = useState(() =>
    collapsiblePanels && leftCollapsedStorageKey
      ? readStoredBool(leftCollapsedStorageKey, true)
      : true,
  );
  const [rightOpen, setRightOpen] = useState(() =>
    collapsiblePanels && rightCollapsedStorageKey
      ? readStoredBool(rightCollapsedStorageKey, true)
      : true,
  );
  const [footerHeight, setFooterHeight] = useState(() => readStoredSize(footerStorageKey, FOOTER_DEFAULT));
  const leftWidthRef = useRef(leftWidth);
  const rightWidthRef = useRef(rightWidth);
  const footerHeightRef = useRef(footerHeight);
  leftWidthRef.current = leftWidth;
  rightWidthRef.current = rightWidth;
  footerHeightRef.current = footerHeight;

  const onLeftSplitter = usePanelResize(
    'vertical',
    setLeftWidth,
    () => leftWidthRef.current,
    LEFT_MIN,
    LEFT_MAX,
    v => storeSize(leftStorageKey, v),
  );

  const handleRightSplitter = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
    const startX = e.clientX;
    const start = rightWidthRef.current;
    const cursor = 'col-resize';

    document.body.style.cursor = cursor;
    document.body.style.userSelect = 'none';
    e.currentTarget.setPointerCapture(e.pointerId);
    e.currentTarget.classList.add('se-splitter--active');
    const splitter = e.currentTarget;

    const onMove = (ev: PointerEvent) => {
      const delta = ev.clientX - startX;
      const next = Math.min(RIGHT_MAX, Math.max(RIGHT_MIN, start - delta));
      setRightWidth(next);
    };

    const onUp = (ev: PointerEvent) => {
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
      splitter.releasePointerCapture(ev.pointerId);
      splitter.classList.remove('se-splitter--active');
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerup', onUp);
      storeSize(rightStorageKey, rightWidthRef.current);
    };

    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
  }, [rightStorageKey]);

  const onFooterSplitter = usePanelResize(
    'horizontal',
    setFooterHeight,
    () => footerHeightRef.current,
    FOOTER_MIN,
    FOOTER_MAX,
    v => storeSize(footerStorageKey, v),
  );

  const toggleLeft = useCallback(() => {
    setLeftOpen(prev => {
      const next = !prev;
      if (leftCollapsedStorageKey) storeBool(leftCollapsedStorageKey, next);
      return next;
    });
  }, [leftCollapsedStorageKey]);

  const toggleRight = useCallback(() => {
    setRightOpen(prev => {
      const next = !prev;
      if (rightCollapsedStorageKey) storeBool(rightCollapsedStorageKey, next);
      return next;
    });
  }, [rightCollapsedStorageKey]);

  const pageStyle = useMemo(() => ({
    '--bps-left-width': leftOpen ? `${leftWidth}px` : '0px',
    '--bps-right-width': rightOpen ? `${rightWidth}px` : '0px',
    '--bps-left-open': leftOpen ? '1' : '0',
    '--bps-right-open': rightOpen ? '1' : '0',
    '--bps-left-splitter': leftOpen ? '5px' : '0px',
    '--bps-right-splitter': rightOpen ? '5px' : '0px',
    '--bps-left-handle': '16px',
    '--bps-splitter-w': '5px',
  }) as React.CSSProperties, [leftOpen, leftWidth, rightOpen, rightWidth]);

  const bodyStyle = useMemo(() => ({
    '--bps-footer-height': `${footerHeight}px`,
    '--bps-left-width': leftOpen ? `${leftWidth}px` : '0px',
    '--bps-right-width': rightOpen ? `${rightWidth}px` : '0px',
  }) as React.CSSProperties, [footerHeight, leftOpen, leftWidth, rightOpen, rightWidth]);

  const centerContentClass = [
    'bps-center-content',
    collapsiblePanels && !leftOpen ? 'bps-center-content--left-collapsed' : '',
    collapsiblePanels && !rightOpen ? 'bps-center-content--right-collapsed' : '',
    collapsiblePanels && !leftOpen && !rightOpen ? 'bps-center-content--both-collapsed' : '',
  ].filter(Boolean).join(' ');

  if (loading) {
    return (
      <div className={`bps-page se-page se-page--${theme}`}>
        <header className="bps-header">
          <div className="bps-header-left">
            <h1 className="bps-title">{title}</h1>
            {subtitle && <span className="bps-subtitle">{subtitle}</span>}
          </div>
        </header>
        <div className="bps-loading">{loadingText}</div>
      </div>
    );
  }

  return (
    <div
      className={`bps-page se-page se-page--${theme}${pageClassName ? ` ${pageClassName}` : ''}`}
      style={pageStyle}
    >
      <header
        className={[
          'bps-header',
          headerCenter && headerCenterMode === 'between' ? 'bps-header--between' : '',
          headerCenter && headerCenterMode === 'grid' ? 'bps-header--vtd' : '',
        ].filter(Boolean).join(' ')}
      >
        <div className="bps-header-left">
          <h1 className="bps-title">{title}</h1>
          {subtitle && <span className="bps-subtitle">{subtitle}</span>}
        </div>
        {headerCenter ? (
          headerCenterMode === 'between' ? (
            <>
              <div className="bps-header-center">{headerCenter}</div>
              {headerActions && <div className="bps-header-actions">{headerActions}</div>}
            </>
          ) : (
            <>
              <div className="bps-header-center">{headerCenter}</div>
              {headerActions && (
                <>
                  <span className="header-toolbar-divider" aria-hidden="true" />
                  <div className="bps-header-actions">{headerActions}</div>
                </>
              )}
            </>
          )
        ) : (
          headerActions && <div className="bps-header-actions">{headerActions}</div>
        )}
      </header>

      {banner}

      <div className="bps-body" style={bodyStyle}>
        {collapsiblePanels ? (
          <div className={`bps-side-wrap bps-side-wrap--left${leftOpen ? ' bps-side-wrap--open' : ''}`}>
            <aside
              className={`bps-left bps-left--collapsible${leftOpen ? ' bps-left--collapsible--open' : ''}`}
            >
              <div className="bps-panel">
                {leftTabs ? (
                  <>
                    {leftTabs}
                    <div className="bps-panel-body bps-panel-body--tabs">{left}</div>
                  </>
                ) : (
                  <>
                    <div className="bps-panel-head">
                      <h2 className="bps-panel-title">{leftTitle}</h2>
                      {leftActions && <div className="bps-panel-actions">{leftActions}</div>}
                    </div>
                    <div className="bps-panel-body">{left}</div>
                  </>
                )}
              </div>
            </aside>
            <PanelCollapseHandle side="left" open={leftOpen} onToggle={toggleLeft} label="좌측 패널" />
          </div>
        ) : null}
        {collapsiblePanels && leftOpen ? (
          <div
            className="bps-splitter bps-splitter--v se-splitter se-splitter--v"
            role="separator"
            aria-orientation="vertical"
            aria-label="좌측 패널 너비 조절"
            onPointerDown={onLeftSplitter}
          />
        ) : null}
        {!collapsiblePanels ? (
          <>
            <aside className="bps-left" style={{ width: leftWidth }}>
              <div className="bps-panel">
                {leftTabs ? (
                  <>
                    {leftTabs}
                    <div className="bps-panel-body bps-panel-body--tabs">{left}</div>
                  </>
                ) : (
                  <>
                    <div className="bps-panel-head">
                      <h2 className="bps-panel-title">{leftTitle}</h2>
                      {leftActions && <div className="bps-panel-actions">{leftActions}</div>}
                    </div>
                    <div className="bps-panel-body">{left}</div>
                  </>
                )}
              </div>
            </aside>
            <div
              className="bps-splitter bps-splitter--v se-splitter se-splitter--v"
              role="separator"
              aria-orientation="vertical"
              aria-label="좌측 패널 너비 조절"
              onPointerDown={onLeftSplitter}
            />
          </>
        ) : null}

        <div className="bps-main">
          <div className="bps-main-row">
            <main className="bps-center">
              <div className="bps-center-work">
                {centerHead && <div className="bps-center-head">{centerHead}</div>}
                <div className={centerContentClass}>{center}</div>
              </div>

              {footer && (
                <>
                  <div
                    className="bps-splitter bps-splitter--h se-splitter se-splitter--h"
                    role="separator"
                    aria-orientation="horizontal"
                    aria-label="하단 패널 높이 조절"
                    onPointerDown={onFooterSplitter}
                  />
                  <footer className="bps-footer" style={{ height: footerHeight }}>
                    {footerLabel && <div className="bps-footer-label">{footerLabel}</div>}
                    <div className="bps-footer-body">{footer}</div>
                  </footer>
                </>
              )}
            </main>

            {right && collapsiblePanels && rightOpen ? (
              <div
                className="bps-splitter bps-splitter--v se-splitter se-splitter--v"
                role="separator"
                aria-orientation="vertical"
                aria-label="우측 패널 너비 조절"
                onPointerDown={handleRightSplitter}
              />
            ) : null}
            {right && (collapsiblePanels ? (
              <div className={`bps-side-wrap bps-side-wrap--right${rightOpen ? ' bps-side-wrap--open' : ''}`}>
                <PanelCollapseHandle side="right" open={rightOpen} onToggle={toggleRight} label="우측 패널" />
                <aside
                  className={`bps-right trade-right-panel bps-right--collapsible${rightOpen ? ' bps-right--collapsible--open' : ''}`}
                >
                  {rightTabs ?? (rightTitle ? (
                    <div className="bps-panel-head" style={{ margin: 0, padding: '12px 12px 10px', borderBottom: '1px solid var(--se-border)' }}>
                      <h2 className="bps-panel-title">{rightTitle}</h2>
                    </div>
                  ) : null)}
                  <div className="bps-right-body">{right}</div>
                </aside>
              </div>
            ) : (
              <>
                <div
                  className="bps-splitter bps-splitter--v se-splitter se-splitter--v"
                  role="separator"
                  aria-orientation="vertical"
                  aria-label="우측 패널 너비 조절"
                  onPointerDown={handleRightSplitter}
                />
                <aside
                  className="bps-right trade-right-panel"
                  style={{ width: rightWidth, flex: `0 0 ${rightWidth}px` }}
                >
                  {rightTabs ?? (rightTitle ? (
                    <div className="bps-panel-head" style={{ margin: 0, padding: '12px 12px 10px', borderBottom: '1px solid var(--se-border)' }}>
                      <h2 className="bps-panel-title">{rightTitle}</h2>
                    </div>
                  ) : null)}
                  <div className="bps-right-body">{right}</div>
                </aside>
              </>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}