"use client"

import { useState } from "react"
import { GitBranch, Loader2, X } from "lucide-react"

interface BaseBranchDialogProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: (branchName: string) => void
  initialBranch?: string
  isCreatingPR?: boolean
}

export function BaseBranchDialog({
  isOpen,
  onClose,
  onConfirm,
  initialBranch = "main",
  isCreatingPR = false,
}: BaseBranchDialogProps) {
  const [baseBranchInput, setBaseBranchInput] = useState(initialBranch)

  const handleConfirm = () => {
    if (!baseBranchInput.trim()) return
    onConfirm(baseBranchInput.trim())
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleConfirm()
    } else if (e.key === "Escape") {
      onClose()
    }
  }

  if (!isOpen) return null

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
      onClick={onClose}
    >
      <div
        className="bg-popover text-popover-foreground rounded-lg shadow-2xl border border-border max-w-md w-full animate-in fade-in zoom-in duration-200"
        onClick={e => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-5 border-b border-border bg-gradient-to-r from-primary/5 to-primary/10">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-primary/10 rounded-lg">
              <GitBranch className="w-5 h-5 text-primary" />
            </div>
            <div>
              <h2 className="text-lg font-semibold">Configure Base Branch</h2>
              <p className="text-sm text-muted-foreground">
                Enter the branch to create the PR from
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 hover:bg-accent rounded-md transition-colors"
            aria-label="Close dialog"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="p-5">
          <div className="mb-4">
            <label className="block text-sm font-medium mb-2">Base Branch</label>
            <input
              type="text"
              value={baseBranchInput}
              onChange={e => setBaseBranchInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="e.g., main, master, develop"
              className="w-full px-4 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-sm"
              autoFocus
              disabled={isCreatingPR}
            />
            <p className="text-xs text-muted-foreground mt-2">
              The PR will be created from{" "}
              <code className="bg-muted px-1.5 py-0.5 rounded font-mono">
                {baseBranchInput || "main"}
              </code>
            </p>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-3 p-4 border-t border-border bg-muted/30">
          <button
            onClick={onClose}
            disabled={isCreatingPR}
            className="px-4 py-2 bg-muted text-foreground rounded-md hover:bg-accent transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Cancel
          </button>
          <button
            onClick={handleConfirm}
            disabled={!baseBranchInput.trim() || isCreatingPR}
            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium shadow-sm hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
          >
            {isCreatingPR ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                Creating...
              </>
            ) : (
              "Create PR"
            )}
          </button>
        </div>
      </div>
    </div>
  )
}
