// FE-OP001: 前端组件化设计与实现
import React from 'react';
import { Button, Card, Input, Table, Form, Select, DatePicker, Modal, message } from 'antd';
import dayjs from 'dayjs';

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

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

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

// 自定义表格组件
export const CustomTable: React.FC<{
  columns: any[];
  dataSource: any[];
  loading?: boolean;
  pagination?: any;
}> = ({ columns, dataSource, loading = false, pagination }) => {
  return (
    <Table columns={columns} dataSource={dataSource} loading={loading} pagination={pagination} />
  );
};

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

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

// 自定义选择器组件
export const CustomSelect: React.FC<{
  options: { label: string; value: string }[];
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
}> = ({ options, value, onChange, placeholder }) => {
  return (
    <Select options={options} value={value} onChange={onChange} placeholder={placeholder} />
  );
};

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

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

// 消息提示组件
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 default {
  CustomButton,
  CustomCard,
  CustomInput,
  CustomTable,
  CustomForm,
  CustomSelect,
  CustomDatePicker,
  CustomModal,
  showMessage,
};
