import React, { ReactNode, useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { MdDragIndicator, MdDelete, MdEdit, MdEditOff } from 'react-icons/md';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import clsx from 'clsx';

interface Props {
  id: string;
  index: number;
  deleteQuestion: (index: any) => void;
  onFocus?: () => void;
  extra?: ReactNode;
  children: ReactNode;
  variant?: 'default' | 'writeBlanks' | 'del-up';
  title?: string;
  onQuestionChange?: (value: string) => void;
  questionText?: string;
}

const SortableQuestion: React.FC<Props> = ({ 
  id, 
  index, 
  deleteQuestion, 
  children, 
  extra, 
  onFocus,
  variant = 'default',
  questionText = "",
  onQuestionChange
}) => {
  const [isEditingQuestion, setIsEditingQuestion] = useState(false);
  
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  if (variant === 'writeBlanks') {
    return (
      <Card ref={setNodeRef} style={style} onFocus={onFocus}>
        <CardContent className="p-4">
          <div className="flex items-stretch gap-4">
            <div className='flex flex-col flex-none w-12'>
              <div className="flex-none">
                <span className="text-sm font-medium text-gray-500">ID: {id}</span>
              </div>
              <div 
                className='flex-1 flex items-center justify-center group'
                {...attributes}
                {...listeners}
              >
                <div className="p-2 rounded-lg group-hover:bg-gray-100 cursor-grab active:cursor-grabbing transition-colors">
                  <MdDragIndicator size={24} className="text-gray-400" />
                </div>
              </div>
            </div>
            
            <div className="flex-1">
              <div className="flex items-start justify-between gap-4">
                {isEditingQuestion ? (
                  <input
                    type="text"
                    value={questionText}
                    onChange={(e) => onQuestionChange?.(e.target.value)}
                    className="flex-1 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
                    autoFocus
                    onBlur={() => setIsEditingQuestion(false)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        setIsEditingQuestion(false);
                      }
                    }}
                  />
                ) : (
                  <span className="flex-1 font-bold text-gray-800">{questionText}</span>
                )}
                <div className="flex items-center gap-2 flex-none">
                  <button
                    onClick={() => setIsEditingQuestion(!isEditingQuestion)}
                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                  >
                    {isEditingQuestion ? 
                      <MdEditOff size={20} className="text-gray-500" /> : 
                      <MdEdit size={20} className="text-gray-500" />
                    }
                  </button>
                  <button
                    onClick={() => deleteQuestion(index)}
                    className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                    title="Delete question"
                  >
                    <MdDelete size={20} />
                  </button>
                </div>
              </div>
              <div className="mt-4 space-y-3">
                {children}
              </div>
            </div>
          </div>
          {extra && <div className="mt-4">{extra}</div>}
        </CardContent>
      </Card>
    );
  }

  return (
    <Card ref={setNodeRef} style={style} onFocus={onFocus}>
      <CardContent className="p-4">
        <div className="flex items-stretch gap-4">
          <div className='flex flex-col flex-none w-12'>
            <div className="flex-none">
              <span className="text-sm font-medium text-gray-500">ID: {id}</span>
            </div>
            <div className='flex-1 flex items-center justify-center group'>
              <div
                {...attributes}
                {...listeners}
                className="p-2 rounded-lg group-hover:bg-gray-100 cursor-grab active:cursor-grabbing transition-colors"
              >
                <MdDragIndicator size={24} className="text-gray-400" />
              </div>
            </div>
          </div>
          <div className="flex-1 space-y-3">
            {children}
          </div>
          <div className={clsx('flex flex-col gap-4', variant !== "del-up" ? "justify-center": "mt-1.5")}>
            <button
              onClick={() => deleteQuestion(index)}
              className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
              title="Delete question"
            >
              <MdDelete size={variant !== "del-up" ? 20 : 24} />
            </button>
            {extra}
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default SortableQuestion;
