// FE-OP004: 前端响应式布局
import React from 'react';
import { Layout, Row, Col, Menu, ConfigProvider } from 'antd';
import { useMediaQuery } from 'react-responsive';

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

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

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

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

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
        },
      }}
    >
      <Layout style={{ minHeight: '100vh' }}>
        {!isMobile && (
          <Sider
            collapsible
            collapsed={collapsed}
            onCollapse={setCollapsed}
            style={{
              background: '#fff',
            }}
          >
            <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>
        )}
        <Layout style={{ flex: 1 }}>
          <Header
            style={{
              background: '#fff',
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              padding: '0 24px',
            }}
          >
            {isMobile && (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <button
                  onClick={toggleCollapse}
                  style={{
                    background: 'none',
                    border: 'none',
                    fontSize: '18px',
                    cursor: 'pointer',
                  }}
                >
                  ☰
                </button>
                <div style={{ marginLeft: '16px', fontSize: '16px', fontWeight: 'bold' }}>
                  Crawlful Hub
                </div>
              </div>
            )}
            {headerContent || (
              <div style={{ fontSize: '14px' }}>Welcome to Crawlful Hub</div>
            )}
          </Header>
          <Content
            style={{
              margin: '24px',
              padding: '24px',
              background: '#fff',
              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
              borderRadius: '4px',
              minHeight: 280,
            }}
          >
            {children}
          </Content>
          <Footer
            style={{
              textAlign: 'center',
              background: '#fff',
              borderTop: '1px solid #f0f0f0',
            }}
          >
            {footerContent || 'Crawlful Hub ©2026 Created by AI'}
          </Footer>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

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

// 响应式卡片组件
export const ResponsiveCard: React.FC<{
  title?: string;
  children: React.ReactNode;
  extra?: React.ReactNode;
  className?: string;
}> = ({ title, children, extra, className }) => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  
  return (
    <div
      className={className}
      style={{
        background: '#fff',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        padding: isMobile ? '16px' : '24px',
        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 ResponsiveNavbar: React.FC<{
  brand: React.ReactNode;
  items: { label: string; href: string; active?: boolean }[];
  onItemClick: (href: string) => void;
}> = ({ brand, items, onItemClick }) => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);

  return (
    <nav
      style={{
        background: '#fff',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        padding: '0 24px',
      }}
    >
      <div
        style={{
          maxWidth: '1200px',
          margin: '0 auto',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          height: '64px',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center' }}>{brand}</div>
        
        {!isMobile ? (
          <div style={{ display: 'flex', gap: '24px' }}>
            {items.map((item, index) => (
              <a
                key={index}
                href={item.href}
                onClick={(e) => {
                  e.preventDefault();
                  onItemClick(item.href);
                }}
                style={{
                  color: item.active ? '#1890ff' : '#333',
                  textDecoration: 'none',
                  fontSize: '14px',
                  fontWeight: item.active ? 'bold' : 'normal',
                }}
              >
                {item.label}
              </a>
            ))}
          </div>
        ) : (
          <div>
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              style={{
                background: 'none',
                border: 'none',
                fontSize: '18px',
                cursor: 'pointer',
              }}
            >
              ☰
            </button>
            {mobileMenuOpen && (
              <div
                style={{
                  position: 'absolute',
                  top: '64px',
                  right: '0',
                  left: '0',
                  background: '#fff',
                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                  padding: '16px',
                  zIndex: 1000,
                }}
              >
                {items.map((item, index) => (
                  <a
                    key={index}
                    href={item.href}
                    onClick={(e) => {
                      e.preventDefault();
                      onItemClick(item.href);
                      setMobileMenuOpen(false);
                    }}
                    style={{
                      display: 'block',
                      padding: '8px 0',
                      color: item.active ? '#1890ff' : '#333',
                      textDecoration: 'none',
                      fontSize: '14px',
                      fontWeight: item.active ? 'bold' : 'normal',
                    }}
                  >
                    {item.label}
                  </a>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </nav>
  );
};

// 响应式工具函数
export const useResponsive = () => {
  const isMobile = useMediaQuery({ maxWidth: 768 });
  const isTablet = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
  const isDesktop = useMediaQuery({ minWidth: 1025 });
  
  return {
    isMobile,
    isTablet,
    isDesktop,
  };
};

export default {
  ResponsiveLayout,
  ResponsiveGrid,
  ResponsiveCard,
  ResponsiveNavbar,
  useResponsive,
};
