"use client";

// ============================================================================
// Dashboard Home Page
// ============================================================================

import { useEffect, useState } from "react";
import { Loader2, ShoppingCart, Users, TrendingUp, BarChart3 } from "lucide-react";
import { DashboardHeader } from "@/components/layout/dashboard-header";
import { useWorkspace } from "@/components/providers/workspace-provider";
import { demoAwareAnalyticsApi } from "@/lib/demo";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import type { SpendingAnalytics } from "@/lib/types/api";

// ============================================================================
// Helpers
// ============================================================================

const formatNumber = (value: number | null | undefined, showSign = false): string => {
  if (value === null || value === undefined) return "—";
  const formatted = new Intl.NumberFormat("ru-RU").format(value);
  if (showSign && value > 0) return `+${formatted}`;
  return formatted;
};

const formatCurrency = (value: number | null | undefined): string => {
  if (value === null || value === undefined) return "—";
  return new Intl.NumberFormat("ru-RU", {
    style: "currency",
    currency: "RUB",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(value);
};

// ============================================================================
// Component
// ============================================================================

export default function DashboardPage() {
  const { currentWorkspace, currentProject, isLoading: workspaceLoading, projects } = useWorkspace();
  const [spending, setSpending] = useState<SpendingAnalytics | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!currentWorkspace) {
      setLoading(false);
      return;
    }

    const loadData = async () => {
      try {
        setLoading(true);
        const data = await demoAwareAnalyticsApi.spending(currentWorkspace.id, {
          project_id: currentProject?.id,
        });
        setSpending(data);
      } catch (err) {
        console.error("Failed to load spending:", err);
      } finally {
        setLoading(false);
      }
    };

    loadData();
  }, [currentWorkspace?.id, currentProject?.id]);

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

  if (!currentWorkspace) {
    return (
      <>
        <DashboardHeader breadcrumbs={[{ label: "Главная" }]} />
        <div className="flex flex-1 items-center justify-center">
          <div className="text-center">
            <h2 className="text-2xl font-semibold mb-2">Нет доступных воркспейсов</h2>
            <p className="text-muted-foreground">
              Создайте новый воркспейс для начала работы
            </p>
          </div>
        </div>
      </>
    );
  }

  // Calculate totals and averages
  const totalCost = spending?.total_cost ?? 0;
  const totalSubscriptions = spending?.total_subscriptions ?? 0;
  const totalViews = spending?.total_views ?? 0;
  const avgCps = totalSubscriptions > 0 ? totalCost / totalSubscriptions : null;
  const avgCpm = totalViews > 0 ? (totalCost / totalViews) * 1000 : null;

  return (
    <>
      <DashboardHeader breadcrumbs={[{ label: "Главная" }]} />

      <div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
        {/* Stats Cards */}
        <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>
              {loading ? (
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              ) : (
                <div className="text-2xl font-bold">{formatCurrency(totalCost)}</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>
              {loading ? (
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              ) : (
                <div className="text-2xl font-bold">{formatNumber(totalSubscriptions)}</div>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Средний CPS</CardTitle>
              <TrendingUp className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              {loading ? (
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              ) : (
                <div className="text-2xl font-bold">{formatCurrency(avgCps)}</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>
              <BarChart3 className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              {loading ? (
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              ) : (
                <div className="text-2xl font-bold">{formatCurrency(avgCpm)}</div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Quick Actions */}
        <div className="grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Быстрый старт</CardTitle>
              <CardDescription>Начните с основных действий</CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              <a
                href={`/dashboard/${currentWorkspace.id}/placements/new`}
                className="block text-sm text-primary hover:underline"
              >
                → Создать размещение
              </a>
              <a
                href={`/dashboard/${currentWorkspace.id}/creatives/new`}
                className="block text-sm text-primary hover:underline"
              >
                → Создать креатив
              </a>
              <a
                href={`/dashboard/${currentWorkspace.id}/analytics`}
                className="block text-sm text-primary hover:underline"
              >
                → Посмотреть аналитику
              </a>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Проекты</CardTitle>
              <CardDescription>
                {projects.length > 0
                  ? `${projects.length} активных проектов`
                  : "Нет активных проектов"}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {projects.length > 0 ? (
                <div className="space-y-2">
                  {projects.slice(0, 5).map((project) => (
                    <div
                      key={project.id}
                      className="flex items-center justify-between text-sm"
                    >
                      <span className="font-medium">{project.title}</span>
                      {project.username && (
                        <span className="text-muted-foreground">@{project.username}</span>
                      )}
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-muted-foreground">
                  Добавьте бота в канал через Telegram для создания проекта
                </p>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
}