import React, { useState, useEffect } from 'react';

const PromptDisplay = () => {
  const [prompts, setPrompts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selectedPrompt, setSelectedPrompt] = useState(null);

  // Mock data for demonstration
  const mockPrompts = [
    "Write about a time when you felt completely at peace with yourself and the world around you. What were the circumstances that led to this feeling, and how did it change your perspective on life?",
    "Imagine you could have a conversation with your future self 10 years from now. What questions would you ask, and what advice do you think your future self would give you?",
    "Describe a place from your childhood that holds special meaning to you. What made this place so significant, and how does remembering it make you feel now?",
    "Write about a skill or hobby you've always wanted to learn but never had the chance to pursue. What has held you back, and what would be the first step to starting?",
    "Reflect on a mistake you made that ultimately led to personal growth. What did you learn from the experience, and how has it shaped who you are today?",
    "Imagine you wake up tomorrow with the ability to understand and speak every language in the world. How would this change your life, and what would you do with this newfound ability?"
  ];

  useEffect(() => {
    // Simulate API call
    setTimeout(() => {
      setPrompts(mockPrompts);
      setLoading(false);
    }, 1000);
  }, []);

  const handleSelectPrompt = (index) => {
    setSelectedPrompt(index);
  };

  const handleDrawPrompts = async () => {
    setLoading(true);
    setError(null);

    try {
      // TODO: Replace with actual API call
      // const response = await fetch('/api/v1/prompts/draw');
      // const data = await response.json();
      // setPrompts(data.prompts);

      // For now, use mock data
      setTimeout(() => {
        setPrompts(mockPrompts);
        setSelectedPrompt(null);
        setLoading(false);
      }, 1000);
    } catch (err) {
      setError('Failed to draw prompts. Please try again.');
      setLoading(false);
    }
  };

  const handleAddToHistory = async () => {
    if (selectedPrompt === null) {
      setError('Please select a prompt first');
      return;
    }

    try {
      // TODO: Replace with actual API call
      // await fetch(`/api/v1/prompts/select/${selectedPrompt}`, { method: 'POST' });

      // For now, just show success message
      alert(`Prompt ${selectedPrompt + 1} added to history!`);
      setSelectedPrompt(null);
    } catch (err) {
      setError('Failed to add prompt to history');
    }
  };

  if (loading) {
    return (
      <div className="text-center p-8">
        <div className="spinner mx-auto"></div>
        <p className="mt-4">Loading prompts...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="alert alert-error">
        <i className="fas fa-exclamation-circle mr-2"></i>
        {error}
      </div>
    );
  }

  return (
    <div>
      {prompts.length === 0 ? (
        <div className="text-center p-8">
          <i className="fas fa-inbox fa-3x mb-4" style={{ color: 'var(--gray-color)' }}></i>
          <h3>No Prompts Available</h3>
          <p className="mb-4">The prompt pool is empty. Please fill the pool to get started.</p>
          <button className="btn btn-primary" onClick={handleDrawPrompts}>
            <i className="fas fa-plus"></i> Fill Pool First
          </button>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 gap-4">
            {prompts.map((prompt, index) => (
              <div
                key={index}
                className={`prompt-card cursor-pointer ${selectedPrompt === index ? 'selected' : ''}`}
                onClick={() => handleSelectPrompt(index)}
              >
                <div className="flex items-start gap-3">
                  <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${selectedPrompt === index ? 'bg-green-100 text-green-600' : 'bg-blue-100 text-blue-600'}`}>
                    {selectedPrompt === index ? (
                      <i className="fas fa-check"></i>
                    ) : (
                      <span>{index + 1}</span>
                    )}
                  </div>
                  <div className="flex-grow">
                    <p className="prompt-text">{prompt}</p>
                    <div className="prompt-meta">
                      <span>
                        <i className="fas fa-ruler-combined mr-1"></i>
                        {prompt.length} characters
                      </span>
                      <span>
                        {selectedPrompt === index ? (
                          <span className="text-green-600">
                            <i className="fas fa-check-circle mr-1"></i>
                            Selected
                          </span>
                        ) : (
                          <span className="text-gray-500">
                            Click to select
                          </span>
                        )}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="flex justify-between items-center mt-6">
            <div>
              {selectedPrompt !== null && (
                <button className="btn btn-success" onClick={handleAddToHistory}>
                  <i className="fas fa-history"></i> Add Prompt #{selectedPrompt + 1} to History
                </button>
              )}
            </div>
            <div className="flex gap-2">
              <button className="btn btn-secondary" onClick={handleDrawPrompts}>
                <i className="fas fa-redo"></i> Draw New Set
              </button>
              <button className="btn btn-primary" onClick={handleDrawPrompts}>
                <i className="fas fa-dice"></i> Draw 6 More
              </button>
            </div>
          </div>

          <div className="mt-4 text-sm text-gray-600">
            <p>
              <i className="fas fa-info-circle mr-1"></i>
              Select a prompt by clicking on it, then add it to your history. The AI will use your history to generate more relevant prompts in the future.
            </p>
          </div>
        </>
      )}
    </div>
  );
};

export default PromptDisplay;