import { Heart, Share2, MessageCircle, Bookmark } from "lucide-react";
import { Card, CardContent } from "@/Components/ui/card";
import { useDashboardFilters } from "@/context/DashboardFiltersContext";
import { CHART_COLORS } from "@/Components/Dashboard/chartColors";
import { extractInstagramSocialData } from "@/Components/Dashboard/tabs/integrationDataHelpers";
import { fmtNumber, fmtPercent } from "@/Components/Dashboard/GoogleAdsDrilldown/helpers";
import { ProviderIcons } from "@/Components/Dashboard/integrationIcons";

const fmtDec = (v) => new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 1 }).format(v || 0);

// Tipos de interação de conteúdo (cores do Signal). Ordenados por valor (desc).
const TYPES = [
    { key: "content_likes",    label: "Curtidas",    icon: Heart,         color: CHART_COLORS.red },
    { key: "content_shares",   label: "Compart.",    icon: Share2,        color: CHART_COLORS.violet },
    { key: "content_comments", label: "Comentários", icon: MessageCircle, color: CHART_COLORS.blue },
    { key: "content_saves",    label: "Salvos",      icon: Bookmark,      color: CHART_COLORS.teal },
];

/**
 * Composição do engajamento: breakdown das interações dos posts publicados no
 * período (barras por tipo + média/post) e as taxas de salvamento/compartilhamento.
 * Substitui o antigo SocialContentStats. Dados de conteúdo (último snapshot por
 * post), não de conta - ver getInstagramSocialPostsSummary.
 */
export default function SocialEngagementComposition() {
    const { data } = useDashboardFilters();
    if (!data) return null;

    const { kpis } = extractInstagramSocialData(data);
    const posts = kpis.posts_published ?? 0;
    // Denominador das taxas = alcance de CONTA do período (≈ reach único), não a
    // soma de reach por post (que conta o mesmo usuário em vários posts).
    const reach = kpis.reach ?? 0;

    const items = TYPES
        .map((t) => ({ ...t, value: kpis[t.key] ?? 0 }))
        .sort((a, b) => b.value - a.value);
    const total = items.reduce((s, i) => s + i.value, 0);
    const max = Math.max(...items.map((i) => i.value), 1);
    const avg = posts > 0 ? total / posts : 0;

    const saveRate = reach > 0 ? (kpis.content_saves / reach) * 100 : 0;
    const shareRate = reach > 0 ? (kpis.content_shares / reach) * 100 : 0;

    return (
        <Card className="flex h-full flex-col">
            <CardContent className="flex flex-1 flex-col p-4">
                {/* Cabeçalho */}
                <div className="flex items-start justify-between gap-2">
                    <div>
                        <p className="text-sm font-semibold">Composição do engajamento</p>
                        <p className="text-xs text-muted-foreground">
                            {fmtNumber(total)} interações · {fmtNumber(posts)} posts · média {fmtDec(avg)}/post
                        </p>
                    </div>
                    <ProviderIcons providers={["instagram_social"]} />
                </div>

                {/* Barras por tipo */}
                <div className="mt-4 space-y-3">
                    {items.map((it) => {
                        const Icon = it.icon;
                        const pct = it.value > 0 ? Math.max((it.value / max) * 100, 3) : 0;
                        return (
                            <div key={it.key} className="flex items-center gap-2 sm:gap-3">
                                <span className="flex w-24 shrink-0 items-center gap-1.5 text-sm sm:w-28">
                                    <Icon className="h-3.5 w-3.5 shrink-0" style={{ color: it.color }} />
                                    <span className="truncate text-muted-foreground">{it.label}</span>
                                </span>
                                <span className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
                                    <span className="block h-full rounded-full" style={{ width: `${pct}%`, backgroundColor: it.color }} />
                                </span>
                                <span className="w-10 shrink-0 text-right text-sm font-bold tabular-nums">{fmtNumber(it.value)}</span>
                                <span className="w-12 shrink-0 text-right text-xs text-muted-foreground tabular-nums sm:w-14">
                                    {fmtDec(posts > 0 ? it.value / posts : 0)}/post
                                </span>
                            </div>
                        );
                    })}
                </div>

                {/* Taxas */}
                <div className="mt-auto grid grid-cols-2 gap-3 pt-4">
                    <div className="rounded-lg border p-3">
                        <p className="text-xs text-muted-foreground">Taxa de salvamento</p>
                        <p className="mt-0.5 text-lg font-bold tabular-nums" style={{ color: CHART_COLORS.teal }}>{fmtPercent(saveRate)}</p>
                    </div>
                    <div className="rounded-lg border p-3">
                        <p className="text-xs text-muted-foreground">Taxa de compart.</p>
                        <p className="mt-0.5 text-lg font-bold tabular-nums" style={{ color: CHART_COLORS.violet }}>{fmtPercent(shareRate)}</p>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}