import React, { useState, useEffect } from 'react';
import { MessageCircle, HelpCircle, Activity, Settings, Trash2 } from 'lucide-react';

// Mock components if you don't have the actual UI components
const Alert = ({ children, variant }) => (
  <div className={`p-4 mb-4 rounded ${variant === 'destructive' ? 'bg-red-500' : 'bg-blue-500'}`}>
    {children}
  </div>
);
const AlertTitle = ({ children }) => <h4 className="font-bold mb-2">{children}</h4>;
const AlertDescription = ({ children }) => <p>{children}</p>;

const Dialog = ({ open, children }) => open ? <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">{children}</div> : null;
const DialogContent = ({ children }) => <div className="bg-white p-6 rounded-lg">{children}</div>;
const DialogHeader = ({ children }) => <div className="mb-4">{children}</div>;
const DialogTitle = ({ children }) => <h2 className="text-xl font-bold">{children}</h2>;
const DialogFooter = ({ children }) => <div className="mt-4 flex justify-end">{children}</div>;

const Input = (props) => <input {...props} className={`border rounded p-2 w-full ${props.className}`} />;
const Button = ({ children, ...props }) => (
  <button {...props} className="bg-blue-500 text-white rounded px-4 py-2">
    {children}
  </button>
);

// Error Boundary Component
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong. Please refresh the page.</h1>;
    }

    return this.props.children;
  }
}

const GeminiChatInterface = () => {
  const [conversations, setConversations] = useState([{ id: Date.now(), messages: [] }]);
  const [currentMessage, setCurrentMessage] = useState('');
  const [apiKey, setApiKey] = useState('');
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    try {
      const savedApiKey = localStorage.getItem('geminiApiKey');
      if (savedApiKey) {
        setApiKey(savedApiKey);
      }
    } catch (err) {
      console.error("Error accessing localStorage:", err);
    }
  }, []);

  const handleNewChat = () => {
    setConversations(prev => [...prev, { id: Date.now(), messages: [] }]);
  };

  const handleDeleteChat = (id) => {
    setConversations(prev => prev.filter(conv => conv.id !== id));
  };

  const handleSendMessage = async () => {
    if (!apiKey) {
      setError('Please set up your API key in Settings first.');
      return;
    }

    if (currentMessage.trim()) {
      setIsLoading(true);
      setError('');
      setConversations(prev => {
        const updated = [...prev];
        const current = updated[updated.length - 1];
        current.messages.push({
          text: currentMessage,
          sender: 'user'
        });
        return updated;
      });
      setCurrentMessage('');

      try {
        const response = await fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-1.0-pro:generateContent', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
          },
          body: JSON.stringify({
            contents: [{
              parts: [{
                text: currentMessage
              }]
            }]
          })
        });

        if (!response.ok) {
          throw new Error(`Error in Gemini API response. Status: ${response.status}`);
        }

        const data = await response.json();

        if (!data.candidates || data.candidates.length === 0 || !data.candidates[0].content || !data.candidates[0].content.parts || data.candidates[0].content.parts.length === 0) {
          throw new Error('Unexpected response structure from Gemini API');
        }

        const aiResponse = data.candidates[0].content.parts[0].text;

        setConversations(prev => {
          const updated = [...prev];
          const current = updated[updated.length - 1];
          current.messages.push({
            text: aiResponse,
            sender: 'ai'
          });
          return updated;
        });
      } catch (error) {
        console.error('Error:', error);
        setError(`Error communicating with Gemini API: ${error.message}`);
      } finally {
        setIsLoading(false);
      }
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  return (
    <ErrorBoundary>
      <div className="flex h-screen bg-gray-900 text-white">
        {/* Sidebar */}
        <div className="w-64 bg-gray-800 p-4">
          <button 
            className="w-full bg-gray-700 text-white rounded p-2 mb-4 flex items-center justify-center"
            onClick={handleNewChat}
          >
            <MessageCircle className="mr-2" />
            New Chat
          </button>
          <div className="mb-4">
            <h3 className="text-sm font-semibold mb-2">Recent</h3>
            {conversations.map((conv) => (
              <div key={conv.id} className="flex items-center justify-between py-2 px-3 hover:bg-gray-700 rounded cursor-pointer">
                <span>Conversation {conv.id}</span>
                <Trash2 
                  className="h-4 w-4 text-gray-400 hover:text-red-500" 
                  onClick={() => handleDeleteChat(conv.id)}
                />
              </div>
            ))}
          </div>
          <div className="mt-auto">
            <div className="flex items-center py-2 px-3 hover:bg-gray-700 rounded cursor-pointer">
              <HelpCircle className="mr-2" /> Help
            </div>
            <div className="flex items-center py-2 px-3 hover:bg-gray-700 rounded cursor-pointer">
              <Activity className="mr-2" /> Activity
            </div>
            <div 
              className="flex items-center py-2 px-3 hover:bg-gray-700 rounded cursor-pointer"
              onClick={() => setIsSettingsOpen(true)}
            >
              <Settings className="mr-2" /> Settings
            </div>
          </div>
        </div>

        {/* Main content */}
        <div className="flex-1 flex flex-col">
          {/* Top bar */}
          <div className="bg-gray-800 p-4 flex justify-between items-center">
            <div className="relative">
              <select className="bg-gray-800 border border-gray-700 rounded p-2">
                <option>Gemini</option>
              </select>
            </div>
            <div className="w-8 h-8 bg-red-500 rounded-full"></div>
          </div>

          {/* Chat area */}
          <div className="flex-1 overflow-y-auto p-4">
            {error && (
              <Alert variant="destructive">
                <AlertTitle>Error</AlertTitle>
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}
            {conversations[conversations.length - 1].messages.map((msg, index) => (
              <div key={index} className={`mb-4 ${msg.sender === 'user' ? 'text-right' : 'text-left'}`}>
                <div className={`inline-block p-2 rounded ${msg.sender === 'user' ? 'bg-blue-500' : 'bg-gray-700'}`}>
                  {msg.text}
                </div>
              </div>
            ))}
            {isLoading && <div className="text-center">Loading...</div>}
          </div>

          {/* Input area */}
          <div className="p-4 border-t border-gray-700">
            <div className="flex">
              <input
                type="text"
                className="flex-1 bg-gray-800 rounded-l p-2"
                placeholder="Type a message here"
                value={currentMessage}
                onChange={(e) => setCurrentMessage(e.target.value)}
                onKeyPress={handleKeyPress}
              />
              <button 
                className="bg-blue-500 text-white rounded-r px-4"
                onClick={handleSendMessage}
                disabled={isLoading}
              >
                Send
              </button>
            </div>
          </div>
        </div>

        {/* Settings Dialog */}
        <Dialog open={isSettingsOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Settings</DialogTitle>
            </DialogHeader>
            <div className="py-4">
              <label htmlFor="api-key" className="block text-sm font-medium text-gray-700">
                Gemini API Key
              </label>
              <Input
                id="api-key"
                type="password"
                value={apiKey}
                onChange={(e) => {
                  setApiKey(e.target.value);
                  try {
                    localStorage.setItem('geminiApiKey', e.target.value);
                  } catch (err) {
                    console.error("Error saving to localStorage:", err);
                  }
                }}
                placeholder="Enter your Gemini API key"
                className="mt-1"
              />
            </div>
            <DialogFooter>
              <Button onClick={() => setIsSettingsOpen(false)}>Save Changes</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </ErrorBoundary>
  );
};

export default GeminiChatInterface;