"use client";

import { ArrowDown, Users, CheckCircle2, Calendar } from "lucide-react";
import { cn } from "@/lib/utils";

type FunnelProps = {
  assigned: number;
  sql: number;
  meeting: number;
  className?: string;
};

function pct(n: number, d: number): string {
  if (d <= 0) return "—";
  const val = Math.round((n / d) * 1000) / 10;
  return `${val}%`;
}

export function BdrMetricsFunnel({
  assigned,
  sql,
  meeting,
  className,
}: FunnelProps) {
  return (
    <section
      className={cn(
        "relative rounded-3xl border border-white/50 bg-white/40 p-6 backdrop-blur-xl transition-all duration-300",
        className
      )}
      aria-label="BDR conversion funnel"
    >
      {/* Funnel Header */}
      <div className="flex items-center justify-between border-b border-black/[0.05] pb-4 mb-6">
        <div>
          <h3 className="font-['Lexend'] text-sm font-bold text-[#1d1d39]">
            Pipeline Funnel
          </h3>
          <p className="font-['Lexend_Deca'] text-[10px] text-gray-500">
            Conversion stages drop-off visualizer
          </p>
        </div>
        <span className="rounded-full bg-blue-50 border border-blue-100 px-2.5 py-0.5 font-['Lexend_Deca'] text-[10px] font-bold text-blue-600">
          Active Scope
        </span>
      </div>

      {/* Visual Timeline Progression */}
      <div className="relative flex flex-col pl-1">
        
        {/* Stage 1: Assigned */}
        <div className="flex items-center gap-4">
          <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-blue-700 text-white">
            <Users className="size-4.5" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="font-['Lexend'] text-[12px] font-bold uppercase tracking-wider text-[#1d1d39]">
              Assigned Leads
            </p>
            <p className="font-['Lexend_Deca'] text-[11px] text-gray-500 mt-0.5">
              Initial marketing handoff
            </p>
          </div>
          <span className="font-['Lexend'] text-xl font-bold tabular-nums text-blue-700 px-2">
            {assigned}
          </span>
        </div>

        {/* Transition track 1 */}
        <div className="relative h-14 w-9">
          <div className="absolute top-0 bottom-0 left-[17px] w-[2px] bg-blue-100" />
          <div className="absolute left-[32px] top-1/2 -translate-y-1/2 z-10 whitespace-nowrap">
            <span className="inline-flex items-center gap-1 rounded-full bg-blue-50 border border-blue-100 px-2.5 py-0.5 font-['Lexend'] text-[10px] font-bold text-blue-600 animate-pulse">
              <ArrowDown className="size-3 text-blue-500" />
              {pct(sql, assigned)} SQL Conversion
            </span>
          </div>
        </div>

        {/* Stage 2: SQL Qualified */}
        <div className="flex items-center gap-4">
          <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-blue-600 text-white">
            <CheckCircle2 className="size-4.5" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="font-['Lexend'] text-[12px] font-bold uppercase tracking-wider text-[#1d1d39]">
              SQL Qualified
            </p>
            <p className="font-['Lexend_Deca'] text-[11px] text-gray-500 mt-0.5">
              Sales Qualified Leads
            </p>
          </div>
          <span className="font-['Lexend'] text-xl font-bold tabular-nums text-blue-600 px-2">
            {sql}
          </span>
        </div>

        {/* Transition track 2 */}
        <div className="relative h-14 w-9">
          <div className="absolute top-0 bottom-0 left-[17px] w-[2px] bg-blue-100" />
          <div className="absolute left-[32px] top-1/2 -translate-y-1/2 z-10 whitespace-nowrap">
            <span className="inline-flex items-center gap-1 rounded-full bg-blue-50 border border-blue-100 px-2.5 py-0.5 font-['Lexend'] text-[10px] font-bold text-blue-600 animate-pulse">
              <ArrowDown className="size-3 text-blue-500" />
              {pct(meeting, sql)} Booking Rate
            </span>
          </div>
        </div>

        {/* Stage 3: Meetings Booked */}
        <div className="flex items-center gap-4">
          <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-blue-500 text-white">
            <Calendar className="size-4.5" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="font-['Lexend'] text-[12px] font-bold uppercase tracking-wider text-[#1d1d39]">
              Meetings Booked
            </p>
            <p className="font-['Lexend_Deca'] text-[11px] text-gray-500 mt-0.5">
              Discovery meeting scheduled
            </p>
          </div>
          <span className="font-['Lexend'] text-xl font-bold tabular-nums text-blue-500 px-2">
            {meeting}
          </span>
        </div>

      </div>
    </section>
  );
}