import { RefreshCw } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import { Skeleton } from "@/Components/ui/skeleton";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/Components/ui/tabs";
import { ProviderIcons } from "@/Components/Dashboard/integrationIcons";
import { useDrilldownApi } from "../Drilldown/useDrilldownApi";
import AdsTable from "./AdsTable";
import KeywordsTable from "./KeywordsTable";
import DailySection from "./DailySection";
import DistributionBar from "../Drilldown/DistributionBar";
import ConversionFunnel from "./ConversionFunnel";
import {
    fmtNumber,
    fmtCurrency,
    fmtPercent,
    statusBadge,
    campaignTypeLabel,
} from "./helpers";

function KpiItem({ label, value }) {
    return (
        <div className="text-center sm:text-left min-w-0">
            <p className="text-[10px] sm:text-[11px] text-muted-foreground uppercase tracking-wide truncate">{label}</p>
            <p className="text-sm sm:text-base font-bold leading-tight tabular-nums truncate">{value}</p>
        </div>
    );
}

function SummaryKpis({ summary }) {
    if (!summary) return null;
    const sb = statusBadge(summary.campaign_status);
    return (
        <Card className="border-l-4 border-l-amber-500">
            <CardHeader className="pb-2 pt-4 px-5">
                <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <CardTitle className="text-lg">{summary.campaign_name}</CardTitle>
                        <div className="flex items-center gap-2 mt-1">
                            <Badge variant="secondary">{campaignTypeLabel(summary.campaign_type)}</Badge>
                            <Badge variant={sb.variant}>{sb.label}</Badge>
                        </div>
                    </div>
                    <div className="flex items-center gap-3">
                        <div className="text-right text-sm text-muted-foreground">
                            {summary.daily_budget != null
                                ? <>Orcamento: <span className="font-medium text-foreground">{fmtCurrency(summary.daily_budget)}/dia</span></>
                                : summary.is_shared_budget
                                  ? "Orcamento compartilhado"
                                  : null}
                        </div>
                        <ProviderIcons providers={["google_ads"]} />
                    </div>
                </div>
            </CardHeader>
            <CardContent className="px-5 pb-4">
                <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-8">
                    <KpiItem label="Impressoes" value={fmtNumber(summary.impressions)} />
                    <KpiItem label="CTR" value={fmtPercent(summary.ctr)} />
                    <KpiItem label="Cliques" value={fmtNumber(summary.clicks)} />
                    <KpiItem label="Tx. Conversao" value={fmtPercent(summary.conversion_rate)} />
                    <KpiItem label="Conversoes" value={fmtNumber(summary.conversions)} />
                    <KpiItem label="CPC Medio" value={fmtCurrency(summary.cpc)} />
                    <KpiItem label="CPL" value={fmtCurrency(summary.cpl)} />
                    <KpiItem label="Investimento" value={fmtCurrency(summary.cost)} />
                </div>
            </CardContent>
        </Card>
    );
}

export default function CampaignDetail({ projectId, campaign, startDate, endDate, showAds = true, showKeywords = true }) {
    const url = projectId && campaign
        ? route("google-ads.campaigns.detail", { project: projectId, campaignId: campaign.campaign_id })
        : null;

    const params = { start_date: startDate, end_date: endDate };
    const { data, loading, error, refetch } = useDrilldownApi(url, params);

    const summary = data?.summary ?? null;
    const daily = data?.daily ?? [];
    const children = data?.children ?? { ads_count: 0, keywords_count: 0, top_ads: [] };

    const hasData = !!summary;

    return (
        <div className={`space-y-4 transition-opacity duration-200 ${loading && !hasData ? "opacity-100" : loading ? "opacity-60 pointer-events-none" : "opacity-100"}`}>
            {error && (
                <div className="rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive flex items-center justify-between gap-2">
                    <span>{error}</span>
                    <Button variant="outline" size="sm" className="shrink-0" onClick={refetch}>
                        <RefreshCw className="h-3.5 w-3.5 mr-1" />
                        Tentar novamente
                    </Button>
                </div>
            )}

            {!hasData && loading ? (
                <div className="space-y-4">
                    <Skeleton className="h-[140px] w-full rounded-lg" />
                    <Skeleton className="h-[300px] w-full rounded-lg" />
                </div>
            ) : (
                <>
                    <SummaryKpis summary={summary} />

                    <Tabs defaultValue="daily">
                        <TabsList>
                            <TabsTrigger value="daily">Performance</TabsTrigger>
                            {showAds && (
                                <TabsTrigger value="ads">
                                    Anuncios{children.ads_count > 0 ? ` (${children.ads_count})` : ""}
                                </TabsTrigger>
                            )}
                            {showKeywords && children.keywords_count > 0 && (
                                <TabsTrigger value="keywords">
                                    Keywords ({children.keywords_count})
                                </TabsTrigger>
                            )}
                        </TabsList>

                        <TabsContent value="daily" className="space-y-4">
                            {summary && (
                                <ConversionFunnel
                                    impressions={summary.impressions}
                                    clicks={summary.clicks}
                                    conversions={summary.conversions}
                                />
                            )}
                            <DailySection daily={daily} />
                        </TabsContent>

                        {showAds && (
                            <TabsContent value="ads" className="space-y-4">
                                {children.top_ads?.length > 1 && (
                                    <div>
                                        <p className="text-sm font-medium text-muted-foreground mb-2">Distribuicao de Investimento</p>
                                        <DistributionBar items={children.top_ads} />
                                    </div>
                                )}
                                <AdsTable
                                    projectId={projectId}
                                    campaignId={campaign.campaign_id}
                                    startDate={startDate}
                                    endDate={endDate}
                                />
                            </TabsContent>
                        )}

                        {showKeywords && children.keywords_count > 0 && (
                            <TabsContent value="keywords">
                                <KeywordsTable
                                    projectId={projectId}
                                    campaignId={campaign.campaign_id}
                                    startDate={startDate}
                                    endDate={endDate}
                                />
                            </TabsContent>
                        )}
                    </Tabs>
                </>
            )}
        </div>
    );
}