import { Modal } from '@/components/common/Modal'
import { Bookmark, Play, BookmarkPlus } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { Step } from '@/types/step'
import type { CustomStepDraft } from '@/components/step-library/CustomStepModal'

interface PostStepActionModalProps {
  isOpen: boolean
  onClose: () => void
  step: Step | CustomStepDraft
  onSaveForLater: () => void
  onUseNow: () => void
  onBoth: () => void
  isFromLibrary: boolean
  isSaving?: boolean
}

export function PostStepActionModal({
  isOpen,
  onClose,
  step,
  onSaveForLater,
  onUseNow,
  onBoth,
  isFromLibrary,
  isSaving = false
}: PostStepActionModalProps) {
  return (
    <Modal isOpen={isOpen} onClose={onClose} title="What would you like to do?">
      <div className="space-y-3">
        <p className="mb-4 text-sm text-muted-foreground">
          You've created: <strong className="text-foreground">{step.title}</strong>
        </p>

        {/* Save for Later - Only show if not already from library */}
        {!isFromLibrary && (
          <button
            onClick={onSaveForLater}
            disabled={isSaving}
            className={cn(
              'w-full rounded-lg border border-border p-4 text-left transition-colors',
              'hover:border-primary hover:bg-accent',
              'disabled:cursor-not-allowed disabled:opacity-50'
            )}
          >
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/10">
                <Bookmark className="h-5 w-5 text-blue-500" />
              </div>
              <div>
                <p className="font-medium text-foreground">Save for Later</p>
                <p className="text-sm text-muted-foreground">
                  Add to your step library for future use
                </p>
              </div>
            </div>
          </button>
        )}

        {/* Use Now */}
        <button
          onClick={onUseNow}
          disabled={isSaving}
          className={cn(
            'w-full rounded-lg border border-border p-4 text-left transition-colors',
            'hover:border-border hover:bg-accent',
            'disabled:cursor-not-allowed disabled:opacity-50'
          )}
        >
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-500/10">
              <Play className="h-5 w-5 text-green-500" />
            </div>
            <div>
              <p className="font-medium">Use Now</p>
              <p className="text-sm text-muted-foreground">
                Insert into this session and continue troubleshooting
              </p>
            </div>
          </div>
        </button>

        {/* Both - Only show if not already from library */}
        {!isFromLibrary && (
          <button
            onClick={onBoth}
            disabled={isSaving}
            className={cn(
              'w-full rounded-lg border border-border p-4 text-left transition-colors',
              'hover:border-primary hover:bg-accent',
              'disabled:cursor-not-allowed disabled:opacity-50'
            )}
          >
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-500/10">
                <BookmarkPlus className="h-5 w-5 text-purple-500" />
              </div>
              <div>
                <p className="font-medium text-foreground">Do Both</p>
                <p className="text-sm text-muted-foreground">
                  Save to library AND use in this session
                </p>
              </div>
            </div>
          </button>
        )}

        {isSaving && (
          <p className="text-center text-sm text-muted-foreground">Saving...</p>
        )}
      </div>
    </Modal>
  )
}
