"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import { useSession } from "next-auth/react";
import { ErrorBoundary } from "@/components/ErrorBoundary";
import { FileText, Eye, TrendingUp, MousePointerClick, Heart, Repeat2, MessageCircle, RefreshCw, Globe } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { MetricCard } from "@/components/analytics/MetricCard";
import { EngagementRateChart } from "@/components/analytics/EngagementRateChart";
import { EngagementBarChart } from "@/components/analytics/EngagementBarChart";
import { ImpressionsAreaChart } from "@/components/analytics/ImpressionsAreaChart";
import { BestPostsList } from "@/components/analytics/BestPostsList";
import { OnboardingChecklist } from "@/components/onboarding/OnboardingChecklist";
import { PostComparisonView } from "@/components/analytics/PostComparisonView";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import type { Region } from "@/lib/types";
import { REGION_BADGE_COLORS } from "@/components/composer/RegionSelector";

const DAYS_OPTIONS = [
  { label: "7 days", value: 7 },
  { label: "30 days", value: 30 },
  { label: "90 days", value: 90 },
] as const;

interface OverviewTotals {
  impressions: number;
  likes: number;
  retweets: number;
  replies: number;
  clicks: number;
}

interface OverviewByDay {
  date: string;
  impressions: number;
  likes: number;
  retweets: number;
  replies: number;
}

interface OverviewBestPost {
  postId: string;
  content: string;
  impressions: number;
  likes: number;
  publishedAt: string | null;
  networks?: string[];
}

interface OverviewRegionTotals extends OverviewTotals {
  postCount: number;
}

interface OverviewData {
  totals: OverviewTotals;
  byDay: OverviewByDay[];
  byNetwork: Record<string, OverviewTotals>;
  bestPosts: OverviewBestPost[];
  byRegion?: Record<string, OverviewRegionTotals>;
  /* Legacy fields */
  totalPosts: number;
  totalImpressions: number;
  totalReach: number;
  totalClicks: number;
  totalShares: number;
  totalComments: number;
  totalReactions: number;
}



function formatNumber(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
  return n.toString();
}

interface Campaign {
  id: string;
  name: string;
  createdAt: string;
  _count?: { posts: number };
}

