"use client";

import * as React from "react";

interface SuggestedQuestion {
  id: string;
  text: string;
  priority: number;
}

const DEFAULT_QUESTIONS: SuggestedQuestion[] = [
  { id: "1", text: "How can I get started?", priority: 1 },
  { id: "2", text: "What features are available?", priority: 2 },
  { id: "3", text: "How do I contact support?", priority: 3 },
  { id: "4", text: "Tell me about pricing", priority: 4 },
  { id: "5", text: "Can you help me with setup?", priority: 5 },
];

interface SuggestedQuestionsProps {
  onQuestionSelect: (question: string) => void;
  context?: string;
  maxQuestions?: number;
  className?: string;
  variant?: "chips" | "list" | "grid";
  disabled?: boolean;
}

export function SuggestedQuestions({
  onQuestionSelect,
  context = "welcome",
  maxQuestions = 3,
  className = "",
  variant = "chips",
  disabled = false,
}: SuggestedQuestionsProps) {
  const [isVisible, setIsVisible] = React.useState(false);

  // Animation effect
  React.useEffect(() => {
    const timer = setTimeout(() => setIsVisible(true), 100);
    return () => clearTimeout(timer);
  }, []);

  // Get suggested questions
  const suggestedQuestions = React.useMemo(() => {
    return DEFAULT_QUESTIONS.slice(0, maxQuestions);
  }, [maxQuestions]);

  const handleQuestionClick = React.useCallback(
    (question: SuggestedQuestion) => {
      if (disabled) return;
      onQuestionSelect(question.text);
    },
    [onQuestionSelect, disabled]
  );

  const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent, question: SuggestedQuestion) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        handleQuestionClick(question);
      }
    },
    [handleQuestionClick]
  );

  if (variant === "chips") {
    return (
      <div className={`flex flex-wrap gap-2 ${className}`}>
        {suggestedQuestions.map((question, index) => (
          <button
            key={question.id}
            onClick={() => handleQuestionClick(question)}
            onKeyDown={(e) => handleKeyDown(e, question)}
            disabled={disabled}
            className={`
              px-4 py-2 
              bg-blue-50 hover:bg-blue-100 
              text-blue-700 hover:text-blue-800
              border border-blue-200 hover:border-blue-300
              rounded-full 
              text-sm 
              font-medium
              transition-all 
              duration-200 
              focus:outline-none 
              focus:ring-2 
              focus:ring-blue-500 
              focus:ring-offset-2
              disabled:opacity-50 
              disabled:cursor-not-allowed
              transform 
              hover:scale-105 
              active:scale-95
              ${isVisible ? "opacity-100" : "opacity-0"}
            `}
          >
            {question.text}
          </button>
        ))}
      </div>
    );
  }

  if (variant === "list") {
    return (
      <div className={`space-y-2 ${className}`}>
        {suggestedQuestions.map((question, index) => (
          <button
            key={question.id}
            onClick={() => handleQuestionClick(question)}
            onKeyDown={(e) => handleKeyDown(e, question)}
            disabled={disabled}
            className={`
              w-full 
              text-left 
              p-3 
              bg-gray-50 hover:bg-gray-100
              border border-gray-200 hover:border-gray-300
              rounded-lg 
              text-sm 
              transition-all 
              duration-200
              focus:outline-none 
              focus:ring-2 
              focus:ring-blue-500 
              focus:ring-offset-2
              disabled:opacity-50 
              disabled:cursor-not-allowed
              ${isVisible ? "opacity-100" : "opacity-0"}
            `}
          >
            <div className="flex items-center space-x-2">
              <span className="text-blue-500">❓</span>
              <span className="text-gray-700">{question.text}</span>
            </div>
          </button>
        ))}
      </div>
    );
  }

  // Grid variant
  return (
    <div className={`grid grid-cols-1 sm:grid-cols-2 gap-3 ${className}`}>
      {suggestedQuestions.map((question, index) => (
        <button
          key={question.id}
          onClick={() => handleQuestionClick(question)}
          onKeyDown={(e) => handleKeyDown(e, question)}
          disabled={disabled}
          className={`
            p-4 
            bg-white hover:bg-gray-50
            border border-gray-200 hover:border-blue-300
            rounded-xl 
            shadow-sm hover:shadow-md
            text-left 
            text-sm 
            transition-all 
            duration-200
            focus:outline-none 
            focus:ring-2 
            focus:ring-blue-500 
            focus:ring-offset-2
            disabled:opacity-50 
            disabled:cursor-not-allowed
            ${isVisible ? "opacity-100" : "opacity-0"}
          `}
        >
          <div className="flex items-center space-x-2">
            <span className="text-blue-500 text-lg">💭</span>
            <span className="text-gray-700 font-medium">{question.text}</span>
          </div>
        </button>
      ))}
    </div>
  );
}

export default SuggestedQuestions;