"use client";

import { useState, useEffect, useCallback } from "react";
import { ImpressionsAreaChart } from "./ImpressionsAreaChart";
import { BestPostsList } from "./BestPostsList";
import { MetricCard } from "./MetricCard";
import { Eye, Heart, MousePointerClick, MessageSquare } from "lucide-react";

interface Campaign {
  id: string;
  name: string;
  createdAt?: string;
}

interface CampaignAnalyticsData {
  campaignId: string;
  campaignName: string;
  totals: { impressions: number; likes: number; retweets: number; replies: number; clicks: number };
  byNetwork: Record<string, { impressions: number; likes: number; retweets: number; replies: number; clicks: number }>;
  byDay: { date: string; impressions: number; likes: number; retweets: number; replies: number }[];
  topPosts: { postId: string; content: string; impressions: number; likes: number; publishedAt: string | null }[];
}

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();
}

export function CampaignAnalytics() {
  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
  const [selectedId, setSelectedId] = useState<string>("");
  const [data, setData] = useState<CampaignAnalyticsData | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetch("/api/v1/campaigns")
      .then((r) => r.json())
      .then((list) => {
        if (Array.isArray(list)) setCampaigns(list);
      })
      .catch(() => {});
  }, []);

  const fetchAnalytics = useCallback(async (campaignId: string) => {
    if (!campaignId) {
      setData(null);
      return;
    }
    setLoading(true);
    try {
      const res = await fetch(`/api/v1/campaigns/${campaignId}/analytics`);
      if (res.ok) {
        setData(await res.json());
      }
    } catch { /* ignore */ } finally {
      setLoading(false);
    }
  }, []);

  const handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const id = e.target.value;
    setSelectedId(id);
    fetchAnalytics(id);
  };

  return (
    <div className="space-y-6 overflow-x-hidden">
      <div className="flex flex-wrap items-center gap-3">
        <label htmlFor="campaign-select" className="text-sm font-medium text-gray-700">
          Campaign
        </label>
        <select
          id="campaign-select"
          value={selectedId}
          onChange={handleSelect}
          className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 min-w-0 max-w-full"
        >
          <option value="">Select a campaign...</option>
          {campaigns.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}{c.createdAt ? ` (${new Date(c.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric" })})` : ""}
            </option>
          ))}
        </select>
      </div>

      {loading && <p className="text-sm text-gray-400">Loading analytics...</p>}

      {data && !loading && (
        <>
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            <MetricCard title="Impressions" value={formatNumber(data.totals.impressions)} icon={Eye} />
            <MetricCard title="Likes" value={formatNumber(data.totals.likes)} icon={Heart} />
            <MetricCard title="Clicks" value={formatNumber(data.totals.clicks)} icon={MousePointerClick} />
            <MetricCard title="Comments" value={formatNumber(data.totals.replies)} icon={MessageSquare} />
          </div>

          <ImpressionsAreaChart data={data.byDay} title={`${data.campaignName} — Impressions`} />

          <BestPostsList posts={data.topPosts} />
        </>
      )}

      {!selectedId && !loading && (
        <p className="text-sm text-gray-400 py-8 text-center">
          Select a campaign to view its performance analytics.
        </p>
      )}
    </div>
  );
}