import { cx } from '@/utils/cx';
import { formatCurrency, formatCompact } from '@/lib/format';
import { AdStatusBadge } from '@/components/shared/status-badge';
import type { Ad, AdFormat } from '@/types/entities';

interface AdCardProps {
    ad: Ad;
}

const formatPreviewStyles: Record<AdFormat, { bg: string; icon: string }> = {
    IMAGE: { bg: 'bg-brand-solid', icon: 'IMG' },
    VIDEO: { bg: 'bg-fg-brand-secondary', icon: 'VID' },
    CAROUSEL: { bg: 'bg-error-solid', icon: 'CAR' },
    TEXT: { bg: 'bg-fg-tertiary', icon: 'TXT' },
    LEAD_FORM: { bg: 'bg-success-solid', icon: 'FORM' },
};

const formatBadgeLabel = (format: AdFormat): string =>
    format.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());

export const AdCard = ({ ad }: AdCardProps) => {
    const format = ad.adFormat ?? 'IMAGE';
    const preview = formatPreviewStyles[format] ?? formatPreviewStyles.IMAGE;
    const currencyCode = ad.spend?.currencyCode ?? 'INR';

    const metrics = [
        { label: 'Impr.', value: formatCompact(ad.impressions ?? 0) },
        { label: 'Clicks', value: formatCompact(ad.clicks ?? 0) },
        { label: 'Leads', value: String(ad.conversions ?? 0) },
        { label: 'Spend', value: ad.spend ? formatCurrency(ad.spend.amountMicros, currencyCode) : '--' },
    ];

    return (
        <div className="flex items-center gap-4 rounded-xl border border-secondary bg-primary p-4 transition hover:shadow-sm">
            {/* Preview thumbnail */}
            <div
                className={cx(
                    'flex h-[72px] w-[72px] shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white',
                    preview.bg,
                )}
            >
                {preview.icon}
            </div>

            {/* Ad info */}
            <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                    <h4 className="truncate text-sm font-bold text-primary">
                        {ad.adName ?? 'Untitled Ad'}
                    </h4>
                    <span className="rounded-md bg-secondary px-1.5 py-0.5 text-xs text-tertiary">
                        {formatBadgeLabel(format)}
                    </span>
                </div>
                <p className="mt-0.5 text-xs text-quaternary">{ad.externalAdId ?? ad.id.slice(0, 12)}</p>
                {ad.headline && (
                    <p className="mt-1 truncate text-xs text-tertiary">{ad.headline}</p>
                )}
            </div>

            {/* Inline metrics */}
            <div className="hidden shrink-0 items-center gap-4 md:flex">
                {metrics.map((metric) => (
                    <div key={metric.label} className="text-center">
                        <p className="text-sm font-bold text-primary">{metric.value}</p>
                        <p className="text-xs text-quaternary">{metric.label}</p>
                    </div>
                ))}
            </div>

            {/* Status badge */}
            {ad.adStatus && (
                <div className="hidden shrink-0 sm:block">
                    <AdStatusBadge status={ad.adStatus} />
                </div>
            )}
        </div>
    );
};
