"use client";

import * as React from "react";
import type { MarketingMemberBreakdown } from "@/api/rtk/marketing-api";
import {
  formatMarketingCount,
  formatMarketingCurrency,
  formatMarketingPercent,
} from "../marketing-kpi-card";

type MarketingPersonDetailProps = {
  member: MarketingMemberBreakdown;
};

export function MarketingPersonDetail({ member }: MarketingPersonDetailProps) {
  const ae = member.ae?.total;
  const bdr = member.bdr?.total;

  return (
    <div className="rounded-xl border border-white/60 bg-white/45 p-4">
      <h3 className="text-[13px] font-extrabold text-[#1d1d39] font-['Lexend'] mb-3">
        {member.name} — Summary
      </h3>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {ae ? (
          <>
            <Stat label="Spending" value={formatMarketingCurrency(ae.spending)} />
            <Stat label="Leads" value={formatMarketingCount(ae.leads)} />
            <Stat label="Accounts" value={formatMarketingCount(ae.accounts)} />
            <Stat label="ROI" value={formatMarketingPercent(ae.roiPct)} />
          </>
        ) : null}
        {bdr ? (
          <>
            <Stat label="BDR Leads" value={formatMarketingCount(bdr.leads)} />
            <Stat
              label="Connectivity"
              value={formatMarketingPercent(bdr.connectivityPct)}
            />
            <Stat
              label="Meetings Booked"
              value={formatMarketingCount(bdr.discoveryMeetingBooked)}
            />
          </>
        ) : null}
      </div>
    </div>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-lg border border-gray-100 bg-gray-50/80 px-3 py-2">
      <p className="text-[9px] font-bold uppercase tracking-wider text-gray-500">
        {label}
      </p>
      <p className="text-[15px] font-extrabold text-[#1d1d39] tabular-nums mt-1">
        {value}
      </p>
    </div>
  );
}