'use client';

import { Descriptions, Empty, Typography } from 'antd';
import ContentCard from '@/components/layouts/ContentCard';
import { formatCurrency } from '@/lib/utils/export';
import type { PropostaSnapshotResource } from '../propostaSnapshotTypes';

const { Text } = Typography;

export type PropostaSnapshotReadonlyProps = {
    snapshot?: PropostaSnapshotResource | null;
    /** Fallback quando a API ainda não devolve snapshot — congela campos da proposta enviada. */
    fallback?: {
        titulo?: string | null;
        valor_base?: number | null;
        valor_total?: number | null;
        enviada_em?: string | null;
        itens?: { descricao: string; quantidade: number; valor_unitario: number }[];
    } | null;
    loading?: boolean;
};

/**
 * Snapshot comercial imutável pós-envio (ADR-0092) — só leitura.
 */
export function PropostaSnapshotReadonly({
    snapshot,
    fallback,
    loading,
}: PropostaSnapshotReadonlyProps) {
    const payload = snapshot?.payload;
    const titulo = payload?.titulo ?? fallback?.titulo;
    const valorBase = payload?.valor_base ?? fallback?.valor_base;
    const valorTotal = payload?.valor_total ?? fallback?.valor_total;
    const congeladoEm = payload?.congelado_em ?? snapshot?.created_at ?? fallback?.enviada_em;
    const itens = payload?.itens?.length ? payload.itens : (fallback?.itens ?? []);

    if (loading) {
        return (
            <ContentCard title="Snapshot da oferta" data-testid="crm-proposta-snapshot-loading">
                <Text type="secondary">Carregando snapshot…</Text>
            </ContentCard>
        );
    }

    if (!titulo && valorTotal == null && itens.length === 0) {
        return (
            <ContentCard title="Snapshot da oferta" data-testid="crm-proposta-snapshot-empty">
                <Empty
                    description="Nenhum snapshot disponível. O congelamento ocorre ao marcar a proposta como enviada."
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                />
            </ContentCard>
        );
    }

    return (
        <ContentCard
            title="Snapshot da oferta (somente leitura)"
            data-testid="crm-proposta-snapshot-readonly"
        >
            <Text type="secondary" style={{ display: 'block', marginBottom: 12, fontSize: 13 }}>
                Versão congelada no envio — alterações comerciais exigem nova versão da proposta.
            </Text>
            <Descriptions column={{ xs: 1, sm: 2 }} size="small">
                {titulo ? (
                    <Descriptions.Item label="Título">{titulo}</Descriptions.Item>
                ) : null}
                {congeladoEm ? (
                    <Descriptions.Item label="Congelado em">{congeladoEm}</Descriptions.Item>
                ) : null}
                {valorBase != null ? (
                    <Descriptions.Item label="Valor base">
                        {formatCurrency(Number(valorBase))}
                    </Descriptions.Item>
                ) : null}
                {valorTotal != null ? (
                    <Descriptions.Item label="Valor total">
                        {formatCurrency(Number(valorTotal))}
                    </Descriptions.Item>
                ) : null}
            </Descriptions>
            {itens.length > 0 ? (
                <div style={{ marginTop: 12 }} data-testid="crm-proposta-snapshot-itens">
                    <Text strong style={{ display: 'block', marginBottom: 8 }}>
                        Itens
                    </Text>
                    <ul style={{ margin: 0, paddingLeft: 18 }}>
                        {itens.map((item, idx) => (
                            <li key={`${item.descricao}-${idx}`}>
                                {item.descricao} — {item.quantidade} ×{' '}
                                {formatCurrency(Number(item.valor_unitario))}
                            </li>
                        ))}
                    </ul>
                </div>
            ) : null}
        </ContentCard>
    );
}