import React from 'react';

export default function ComfyUI() {
  const [isDark, setIsDark] = React.useState(true);
  const [available, setAvailable] = React.useState(false);
  const [message, setMessage] = React.useState('正在检查外部 ComfyUI...');
  const iframeRef = React.useRef<HTMLIFrameElement | null>(null);

  const openFullscreen = () => {
    window.open('/api/comfyui/proxy/', '_blank', 'noopener,noreferrer');
  };

  const reloadFrame = () => {
    if (iframeRef.current) {
      iframeRef.current.src = '/api/comfyui/proxy/';
    }
  };

  React.useEffect(() => {
    const el = document.documentElement;
    const check = () => setIsDark(el.getAttribute('data-theme') !== 'light');
    check();
    const mo = new MutationObserver(check);
    mo.observe(el, { attributes: true, attributeFilter: ['data-theme'] });
    return () => mo.disconnect();
  }, []);

  React.useEffect(() => {
    let cancelled = false;
    const controller = new AbortController();
    void fetch('/api/comfyui/proxy/', { method: 'GET', signal: controller.signal })
      .then((response) => {
        if (cancelled) return;
        setAvailable(response.ok);
        setMessage(response.ok
          ? ''
          : '外部 ComfyUI 不可达。请在 config.toml 中配置 comfyui.base_url，或使用工作流。');
      })
      .catch((err) => {
        if (cancelled || err?.name === 'AbortError') return;
        setAvailable(false);
        setMessage('外部 ComfyUI 不可达。请在 config.toml 中配置 comfyui.base_url，或使用工作流。');
      });
    return () => {
      cancelled = true;
      controller.abort();
    };
  }, []);

  return (
    <div
      style={{
        width: '100%',
        height: 'calc(100vh - 56px)',
        display: 'flex',
        flexDirection: 'column',
        background: isDark ? '#1a1a2e' : '#f5f5f5',
      }}
    >
      <div style={toolbarStyle}>
        <div style={toolbarTitleStyle}>外部 ComfyUI</div>
        <div style={toolbarActionsStyle}>
          <button type="button" onClick={reloadFrame} disabled={!available} style={toolbarButtonStyle}>
            刷新
          </button>
          <button type="button" onClick={openFullscreen} disabled={!available} style={primaryToolbarButtonStyle}>
            新窗口打开
          </button>
        </div>
      </div>
      {available ? (
        <iframe
          ref={iframeRef}
          src="/api/comfyui/proxy/"
          style={{ width: '100%', height: '100%', border: 'none' }}
          title="External ComfyUI"
          allow="clipboard-read; clipboard-write"
        />
      ) : (
        <div style={{
          height: '100%',
          display: 'grid',
          placeItems: 'center',
          color: 'var(--color-text-muted)',
          fontSize: 14,
          textAlign: 'center',
          padding: 24,
        }}>
          <div>
            <div style={{ fontWeight: 700, color: 'var(--color-text-primary)', marginBottom: 8 }}>
              内置 Docker ComfyUI 工作台已移除
            </div>
            <div style={{ maxWidth: 560, lineHeight: 1.7 }}>{message}</div>
          </div>
        </div>
      )}
    </div>
  );
}

const toolbarStyle: React.CSSProperties = {
  minHeight: 44,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: 12,
  padding: '8px 12px',
  borderBottom: '1px solid var(--color-border-light)',
  background: 'var(--color-surface)',
};

const toolbarTitleStyle: React.CSSProperties = {
  fontSize: 14,
  fontWeight: 800,
  color: 'var(--color-text-primary)',
};

const toolbarActionsStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: 8,
};

const toolbarButtonStyle: React.CSSProperties = {
  minHeight: 30,
  border: '1px solid var(--color-border)',
  borderRadius: 8,
  padding: '5px 10px',
  background: 'var(--color-bg)',
  color: 'var(--color-text-primary)',
  cursor: 'pointer',
  fontSize: 12,
};

const primaryToolbarButtonStyle: React.CSSProperties = {
  ...toolbarButtonStyle,
  borderColor: 'var(--color-primary)',
  background: 'var(--color-primary)',
  color: '#fff',
  fontWeight: 700,
};