import React, { useState } from 'react';
import { Card, Typography, Tag, Button, Modal, Row, Col, Space } from 'antd';
import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { Text, Title } = Typography;

const CustomSparepartCard = ({
    sparepart,
    isSelected = false,
    isReadOnly = false,
    showPreview = true,
    showDelete = false,
    onPreview,
    onDelete,
    onCardClick,
    loading = false,
    size = 'small',
    style = {},
}) => {
    const [previewModalVisible, setPreviewModalVisible] = useState(false);

    const getImageSrc = () => {
        if (sparepart.sparepart_foto) {
            if (sparepart.sparepart_foto.startsWith('http')) {
                return sparepart.sparepart_foto;
            } else {
                const fileName = sparepart.sparepart_foto.split('/').pop();
                if (fileName === 'defaultSparepartImg.jpg') {
                    return `/assets/defaultSparepartImg.jpg`;
                } else {
                    const token = localStorage.getItem('token');
                    const baseURL = import.meta.env.VITE_API_SERVER || '';
                    return `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
                }
            }
        }
        return 'https://via.placeholder.com/150';
    };

    const handlePreview = () => {
        if (onPreview) {
            onPreview(sparepart);
        } else {
            setPreviewModalVisible(true);
        }
    };

    const handleCardClick = () => {
        if (!isReadOnly && onCardClick) {
            onCardClick(sparepart);
        }
    };

    const getCardActions = () => {
        const actions = [];

        if (showPreview) {
            actions.push(
                <Button
                    key="preview"
                    type="text"
                    icon={<EyeOutlined />}
                    title="Lihat Detail"
                    style={{ color: '#1890ff' }}
                    onClick={(e) => {
                        e.stopPropagation();
                        handlePreview();
                    }}
                />
            );
        }

        if (showDelete && !isReadOnly) {
            actions.push(
                <Button
                    key="delete"
                    type="text"
                    icon={<DeleteOutlined />}
                    title="Hapus"
                    style={{ color: '#ff4d4f' }}
                    onClick={(e) => {
                        e.stopPropagation();
                        onDelete?.(sparepart);
                    }}
                />
            );
        }

        return actions;
    };

    const getCardStyle = () => {
        const baseStyle = {
            borderRadius: '12px',
            overflow: 'hidden',
            border: isSelected ? '2px solid #1890ff' : '1px solid #E0E0E0',
            cursor: isReadOnly ? 'default' : 'pointer',
            position: 'relative',
            boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
            transition: 'all 0.3s ease'
        };

        switch (size) {
            case 'small':
                return {
                    ...baseStyle,
                    height: '180px',
                    minHeight: '180px'
                };
            case 'large':
                return {
                    ...baseStyle,
                    height: '280px',
                    minHeight: '280px'
                };
            default:
                return {
                    ...baseStyle,
                    height: '220px',
                    minHeight: '220px'
                };
        }
    };

    return (
        <>
            <Card
                hoverable={!!onCardClick && !isReadOnly}
                style={getCardStyle()}
                styles={{
                    body: {
                        padding: 0,
                        height: 'calc(100% - 48px)',
                        display: 'flex',
                        flexDirection: 'column'
                    }
                }}
                actions={getCardActions()}
                onClick={handleCardClick}
            >
                <div style={{ display: 'flex', height: '100%' }}>
                    {/* Image Section */}
                    <div style={{
                        width: size === 'small' ? '90px' : '110px',
                        flexShrink: 0,
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: size === 'small' ? '12px' : '16px',
                        backgroundColor: '#fafafa',
                        borderRight: '1px solid #f0f0f0',
                        position: 'relative'
                    }}>
                        {sparepart.sparepart_item_type && (
                            <Tag
                                color="blue"
                                style={{
                                    marginBottom: '8px',
                                    fontSize: '10px',
                                    fontWeight: 500
                                }}
                            >
                                {sparepart.sparepart_item_type}
                            </Tag>
                        )}
                        <div
                            style={{
                                width: size === 'small' ? '65px' : '75px',
                                height: size === 'small' ? '65px' : '75px',
                                backgroundColor: '#f0f0f0',
                                borderRadius: '8px',
                                overflow: 'hidden',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                border: '1px solid #e8e8e8'
                            }}
                        >
                            <img
                                src={getImageSrc()}
                                alt={sparepart.sparepart_name || 'Sparepart'}
                                style={{
                                    width: '100%',
                                    height: '100%',
                                    objectFit: 'cover'
                                }}
                                onError={(e) => {
                                    e.target.src = 'https://via.placeholder.com/75';
                                }}
                            />
                        </div>

                        {/* Selection Indicator */}
                        {isSelected && (
                            <div
                                style={{
                                    position: 'absolute',
                                    top: '8px',
                                    right: '8px',
                                    backgroundColor: '#52c41a',
                                    borderRadius: '50%',
                                    width: '18px',
                                    height: '18px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
                                    zIndex: 2
                                }}
                            >
                                <CheckOutlined style={{ color: 'white', fontSize: '10px' }} />
                            </div>
                        )}
                    </div>

                    {/* Content Section */}
                    <div style={{
                        flex: 1,
                        padding: size === 'small' ? '12px' : '16px',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'space-between',
                        overflow: 'hidden'
                    }}>
                        <div style={{ flex: 1, overflow: 'hidden' }}>
                            <Title
                                level={size === 'small' ? 5 : 4}
                                style={{
                                    margin: `0 0 ${size === 'small' ? '6px' : '8px'} 0`,
                                    fontSize: size === 'small' ? '12px' : '14px',
                                    fontWeight: 600,
                                    lineHeight: '1.4',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    display: '-webkit-box',
                                    WebkitLineClamp: size === 'small' ? 2 : 3,
                                    WebkitBoxOrient: 'vertical'
                                }}
                            >
                                {sparepart.sparepart_name || sparepart.name || 'Unnamed'}
                            </Title>

                            {/* Stock and Quantity Information */}
                            <div style={{ marginBottom: size === 'small' ? '6px' : '8px' }}>
                                {/* Stock Status Tag */}
                                <div style={{ marginBottom: '4px' }}>
                                    <Tag
                                        color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
                                        style={{
                                            fontSize: size === 'small' ? '9px' : '10px',
                                            padding: '0 4px',
                                            margin: 0,
                                            height: 'auto'
                                        }}
                                    >
                                        {sparepart.sparepart_stok || 'Not Available'}
                                    </Tag>
                                </div>

                                {/* Quantity */}
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <Text
                                        style={{
                                            fontSize: size === 'small' ? '10px' : '11px',
                                            fontWeight: 500,
                                            color: '#262626',
                                            marginRight: '4px'
                                        }}
                                    >
                                        qty:
                                    </Text>
                                    <Text
                                        style={{
                                            fontSize: size === 'small' ? '10px' : '11px',
                                            color: sparepart.sparepart_qty > 0 ? '#52c41a' : '#ff4d4f',
                                            fontWeight: 600
                                        }}
                                    >
                                        {sparepart.sparepart_qty || 0}
                                        {sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ''}
                                    </Text>
                                </div>
                            </div>

                            <div style={{ marginBottom: size === 'small' ? '4px' : '6px' }}>
                                <Text
                                    code
                                    style={{
                                        fontSize: size === 'small' ? '10px' : '11px',
                                        backgroundColor: '#f5f5f5',
                                        padding: '2px 6px',
                                        borderRadius: '3px'
                                    }}
                                >
                                    {sparepart.sparepart_code || 'No code'}
                                </Text>
                            </div>

                            {(sparepart.sparepart_merk || sparepart.sparepart_model) && (
                                <div style={{
                                    fontSize: size === 'small' ? '9px' : '10px',
                                    color: '#666',
                                    lineHeight: '1.4',
                                    marginBottom: '4px'
                                }}>
                                    {sparepart.sparepart_merk && (
                                        <div>Brand: {sparepart.sparepart_merk}</div>
                                    )}
                                    {sparepart.sparepart_model && (
                                        <div>Model: {sparepart.sparepart_model}</div>
                                    )}
                                </div>
                            )}
                        </div>

                        <Text
                            type="secondary"
                            style={{
                                fontSize: size === 'small' ? '9px' : '10px',
                                marginTop: 'auto',
                                paddingTop: '4px',
                                borderTop: '1px solid #f0f0f0'
                            }}
                        >
                            {sparepart.updated_at && dayjs(sparepart.updated_at).format('DD MMM YYYY')}
                        </Text>
                    </div>
                </div>
            </Card>

            {/* Preview Modal */}
            <Modal
                title="Sparepart Details"
                open={previewModalVisible}
                onCancel={() => setPreviewModalVisible(false)}
                footer={[
                    <Button key="close" onClick={() => setPreviewModalVisible(false)}>
                        Close
                    </Button>
                ]}
                width={800}
                centered
                styles={{ body: { padding: '24px' } }}
            >
                <Row gutter={[24, 24]}>
                    <Col span={10}>
                        <div style={{ textAlign: 'center' }}>
                            <div
                                style={{
                                    backgroundColor: '#f0f0f0',
                                    width: '220px',
                                    height: '220px',
                                    margin: '0 auto 16px',
                                    position: 'relative',
                                    borderRadius: '12px',
                                    overflow: 'hidden',
                                    border: '1px solid #E0E0E0',
                                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
                                }}
                            >
                                <img
                                    src={getImageSrc()}
                                    alt={sparepart.sparepart_name || 'Sparepart'}
                                    style={{
                                        width: '100%',
                                        height: '100%',
                                        objectFit: 'cover'
                                    }}
                                    onError={(e) => {
                                        e.target.src = 'https://via.placeholder.com/220x220/d9d9d9/666666?text=No+Image';
                                    }}
                                />
                            </div>

                            {/* Item Type Tag */}
                            {sparepart.sparepart_item_type && (
                                <div style={{ marginBottom: '12px' }}>
                                    <Tag color="blue" style={{ fontSize: '14px', padding: '4px 12px' }}>
                                        {sparepart.sparepart_item_type}
                                    </Tag>
                                </div>
                            )}

                            {/* Stock Status and Quantity */}
                            <div style={{
                                textAlign: 'left',
                                background: '#f8f9fa',
                                padding: '12px',
                                borderRadius: '8px',
                                marginTop: '25px'
                            }}>
                                <div style={{ marginBottom: '8px' }}>
                                    <Text strong style={{ fontSize: '14px', color: '#262626' }}>Stock Status:</Text>
                                    <Tag
                                        color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
                                        style={{ marginLeft: '8px', fontSize: '12px' }}
                                    >
                                        {sparepart.sparepart_stok || 'Not Available'}
                                    </Tag>
                                </div>
                                <div>
                                    <Text strong style={{ fontSize: '14px', color: '#262626' }}>Quantity:</Text>
                                    <Text style={{ fontSize: '14px', marginLeft: '8px', fontWeight: 600 }}>
                                        {sparepart.sparepart_qty || 0} {sparepart.sparepart_unit || ''}
                                    </Text>
                                </div>
                            </div>
                        </div>
                    </Col>

                    <Col span={14}>
                        <div>
                            {/* Sparepart Name */}
                            <Title level={3} style={{ marginBottom: '20px', color: '#262626' }}>
                                {sparepart.sparepart_name || 'Unnamed'}
                            </Title>

                            {/* Basic Information */}
                            <div style={{ marginBottom: '24px' }}>
                                <Row gutter={[16, 12]}>
                                    <Col span={24}>
                                        <div style={{
                                            padding: '12px',
                                            backgroundColor: '#fafafa',
                                            borderRadius: '8px',
                                            border: '1px solid #f0f0f0'
                                        }}>
                                            <Row gutter={16}>
                                                <Col span={8}>
                                                    <div>
                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Code</Text>
                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
                                                            {sparepart.sparepart_code || 'N/A'}
                                                        </div>
                                                    </div>
                                                </Col>
                                                <Col span={8}>
                                                    <div>
                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Brand</Text>
                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
                                                            {sparepart.sparepart_merk || '-'}
                                                        </div>
                                                    </div>
                                                </Col>
                                                <Col span={8}>
                                                    <div>
                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Unit</Text>
                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
                                                            {sparepart.sparepart_unit || '-'}
                                                        </div>
                                                    </div>
                                                </Col>
                                            </Row>
                                        </div>
                                    </Col>

                                    {sparepart.sparepart_model && (
                                        <Col span={24}>
                                            <div>
                                                <Text type="secondary" style={{ fontSize: '12px' }}>Model</Text>
                                                <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
                                                    {sparepart.sparepart_model}
                                                </div>
                                            </div>
                                        </Col>
                                    )}

                                    {sparepart.sparepart_description && (
                                        <Col span={24}>
                                            <div>
                                                <Text type="secondary" style={{ fontSize: '12px' }}>Description</Text>
                                                <div style={{ fontSize: '15px', marginTop: '2px', lineHeight: '1.5' }}>
                                                    {sparepart.sparepart_description}
                                                </div>
                                            </div>
                                        </Col>
                                    )}
                                </Row>
                            </div>

                            {/* Timeline Information */}
                            {sparepart.created_at && (
                                <div>
                                    <Row gutter={16}>
                                        <Col span={12}>
                                            <div>
                                                <Text type="secondary" style={{ fontSize: '12px' }}>Created</Text>
                                                <div style={{ fontSize: '13px', marginTop: '2px' }}>
                                                    {dayjs(sparepart.created_at).format('DD MMM YYYY, HH:mm')}
                                                </div>
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div>
                                                <Text type="secondary" style={{ fontSize: '12px' }}>Last Updated</Text>
                                                <div style={{ fontSize: '13px', marginTop: '2px' }}>
                                                    {dayjs(sparepart.updated_at).format('DD MMM YYYY, HH:mm')}
                                                </div>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            )}
                        </div>
                    </Col>
                </Row>
            </Modal>
        </>
    );
};

export default CustomSparepartCard;