import { useState, useCallback, useEffect } from "react";
import { AreaChart, Area, ResponsiveContainer } from "recharts";
import { Search, Megaphone, RefreshCw, ChevronRight } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Badge } from "@/Components/ui/badge";
import { Skeleton } from "@/Components/ui/skeleton";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/Components/ui/select";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import { CHART_COLORS } from "@/Components/Dashboard/chartColors";
import SortableHeader from "@/Components/Dashboard/Drilldown/SortableHeader";
import Pagination from "@/Components/Dashboard/Drilldown/Pagination";
import { useDrilldownApi } from "../Drilldown/useDrilldownApi";
import {
    fmtNumber,
    fmtCurrency,
    fmtPercent,
    statusBadge,
    objectiveLabel,
    deriveTxConv,
} from "./helpers";

function Sparkline({ data, campaignId }) {
    if (!data || data.length < 2) {
        return <span className="text-muted-foreground text-xs">-</span>;
    }
    return (
        <div className="h-8 w-[90px]">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data.map((v) => ({ v }))}>
                    <defs>
                        <linearGradient id={`sp-${campaignId}`} x1="0" y1="0" x2="0" y2="1">
                            <stop offset="5%" stopColor={CHART_COLORS.blue} stopOpacity={0.3} />
                            <stop offset="95%" stopColor={CHART_COLORS.blue} stopOpacity={0.05} />
                        </linearGradient>
                    </defs>
                    <Area
                        type="monotone"
                        dataKey="v"
                        stroke={CHART_COLORS.blue}
                        fill={`url(#sp-${campaignId})`}
                        strokeWidth={1.5}
                        dot={false}
                    />
                </AreaChart>
            </ResponsiveContainer>
        </div>
    );
}

