'use client';

import React from 'react';
import { Card, Tag, Typography } from 'antd';
import dayjs from 'dayjs';
import type { LogEntry } from '../types';
import { getLogLevelColor } from '../logsLevelUtils';

export interface CardLogProps {
    item: LogEntry;
    /** Clique em todo o card — abre o modal de opções */
    onOpenOpcoes: (item: LogEntry) => void;
}

export function CardLog({ item, onOpenOpcoes }: CardLogProps) {
    const handleCardClick = () => onOpenOpcoes(item);

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onOpenOpcoes(item);
        }
    };

    const levelColor = getLogLevelColor(item.level);
    const borderColor =
        levelColor === 'red'
            ? '#e74c3c'
            : levelColor === 'volcano'
              ? '#d4380d'
              : levelColor === 'magenta'
                ? '#eb2f96'
                : levelColor === 'orange'
                  ? '#fa8c16'
                  : levelColor === 'blue'
                    ? '#1890ff'
                    : '#d9d9d9';

    const messageText = item.header || item.message || '-';

    return (
        <Card
            hoverable
            className="card-log module-card bordered-left card-log-mob023"
            style={{
                borderLeftWidth: 5,
                borderLeftStyle: 'solid',
                borderLeftColor: item.resolved_at ? '#27ae60' : borderColor,
                marginBottom: 16,
                cursor: 'pointer',
                borderRadius: 12,
                transition: 'transform 0.2s ease, box-shadow 0.2s ease',
                maxWidth: '100%',
                minWidth: 0,
            }}
            styles={{ body: { padding: '20px 24px' } }}
            onClick={handleCardClick}
            tabIndex={0}
            role="button"
            aria-label={`Log ${item.id}, ${item.level}. ${messageText}`}
            onKeyDown={handleKeyDown}
        >
            <div
                style={{
                    display: 'grid',
                    gridTemplateColumns: '3fr 9fr',
                    gap: 24,
                    alignItems: 'flex-start',
                }}
                className="card-log-grid"
            >
                <div className="card-log-meta" style={{ minWidth: 0 }}>
                    <div className="card-log-meta-row">
                        <span className="card-log-id">#{item.id}</span>
                        <Tag color={levelColor} className="card-log-level">
                            {(item.level || '').toUpperCase()}
                        </Tag>
                        {item.resolved_at && (
                            <Tag color="success" className="card-log-resolved">
                                Resolvido
                            </Tag>
                        )}
                    </div>
                    <div className="card-log-info-row">
                        <span className="card-log-label">Data</span>
                        <span className="card-log-value">
                            {item.logged_at ? dayjs(item.logged_at).format('DD/MM/YYYY HH:mm') : '-'}
                        </span>
                    </div>
                    <div className="card-log-info-row">
                        <span className="card-log-label">Ambiente</span>
                        <span className="card-log-value">{item.environment || 'local'}</span>
                    </div>
                    {item.slug && (item.pending_same_slug_count ?? 0) > 0 && (
                        <div className="card-log-info-row">
                            <span className="card-log-label">Mesmo erro</span>
                            <span className="card-log-value card-log-pending-count">
                                {item.pending_same_slug_count} pendente
                                {(item.pending_same_slug_count ?? 0) !== 1 ? 's' : ''}
                            </span>
                        </div>
                    )}
                    {item.projeto?.nome && (
                        <div className="card-log-info-row">
                            <span className="card-log-label">Projeto</span>
                            <span className="card-log-value card-log-value-ellipsis" title={item.projeto.nome}>
                                {item.projeto.nome}
                            </span>
                        </div>
                    )}
                </div>
                <div className="card-log-message-wrap" style={{ minWidth: 0 }}>
                    <Typography.Text className="card-log-message" ellipsis={{ tooltip: messageText }}>
                        {messageText}
                    </Typography.Text>
                </div>
            </div>

            <style jsx>{`
                .card-log:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
                }
                .card-log:focus-visible {
                    outline: 2px solid #1c84c6;
                    outline-offset: 2px;
                }
                .card-log-meta {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }
                .card-log-meta-row {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 8px;
                }
                .card-log-id {
                    font-size: 15px;
                    font-weight: 700;
                    color: #2c3e50;
                }
                .card-log-level {
                    font-size: 11px;
                    font-weight: 600;
                }
                .card-log-resolved {
                    font-size: 11px;
                }
                .card-log-info-row {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                }
                .card-log-label {
                    font-size: 11px;
                    font-weight: 600;
                    color: #95a5a6;
                    text-transform: uppercase;
                    letter-spacing: 0.3px;
                }
                .card-log-value {
                    font-size: 13px;
                    font-weight: 500;
                    color: #2c3e50;
                }
                .card-log-value-ellipsis {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .card-log-pending-count {
                    font-weight: 600;
                    color: #1c84c6;
                }
                .card-log-message-wrap {
                    padding-top: 2px;
                }
                .card-log-message {
                    font-size: 14px !important;
                    line-height: 1.6 !important;
                    color: #2c3e50 !important;
                    font-weight: 500 !important;
                    display: -webkit-box !important;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                @media (max-width: 768px) {
                    .card-log-grid {
                        grid-template-columns: 1fr;
                        gap: 16px;
                    }
                    .card-log-message {
                        -webkit-line-clamp: 2;
                    }
                }
                @media (max-width: 430px) {
                    .card-log-grid {
                        grid-template-columns: 1fr;
                        gap: 12px;
                    }
                    .card-log-meta-row {
                        flex-wrap: wrap;
                    }
                }
            `}</style>
        </Card>
    );
}