'use client';

import React, { useCallback } from 'react';
import { Button, Typography } from 'antd';
import { MoreHorizontal } from 'lucide-react';
import { ICON_SIZE_SM } from '@/components/icons';
import type { ListingMobileCardConfig } from './listingMobileCardTypes';
import styles from './ListingMobileCard.module.scss';

const { Text } = Typography;

export type ListingMobileCardProps<T> = {
    record: T;
    config: ListingMobileCardConfig<T>;
    recordKey: React.Key;
};

/**
 * Cartão mobile padrão Waygest para listagens — título, metadados e ações táteis (≥44px).
 */
export function ListingMobileCard<T>({ record, config, recordKey }: ListingMobileCardProps<T>) {
    const {
        getTitle,
        getSubtitle,
        getLeading,
        fields,
        onCardClick,
        onOpenOptions,
        optionsAriaLabel,
        renderTrailingAction,
        testIdPrefix,
    } = config;

    const title = getTitle(record);
    const interactive = Boolean(onCardClick);

    const navigate = useCallback(() => {
        onCardClick?.(record);
    }, [onCardClick, record]);

    const handleKeyDown = useCallback(
        (e: React.KeyboardEvent<HTMLElement>) => {
            if (!interactive) return;
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                navigate();
            }
        },
        [interactive, navigate],
    );

    const handleOpenOptions = useCallback(
        (e: React.MouseEvent) => {
            e.stopPropagation();
            onOpenOptions?.(record);
        },
        [onOpenOptions, record],
    );

    const visibleFields = fields.filter((f) => !f.hidden?.(record));

    return (
        <article
            className={`${styles.card} ${interactive ? styles.cardInteractive : ''}`.trim()}
            data-testid={`${testIdPrefix}-${recordKey}`}
            {...(interactive
                ? {
                      role: 'button' as const,
                      tabIndex: 0,
                      'aria-label': `${title}. Toque para abrir.`,
                      onClick: navigate,
                      onKeyDown: handleKeyDown,
                  }
                : {})}
        >
            <div className={styles.cardHeader}>
                {getLeading?.(record) ?? null}
                <div className={styles.cardTitleBlock}>
                    <Text strong ellipsis={{ tooltip: title }} className={styles.cardTitle}>
                        {title}
                    </Text>
                    {getSubtitle ? (
                        <Text type="secondary" ellipsis className={styles.cardSubtitle}>
                            {getSubtitle(record)}
                        </Text>
                    ) : null}
                </div>
                {onOpenOptions ? (
                    <Button
                        type="text"
                        size="small"
                        icon={<MoreHorizontal size={ICON_SIZE_SM} aria-hidden />}
                        aria-label={optionsAriaLabel?.(record) ?? `Opções: ${title}`}
                        onClick={handleOpenOptions}
                        style={{ minWidth: 44, minHeight: 44, flexShrink: 0 }}
                    />
                ) : renderTrailingAction ? (
                    <div style={{ flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
                        {renderTrailingAction(record)}
                    </div>
                ) : null}
            </div>

            {visibleFields.length > 0 ? (
                <div className={styles.cardMeta}>
                    {visibleFields.map((field) => (
                        <div key={field.label} className={styles.cardRow}>
                            <Text type="secondary" className={styles.cardRowLabel}>
                                {field.label}
                            </Text>
                            <div className={styles.cardRowValue}>{field.render(record)}</div>
                        </div>
                    ))}
                </div>
            ) : null}

            {onOpenOptions && !onCardClick ? (
                <div className={styles.cardFooter}>
                    <Button block type="default" onClick={handleOpenOptions}>
                        Ver opções
                    </Button>
                </div>
            ) : null}
        </article>
    );
}