import React from 'react'
import { HelpCircle, Settings } from 'lucide-react'

const ConditionalLogicToggle = ({
  selectedField,
  onOpenLogicDrawer,
}) => {
  if (!selectedField || selectedField.type === 'hidden') return null

  const isEnabled = Boolean(
    selectedField.enableConditionalLogic || selectedField.conditionalLogic?.enabled
  )

  return (
    <div
      data-testid="conditional-logic-card"
      onClick={() => onOpenLogicDrawer && onOpenLogicDrawer()}
      className="mb-4 flex items-center justify-between cursor-pointer bg-slate-50 hover:bg-slate-100/80 transition-colors duration-200 rounded-xl p-3 border border-slate-200/90 shadow-2xs"
    >
      <div
        className="font-bold text-xs text-slate-700 cursor-pointer flex items-center gap-1.5 select-none"
        onClick={() => onOpenLogicDrawer && onOpenLogicDrawer()}
        title="Configure conditional logic rules"
      >
        <span>Conditional Logic</span>
        <span className="text-slate-400 hover:text-slate-600 cursor-pointer" title="Show or hide fields based on user answers">
          <HelpCircle className="w-3.5 h-3.5" />
        </span>
      </div>
      <div className="flex items-center gap-2">
        <label className="relative inline-flex items-center cursor-pointer select-none">
          <input
            type="checkbox"
            checked={isEnabled}
            onChange={() => onOpenLogicDrawer && onOpenLogicDrawer()}
            className="sr-only peer"
            data-testid="conditional-logic-switch"
          />
          <div className="w-8 h-[18px] bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-emerald-600"></div>
        </label>
        <button
          type="button"
          onClick={() => onOpenLogicDrawer && onOpenLogicDrawer()}
          className="text-slate-400 hover:text-gray-900 p-1 rounded-lg hover:bg-white transition-colors cursor-pointer"
          title="Configure rules"
          data-testid="conditional-logic-gear"
        >
          <Settings className="w-4 h-4" />
        </button>
      </div>
    </div>
  )
}

export default ConditionalLogicToggle