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

const PromptDisplay = () => {
  const [prompts, setPrompts] = useState([]); // Changed to array to handle multiple prompts
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selectedIndex, setSelectedIndex] = useState(null);
  const [viewMode, setViewMode] = useState('history'); // 'history' or 'drawn'
  const [poolStats, setPoolStats] = useState({
    total: 0,
    target: 20,
    sessions: 0,
    needsRefill: true
  });
  const [drawButtonDisabled, setDrawButtonDisabled] = useState(false);

  useEffect(() => {
    fetchMostRecentPrompt();
    fetchPoolStats();
  }, []);

  const fetchMostRecentPrompt = async () => {
    setLoading(true);
    setError(null);
    setDrawButtonDisabled(false); // Re-enable draw button when returning to history view

    try {
      // Try to fetch from actual API first
      const response = await fetch('/api/v1/prompts/history');
      if (response.ok) {
        const data = await response.json();
        // API returns array directly, not object with 'prompts' key
        if (Array.isArray(data) && data.length > 0) {
          // Get the most recent prompt (first in array, position 0)
          // Show only one prompt from history
          setPrompts([{ text: data[0].text, position: data[0].position }]);
          setViewMode('history');
        } else {
          // No history yet, show placeholder
          setPrompts([{ text: "No recent prompts in history. Draw some prompts to get started!", position: 0 }]);
        }
      } else {
        // API not available, use mock data
        setPrompts([{ text: "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?", position: 0 }]);
      }
    } catch (err) {
      console.error('Error fetching prompt:', err);
      // Fallback to mock data
      setPrompts([{ text: "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?", position: 0 }]);
    } finally {
      setLoading(false);
    }
  };

  const handleDrawPrompts = async () => {
    setDrawButtonDisabled(true); // Disable the button when clicked
    setLoading(true);
    setError(null);
    setSelectedIndex(null);

    try {
      // Draw 3 prompts from pool (Task 4)
      const response = await fetch('/api/v1/prompts/draw?count=3');
      if (response.ok) {
        const data = await response.json();
        // Draw API returns object with 'prompts' array
        if (data.prompts && data.prompts.length > 0) {
          // Show all drawn prompts
          const drawnPrompts = data.prompts.map((text, index) => ({
            text,
            position: index
          }));
          setPrompts(drawnPrompts);
          setViewMode('drawn');
        } else {
          setError('No prompts available in pool. Please fill the pool first.');
        }
      } else {
        setError('Failed to draw prompts. Please try again.');
      }
    } catch (err) {
      setError('Failed to draw prompts. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  const handleAddToHistory = async (index) => {
    if (index < 0 || index >= prompts.length) {
      setError('Invalid prompt index');
      return;
    }

    try {
      const promptText = prompts[index].text;

      // Send the prompt to the API to add to history
      const response = await fetch('/api/v1/prompts/select', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ prompt_text: promptText }),
      });

      if (response.ok) {
        const data = await response.json();
        // Mark as selected and show success
        setSelectedIndex(index);

        // Refresh the page to show the updated history and pool stats
        // The default view shows the most recent prompt from history (position 0)
        fetchMostRecentPrompt();
        fetchPoolStats();
        setDrawButtonDisabled(false); // Re-enable draw button after selection
      } else {
        const errorData = await response.json();
        setError(`Failed to add prompt to history: ${errorData.detail || 'Unknown error'}`);
      }
    } catch (err) {
      setError('Failed to add prompt to history');
    }
  };

  const fetchPoolStats = async () => {
    try {
      const response = await fetch('/api/v1/prompts/stats');
      if (response.ok) {
        const data = await response.json();
        setPoolStats({
          total: data.total_prompts || 0,
          target: data.target_pool_size || 20,
          sessions: data.available_sessions || 0,
          needsRefill: data.needs_refill || true
        });
      }
    } catch (err) {
      console.error('Error fetching pool stats:', err);
    }
  };

  const handleFillPool = async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/v1/prompts/fill-pool', { method: 'POST' });
      if (response.ok) {
        // Refresh the prompt and pool stats - no alert needed, UI will show updated stats
        fetchMostRecentPrompt();
        fetchPoolStats();
      } else {
        setError('Failed to fill prompt pool');
      }
    } catch (err) {
      setError('Failed to fill prompt pool');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="text-center p-8">
        <div className="spinner mx-auto"></div>
        <p className="mt-4">Filling pool...</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="mb-6">
            <div className="grid grid-cols-1 gap-4">
              {prompts.map((promptObj, index) => (
                <div
                  key={index}
                  className={`prompt-card ${viewMode === 'drawn' ? 'cursor-pointer' : ''} ${selectedIndex === index ? 'selected' : ''}`}
                  onClick={viewMode === 'drawn' ? () => setSelectedIndex(index) : undefined}
                >
                  <div className="flex items-start gap-3">
                    <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${selectedIndex === index ? 'bg-green-100 text-green-600' : 'bg-blue-100 text-blue-600'}`}>
                      {selectedIndex === index ? (
                        <i className="fas fa-check"></i>
                      ) : (
                        <span>{index + 1}</span>
                      )}
                    </div>
                    <div className="flex-grow">
                      <p className="prompt-text">{promptObj.text}</p>
                      <div className="prompt-meta">
                        <span>
                          <i className="fas fa-ruler-combined mr-1"></i>
                          {promptObj.text.length} characters
                        </span>
                        <span>
                          {viewMode === 'drawn' ? (
                            selectedIndex === 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 className="text-gray-600">
                              <i className="fas fa-history mr-1"></i>
                              Most recent from history
                            </span>
                          )}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="flex flex-col gap-4">
            <div className="flex gap-2">
              {viewMode === 'drawn' && (
                <button
                  className="btn btn-success w-1/2"
                  onClick={() => handleAddToHistory(selectedIndex !== null ? selectedIndex : 0)}
                  disabled={selectedIndex === null}
                >
                  <i className="fas fa-history"></i>
                  {selectedIndex !== null ? 'Use Selected Prompt' : 'Select a Prompt First'}
                </button>
              )}
              <button
                className={`btn btn-primary ${viewMode === 'drawn' ? 'w-1/2' : 'w-full'}`}
                onClick={handleDrawPrompts}
                disabled={drawButtonDisabled}
              >
                <i className="fas fa-dice"></i>
                {viewMode === 'history' ? 'Draw 3 New Prompts' : 'Draw 3 More Prompts'}
              </button>
            </div>

            <div className="">
              <button className="btn btn-secondary w-full relative overflow-hidden" onClick={handleFillPool}>
                <div className="absolute top-0 left-0 h-full bg-green-500 opacity-20 transition-all duration-300"
                     style={{ width: `${Math.min((poolStats.total / poolStats.target) * 100, 100)}%` }}>
                </div>
                <div className="relative z-10 flex items-center justify-center gap-2">
                  <i className="fas fa-sync"></i>
                  <span>Fill Prompt Pool ({poolStats.total}/{poolStats.target})</span>
                </div>
              </button>
              <div className="text-xs text-gray-600 mt-1 text-center">
                {Math.round((poolStats.total / poolStats.target) * 100)}% full
              </div>
            </div>
          </div>

          <div className="mt-6 text-sm text-gray-600">
            <p>
              <i className="fas fa-info-circle mr-1"></i>
              <strong>
                {viewMode === 'history' ? 'Most Recent Prompt from History' : `${prompts.length} Drawn Prompts`}:
              </strong>
              {viewMode === 'history'
                ? ' This is the latest prompt from your history. Using it helps the AI learn your preferences.'
                : ' Select a prompt to use for journaling. The AI will learn from your selection.'}
            </p>
            <p className="mt-2">
              <i className="fas fa-lightbulb mr-1"></i>
              <strong>Tip:</strong> The prompt pool needs regular refilling. Check the stats panel
              to see how full it is.
            </p>
          </div>
        </>
      ) : (
        <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">There are no prompts in history or pool. Get started by filling the pool.</p>
          <button className="btn btn-primary" onClick={handleFillPool}>
            <i className="fas fa-plus"></i> Fill Prompt Pool
          </button>
        </div>
      )}
    </div>
  );
};

export default PromptDisplay;