"use client";

// ============================================================================
// Analytics Overview 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 { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { analyticsApi } from "@/lib/api";
import {
  formatNumber,
  formatMetric,
  formatCurrency,
  formatPercent,
} from "@/lib/utils/format";
import {
  BarChart3,
  Loader2,
  AlertCircle,
  TrendingUp,
  TrendingDown,
  Users,
  ShoppingCart,
  DollarSign,
} from "lucide-react";
import type { AnalyticsOverview } from "@/lib/types/api";
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

export default function AnalyticsPage() {
  const [overview, setOverview] = useState<AnalyticsOverview | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  const loadOverview = async () => {
    try {
      setLoading(true);
      const data = await analyticsApi.overview();
      setOverview(data);
    } catch (err: any) {
      setError(err?.error?.message || "Ошибка загрузки аналитики");
    } finally {
      setLoading(false);
    }
  };

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

  if (error || !overview) {
    return (
      <>
        <DashboardHeader
          breadcrumbs={[
            { label: "Главная", href: "/" },
            { label: "Аналитика" },
          ]}
        />
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>
              {error || "Не удалось загрузить аналитику"}
            </AlertDescription>
          </Alert>
        </div>
      </>
    );
  }

  return (
    <>
      <DashboardHeader
        breadcrumbs={[
          { label: "Главная", href: "/" },
          { label: "Аналитика" },
          { label: "Обзор" },
        ]}
      />
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Аналитика</h1>
          <p className="text-muted-foreground mt-1">
            Сводная статистика за последний месяц
          </p>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg: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>
              <ShoppingCart className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {formatNumber(overview.totalPurchases)}
              </div>
              <div className="flex items-center text-xs mt-1">
                {overview.purchasesChange >= 0 ? (
                  <TrendingUp className="h-3 w-3 text-green-600 mr-1" />
                ) : (
                  <TrendingDown className="h-3 w-3 text-red-600 mr-1" />
                )}
                <span
                  className={
                    overview.purchasesChange >= 0
                      ? "text-green-600"
                      : "text-red-600"
                  }
                >
                  {overview.purchasesChange >= 0 ? "+" : ""}
                  {formatNumber(overview.purchasesChange)}
                </span>
                <span className="text-muted-foreground ml-1">
                  за прошлый месяц
                </span>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Всего подписчиков
              </CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {formatNumber(overview.totalFollowers)}
              </div>
              <div className="flex items-center text-xs mt-1">
                {overview.followersChange >= 0 ? (
                  <TrendingUp className="h-3 w-3 text-green-600 mr-1" />
                ) : (
                  <TrendingDown className="h-3 w-3 text-red-600 mr-1" />
                )}
                <span
                  className={
                    overview.followersChange >= 0
                      ? "text-green-600"
                      : "text-red-600"
                  }
                >
                  {overview.followersChange >= 0 ? "+" : ""}
                  {formatNumber(overview.followersChange)}
                </span>
                <span className="text-muted-foreground ml-1">
                  за прошлый месяц
                </span>
              </div>
            </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>
              <BarChart3 className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                ₽{formatMetric(overview.averageCpf)}
              </div>
              <div className="flex items-center text-xs mt-1">
                {overview.cpfChange <= 0 ? (
                  <TrendingDown className="h-3 w-3 text-green-600 mr-1" />
                ) : (
                  <TrendingUp className="h-3 w-3 text-red-600 mr-1" />
                )}
                <span
                  className={
                    overview.cpfChange <= 0 ? "text-green-600" : "text-red-600"
                  }
                >
                  {formatPercent(overview.cpfChange, true)}
                </span>
                <span className="text-muted-foreground ml-1">
                  от прошлого месяца
                </span>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Средний CPM</CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                ₽{formatMetric(overview.averageCpm)}
              </div>
              <div className="flex items-center text-xs mt-1">
                {overview.cpmChange <= 0 ? (
                  <TrendingDown className="h-3 w-3 text-green-600 mr-1" />
                ) : (
                  <TrendingUp className="h-3 w-3 text-red-600 mr-1" />
                )}
                <span
                  className={
                    overview.cpmChange <= 0 ? "text-green-600" : "text-red-600"
                  }
                >
                  {formatPercent(overview.cpmChange, true)}
                </span>
                <span className="text-muted-foreground ml-1">
                  от прошлого месяца
                </span>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Топ каналов по CPF</CardTitle>
              <CardDescription>
                Самые эффективные внешние каналы
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {overview.topChannelsByCpf?.length > 0 ? (
                  overview.topChannelsByCpf.slice(0, 5).map((item, index) => (
                    <div
                      key={item.channel_id}
                      className="flex items-center gap-3"
                    >
                      <Badge
                        variant="outline"
                        className="w-8 h-8 rounded-full p-0 flex items-center justify-center"
                      >
                        {index + 1}
                      </Badge>
                      <div className="flex-1 min-w-0">
                        <p className="font-medium truncate">
                          {item.channel_name}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {formatNumber(item.total_purchases)} закупов
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="font-medium">
                          ₽{formatMetric(item.avg_cpf)}
                        </p>
                        <p className="text-xs text-muted-foreground">CPF</p>
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-center text-muted-foreground py-4">
                    Нет данных
                  </p>
                )}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Топ креативов</CardTitle>
              <CardDescription>
                Самые эффективные рекламные креативы
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {overview.topCreativesByCpf?.length > 0 ? (
                  overview.topCreativesByCpf.slice(0, 5).map((item, index) => (
                    <div
                      key={item.creative_id}
                      className="flex items-center gap-3"
                    >
                      <Badge
                        variant="outline"
                        className="w-8 h-8 rounded-full p-0 flex items-center justify-center"
                      >
                        {index + 1}
                      </Badge>
                      <div className="flex-1 min-w-0">
                        <p className="font-medium truncate">
                          {item.creative_name}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {formatNumber(item.total_subscriptions)} подписчиков
                        </p>
                      </div>
                      <div className="text-right">
                        <p className="font-medium">
                          ₽{formatMetric(item.avg_cpf)}
                        </p>
                        <p className="text-xs text-muted-foreground">CPF</p>
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-center text-muted-foreground py-4">
                    Нет данных
                  </p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
}