"use client"

import { useState } from "react"
import { toast } from "sonner"
import { initialLeadStages } from "@/utils/data"
import { LeadStage } from "@/types/leadStage"

interface LeadStagesProgressProps {
  currentStageId?: string
  onStageChange?: (stageId: string) => void
}

export function LeadStagesProgress({ 
  currentStageId: initialStageId = "2", 
  onStageChange 
}: LeadStagesProgressProps) {
  const [currentStageId, setCurrentStageId] = useState(initialStageId)
  const sortedStages = [...initialLeadStages].sort((a, b) => a.position - b.position)
  
  const currentStageIndex = sortedStages.findIndex(stage => stage.id === currentStageId)

  const handleStageClick = (stage: LeadStage) => {
    setCurrentStageId(stage.id)
    toast.success(`Lead stage updated to ${stage.name}`)
    onStageChange?.(stage.id)
  }

  return (
    <div className="mb-6">
      <div className="overflow-x-auto custom-scrollbar-hidden">
        <div className="flex items-center min-w-max gap-[-5px]">
          {sortedStages.map((stage, index) => {
            const isCompleted = index < currentStageIndex
            const isCurrent = index === currentStageIndex
            const isUpcoming = index > currentStageIndex

            return (
              <div
                key={stage.id}
                className="relative flex-shrink-0 group"
              >
                {/* Stage item with arrow shape */}
                <button
                  onClick={() => handleStageClick(stage)}
                  className="relative flex items-center pl-5 pr-7 transition-all duration-200 hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-background"
                  style={{
                    height: '40px',
                    backgroundColor: isCurrent 
                      ? stage.color 
                      : isCompleted 
                        ? stage.color 
                        : 'transparent',
                    clipPath: index === 0 
                      ? 'polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%)'
                      : 'polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%)',
                    borderTopLeftRadius: index === 0 ? '6px' : '0',
                    borderBottomLeftRadius: index === 0 ? '6px' : '0',
                  }}
                >
                  {/* Background for upcoming stages - dark mode friendly */}
                  {isUpcoming && (
                    <div 
                      className="absolute inset-0 bg-gray-200 dark:bg-gray-700"
                      style={{
                        clipPath: index === 0 
                          ? 'polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%)'
                          : 'polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%)',
                        borderTopLeftRadius: index === 0 ? '6px' : '0',
                        borderBottomLeftRadius: index === 0 ? '6px' : '0',
                      }}
                    />
                  )}

                  {/* Content */}
                  <div className="flex items-center gap-2 relative z-10">
                    {/* Stage name */}
                    <span 
                      className={`text-sm font-medium whitespace-nowrap ${
                        isCurrent || isCompleted 
                          ? 'text-white' 
                          : 'text-gray-600 dark:text-gray-300'
                      }`}
                    >
                      {stage.name}
                    </span>
                  </div>
                </button>

                {/* Tooltip on hover */}
                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-20 shadow-lg">
                  {stage.description}
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}