import { format } from "date-fns";
import { ptBR } from "date-fns/locale";
import {
    LineChart, Line,
    XAxis, YAxis, CartesianGrid, Tooltip, Legend,
    ResponsiveContainer,
} from "recharts";

import { useDashboardFilters } from "@/context/DashboardFiltersContext";
import { CHART_COLORS } from "@/Components/Dashboard/chartColors";
import ChartCard from "@/Components/Dashboard/ChartCard";
import IntegrationTimelineChart from "@/Components/Dashboard/IntegrationTimelineChart";
import {
    extractDataForIntegration,
    TIMELINE_CHART_CONFIG,
    META_TIMELINE_METRICS,
    META_TIMELINE_DEFAULT,
    SEARCH_CONSOLE_TIMELINE_METRICS,
    SEARCH_CONSOLE_TIMELINE_DEFAULT,
    INSTAGRAM_SOCIAL_TIMELINE_METRICS,
    INSTAGRAM_SOCIAL_TIMELINE_DEFAULT,
} from "@/Components/Dashboard/tabs/integrationDataHelpers";

const tooltipStyle = {
    backgroundColor: "hsl(var(--card))",
    borderColor: "hsl(var(--border))",
    borderRadius: "6px",
    fontSize: 12,
};
const axisStyle = { fontSize: 11, fill: "hsl(var(--muted-foreground))" };
const tickFormatter = (v) => format(new Date(v + "T12:00:00"), "dd/MM", { locale: ptBR });

/**
 * Renderiza o grafico de evolucao temporal de uma integracao especifica.
 * Codigo: {provider}_block_timeline.
 * Para GA4 nao usamos este bloco (GA4 tem grafico interativo proprio).
 */
export default function BlockIntegrationTimeline({ provider }) {
    const { data } = useDashboardFilters();
    if (!provider || !data) return null;

    const { timelineData, dateKey } = extractDataForIntegration(provider, data);
    const cfg = TIMELINE_CHART_CONFIG[provider];

    if (!cfg || !timelineData?.length) return null;

    // Meta Ads: gráfico com filtro/toggle de linhas (estilo drill-down).
    if (provider === "meta_ads") {
        return (
            <ChartCard title="Métricas ao longo do tempo" providers={[provider]} height="h-auto">
                <IntegrationTimelineChart
                    daily={timelineData}
                    metrics={META_TIMELINE_METRICS}
                    defaultVisible={META_TIMELINE_DEFAULT}
                />
            </ChartCard>
        );
    }

    // Search Console: toggle de linhas + escala log (cliques/impressões/CTR/posição).
    if (provider === "search_console") {
        return (
            <ChartCard title="Performance orgânica ao longo do tempo" providers={[provider]} height="h-auto">
                <IntegrationTimelineChart
                    daily={timelineData}
                    metrics={SEARCH_CONSOLE_TIMELINE_METRICS}
                    defaultVisible={SEARCH_CONSOLE_TIMELINE_DEFAULT}
                    logScale
                />
            </ChartCard>
        );
    }

    // Instagram Social: timeline da conta (snapshot + valores de período) com toggle.
    if (provider === "instagram_social") {
        return (
            <ChartCard title="Performance orgânica ao longo do tempo" providers={[provider]} height="h-auto">
                <IntegrationTimelineChart
                    daily={timelineData}
                    metrics={INSTAGRAM_SOCIAL_TIMELINE_METRICS}
                    defaultVisible={INSTAGRAM_SOCIAL_TIMELINE_DEFAULT}
                    logScale
                />
            </ChartCard>
        );
    }

    const title = [cfg.primaryLabel, cfg.secondaryLabel, cfg.tertiaryLabel].filter(Boolean).join(" + ");

    return (
        <ChartCard title={title} providers={[provider]}>
            <ResponsiveContainer width="100%" height="100%">
                <LineChart data={timelineData} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
                    <XAxis dataKey={dateKey} tick={axisStyle} tickFormatter={tickFormatter} />
                    <YAxis yAxisId="left" tick={axisStyle} />
                    <YAxis yAxisId="right" orientation="right" tick={axisStyle} />
                    <Tooltip contentStyle={tooltipStyle} />
                    <Legend wrapperStyle={{ fontSize: 12 }} />
                    <Line
                        yAxisId="left"
                        type="monotone"
                        dataKey={cfg.secondaryKey}
                        name={cfg.secondaryLabel}
                        stroke={CHART_COLORS.blue}
                        strokeWidth={2}
                        dot={false}
                        connectNulls
                    />
                    <Line
                        yAxisId="right"
                        type="monotone"
                        dataKey={cfg.primaryKey}
                        name={cfg.primaryLabel}
                        stroke={CHART_COLORS.orange}
                        strokeWidth={2}
                        dot={false}
                    />
                    {cfg.tertiaryKey && (
                        <Line
                            yAxisId="right"
                            type="monotone"
                            dataKey={cfg.tertiaryKey}
                            name={cfg.tertiaryLabel}
                            stroke={CHART_COLORS.green}
                            strokeWidth={2}
                            dot={false}
                        />
                    )}
                </LineChart>
            </ResponsiveContainer>
        </ChartCard>
    );
}