"use client";

import { Trophy, Eye, Heart } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

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

interface BestPostsListProps {
  posts: BestPost[];
  loading?: boolean;
  platformFilter?: string;
  onPlatformFilterChange?: (value: string) => void;
  regionFilter?: string;
  onRegionFilterChange?: (value: string) => void;
}

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

const PLATFORM_OPTIONS = [
  { value: "ALL", label: "All Platforms" },
  { value: "TWITTER", label: "Twitter / X" },
  { value: "LINKEDIN", label: "LinkedIn" },
  { value: "FACEBOOK", label: "Facebook" },
  { value: "INSTAGRAM", label: "Instagram" },
] as const;

const REGION_OPTIONS = [
  { value: "ALL", label: "All Regions" },
  { value: "GLOBAL", label: "Global" },
  { value: "APAC", label: "APAC" },
  { value: "NA", label: "NA" },
  { value: "LATAM", label: "LATAM" },
  { value: "EMEA", label: "EMEA" },
] as const;

export function BestPostsList({ posts, loading, platformFilter = "ALL", onPlatformFilterChange, regionFilter = "ALL", onRegionFilterChange }: BestPostsListProps) {
  const filtered = platformFilter === "ALL"
    ? posts
    : posts.filter((p) => p.networks?.includes(platformFilter));

  const PlatformSelector = onPlatformFilterChange ? (
    <Select value={platformFilter} onValueChange={(v) => onPlatformFilterChange?.(v ?? "ALL")}>
      <SelectTrigger className="w-[150px] h-8 text-xs border-gray-200" data-testid="best-posts-platform-filter">
        <SelectValue placeholder="All Platforms" />
      </SelectTrigger>
      <SelectContent>
        {PLATFORM_OPTIONS.map((opt) => (
          <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
        ))}
      </SelectContent>
    </Select>
  ) : null;

  const RegionSelector = onRegionFilterChange ? (
    <Select value={regionFilter} onValueChange={(v) => onRegionFilterChange?.(v ?? "ALL")}>
      <SelectTrigger className="w-[130px] h-8 text-xs border-gray-200" data-testid="best-posts-region-filter">
        <SelectValue placeholder="All Regions" />
      </SelectTrigger>
      <SelectContent>
        {REGION_OPTIONS.map((opt) => (
          <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
        ))}
      </SelectContent>
    </Select>
  ) : null;

  if (loading || filtered.length === 0) {
    return (
      <Card className="bg-white border border-gray-200 rounded-xl shadow-none">
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-base font-semibold text-gray-900">Best Performing Posts</CardTitle>
          <div className="flex items-center gap-2">
            {RegionSelector}
            {PlatformSelector}
          </div>
        </CardHeader>
        <CardContent>
          <div className="py-8 text-center text-sm text-gray-400">
            {loading ? "Loading..." : platformFilter !== "ALL"
              ? `No ${PLATFORM_OPTIONS.find((o) => o.value === platformFilter)?.label ?? platformFilter} posts with performance data yet.`
              : "No post performance data yet. Analytics will appear once your published posts get engagement."}
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="bg-white border border-gray-200 rounded-xl shadow-none">
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="text-base font-semibold text-gray-900">Best Performing Posts</CardTitle>
        <div className="flex items-center gap-2">
          {RegionSelector}
          {PlatformSelector}
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        {filtered.map((post, i) => (
          <div
            key={post.postId}
            className="flex items-start gap-3 rounded-lg border border-gray-100 p-3"
          >
            <div className={`flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold ${
              i === 0
                ? "bg-amber-100 text-amber-700"
                : i === 1
                  ? "bg-gray-100 text-gray-600"
                  : "bg-gray-50 text-gray-500"
            }`}>
              {i === 0 ? <Trophy className="h-3.5 w-3.5" /> : i + 1}
            </div>
            <div className="min-w-0 flex-1">
              <p className="text-sm text-gray-900 truncate">{post.content}</p>
              <div className="flex items-center gap-4 mt-1.5">
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Eye className="h-3 w-3" />
                  {formatNumber(post.impressions)}
                </span>
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Heart className="h-3 w-3" />
                  {formatNumber(post.likes)}
                </span>
                {post.networks && post.networks.length > 0 && (
                  <span className="text-xs text-gray-400">
                    {post.networks.join(", ")}
                  </span>
                )}
                {post.publishedAt && (
                  <span className="text-xs text-gray-400">
                    {new Date(post.publishedAt).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
                  </span>
                )}
              </div>
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  );
}