"use client";

import { useEffect, useRef, useState } from "react";
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Progress } from '@/components/ui/progress';
import { Switch } from '@/components/ui/switch';
import ConfirmModal from './ConfirmModal';
import { ResetIcon, SettingsIcon } from './Icons';

export default function SettingsModal({
  onClose,
  tempSeconds,
  setTempSeconds,
  saveSettings,
  exportLocalData,
  importFileRef,
  handleImportFileChange,
  importMsg,
  isMobile,
  containerWidth = 1200,
  setContainerWidth,
  onResetContainerWidth,
  showMarketIndex = true,
  setShowMarketIndex,
}) {
  const [sliderDragging, setSliderDragging] = useState(false);
  const [resetWidthConfirmOpen, setResetWidthConfirmOpen] = useState(false);
  const [localSeconds, setLocalSeconds] = useState(tempSeconds);
  const [localShowMarketIndex, setLocalShowMarketIndex] = useState(showMarketIndex);
  const pageWidthTrackRef = useRef(null);

  const clampedWidth = Math.min(2000, Math.max(600, Number(containerWidth) || 1200));
  const pageWidthPercent = ((clampedWidth - 600) / (2000 - 600)) * 100;

  const updateWidthByClientX = (clientX) => {
    if (!pageWidthTrackRef.current || !setContainerWidth) return;
    const rect = pageWidthTrackRef.current.getBoundingClientRect();
    if (!rect.width) return;
    const ratio = (clientX - rect.left) / rect.width;
    const clampedRatio = Math.min(1, Math.max(0, ratio));
    const rawWidth = 600 + clampedRatio * (2000 - 600);
    const snapped = Math.round(rawWidth / 10) * 10;
    setContainerWidth(snapped);
  };

  useEffect(() => {
    if (!sliderDragging) return;
    const onPointerUp = () => setSliderDragging(false);
    document.addEventListener('pointerup', onPointerUp);
    document.addEventListener('pointercancel', onPointerUp);
    return () => {
      document.removeEventListener('pointerup', onPointerUp);
      document.removeEventListener('pointercancel', onPointerUp);
    };
  }, [sliderDragging]);

  // 外部的 tempSeconds 变更时，同步到本地显示，但不立即生效
  useEffect(() => {
    setLocalSeconds(tempSeconds);
  }, [tempSeconds]);

  useEffect(() => {
    setLocalShowMarketIndex(showMarketIndex);
  }, [showMarketIndex]);

  return (
    <Dialog
      open
      onOpenChange={(open) => {
        if (!open) onClose?.();
      }}
    >
      <DialogContent
        overlayClassName={`modal-overlay ${sliderDragging ? 'modal-overlay-translucent' : ''} z-[9999]`}
        className="!p-0 z-[10000]"
        showCloseButton={false}
      >
        <div className="glass card modal">
          <div className="title" style={{ marginBottom: 12 }}>
            <SettingsIcon width="20" height="20" />
            <DialogTitle asChild>
              <span>设置</span>
            </DialogTitle>
          </div>

          <div className="form-group" style={{ marginBottom: 16 }}>
            <div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>刷新频率</div>
            <div className="chips" style={{ marginBottom: 12 }}>
              {[30, 60, 120, 300].map((s) => (
                <button
                  key={s}
                  type="button"
                className={`chip ${localSeconds === s ? 'active' : ''}`}
                onClick={() => setLocalSeconds(s)}
                aria-pressed={localSeconds === s}
                >
                  {s} 秒
                </button>
              ))}
            </div>
            <input
              className="input"
              type="number"
              inputMode="numeric"
              min="30"
              step="5"
            value={localSeconds}
            onChange={(e) => setLocalSeconds(Number(e.target.value))}
              placeholder="自定义秒数"
            />
          {localSeconds < 30 && (
              <div className="error-text" style={{ marginTop: 8 }}>
                最小 30 秒
              </div>
            )}
          </div>

          {!isMobile && setContainerWidth && (
            <div className="form-group" style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                <div className="muted" style={{ fontSize: '0.8rem' }}>页面宽度</div>
                {onResetContainerWidth && (
                  <button
                    type="button"
                    className="icon-button"
                    onClick={() => setResetWidthConfirmOpen(true)}
                    title="重置页面宽度"
                    style={{
                      border: 'none',
                      width: '24px',
                      height: '24px',
                      padding: 0,
                      backgroundColor: 'transparent',
                      color: 'var(--muted)',
                    }}
                  >
                    <ResetIcon width="14" height="14" />
                  </button>
                )}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div
                  ref={pageWidthTrackRef}
                  className="group relative"
                  style={{ flex: 1, height: 14, cursor: 'pointer', display: 'flex', alignItems: 'center' }}
                  onPointerDown={(e) => {
                    setSliderDragging(true);
                    updateWidthByClientX(e.clientX);
                    e.currentTarget.setPointerCapture?.(e.pointerId);
                  }}
                  onPointerMove={(e) => {
                    if (!sliderDragging) return;
                    updateWidthByClientX(e.clientX);
                  }}
                >
                  <Progress value={pageWidthPercent} />
                  <div
                    className="pointer-events-none absolute top-1/2 -translate-y-1/2"
                    style={{ left: `${pageWidthPercent}%`, transform: 'translate(-50%, -50%)' }}
                  >
                    <div
                      className="h-3 w-3 rounded-full bg-primary shadow-md shadow-primary/40"
                    />
                  </div>
                </div>
                <span className="muted" style={{ fontSize: '0.8rem', minWidth: 48 }}>
                  {clampedWidth}px
                </span>
              </div>
            </div>
          )}

          <div hidden className="form-group" style={{ marginBottom: 16 }}>
            <div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>显示大盘指数</div>
            <div className="row" style={{ justifyContent: 'flex-start', alignItems: 'center' }}>
              <Switch
                checked={localShowMarketIndex}
                className="ml-2 scale-125"
                onCheckedChange={(checked) => {
                  const nextValue = Boolean(checked);
                  setLocalShowMarketIndex(nextValue);
                  setShowMarketIndex?.(nextValue);
                }}
                aria-label="显示大盘指数"
              />
            </div>
          </div>

          <div className="form-group" style={{ marginBottom: 16 }}>
            <div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem' }}>数据导出</div>
            <div className="row" style={{ gap: 8 }}>
              <button type="button" className="button" onClick={exportLocalData}>导出配置</button>
            </div>
            <div className="muted" style={{ marginBottom: 8, fontSize: '0.8rem', marginTop: 26 }}>数据导入</div>
            <div className="row" style={{ gap: 8, marginTop: 8 }}>
              <button type="button" className="button" onClick={() => importFileRef.current?.click?.()}>导入配置</button>
            </div>
            <input
              ref={importFileRef}
              type="file"
              accept="application/json"
              style={{ display: 'none' }}
              onChange={handleImportFileChange}
            />
            {importMsg && (
              <div className="muted" style={{ marginTop: 8 }}>
                {importMsg}
              </div>
            )}
          </div>

          <div className="row" style={{ justifyContent: 'flex-end', marginTop: 24 }}>
            <button
              className="button"
              onClick={(e) => saveSettings(e, localSeconds, localShowMarketIndex)}
              disabled={localSeconds < 30}
            >
              保存并关闭
            </button>
          </div>
        </div>
      </DialogContent>
      {resetWidthConfirmOpen && onResetContainerWidth && (
        <ConfirmModal
          title="重置页面宽度"
          message="是否重置页面宽度为默认值 1200px？"
          icon={<ResetIcon width="20" height="20" className="shrink-0 text-[var(--primary)]" />}
          confirmVariant="primary"
          onConfirm={() => {
            onResetContainerWidth();
            setResetWidthConfirmOpen(false);
          }}
          onCancel={() => setResetWidthConfirmOpen(false)}
          confirmText="重置"
        />
      )}
    </Dialog>
  );
}