// FE-EXP001: 前端响应式设计优化
import React from 'react';
import { useMediaQuery } from 'react-responsive';
import { Layout, Row, Col, Menu, Button, Drawer } from 'antd';

const { Header, Sider, Content, Footer } = Layout;

// 响应式布局组件
export const AdvancedResponsiveLayout: React.FC<{
  children: React.ReactNode;
  menuItems: { key: string; label: string; icon?: React.ReactNode }[];
  selectedKey: string;
  onMenuSelect: (key: string) => void;
  logo?: React.ReactNode;
  headerContent?: React.ReactNode;
  footerContent?: React.ReactNode;
  showHeader?: boolean;
  showFooter?: boolean;
}> = ({
  children,
  menuItems,
  selectedKey,
  onMenuSelect,
  logo,
  headerContent,
  footerContent,
  showHeader = true,
  showFooter = true,
}) => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  const isTablet = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
  const isDesktop = useMediaQuery({ minWidth: 1025 });

  const [collapsed, setCollapsed] = React.useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);

  const toggleCollapse = () => {
    setCollapsed(!collapsed);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 桌面端侧边栏 */}
      {!isMobile && (
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={setCollapsed}
          style={{
            background: '#fff',
            boxShadow: '2px 0 8px rgba(0, 0, 0, 0.05)',
          }}
        >
          <div className="logo" style={{ padding: '16px', textAlign: 'center' }}>
            {logo || <div style={{ fontSize: '18px', fontWeight: 'bold' }}>Crawlful Hub</div>}
          </div>
          <Menu
            mode="inline"
            selectedKeys={[selectedKey]}
            onSelect={({ key }) => onMenuSelect(key)}
            items={menuItems}
            style={{
              height: '100%',
              borderRight: 0,
            }}
          />
        </Sider>
      )}
      
      {/* 移动端抽屉菜单 */}
      <Drawer
        title="Menu"
        placement="left"
        onClose={() => setMobileMenuOpen(false)}
        open={mobileMenuOpen}
        drawerStyle={{ width: '280px' }}
      >
        <div className="logo" style={{ padding: '16px', textAlign: 'center', marginBottom: '24px' }}>
          {logo || <div style={{ fontSize: '18px', fontWeight: 'bold' }}>Crawlful Hub</div>}
        </div>
        <Menu
          mode="inline"
          selectedKeys={[selectedKey]}
          onSelect={({ key }) => {
            onMenuSelect(key);
            setMobileMenuOpen(false);
          }}
          items={menuItems}
          style={{
            height: '100%',
            borderRight: 0,
          }}
        />
      </Drawer>
      
      <Layout style={{ flex: 1 }}>
        {/* 头部 */}
        {showHeader && (
          <Header
            style={{
              background: '#fff',
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              padding: '0 24px',
              height: '64px',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {isMobile && (
                <Button
                  type="text"
                  onClick={() => setMobileMenuOpen(true)}
                  style={{ marginRight: '16px', fontSize: '18px' }}
                >
                  ☰
                </Button>
              )}
              {!isMobile && collapsed && (
                <Button
                  type="text"
                  onClick={toggleCollapse}
                  style={{ marginRight: '16px' }}
                >
                  ☰
                </Button>
              )}
              {!isMobile && !collapsed && (
                <Button
                  type="text"
                  onClick={toggleCollapse}
                  style={{ marginRight: '16px' }}
                >
                  ☰
                </Button>
              )}
              {headerContent || <div style={{ fontSize: '14px' }}>Welcome to Crawlful Hub</div>}
            </div>
          </Header>
        )}
        
        {/* 内容区域 */}
        <Content
          style={{
            margin: isMobile ? '16px' : '24px',
            padding: isMobile ? '16px' : '24px',
            background: '#fff',
            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
            borderRadius: '8px',
            minHeight: 280,
          }}
        >
          {children}
        </Content>
        
        {/* 底部 */}
        {showFooter && (
          <Footer
            style={{
              textAlign: 'center',
              background: '#fff',
              borderTop: '1px solid #f0f0f0',
              padding: '16px',
            }}
          >
            {footerContent || 'Crawlful Hub ©2026 Created by AI'}
          </Footer>
        )}
      </Layout>
    </Layout>
  );
};

// 响应式网格系统
export const ResponsiveGridSystem: React.FC<{
  children: React.ReactNode;
  gutter?: number;
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  xxl?: number;
  className?: string;
}> = ({
  children,
  gutter = 16,
  xs = 24,
  sm = 12,
  md = 8,
  lg = 6,
  xl = 4,
  xxl = 3,
  className,
}) => {
  return (
    <Row gutter={gutter} className={className}>
      <Col xs={xs} sm={sm} md={md} lg={lg} xl={xl} xxl={xxl}>
        {children}
      </Col>
    </Row>
  );
};

// 响应式卡片组件
export const ResponsiveCard: React.FC<{
  title?: string;
  children: React.ReactNode;
  extra?: React.ReactNode;
  className?: string;
  padding?: number;
  shadow?: boolean;
}> = ({
  title,
  children,
  extra,
  className,
  padding,
  shadow = true,
}) => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  const defaultPadding = padding || (isMobile ? 16 : 24);
  
  return (
    <div
      className={className}
      style={{
        background: '#fff',
        borderRadius: '8px',
        boxShadow: shadow ? '0 2px 8px rgba(0, 0, 0, 0.1)' : 'none',
        padding: defaultPadding,
        marginBottom: '16px',
      }}
    >
      {title && (
        <div
          style={{
            fontSize: '16px',
            fontWeight: 'bold',
            marginBottom: '16px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          {title}
          {extra}
        </div>
      )}
      {children}
    </div>
  );
};

// 响应式表单组件
export const ResponsiveFormItem: React.FC<{
  label: string;
  children: React.ReactNode;
  required?: boolean;
  className?: string;
}> = ({
  label,
  children,
  required = false,
  className,
}) => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  
  return (
    <div
      className={className}
      style={{
        marginBottom: '16px',
        display: isMobile ? 'block' : 'flex',
        alignItems: 'center',
      }}
    >
      <label
        style={{
          marginBottom: isMobile ? '8px' : 0,
          marginRight: isMobile ? 0 : '16px',
          minWidth: isMobile ? 'auto' : '120px',
          fontWeight: '500',
          fontSize: '14px',
        }}
      >
        {required && <span style={{ color: '#ff4d4f' }}>*</span>} {label}
      </label>
      <div style={{ flex: 1 }}>{children}</div>
    </div>
  );
};

// 响应式表格组件
export const ResponsiveTable: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({
  children,
  className,
}) => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  
  return (
    <div
      className={className}
      style={{
        overflowX: isMobile ? 'auto' : 'visible',
      }}
    >
      {children}
    </div>
  );
};

// 响应式工具函数
export const useResponsive = () => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  const isTablet = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
  const isDesktop = useMediaQuery({ minWidth: 1025 });
  const isLargeDesktop = useMediaQuery({ minWidth: 1440 });
  
  return {
    isMobile,
    isTablet,
    isDesktop,
    isLargeDesktop,
    deviceType: isMobile ? 'mobile' : isTablet ? 'tablet' : isLargeDesktop ? 'large-desktop' : 'desktop',
  };
};

// 响应式断点常量
export const BREAKPOINTS = {
  mobile: 768,
  tablet: 1024,
  desktop: 1440,
  largeDesktop: 1920,
};

export default {
  AdvancedResponsiveLayout,
  ResponsiveGridSystem,
  ResponsiveCard,
  ResponsiveFormItem,
  ResponsiveTable,
  useResponsive,
  BREAKPOINTS,
};
