import React, { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Loading } from "@/components/ui/loading"
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { MoreHorizontal, Edit, Trash2 } from "lucide-react"
import { SubStage } from "@/api/rtk/pipelines-api"
import { useDeleteSubStageMutation } from "@/api/rtk/pipelines-api"
import { SubStageModal } from "./sub-stage-modal"

interface SubStageListProps {
  stageNameId: string
  subStages: SubStage[]
  isLoading: boolean
  onRefresh: () => void
}

export function SubStageList({ stageNameId, subStages, isLoading, onRefresh }: SubStageListProps) {
  const [editingSubStage, setEditingSubStage] = useState<SubStage | undefined>()
  const [isModalOpen, setIsModalOpen] = useState(false)

  const [deleteSubStage, { isLoading: isDeleting }] = useDeleteSubStageMutation()

  const handleEdit = (subStage: SubStage) => {
    setEditingSubStage(subStage)
    setIsModalOpen(true)
  }

  const handleDelete = async (subStage: SubStage) => {
    if (window.confirm(`Are you sure you want to delete "${subStage.name}"?`)) {
      try {
        await deleteSubStage(subStage.id).unwrap()
        onRefresh()
      } catch (error) {
        console.error("Failed to delete sub-stage:", error)
      }
    }
  }

  const handleAddNew = () => {
    setEditingSubStage(undefined)
    setIsModalOpen(true)
  }

  const handleModalClose = () => {
    setIsModalOpen(false)
    setEditingSubStage(undefined)
  }

  const handleModalSuccess = () => {
    onRefresh()
    handleModalClose()
  }


  if (isLoading) {
    return <Loading className="py-8" size="md" />
  }

  return (
    <>
      <div className="space-y-3">
        <div className="flex justify-between items-center">
          <h3 className="text-lg font-semibold">Sub-Stages</h3>
          <Button size="sm" onClick={handleAddNew}>
            Add Sub-Stage
          </Button>
        </div>

        {subStages.length === 0 ? (
          <Card>
            <CardContent className="py-8 text-center">
              <p className="text-muted-foreground">No sub-stages found</p>
              <div className="mt-2">
                <Button variant="outline" size="sm" onClick={handleAddNew}>
                  Add your first sub-stage
                </Button>
              </div>
            </CardContent>
          </Card>
        ) : (
          <div className="space-y-2">
            {subStages.map((subStage, index) => (
              <Card key={subStage.id} className="hover:shadow-md transition-shadow">
                <CardContent className="p-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="flex items-center gap-2">
                        {subStage.color && (
                          <div
                            className="w-3 h-3 rounded-full border"
                            style={{ backgroundColor: subStage.color }}
                          />
                        )}
                        <span className="font-medium">{subStage.name}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        {subStage.prob !== undefined && (
                          <Badge variant="secondary">
                            {subStage.prob}%
                          </Badge>
                        )}
                        <Badge variant="outline" className="text-xs">
                          Order: {subStage.sortOrder}
                        </Badge>
                      </div>
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => handleEdit(subStage)}>
                          <Edit className="mr-2 h-4 w-4" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem 
                          onClick={() => handleDelete(subStage)}
                          className="text-destructive"
                          disabled={isDeleting}
                        >
                          <Trash2 className="mr-2 h-4 w-4" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>

      <SubStageModal
        isOpen={isModalOpen}
        onClose={handleModalClose}
        stageNameId={stageNameId}
        subStage={editingSubStage}
        onSuccess={handleModalSuccess}
      />
    </>
  )
}