"use client";

// ============================================================================
// Analytics Costs Page
// ============================================================================

import React, { useEffect, useState } from "react";
import { DashboardHeader } from "@/components/layout/dashboard-header";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { analyticsApi } from "@/lib/api";
import { formatCurrency, formatNumber } from "@/lib/utils/format";
import { Loader2, AlertCircle, DollarSign } from "lucide-react";
import type { SpendingAnalytics, DateGrouping } from "@/lib/types/api";
import { useTargetChannel } from "@/components/providers/target-channel-provider";
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

export default function AnalyticsCostsPage() {
  const { selectedChannel } = useTargetChannel();
  const [report, setReport] = useState<SpendingAnalytics | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [grouping, setGrouping] = useState<DateGrouping>("week");

  useEffect(() => {
    if (selectedChannel) {
      loadData();
    } else {
      setLoading(false);
    }
  }, [grouping, selectedChannel]);

  const loadData = async () => {
    if (!selectedChannel) return;

    try {
      setLoading(true);
      const reportData = await analyticsApi.spending({
        grouping,
        target_channel_id: selectedChannel.id,
      });
      setReport(reportData);
    } catch (err: any) {
      setError(err?.error?.message || "Ошибка загрузки аналитики");
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <DashboardHeader
        breadcrumbs={[
          { label: "Главная", href: "/" },
          { 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>
        </div>

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

        <Card>
          <CardHeader>
            <CardTitle>Фильтры</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">
                Период группировки
              </label>
              <Select
                value={grouping}
                onValueChange={(value: DateGrouping) => setGrouping(value)}
              >
                <SelectTrigger className="max-w-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="day">По дням</SelectItem>
                  <SelectItem value="week">По неделям</SelectItem>
                  <SelectItem value="month">По месяцам</SelectItem>
                  <SelectItem value="quarter">По кварталам</SelectItem>
                  <SelectItem value="year">По годам</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {loading ? (
          <Card>
            <CardContent className="flex items-center justify-center p-12">
              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            </CardContent>
          </Card>
        ) : report ? (
          <>
            <div className="grid gap-4 md:grid-cols-4">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">
                    Всего затрат
                  </CardTitle>
                  <DollarSign className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">
                    {formatCurrency(report.total_cost)}
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">
                    За выбранный период
                  </p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">
                    Подписчики
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">
                    {formatNumber(report.total_subscriptions)}
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">
                    Всего привлечено
                  </p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">
                    Просмотры
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">
                    {formatNumber(report.total_views)}
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">
                    Всего просмотров
                  </p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">
                    Средний CPF
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">
                    {report.avg_cpf ? formatCurrency(report.avg_cpf) : "—"}
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">
                    В среднем за период
                  </p>
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle>График затрат</CardTitle>
                <CardDescription>Динамика расходов на рекламу</CardDescription>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={350}>
                  <BarChart data={report.chart_data}>
                    <CartesianGrid
                      strokeDasharray="3 3"
                      className="stroke-muted"
                    />
                    <XAxis
                      dataKey="period"
                      className="text-xs"
                      tick={{ fill: "hsl(var(--muted-foreground))" }}
                    />
                    <YAxis
                      className="text-xs"
                      tick={{ fill: "hsl(var(--muted-foreground))" }}
                      tickFormatter={(value) => `₽${formatNumber(value)}`}
                    />
                    <Tooltip
                      contentStyle={{
                        backgroundColor: "hsl(var(--background))",
                        border: "1px solid hsl(var(--border))",
                        borderRadius: "8px",
                      }}
                      formatter={(value: any) => [
                        `₽${formatNumber(value)}`,
                        "Затраты",
                      ]}
                    />
                    <Legend />
                    <Bar
                      dataKey="cost"
                      name="Затраты"
                      fill="hsl(var(--primary))"
                      radius={[8, 8, 0, 0]}
                    />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Детализация по периодам</CardTitle>
                <CardDescription>Затраты и количество закупов</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {report.chart_data.map((period) => (
                    <div
                      key={period.period}
                      className="flex items-center justify-between p-3 rounded-lg border"
                    >
                      <div>
                        <p className="font-medium">{period.period}</p>
                        <p className="text-sm text-muted-foreground">
                          {formatNumber(period.subscriptions)} подписок • {formatNumber(period.views)} просмотров
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="text-lg font-bold">
                          {formatCurrency(period.cost)}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {period.cpf ? `CPF: ${formatCurrency(period.cpf)}` : "—"}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </>
        ) : null}
      </div>
    </>
  );
}