export default function DashboardPage() {
  const { data: session } = useSession();
  const isAdmin = (session?.user as { role?: string })?.role === "ADMIN";
  const [days, setDays] = useState(30);
  const [regionFilter, setRegionFilter] = useState<Region | "all">("all");
  const [campaignFilter, setCampaignFilter] = useState("");
  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
  const [filterRegions, setFilterRegions] = useState<string[]>([]);
  const [overview, setOverview] = useState<OverviewData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [refreshing, setRefreshing] = useState(false);
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
  const [lastSyncedAt, setLastSyncedAt] = useState<Date | null>(null);
  const autoRefreshed = useRef(false);

  useEffect(() => {
    fetch("/api/v1/posts/filters")
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (data && Array.isArray(data.regions)) setFilterRegions(data.regions);
        if (data && Array.isArray(data.campaigns)) setCampaigns(data.campaigns);
      })
      .catch(() => {});
  }, []);

  useEffect(() => {
    fetch("/api/v1/health")
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (data?.scheduler?.lastTickAt) {
          setLastSyncedAt(new Date(data.scheduler.lastTickAt));
        }
      })
      .catch(() => {});
  }, []);

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      // Auto-refresh Twitter analytics before loading overview (once per session)
      if (!autoRefreshed.current) {
        autoRefreshed.current = true;
        try {
          await fetch("/api/v1/analytics/fetch", { method: "POST" });
        } catch {
          // Continue even if analytics refresh fails
        }
      }

      const overviewParams = new URLSearchParams({ days: String(days), groupBy: "region" });
      if (regionFilter !== "all") overviewParams.set("region", regionFilter);

      const overviewRes = await fetch(`/api/v1/analytics/overview?${overviewParams}`);
      if (!overviewRes.ok) throw new Error("Failed to load analytics");

      const overviewData: OverviewData = await overviewRes.json();
      setOverview(overviewData);
      setLastUpdated(new Date());
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load dashboard data");
    } finally {
      setLoading(false);
    }
  }, [days, regionFilter]);

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

  const handleRefreshAnalytics = async () => {
    setRefreshing(true);
    try {
      await fetch("/api/v1/analytics/fetch", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ force: true }),
      });
    } catch {
      // Continue even if fetch fails
    }
    // Always refresh the full dashboard regardless of fetch result
    try {
      await fetchData();
    } catch {
      // Silently fail — dashboard still shows last known data
    } finally {
      setRefreshing(false);
    }
  };

  // Derived data from new API shape
  const totals = overview?.totals ?? { impressions: 0, likes: 0, retweets: 0, replies: 0, clicks: 0 };
  const byDay = overview?.byDay ?? [];

  // All platforms with display info (show all, even without data)
  const ALL_PLATFORMS = [
    { key: "TWITTER", label: "Twitter / X", color: "blue", icon: Eye },
    { key: "LINKEDIN", label: "LinkedIn", color: "indigo", icon: Eye },
    { key: "FACEBOOK", label: "Facebook", color: "sky", icon: Eye },
    { key: "INSTAGRAM", label: "Instagram", color: "pink", icon: Eye },
  ] as const;
  const [platformTab, setPlatformTab] = useState<string>("ALL");
  const [bestPostsPlatform, setBestPostsPlatform] = useState<string>("ALL");
  const [bestPostsRegion, setBestPostsRegion] = useState<string>("ALL");
  const [bestPostsFiltered, setBestPostsFiltered] = useState<OverviewBestPost[] | null>(null);
  const [bestPostsLoading, setBestPostsLoading] = useState(false);

  // Fetch best posts for the independently-selected region
  useEffect(() => {
    if (bestPostsRegion === "ALL") {
      setBestPostsFiltered(null);
      return;
    }
    setBestPostsLoading(true);
    const params = new URLSearchParams({ days: String(days), region: bestPostsRegion });
    fetch(`/api/v1/analytics/overview?${params}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => setBestPostsFiltered(data?.bestPosts ?? []))
      .catch(() => setBestPostsFiltered([]))
      .finally(() => setBestPostsLoading(false));
  }, [bestPostsRegion, days]);

  // Use region-filtered best posts when a best-posts region is selected
  const bestPosts = bestPostsFiltered ?? overview?.bestPosts ?? [];

  // Build engagement data for ALL platforms (include 0-data placeholders)
  const engagementData = ALL_PLATFORMS.map(({ key }) => {
    const stats = overview?.byNetwork?.[key];
    return {
      network: key,
      likes: stats?.likes ?? 0,
      comments: stats?.replies ?? 0,
      shares: stats?.retweets ?? 0,
    };
  });

  const engagementRate =
    overview && (overview.totalImpressions ?? 0) > 0
      ? ((((overview.totalComments ?? 0) + (overview.totalShares ?? 0) + (overview.totalReactions ?? 0)) / overview.totalImpressions) * 100).toFixed(1) + "%"
      : "0%";

  return (
    <div className="bg-white min-h-screen space-y-6 overflow-x-hidden">
      <div className="border-b border-gray-100 -mx-4 md:-mx-6 -mt-4 md:-mt-6 px-4 sm:px-8 py-4 sm:py-5 mb-4 sm:mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-gray-900">Overview</h1>
          <p className="text-sm text-gray-500">Overview of your social media performance</p>
        </div>
        <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
          {/* Days selector + post count */}
          <div className="flex items-center gap-1">
            {DAYS_OPTIONS.map((opt) => (
              <Button
                key={opt.value}
                variant={days === opt.value ? "default" : "outline"}
                size="sm"
                className={days === opt.value ? "bg-gray-900 hover:bg-gray-800 text-white" : "border-gray-200 text-gray-700 hover:bg-gray-50"}
                onClick={() => setDays(opt.value)}
              >
                {opt.label}
              </Button>
            ))}
          </div>
          {!loading && overview && (
            <span className="text-xs text-gray-400" data-testid="post-count-label">
              {(() => {
                // Only count posts that have at least 1 impression (synced posts with data)
                const count = totals.impressions > 0 ? overview.totalPosts : 0;
                return `${days}d · ${count} post${count !== 1 ? "s" : ""}`;
              })()}
            </span>
          )}
          <Select value={regionFilter} onValueChange={(v) => setRegionFilter((v ?? "all") as Region | "all")}>
            <SelectTrigger className="w-[130px] sm:w-[160px] h-8 text-xs border-gray-200" data-testid="dashboard-region-filter">
              <Globe className="h-3 w-3 mr-1 text-gray-500" />
              <SelectValue placeholder="All Regions" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Regions</SelectItem>
              {filterRegions.map((r) => (
                <SelectItem key={r} value={r}>{r === "GLOBAL" ? "Global" : r}</SelectItem>
              ))}
            </SelectContent>
          </Select>
          {campaigns.length > 0 && (
            <Select value={campaignFilter || "all"} onValueChange={(v) => setCampaignFilter(v === "all" ? "" : (v ?? ""))}>
              <SelectTrigger className="w-[150px] sm:w-[190px] h-8 text-xs border-gray-200">
                <span className="truncate">
                  {!campaignFilter || campaignFilter === ""
                    ? "All Campaigns"
                    : campaigns.find((c) => c.id === campaignFilter)?.name ?? "All Campaigns"}
                </span>
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Campaigns</SelectItem>
                {campaigns.map((c) => (
                  <SelectItem key={c.id} value={c.id}>
                    {c.name}{c._count?.posts != null ? ` (${c._count.posts} post${c._count.posts !== 1 ? "s" : ""})` : ""}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
          <PostComparisonView />
          {isAdmin && (
            <div className="flex items-center gap-1.5">
              {lastSyncedAt && (
                <span className="text-xs text-gray-400" data-testid="last-synced-label">
                  Last synced: {Math.round((Date.now() - lastSyncedAt.getTime()) / 60000)}m ago
                </span>
              )}
              <Button
                variant="outline"
                size="icon"
                onClick={handleRefreshAnalytics}
                disabled={refreshing}
                className="h-7 w-7 border-gray-200 text-gray-700 hover:bg-gray-50"
                title="Refresh Analytics"
              >
                <RefreshCw className={`h-3.5 w-3.5 ${refreshing ? "animate-spin" : ""}`} />
              </Button>
            </div>
          )}
        </div>
      </div>

      {/* Onboarding checklist for new users */}
      <OnboardingChecklist />

      {error && (
        <div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
          {error}
        </div>
      )}

      {/* Empty state when all analytics are zero */}
      {!loading && overview && totals.impressions === 0 && totals.clicks === 0 && totals.likes === 0 && (overview?.totalPosts ?? 0) === 0 && (
        <div className="rounded-lg border border-blue-200 bg-blue-50/50 px-4 py-3 text-sm text-blue-700">
          Connect your Twitter account and publish posts to see analytics.
        </div>
      )}

      {/* Stat cards — wired to real totals */}
      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <MetricCard
          title="Total Posts"
          value={loading ? "..." : formatNumber(overview?.totalPosts ?? 0)}
          icon={FileText}
        />
        <MetricCard
          title="Impressions"
          value={loading ? "..." : formatNumber(totals.impressions)}
          icon={Eye}
        />
        <MetricCard
          title="Avg Engagement Rate"
          value={loading ? "..." : engagementRate}
          icon={TrendingUp}
        />
        <MetricCard
          title="Total Clicks"
          value={loading ? "..." : formatNumber(totals.clicks)}
          icon={MousePointerClick}
        />
      </div>

      {/* By Region breakdown — always visible */}
      {!loading && (
        <Card className="bg-white border border-gray-200 rounded-xl shadow-none">
          <CardHeader>
            <CardTitle className="text-base font-semibold text-gray-900 flex items-center gap-2">
              <Globe className="h-4 w-4 text-gray-500" />
              Performance by Region
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid gap-2 grid-cols-2 md:grid-cols-5">
              {(["GLOBAL", "APAC", "NA", "LATAM", "EMEA"] as Region[]).map((region) => {
                const stats = overview?.byRegion?.[region] || { impressions: 0, likes: 0, retweets: 0, replies: 0, clicks: 0, postCount: 0 };
                const postCount = stats.postCount ?? 0;
                const colors = REGION_BADGE_COLORS[region];
                return (
                  <div key={region} className={`rounded-lg border p-3 ${colors.bg}`} data-testid={`region-card-${region}`}>
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center gap-1.5">
                        <Globe className={`h-3.5 w-3.5 ${colors.text}`} />
                        <span className={`text-sm font-semibold ${colors.text}`}>{region}</span>
                      </div>
                      <span className="text-xs font-medium text-gray-500">{postCount} posts</span>
                    </div>
                    {postCount === 0 && stats.impressions === 0 ? (
                      <p className="text-xs text-gray-400 py-1" data-testid={`region-empty-${region}`}>No data yet</p>
                    ) : (
                      <div className="space-y-1 text-xs">
                        <div className="flex justify-between">
                          <span className="text-gray-500">Impressions</span>
                          <span className="font-medium text-gray-900">{formatNumber(stats.impressions)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-500">Likes</span>
                          <span className="font-medium text-gray-900">{formatNumber(stats.likes)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-500">Shares</span>
                          <span className="font-medium text-gray-900">{formatNumber(stats.retweets)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-500">Comments</span>
                          <span className="font-medium text-gray-900">{formatNumber(stats.replies)}</span>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>
      )}


      {/* Platform Analytics — tabbed per platform */}
      <ErrorBoundary>
      <Card className="bg-white border border-gray-200 rounded-xl shadow-none">
        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <CardTitle className="text-base font-semibold text-gray-900">Platform Analytics</CardTitle>
          <div className="flex items-center gap-2">
            <div className="flex items-center gap-1">
              <Button
                variant={platformTab === "ALL" ? "default" : "outline"}
                size="sm"
                className={platformTab === "ALL" ? "bg-gray-900 hover:bg-gray-800 text-white" : "border-gray-200 text-gray-700 hover:bg-gray-50"}
                onClick={() => setPlatformTab("ALL")}
              >
                All
              </Button>
              {ALL_PLATFORMS.map(({ key, label }) => (
                <Button
                  key={key}
                  variant={platformTab === key ? "default" : "outline"}
                  size="sm"
                  className={platformTab === key ? "bg-gray-900 hover:bg-gray-800 text-white" : "border-gray-200 text-gray-700 hover:bg-gray-50"}
                  onClick={() => setPlatformTab(key)}
                >
                  {label.split(" ")[0]}
                </Button>
              ))}
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="py-6 text-center text-sm text-gray-500">Loading...</div>
          ) : (
            <div className="space-y-4">
              {(platformTab === "ALL" ? ALL_PLATFORMS : ALL_PLATFORMS.filter(p => p.key === platformTab)).map(({ key, label, color }) => {
                const stats = overview?.byNetwork?.[key] ?? { impressions: 0, likes: 0, retweets: 0, replies: 0, clicks: 0 };
                const hasData = stats.impressions > 0 || stats.likes > 0;
                return (
                  <div key={key} className="space-y-2" data-testid={`platform-section-${key}`}>
                    {platformTab === "ALL" && (
                      <h3 className="text-sm font-semibold text-gray-700">{label}</h3>
                    )}
                    {!hasData ? (
                      <div className="rounded-lg border border-dashed border-gray-200 py-4 text-center">
                        <p className="text-sm text-gray-400">No {label} data yet</p>
                        <p className="text-xs text-gray-300 mt-0.5">Connect and publish to see analytics</p>
                      </div>
                    ) : (
                      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                        <div className="flex items-center gap-3 rounded-lg border border-gray-100 p-3">
                          <div className={`rounded-md bg-${color}-50 p-2`}>
                            <Eye className={`h-4 w-4 text-${color}-600`} />
                          </div>
                          <div>
                            <p className="text-xs text-gray-500">Impressions</p>
                            <p className="text-lg font-semibold text-gray-900">{formatNumber(stats.impressions)}</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-3 rounded-lg border border-gray-100 p-3">
                          <div className="rounded-md bg-pink-50 p-2">
                            <Heart className="h-4 w-4 text-pink-600" />
                          </div>
                          <div>
                            <p className="text-xs text-gray-500">Likes</p>
                            <p className="text-lg font-semibold text-gray-900">{formatNumber(stats.likes)}</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-3 rounded-lg border border-gray-100 p-3">
                          <div className="rounded-md bg-green-50 p-2">
                            <Repeat2 className="h-4 w-4 text-green-600" />
                          </div>
                          <div>
                            <p className="text-xs text-gray-500">Shares</p>
                            <p className="text-lg font-semibold text-gray-900">{formatNumber(stats.retweets)}</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-3 rounded-lg border border-gray-100 p-3">
                          <div className="rounded-md bg-purple-50 p-2">
                            <MessageCircle className="h-4 w-4 text-purple-600" />
                          </div>
                          <div>
                            <p className="text-xs text-gray-500">Comments</p>
                            <p className="text-lg font-semibold text-gray-900">{formatNumber(stats.replies)}</p>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Charts — impressions over time + best posts */}
      {!loading && regionFilter !== "all" && totals.impressions === 0 && byDay.every(d => d.impressions === 0) ? (
        <div className="rounded-lg border border-dashed border-gray-200 py-10 text-center" data-testid="region-chart-empty">
          <p className="text-sm text-gray-400">No posts for this region yet</p>
          <p className="text-xs text-gray-300 mt-1">Switch to &ldquo;All Regions&rdquo; to see overall analytics</p>
        </div>
      ) : (
        <div className="grid gap-6 lg:grid-cols-2">
          <ImpressionsAreaChart
            data={byDay}
            title={`Impressions Over Time (${days} days)`}
            loading={loading}
          />
          <BestPostsList posts={bestPosts} loading={loading || bestPostsLoading} platformFilter={bestPostsPlatform} onPlatformFilterChange={setBestPostsPlatform} regionFilter={bestPostsRegion} onRegionFilterChange={setBestPostsRegion} />
        </div>
      )}

      </ErrorBoundary>

      {/* Engagement by network (includes all platforms with 0-data placeholders) */}
      <div className="grid gap-6 lg:grid-cols-2">
        <EngagementBarChart
          data={engagementData}
          title="Engagement by Network"
        />
        <EngagementRateChart
          data={byDay}
          title={`Engagement Rate Over Time (${days} days)`}
          loading={loading}
        />
      </div>
    </div>
  );
}