import { Calendar, Eye, Pencil, Trash2, User } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import {
    Button,
    Space,
} from 'antd';
import styles from './EntityCard.module.scss';

export interface EntityField {
    icon?: React.ReactNode;
    label?: string;
    value: string | React.ReactNode;
}

export interface EntityAction {
    label: string;
    icon: React.ReactNode;
    onClick: () => void;
    variant?: 'primary' | 'danger' | 'default';
    disabled?: boolean;
}

export interface EntityCardProps {
    title: string;
    subtitle?: string;
    status?: {
        value: string;
        label: string;
        color: string;
        icon?: React.ReactNode;
    };
    fields?: EntityField[];
    actions?: EntityAction[];
    onClick?: () => void;
    className?: string;
    headerClassName?: string;
    bodyClassName?: string;
}

/**
 * Componente genérico para exibir cards de entidades (projetos, pessoas, etc.)
 *
 * @example
 * ```tsx
 * <EntityCard
 *   title="Projeto X"
 *   subtitle="Descrição do projeto"
 *   status={{ value: 'ativo', label: 'Ativo', color: 'success' }}
 *   fields={[
 *     { icon: <Calendar size={ICON_SIZE_MD} aria-hidden />, label: 'Início', value: '01/01/2024' },
 *     { icon: <User size={ICON_SIZE_MD} aria-hidden />, label: 'Responsável', value: 'João Silva' },
 *   ]}
 *   actions={[
 *     { label: 'Ver', icon: <Eye size={ICON_SIZE_MD} aria-hidden />, onClick: () => {}, variant: 'default' },
 *     { label: 'Editar', icon: <Pencil size={ICON_SIZE_MD} aria-hidden />, onClick: () => {}, variant: 'primary' },
 *     { label: 'Excluir', icon: <Trash2 size={ICON_SIZE_MD} aria-hidden />, onClick: () => {}, variant: 'danger' },
 *   ]}
 *   onClick={() => router.push('/projetos/1')}
 * />
 * ```
 */
export function EntityCard({
    title,
    subtitle,
    status,
    fields = [],
    actions = [],
    onClick,
    className = '',
    headerClassName = '',
    bodyClassName = ''}: EntityCardProps) {
    const cardClasses = [styles.entityCard, onClick && styles.clickable, className]
        .filter(Boolean)
        .join(' ');

    return (
        <div className={cardClasses} onClick={onClick}>
            {/* Header */}
            <div className={`${styles.entityCardHeader} ${headerClassName}`}>
                <div className={styles.entityTitle}>
                    <div className={styles.entityName}>
                        <span>{title}</span>
                    </div>
                    {status && (
                        <span
                            className={`${styles.entityStatus} ${styles[`status-${status.value}`]}`}
                            style={{ color: status.color }}
                        >
                            {status.icon && <span style={{ marginRight: 4 }}>{status.icon}</span>}
                            {status.label}
                        </span>
                    )}
                </div>
                {subtitle && <div className={styles.entitySubtitle}>{subtitle}</div>}
            </div>

            {/* Body */}
            {fields.length > 0 && (
                <div className={`${styles.entityCardBody} ${bodyClassName}`}>
                    {fields.map((field, index) => (
                        <div key={index} className={styles.entityField}>
                            {field.icon && <span className={styles.fieldIcon}>{field.icon}</span>}
                            {field.label && (
                                <span className={styles.fieldLabel}>{field.label}: </span>
                            )}
                            <span className={styles.fieldValue}>{field.value}</span>
                        </div>
                    ))}
                </div>
            )}

            {/* Actions */}
            {actions.length > 0 && (
                <div className={styles.entityActions}>
                    <Space>
                        {actions.map((action, index) => (
                            <Button
                                key={index}
                                type={
                                    action.variant === 'primary'
                                        ? 'primary'
                                        : action.variant === 'danger'
                                          ? 'primary'
                                          : 'default'
                                }
                                danger={action.variant === 'danger'}
                                icon={action.icon}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    action.onClick();
                                }}
                                disabled={action.disabled}
                                size="small"
                            >
                                {action.label}
                            </Button>
                        ))}
                    </Space>
                </div>
            )}
        </div>
    );
}

export default EntityCard;