import styles from "../../ChatbotSettings.module.css";
import { FiX } from "react-icons/fi";

interface ProductDetailModalProps {
    onClose: () => void;
    product: any;
}

export default function ProductDetailModal({ onClose, product }: ProductDetailModalProps) {
    return (
        <div className={styles.modalOverlay} onClick={onClose}>
            <div className={styles.modalContent} style={{ maxWidth: '600px', borderRadius: '16px' }} onClick={(e) => e.stopPropagation()}>
                <div className={styles.modalHeader}>
                    <h3 className={styles.modalTitle}>Product details</h3>
                    <button className={styles.closeButton} onClick={onClose}>&times;</button>
                </div>
                <div className={styles.modalBody} style={{ padding: '0 20px 20px 20px' }}>
                    <div style={{ display: 'flex', gap: '16px', borderBottom: '1px solid #f9fafb', paddingBottom: '20px', marginBottom: '10px' }}>
                        <div className={styles.detailThumb} style={{ background: '#f3f4f6', width: '64px', height: '64px', minWidth: '64px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            {product.product_image_url && product.product_image_url !== "not_provided" ? (
                                <img src={product.product_image_url} alt="" style={{ width: '100%', height: '100%', borderRadius: '8px', objectFit: 'cover' }} />
                            ) : (
                                <span style={{ fontSize: '10px', color: '#9ca3af' }}>No img</span>
                            )}
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <h3 style={{ fontSize: '16px', fontWeight: 700, margin: 0 }}>{product.product_name}</h3>
                            <p style={{ fontSize: '13px', color: '#6b7280', margin: '4px 0 0', lineHeight: 1.4 }}>
                                {product.description || "The product discovery assistant helps customers find products and answers questions about variant, availability and more."}
                            </p>
                        </div>
                    </div>

                    <div className={styles.productDetailGrid} style={{ display: 'flex', flexDirection: 'column' }}>
                        {[
                            { label: "Product ID", value: product.id, link: true },
                            { label: "Status", value: (product.status || 'active').toUpperCase(), badge: true },
                            { label: "URL", value: product.product_url || "--", link: true, breakWord: true },
                            { label: "Collections", value: product.collections?.join(", ") || "--" },
                            { label: "Description", value: product.description || "The product discovery assistant helps customers find products and answers questions about variant, availability and more." },
                            { label: "Tags", value: product.tags, tags: true },
                            { label: "Options", value: product.options || "--" },
                            { label: "Prices", value: product.price || "--" },
                            { label: "Vendor", value: product.vendor || "--" },
                            { label: "SKU", value: product.sku || "--" },
                            { label: "Total FAQs", value: product.faq_count || 0 }
                        ].map((row, idx) => (
                            <div key={idx} className={styles.detailRow} style={{ padding: '12px 0', borderBottom: idx === 10 ? 'none' : '1px solid #f9fafb', display: 'grid', gridTemplateColumns: '120px 1fr' }}>
                                <span style={{ color: '#6b7280', fontWeight: 500 }}>{row.label}</span>
                                {row.tags ? (
                                    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                                        {row.value?.map((t: string, ti: number) => (
                                            <span key={ti} className={styles.badgeGray} style={{ background: '#f3f4f6', padding: '4px 10px', borderRadius: '8px', fontSize: '12px' }}>{t}</span> 
                                        )) || "--"}
                                    </div>
                                ) : (
                                    <span style={{ 
                                        fontWeight: row.badge ? 500 : 400,
                                        color: row.badge ? (row.value === 'ACTIVE' ? '#10b981' : '#6b7280') : (row.link ? '#7c3aed' : '#374151'),
                                        wordBreak: row.breakWord ? 'break-all' : 'normal'
                                    }}>
                                        {row.value}
                                    </span>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}