"use client";

import React, { useState, useEffect } from "react";
import { DashboardHeader } from "@/components/layout/dashboard-header";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { ChartConfigPanel } from "@/components/analytics/chart-config-panel";
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  useSortable,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { channelsApi, analyticsApi } from "@/lib/api";
import { formatCurrency, formatNumber } from "@/lib/utils/format";
import { Plus, Loader2, AlertCircle, TrendingUp } from "lucide-react";
import type {
  TargetChannel,
  SpendingAnalytics,
  AnalyticsMetric,
  DateGrouping,
  SpendingDataPoint,
} from "@/lib/types/api";
import { format } from "date-fns";

interface ChartData {
  id: string;
  config: {
    targetChannelIds: string[];
    metrics: AnalyticsMetric[];
    dateFrom: Date | null;
    dateTo: Date | null;
    grouping: DateGrouping;
  };
  data: SpendingAnalytics | null;
  loading: boolean;
  width: "full" | "half";
}

// Компонент для sortable item
interface SortableChartItemProps {
  chart: ChartData;
  index: number;
  channels: TargetChannel[];
  chartsLength: number;
  onBuild: (chartId: string, config: ChartData["config"]) => void;
  onRemove: (chartId: string) => void;
  onWidthChange: (chartId: string, width: "full" | "half") => void;
}

const SortableChartItem: React.FC<SortableChartItemProps> = ({
  chart,
  index,
  channels,
  chartsLength,
  onBuild,
  onRemove,
  onWidthChange,
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: chart.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div ref={setNodeRef} style={style} className={chart.width === "half" ? "" : "col-span-full"}>
      <ChartConfigPanel
        channels={channels}
        data={chart.data}
        loading={chart.loading}
        width={chart.width}
        onBuild={(config) => onBuild(chart.id, config)}
        onRemove={chartsLength > 1 ? () => onRemove(chart.id) : undefined}
        onWidthChange={(width) => onWidthChange(chart.id, width)}
        showRemoveButton={chartsLength > 1}
        chartNumber={index + 1}
        dragHandleProps={{ ...attributes, ...listeners }}
      />
    </div>
  );
};

