// FE-EXP003: 前端组件库优化
import React from 'react';
import { Button, Card, Input, Table, Form, Select, DatePicker, Modal, message, Divider, Badge, Tag, Tooltip, Popconfirm, Switch, Radio, Checkbox, Slider, Rate, Upload, Progress, Alert, Space, Typography } from 'antd';
import dayjs from 'dayjs';
import { UploadOutlined, PlusOutlined, DeleteOutlined, EditOutlined, EyeOutlined, CheckOutlined, CloseOutlined, InfoCircleOutlined, WarningOutlined, ErrorOutlined, SuccessOutlined } from '@ant-design/icons';

const { Text, Paragraph, Title } = Typography;

// 自定义按钮组件
export const CustomButton: React.FC<{
  type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
  size?: 'small' | 'middle' | 'large';
  onClick?: () => void;
  children: React.ReactNode;
  disabled?: boolean;
  loading?: boolean;
  icon?: React.ReactNode;
  className?: string;
}> = ({ type = 'default', size = 'middle', onClick, children, disabled = false, loading = false, icon, className }) => {
  return (
    <Button 
      type={type} 
      size={size} 
      onClick={onClick} 
      disabled={disabled} 
      loading={loading}
      icon={icon}
      className={className}
    >
      {children}
    </Button>
  );
};

// 自定义卡片组件
export const CustomCard: React.FC<{
  title?: string;
  children: React.ReactNode;
  extra?: React.ReactNode;
  className?: string;
  bordered?: boolean;
  hoverable?: boolean;
  loading?: boolean;
}> = ({ title, children, extra, className, bordered = true, hoverable = false, loading = false }) => {
  return (
    <Card 
      title={title} 
      extra={extra} 
      className={className}
      bordered={bordered}
      hoverable={hoverable}
      loading={loading}
    >
      {children}
    </Card>
  );
};

// 自定义输入框组件
export const CustomInput: React.FC<{
  placeholder?: string;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  size?: 'small' | 'middle' | 'large';
  disabled?: boolean;
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
  className?: string;
}> = ({ placeholder, value, onChange, size = 'middle', disabled = false, prefix, suffix, className }) => {
  return (
    <Input 
      placeholder={placeholder} 
      value={value} 
      onChange={onChange} 
      size={size}
      disabled={disabled}
      prefix={prefix}
      suffix={suffix}
      className={className}
    />
  );
};

// 自定义表格组件
export const CustomTable: React.FC<{
  columns: any[];
  dataSource: any[];
  loading?: boolean;
  pagination?: any;
  className?: string;
  rowKey?: string | ((record: any) => string);
  onRow?: (record: any, index: number) => any;
}> = ({ columns, dataSource, loading = false, pagination, className, rowKey = 'id', onRow }) => {
  return (
    <Table 
      columns={columns} 
      dataSource={dataSource} 
      loading={loading} 
      pagination={pagination}
      className={className}
      rowKey={rowKey}
      onRow={onRow}
    />
  );
};

// 自定义表单组件
export const CustomForm: React.FC<{
  children: React.ReactNode;
  onFinish: (values: any) => void;
  initialValues?: any;
  className?: string;
  layout?: 'horizontal' | 'vertical' | 'inline';
}> = ({ children, onFinish, initialValues, className, layout = 'horizontal' }) => {
  const [form] = Form.useForm();

  return (
    <Form 
      form={form} 
      onFinish={onFinish} 
      initialValues={initialValues}
      className={className}
      layout={layout}
    >
      {children}
    </Form>
  );
};

// 自定义选择器组件
export const CustomSelect: React.FC<{
  options: { label: string; value: string }[];
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  size?: 'small' | 'middle' | 'large';
  disabled?: boolean;
  className?: string;
}> = ({ options, value, onChange, placeholder, size = 'middle', disabled = false, className }) => {
  return (
    <Select 
      options={options} 
      value={value} 
      onChange={onChange} 
      placeholder={placeholder}
      size={size}
      disabled={disabled}
      className={className}
    />
  );
};

// 自定义日期选择器组件
export const CustomDatePicker: React.FC<{
  value?: dayjs.Dayjs;
  onChange?: (date: dayjs.Dayjs | null) => void;
  placeholder?: string;
  size?: 'small' | 'middle' | 'large';
  disabled?: boolean;
  className?: string;
}> = ({ value, onChange, placeholder, size = 'middle', disabled = false, className }) => {
  return (
    <DatePicker 
      value={value} 
      onChange={onChange} 
      placeholder={placeholder}
      size={size}
      disabled={disabled}
      className={className}
    />
  );
};

// 自定义模态框组件
export const CustomModal: React.FC<{
  visible: boolean;
  onCancel: () => void;
  onOk: () => void;
  title: string;
  children: React.ReactNode;
  width?: number | string;
  footer?: React.ReactNode;
  className?: string;
  maskClosable?: boolean;
}> = ({ visible, onCancel, onOk, title, children, width = 520, footer, className, maskClosable = true }) => {
  return (
    <Modal 
      visible={visible} 
      onCancel={onCancel} 
      onOk={onOk} 
      title={title}
      width={width}
      footer={footer}
      className={className}
      maskClosable={maskClosable}
    >
      {children}
    </Modal>
  );
};

// 自定义标签组件
export const CustomTag: React.FC<{
  children: React.ReactNode;
  color?: string;
  closable?: boolean;
  onClose?: () => void;
  className?: string;
}> = ({ children, color, closable = false, onClose, className }) => {
  return (
    <Tag 
      color={color} 
      closable={closable} 
      onClose={onClose}
      className={className}
    >
      {children}
    </Tag>
  );
};