export default function CampaignsTable({ projectId, startDate, endDate, onSelectCampaign }) {
    const [search, setSearch] = useState("");
    const [searchCommitted, setSearchCommitted] = useState("");
    const [status, setStatus] = useState("all");
    const [sort, setSort] = useState("spend");
    const [direction, setDirection] = useState("desc");
    const [page, setPage] = useState(1);

    const handleSearchKeyDown = useCallback((e) => {
        if (e.key === "Enter") { setSearchCommitted(search); setPage(1); }
    }, [search]);

    const handleSearchBlur = useCallback(() => {
        if (search !== searchCommitted) { setSearchCommitted(search); setPage(1); }
    }, [search, searchCommitted]);

    const handleStatusChange = useCallback((val) => {
        setStatus(val);
        setPage(1);
    }, []);

    const handleSort = useCallback((field, dir) => {
        setSort(field);
        setDirection(dir);
        setPage(1);
    }, []);

    const url = projectId
        ? route("meta-ads.campaigns", { project: projectId })
        : null;

    const params = {
        start_date: startDate,
        end_date: endDate,
        sort,
        direction,
        page,
        per_page: 12,
        ...(status !== "all" && { status }),
        ...(searchCommitted && { search: searchCommitted }),
    };

    const { data, meta, loading, error, refetch } = useDrilldownApi(url, params);
    const campaigns = data?.campaigns ?? [];
    const hasData = campaigns.length > 0;

    useEffect(() => { setPage(1); }, [startDate, endDate]);

    useEffect(() => {
        if (meta && meta.pages > 0 && page > meta.pages) {
            setPage(meta.pages);
        }
    }, [meta, page]);

    return (
        <div className={`space-y-3 transition-opacity duration-200 ${loading && !hasData ? "opacity-100" : loading ? "opacity-60 pointer-events-none" : "opacity-100"}`}>
            {/* Filters */}
            <div className="flex flex-col sm:flex-row gap-2">
                <div className="relative flex-1 sm:flex-none">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                    <Input
                        placeholder="Buscar campanha..."
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        onKeyDown={handleSearchKeyDown}
                        onBlur={handleSearchBlur}
                        className="pl-9 w-full sm:w-56"
                    />
                </div>
                <Select value={status} onValueChange={handleStatusChange}>
                    <SelectTrigger className="w-full sm:w-40">
                        <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="all">Todos status</SelectItem>
                        <SelectItem value="ACTIVE">Ativo</SelectItem>
                        <SelectItem value="PAUSED">Pausado</SelectItem>
                        <SelectItem value="DELETED">Removido</SelectItem>
                        <SelectItem value="ARCHIVED">Arquivado</SelectItem>
                    </SelectContent>
                </Select>
            </div>

            {/* Error */}
            {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>
            )}

            {/* Campaigns table */}
            <div className="rounded-md border overflow-auto">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <SortableHeader label="Campanha" field="campaign_name" sort={sort} direction={direction} onSort={handleSort} />
                            <TableHead className="hidden sm:table-cell">Objetivo</TableHead>
                            <TableHead className="hidden sm:table-cell">Status</TableHead>
                            <TableHead className="hidden md:table-cell">Tendência</TableHead>
                            <SortableHeader label="Impr." field="impressions" sort={sort} direction={direction} onSort={handleSort} className="text-right" />
                            <SortableHeader label="CTR" field="ctr" sort={sort} direction={direction} onSort={handleSort} className="text-right" />
                            <SortableHeader label="Cliques" field="clicks" sort={sort} direction={direction} onSort={handleSort} className="text-right" />
                            <TableHead className="text-right hidden md:table-cell">Tx. Conv.</TableHead>
                            <SortableHeader label="Conversões" field="leads_platform" sort={sort} direction={direction} onSort={handleSort} className="text-right" />
                            <SortableHeader label="CPL" field="cpl" sort={sort} direction={direction} onSort={handleSort} className="text-right hidden md:table-cell" />
                            <SortableHeader label="Invest." field="spend" sort={sort} direction={direction} onSort={handleSort} className="text-right" />
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {loading && !hasData ? (
                            Array.from({ length: 5 }).map((_, i) => (
                                <TableRow key={i}>
                                    {Array.from({ length: 11 }).map((_, j) => (
                                        <TableCell key={j}>
                                            <Skeleton className="h-4 w-16" />
                                        </TableCell>
                                    ))}
                                </TableRow>
                            ))
                        ) : !hasData ? (
                            <TableRow>
                                <TableCell colSpan={11} className="h-32 text-center">
                                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
                                        <Megaphone className="h-8 w-8" />
                                        <span className="text-sm">
                                            {searchCommitted || status !== "all"
                                                ? "Nenhuma campanha encontrada para os filtros aplicados."
                                                : "Nenhuma campanha com dados no periodo selecionado."}
                                        </span>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ) : (
                            campaigns.map((c) => {
                                const sb = statusBadge(c.effective_status);
                                return (
                                    <TableRow
                                        key={c.campaign_id}
                                        className="cursor-pointer hover:bg-muted/50"
                                        onClick={() => onSelectCampaign(c)}
                                    >
                                        <TableCell className="font-medium max-w-[260px]">
                                            <span className="inline-flex items-center gap-1 min-w-0">
                                                <span className="truncate">{c.campaign_name}</span>
                                                <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
                                            </span>
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
                                            {c.objective ? (
                                                <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
                                                    {objectiveLabel(c.objective)}
                                                </Badge>
                                            ) : (
                                                <span className="text-muted-foreground text-xs">-</span>
                                            )}
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
                                            <Badge variant={sb.variant} className="text-[10px] px-1.5 py-0">
                                                {sb.label}
                                            </Badge>
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                            <Sparkline data={c.sparkline} campaignId={c.campaign_id} />
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums">{fmtNumber(c.impressions)}</TableCell>
                                        <TableCell className="text-right tabular-nums">{fmtPercent(c.ctr)}</TableCell>
                                        <TableCell className="text-right tabular-nums">{fmtNumber(c.clicks)}</TableCell>
                                        <TableCell className="text-right tabular-nums hidden md:table-cell">{fmtPercent(deriveTxConv(c.leads_platform, c.clicks))}</TableCell>
                                        <TableCell className="text-right tabular-nums">{fmtNumber(c.leads_platform)}</TableCell>
                                        <TableCell className="text-right tabular-nums hidden md:table-cell">{fmtCurrency(c.cpl)}</TableCell>
                                        <TableCell className="text-right tabular-nums font-medium">{fmtCurrency(c.spend)}</TableCell>
                                    </TableRow>
                                );
                            })
                        )}
                    </TableBody>
                </Table>
            </div>

            <Pagination meta={meta} page={page} onPageChange={setPage} />
        </div>
    );
}