import { useQuery } from "@tanstack/react-query";
import { analyticsRawFetch } from "../../../hooks/useChannelAnalytics";
import { formatMetricValue } from "../platformMetrics";

interface Props {
  channelId: string;
}

export default function PinterestAnalytics({ channelId }: Props) {
  const { data: boardsData, isLoading } = useQuery({
    queryKey: ["pinterest-boards", channelId],
    queryFn: () => analyticsRawFetch(`analytics/pinterest/${channelId}/boards`),
    staleTime: 600_000,
  });

  const boards = Array.isArray(boardsData) ? boardsData : (boardsData?.data || []);

  if (isLoading) {
    return (
      <div className="vr-flex vr-items-center vr-justify-center vr-gap-2 vr-py-6 vr-text-gray-400 vr-text-xs">
        <div className="vr-w-4 vr-h-4 vr-border-2 vr-border-gray-200 vr-border-t-primary-600 vr-rounded-full vr-animate-spin" />
        Loading boards...
      </div>
    );
  }

  if (!Array.isArray(boards) || boards.length === 0) return null;

  return (
    <div>
      <h4 className="vr-text-xs vr-font-semibold vr-text-gray-700 vr-mb-3">
        Board Performance
        <span className="vr-text-gray-400 vr-font-normal vr-ml-1">({boards.length})</span>
      </h4>
      <div className="vr-overflow-x-auto vr-rounded-lg vr-border vr-border-gray-200">
        <table className="vr-w-full vr-text-xs" style={{ borderCollapse: "collapse" }}>
          <thead>
            <tr className="vr-bg-gray-50 vr-border-b vr-border-gray-200">
              <th className="vr-text-left vr-px-3 vr-py-2.5 vr-font-semibold vr-text-gray-500">Board</th>
              <th className="vr-text-right vr-px-3 vr-py-2.5 vr-font-semibold vr-text-gray-500">Pins</th>
              <th className="vr-text-right vr-px-3 vr-py-2.5 vr-font-semibold vr-text-gray-500">Followers</th>
            </tr>
          </thead>
          <tbody className="vr-divide-y vr-divide-gray-100">
            {boards.map((board: any, i: number) => (
              <tr key={board.id || i} className="hover:vr-bg-gray-50 vr-transition-colors">
                <td className="vr-px-3 vr-py-2.5 vr-text-gray-900 vr-font-medium">{board.name || "Untitled"}</td>
                <td className="vr-px-3 vr-py-2.5 vr-text-right vr-text-gray-700">{formatMetricValue(board.pinCount || 0)}</td>
                <td className="vr-px-3 vr-py-2.5 vr-text-right vr-text-gray-700">{formatMetricValue(board.followerCount || 0)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}