import React, { useState, useMemo } from 'react'
import { Card, Row, Col, Button, Input, InputNumber, Table, Modal } from 'antd'
import { FileTextOutlined, SendOutlined } from '@ant-design/icons'

export interface SmsControlCardProps {
    operationEnabled: boolean
    smsLoading: boolean
    smsList: any[]
    smsReadLimit?: number
    onSmsReadLimitChange?: (limit: number) => void
    onReadList: () => void
    onSend: (phone: string, content: string) => void
}

export const SmsControlCard: React.FC<SmsControlCardProps> = ({
    operationEnabled,
    smsLoading,
    smsList,
    smsReadLimit = 100,
    onSmsReadLimitChange,
    onReadList,
    onSend
}) => {
    const [phone, setPhone] = useState('')
    const [content, setContent] = useState('')
    const [previewVisible, setPreviewVisible] = useState(false)
    const [previewText, setPreviewText] = useState('')

    const columns = useMemo(
        () => [
            { title: '号码', dataIndex: 'address', key: 'address', width: 160, render: (v: any) => v ?? '-' },
            { 
                title: '内容', 
                dataIndex: 'body', 
                key: 'body', 
                ellipsis: true,
                render: (v: any) => (
                    <div
                        style={{
                            maxWidth: '100%',
                            display: '-webkit-box',
                            WebkitBoxOrient: 'vertical' as any,
                            WebkitLineClamp: 2,
                            overflow: 'hidden',
                            whiteSpace: 'normal',
                            cursor: v ? 'pointer' : 'default',
                            color: v ? '#1677ff' : undefined
                        }}
                        onClick={() => {
                            if (!v) return
                            setPreviewText(String(v))
                            setPreviewVisible(true)
                        }}
                        title={v || ''}
                    >
                        {v ?? '-'}
                    </div>
                ) 
            },
            { title: '时间', dataIndex: 'date', key: 'date', width: 200, render: (v: any) => v ? new Date(v).toLocaleString() : '-' },
        ],
        []
    )

    const handleSendClick = () => {
        if (!phone.trim() || !content.trim()) return
        onSend(phone.trim(), content)
    }

    return (
        <Card>
            {/* 🆕 读取条数设置 */}
            <Row gutter={[8, 8]} style={{ marginBottom: 8 }}>
                <Col span={8}>
                    <span style={{ lineHeight: '32px', marginRight: 8 }}>读取条数：</span>
                    <InputNumber
                        min={1}
                        max={1000}
                        value={smsReadLimit}
                        onChange={(value) => {
                            if (value !== null && value > 0) {
                                onSmsReadLimitChange?.(value)
                            }
                        }}
                        disabled={!operationEnabled}
                        style={{ width: 120 }}
                        placeholder="条数"
                    />
                </Col>
            </Row>

            <Row gutter={[8, 8]} style={{ marginTop: 8 }}>
                <Col span={6}>
                    <Input
                        placeholder="手机号"
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                        allowClear
                        disabled={!operationEnabled}
                    />
                </Col>
                <Col span={10}>
                    <Input.TextArea
                        placeholder="短信内容"
                        value={content}
                        onChange={(e) => setContent(e.target.value)}
                        autoSize={{ minRows: 1, maxRows: 3 }}
                        disabled={!operationEnabled}
                    />
                </Col>
                <Col span={4}>
                    <Button
                        block
                        type="primary"
                        icon={<SendOutlined />}
                        onClick={handleSendClick}
                        disabled={!operationEnabled || !phone.trim() || !content.trim()}
                        style={{ border: 'none' }}
                    >
                        发送
                    </Button>
                </Col>
                 <Col span={4}>
                    <Button
                        block
                        icon={<FileTextOutlined />}
                        onClick={onReadList}
                        disabled={!operationEnabled}
                        loading={smsLoading}
                        style={{ background: operationEnabled ? 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)' : undefined, borderColor: operationEnabled ? '#1890ff' : undefined, color: operationEnabled ? 'white' : undefined }}
                    >
                        {smsLoading ? '读取中...' : '读取短信'}
                    </Button>
                </Col>
            </Row>

            <div style={{ marginTop: 8 }}>
                <Table
                    size="small"
                    columns={columns as any}
                    dataSource={smsList || []}
                    rowKey={(record: any) => String(record.id ?? record._id ?? record.date ?? Math.random())}
                    pagination={{ pageSize: 10, showSizeChanger: false }}
                    loading={smsLoading}
                />
            </div>

            <Modal
                title="短信内容"
                open={previewVisible}
                onCancel={() => setPreviewVisible(false)}
                footer={null}
                width={600}
            >
                <Input.TextArea
                    value={previewText}
                    readOnly
                    autoSize={{ minRows: 6, maxRows: 12 }}
                    style={{ fontFamily: 'monospace' }}
                />
            </Modal>
        </Card>
    )
}

export default SmsControlCard