export default function TargetChannelsAnalyticsPage() {
  const [channels, setChannels] = useState<TargetChannel[]>([]);
  const [charts, setCharts] = useState<ChartData[]>([
    {
      id: "chart-1",
      config: {
        targetChannelIds: [],
        metrics: [],
        dateFrom: null,
        dateTo: null,
        grouping: "day",
      },
      data: null,
      loading: false,
      width: "full",
    },
  ]);

  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    loadChannels();
  }, []);

  const loadChannels = async () => {
    try {
      setLoading(true);
      const response = await channelsApi.list();
      const activeChannels = response.target_channels.filter((c) => c.is_active);
      setChannels(activeChannels);
    } catch (err: any) {
      setError(err?.error?.message || "Ошибка загрузки каналов");
    } finally {
      setLoading(false);
    }
  };

  const handleBuildChart = async (
    chartId: string,
    config: ChartData["config"]
  ) => {
    const chartIndex = charts.findIndex((c) => c.id === chartId);
    if (chartIndex === -1) return;

    // Обновляем состояние графика
    const updatedCharts = [...charts];
    updatedCharts[chartIndex].loading = true;
    updatedCharts[chartIndex].config = config;
    setCharts(updatedCharts);

    try {
      // Загружаем данные для каждого канала
      const promises = config.targetChannelIds.map((channelId) =>
        analyticsApi.spending({
          target_channel_id: channelId,
          date_from: config.dateFrom
            ? format(config.dateFrom, "yyyy-MM-dd'T'HH:mm:ss'Z'")
            : undefined,
          date_to: config.dateTo
            ? format(config.dateTo, "yyyy-MM-dd'T'HH:mm:ss'Z'")
            : undefined,
          grouping: config.grouping,
        })
      );

      const results = await Promise.all(promises);

      // Объединяем данные (если несколько каналов)
      const combinedData: SpendingAnalytics = results.reduce(
        (acc, result) => {
          acc.total_cost += result.total_cost;
          acc.total_subscriptions += result.total_subscriptions;
          acc.total_views += result.total_views;

          // Объединяем chart_data по периодам
          result.chart_data.forEach((dataPoint) => {
            const existing = acc.chart_data.find(
              (d) => d.period === dataPoint.period
            );
            if (existing) {
              existing.cost += dataPoint.cost;
              existing.subscriptions += dataPoint.subscriptions;
              existing.views += dataPoint.views;
              // CPF и CPM пересчитаем после
            } else {
              acc.chart_data.push({ ...dataPoint });
            }
          });

          return acc;
        },
        {
          total_cost: 0,
          total_subscriptions: 0,
          total_views: 0,
          avg_cpf: null,
          avg_cpm: null,
          chart_data: [] as SpendingDataPoint[],
        }
      );

      // Пересчитываем CPF и CPM для каждого периода
      combinedData.chart_data.forEach((dataPoint) => {
        dataPoint.cpf =
          dataPoint.subscriptions > 0
            ? dataPoint.cost / dataPoint.subscriptions
            : null;
        dataPoint.cpm =
          dataPoint.views > 0 ? (dataPoint.cost / dataPoint.views) * 1000 : null;
      });

      // Пересчитываем средние значения
      combinedData.avg_cpf =
        combinedData.total_subscriptions > 0
          ? combinedData.total_cost / combinedData.total_subscriptions
          : null;
      combinedData.avg_cpm =
        combinedData.total_views > 0
          ? (combinedData.total_cost / combinedData.total_views) * 1000
          : null;

      // Сортируем по периодам
      combinedData.chart_data.sort((a, b) =>
        a.period.localeCompare(b.period)
      );

      // Обновляем данные графика
      const finalCharts = [...updatedCharts];
      finalCharts[chartIndex].data = combinedData;
      finalCharts[chartIndex].loading = false;
      setCharts(finalCharts);
    } catch (err: any) {
      alert(err?.error?.message || "Ошибка загрузки данных");
      const finalCharts = [...updatedCharts];
      finalCharts[chartIndex].loading = false;
      setCharts(finalCharts);
    }
  };

  const handleAddChart = () => {
    setCharts([
      ...charts,
      {
        id: `chart-${Date.now()}`,
        config: {
          targetChannelIds: [],
          metrics: [],
          dateFrom: null,
          dateTo: null,
          grouping: "day",
        },
        data: null,
        loading: false,
        width: "full",
      },
    ]);
  };

  const handleRemoveChart = (chartId: string) => {
    if (charts.length === 1) {
      alert("Должен остаться хотя бы один график");
      return;
    }
    setCharts(charts.filter((c) => c.id !== chartId));
  };

  const handleWidthChange = (chartId: string, width: "full" | "half") => {
    setCharts(
      charts.map((chart) =>
        chart.id === chartId ? { ...chart, width } : chart
      )
    );
  };

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;

    if (over && active.id !== over.id) {
      setCharts((items) => {
        const oldIndex = items.findIndex((item) => item.id === active.id);
        const newIndex = items.findIndex((item) => item.id === over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }
  };

  // Собираем все данные для таблицы
  const getAllTableData = (): SpendingDataPoint[] => {
    const allData: SpendingDataPoint[] = [];
    const periodMap = new Map<string, SpendingDataPoint>();

    charts.forEach((chart) => {
      if (!chart.data) return;
      chart.data.chart_data.forEach((dataPoint) => {
        const existing = periodMap.get(dataPoint.period);
        if (existing) {
          existing.cost += dataPoint.cost;
          existing.subscriptions += dataPoint.subscriptions;
          existing.views += dataPoint.views;
          // Пересчитываем CPF и CPM
          existing.cpf =
            existing.subscriptions > 0
              ? existing.cost / existing.subscriptions
              : null;
          existing.cpm =
            existing.views > 0 ? (existing.cost / existing.views) * 1000 : null;
        } else {
          periodMap.set(dataPoint.period, { ...dataPoint });
        }
      });
    });

    return Array.from(periodMap.values()).sort((a, b) =>
      a.period.localeCompare(b.period)
    );
  };

  const tableData = getAllTableData();

  if (loading) {
    return (
      <>
        <DashboardHeader
          breadcrumbs={[
            { label: "Аналитика", href: "/analytics" },
            { label: "Целевые каналы" },
          ]}
        />
        <div className="flex items-center justify-center p-12">
          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
        </div>
      </>
    );
  }

  return (
    <>
      <DashboardHeader
        breadcrumbs={[
          { label: "Аналитика", href: "/analytics" },
          { label: "Целевые каналы" },
        ]}
      />
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">
              Аналитика целевых каналов
            </h1>
            <p className="text-muted-foreground mt-1">
              Создайте графики для анализа показателей
            </p>
          </div>
          <Button onClick={handleAddChart}>
            <Plus className="mr-2 h-4 w-4" />
            Добавить график
          </Button>
        </div>

        {error && (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

        {channels.length === 0 ? (
          <Alert>
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>
              Нет активных целевых каналов. Добавьте канал для начала работы с
              аналитикой.
            </AlertDescription>
          </Alert>
        ) : (
          <>
            {/* Графики */}
            <DndContext
              sensors={sensors}
              collisionDetection={closestCenter}
              onDragEnd={handleDragEnd}
            >
              <SortableContext
                items={charts.map((c) => c.id)}
                strategy={verticalListSortingStrategy}
              >
                <div className="grid grid-cols-2 gap-6">
                  {charts.map((chart, index) => (
                    <SortableChartItem
                      key={chart.id}
                      chart={chart}
                      index={index}
                      channels={channels}
                      chartsLength={charts.length}
                      onBuild={handleBuildChart}
                      onRemove={handleRemoveChart}
                      onWidthChange={handleWidthChange}
                    />
                  ))}
                </div>
              </SortableContext>
            </DndContext>

            {/* Таблица */}
            {tableData.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle>Табличное представление</CardTitle>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Период</TableHead>
                        <TableHead className="text-right">Расходы</TableHead>
                        <TableHead className="text-right">Подписки</TableHead>
                        <TableHead className="text-right">Просмотры</TableHead>
                        <TableHead className="text-right">CPF</TableHead>
                        <TableHead className="text-right">CPM</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {tableData.map((row) => (
                        <TableRow key={row.period}>
                          <TableCell className="font-medium">
                            {row.period}
                          </TableCell>
                          <TableCell className="text-right">
                            {formatCurrency(row.cost)}
                          </TableCell>
                          <TableCell className="text-right">
                            {formatNumber(row.subscriptions)}
                          </TableCell>
                          <TableCell className="text-right">
                            {formatNumber(row.views)}
                          </TableCell>
                          <TableCell className="text-right">
                            {row.cpf !== null ? formatCurrency(row.cpf) : "—"}
                          </TableCell>
                          <TableCell className="text-right">
                            {row.cpm !== null ? formatCurrency(row.cpm) : "—"}
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            )}
          </>
        )}
      </div>
    </>
  );
}