'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {SALES_FUNNEL_STAGES} from '../../services/commerceService';

export function SalesFunnel() {
  const maxCount = SALES_FUNNEL_STAGES[0]?.count || 1;

  return (
    <div className="rounded-xl border border-border bg-card p-5 space-y-4 shadow-sm overflow-hidden">
      <div className="flex items-center justify-between">
        <div>
          <Heading level={4} className="text-base font-bold text-white">
            Sales & Conversion Funnel
          </Heading>
          <Text size="sm" color="secondary">
            Customer journey from initial store visit to completed transaction
          </Text>
        </div>
        <div className="text-right">
          <span className="text-sm font-bold text-emerald-400">23.8% Overall Conversion</span>
          <div className="text-xs text-zinc-400 font-medium">2,951 of 12,400 converted</div>
        </div>
      </div>

      {/* Funnel Visual Stack */}
      <div className="space-y-2.5 pt-2">
        {SALES_FUNNEL_STAGES.map((stage, idx) => {
          const widthPercent = Math.max(25, (stage.count / maxCount) * 100);
          return (
            <div key={stage.stage} className="space-y-1">
              <div className="flex items-center justify-between text-xs font-semibold">
                <span className="text-white font-bold flex items-center gap-2">
                  <span className="size-5 rounded-full bg-zinc-800 border border-zinc-700 flex items-center justify-center text-[10px] text-zinc-300">
                    {idx + 1}
                  </span>
                  {stage.stage}
                </span>
                <span className="text-zinc-300 tabular-nums">
                  {stage.count.toLocaleString()} ({stage.conversionRate})
                </span>
              </div>

              <div className="w-full bg-zinc-900/80 rounded-lg p-1.5 border border-zinc-800">
                <div
                  className="h-8 rounded-md transition-all duration-500 flex items-center justify-between px-3 text-xs font-bold text-white shadow-sm"
                  style={{
                    width: `${widthPercent}%`,
                    backgroundColor: stage.color,
                  }}
                >
                  <span className="truncate">{stage.label}</span>
                  <span className="tabular-nums">{stage.count.toLocaleString()}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