// 自定义徽章组件
export const CustomBadge: React.FC<{
  children: React.ReactNode;
  count?: number;
  showZero?: boolean;
  color?: string;
  className?: string;
}> = ({ children, count, showZero = false, color, className }) => {
  return (
    <Badge 
      count={count} 
      showZero={showZero} 
      color={color}
      className={className}
    >
      {children}
    </Badge>
  );
};

// 自定义提示组件
export const CustomTooltip: React.FC<{
  title: React.ReactNode;
  children: React.ReactNode;
  placement?: 'top' | 'bottom' | 'left' | 'right';
  className?: string;
}> = ({ title, children, placement = 'top', className }) => {
  return (
    <Tooltip 
      title={title} 
      placement={placement}
      className={className}
    >
      {children}
    </Tooltip>
  );
};

// 自定义确认组件
export const CustomPopconfirm: React.FC<{
  title: React.ReactNode;
  onConfirm: () => void;
  onCancel?: () => void;
  children: React.ReactNode;
  okText?: string;
  cancelText?: string;
  className?: string;
}> = ({ title, onConfirm, onCancel, children, okText = 'OK', cancelText = 'Cancel', className }) => {
  return (
    <Popconfirm 
      title={title} 
      onConfirm={onConfirm} 
      onCancel={onCancel}
      okText={okText}
      cancelText={cancelText}
      className={className}
    >
      {children}
    </Popconfirm>
  );
};

// 自定义开关组件
export const CustomSwitch: React.FC<{
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  className?: string;
}> = ({ checked, onChange, disabled = false, className }) => {
  return (
    <Switch 
      checked={checked} 
      onChange={onChange} 
      disabled={disabled}
      className={className}
    />
  );
};

// 自定义上传组件
export const CustomUpload: React.FC<{
  action: string;
  onUploadChange: (info: any) => void;
  multiple?: boolean;
  maxCount?: number;
  className?: string;
}> = ({ action, onUploadChange, multiple = false, maxCount = 1, className }) => {
  return (
    <Upload
      action={action}
      onChange={onUploadChange}
      multiple={multiple}
      maxCount={maxCount}
      className={className}
    >
      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
  );
};

// 自定义进度条组件
export const CustomProgress: React.FC<{
  percent: number;
  status?: 'success' | 'exception' | 'normal' | 'active';
  size?: 'small' | 'default';
  className?: string;
}> = ({ percent, status = 'normal', size = 'default', className }) => {
  return (
    <Progress 
      percent={percent} 
      status={status} 
      size={size}
      className={className}
    />
  );
};

// 自定义警告组件
export const CustomAlert: React.FC<{
  message: React.ReactNode;
  description?: React.ReactNode;
  type?: 'success' | 'info' | 'warning' | 'error';
  showIcon?: boolean;
  closable?: boolean;
  className?: string;
}> = ({ message, description, type = 'info', showIcon = true, closable = true, className }) => {
  return (
    <Alert 
      message={message} 
      description={description} 
      type={type}
      showIcon={showIcon}
      closable={closable}
      className={className}
    />
  );
};

// 自定义空间组件
export const CustomSpace: React.FC<{
  children: React.ReactNode;
  size?: 'small' | 'middle' | 'large';
  direction?: 'horizontal' | 'vertical';
  className?: string;
}> = ({ children, size = 'middle', direction = 'horizontal', className }) => {
  return (
    <Space 
      size={size} 
      direction={direction}
      className={className}
    >
      {children}
    </Space>
  );
};

// 自定义分隔线组件
export const CustomDivider: React.FC<{
  orientation?: 'left' | 'center' | 'right';
  children?: React.ReactNode;
  className?: string;
}> = ({ orientation = 'center', children, className }) => {
  return (
    <Divider 
      orientation={orientation}
      className={className}
    >
      {children}
    </Divider>
  );
};

// 自定义文本组件
export const CustomText: React.FC<{
  children: React.ReactNode;
  type?: 'secondary' | 'success' | 'warning' | 'danger';
  strong?: boolean;
  underline?: boolean;
  delete?: boolean;
  code?: boolean;
  className?: string;
}> = ({ children, type, strong = false, underline = false, delete: del = false, code = false, className }) => {
  return (
    <Text 
      type={type} 
      strong={strong} 
      underline={underline}
      delete={del}
      code={code}
      className={className}
    >
      {children}
    </Text>
  );
};

// 消息提示组件
export const showMessage = {
  success: (content: string) => message.success(content),
  error: (content: string) => message.error(content),
  warning: (content: string) => message.warning(content),
  info: (content: string) => message.info(content),
};

// 图标组件
export const Icons = {
  UploadOutlined,
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
  CheckOutlined,
  CloseOutlined,
  InfoCircleOutlined,
  WarningOutlined,
  ErrorOutlined,
  SuccessOutlined,
};

export default {
  CustomButton,
  CustomCard,
  CustomInput,
  CustomTable,
  CustomForm,
  CustomSelect,
  CustomDatePicker,
  CustomModal,
  CustomTag,
  CustomBadge,
  CustomTooltip,
  CustomPopconfirm,
  CustomSwitch,
  CustomUpload,
  CustomProgress,
  CustomAlert,
  CustomSpace,
  CustomDivider,
  CustomText,
  showMessage,
  Icons,
};
