"use client";

import * as React from "react";
import { useGetTeamBdrPlannedQuery } from "@/api/rtk/sales-targets-api";
import { canViewSalesTargets } from "@/lib/permissions";
import type { PermissionSource } from "@/lib/permissions";

type Props = {
  permissionSource: PermissionSource;
  teamId: string;
  year: number;
  month: number;
  monthLabel: string;
};

export function BdrMetricsPlannedTargetsBanner({
  permissionSource,
  teamId,
  year,
  month,
  monthLabel,
}: Props) {
  const canView = canViewSalesTargets(permissionSource);
  const skip = !canView || teamId === "all" || !teamId;
  const { data } = useGetTeamBdrPlannedQuery(
    { teamId, year, month },
    { skip },
  );

  if (!canView || skip || !data?.bdrMetrics) return null;

  const m = data.bdrMetrics;
  return (
    <div className="rounded-xl border border-amber-200/60 bg-amber-50/80 dark:bg-amber-950/20 px-4 py-3 text-sm">
      <p className="font-semibold text-amber-900 dark:text-amber-100">
        Planned team targets — {monthLabel} (historical)
      </p>
      <p className="mt-0.5 text-xs text-amber-800/80 dark:text-amber-200/70">
        For record only; KPI ratios below use live pipeline data.
      </p>
      <dl className="mt-2 flex flex-wrap gap-4 text-xs">
        {m.assigned != null && (
          <div>
            <dt className="text-muted-foreground">Assigned</dt>
            <dd className="font-bold tabular-nums">{m.assigned}</dd>
          </div>
        )}
        {m.sql != null && (
          <div>
            <dt className="text-muted-foreground">SQL</dt>
            <dd className="font-bold tabular-nums">{m.sql}</dd>
          </div>
        )}
        {m.meeting_booked != null && (
          <div>
            <dt className="text-muted-foreground">Meeting booked</dt>
            <dd className="font-bold tabular-nums">{m.meeting_booked}</dd>
          </div>
        )}
      </dl>
    </div>
  );
}