import React, { useState, useRef, useEffect } from 'react';
import { Camera, Upload, MessageSquare, Fingerprint, Zap, Info, Settings, Menu } from 'lucide-react';

export default function EnergyDetectionSystem() {
  const [activeTab, setActiveTab] = useState('capture');
  const [energyData, setEnergyData] = useState(null);
  const [messages, setMessages] = useState([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [userInput, setUserInput] = useState('');
  const videoRef = useRef(null);
  const fileInputRef = useRef(null);

  const processEnergyData = async (data) => {
    setIsProcessing(true);
    try {
      const response = await fetch(`https://www.sitebrew.ai/api/EL6e2P/energy_readings`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          document: {
            timestamp: new Date().toISOString(),
            energySignature: data,
            type: 'fingerprint'
          }
        })
      });
      const result = await response.json();
      setEnergyData(result.document);
    } catch (error) {
      console.error('Error processing energy data:', error);
    }
    setIsProcessing(false);
  };

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        processEnergyData(e.target.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const sendMessage = async () => {
    if (!userInput.trim()) return;

    const newMessage = { role: 'user', content: userInput };
    setMessages([...messages, newMessage]);
    setUserInput('');

    try {
      const response = await fetch('https://www.sitebrew.ai/api/genai', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          messages: [...messages, newMessage]
        })
      });
      const data = await response.json();
      setMessages(prev => [...prev, data.message]);
    } catch (error) {
      console.error('Error sending message:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-white">
      <nav className="bg-gray-800 border-b border-gray-700 p-4">
        <div className="flex items-center justify-between">
          <h1 className="text-xl font-bold">Energy Detection System</h1>
          <button className="p-2 hover:bg-gray-700 rounded-lg">
            <Menu size={24} />
          </button>
        </div>
      </nav>

      <div className="container mx-auto p-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-6">
            <div className="bg-gray-800 rounded-lg p-6 shadow-xl">
              <div className="flex space-x-4 mb-6">
                <button
                  onClick={() => setActiveTab('capture')}
                  className={`flex items-center space-x-2 px-4 py-2 rounded-lg ${
                    activeTab === 'capture' ? 'bg-blue-600' : 'bg-gray-700'
                  }`}
                >
                  <Camera size={20} />
                  <span>Capture</span>
                </button>
                <button
                  onClick={() => setActiveTab('upload')}
                  className={`flex items-center space-x-2 px-4 py-2 rounded-lg ${
                    activeTab === 'upload' ? 'bg-blue-600' : 'bg-gray-700'
                  }`}
                >
                  <Upload size={20} />
                  <span>Upload</span>
                </button>
              </div>

              {activeTab === 'capture' ? (
                <div className="relative aspect-video bg-gray-900 rounded-lg overflow-hidden">
                  <video
                    ref={videoRef}
                    className="w-full h-full object-cover"
                    autoPlay
                    playsInline
                    muted
                  />
                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2">
                    <button
                      onClick={() => processEnergyData('live-capture')}
                      className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full flex items-center space-x-2"
                    >
                      <Fingerprint size={20} />
                      <span>Capture Energy</span>
                    </button>
                  </div>
                </div>
              ) : (
                <div className="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center">
                  <input
                    type="file"
                    ref={fileInputRef}
                    onChange={handleFileUpload}
                    className="hidden"
                    accept="image/*,video/*"
                  />
                  <button
                    onClick={() => fileInputRef.current?.click()}
                    className="bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-lg flex items-center space-x-2 mx-auto"
                  >
                    <Upload size={20} />
                    <span>Upload File</span>
                  </button>
                  <p className="mt-2 text-gray-400 text-sm">
                    Support for images and videos
                  </p>
                </div>
              )}
            </div>

            {energyData && (
              <div className="bg-gray-800 rounded-lg p-6 shadow-xl">
                <h2 className="text-xl font-semibold mb-4 flex items-center">
                  <Zap className="mr-2" size={24} />
                  Energy Analysis Results
                </h2>
                <div className="space-y-4">
                  <div className="bg-gray-700 p-4 rounded-lg">
                    <p className="text-sm text-gray-300">Energy Signature</p>
                    <p className="font-mono">{energyData._id}</p>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="bg-gray-700 p-4 rounded-lg">
                      <p className="text-sm text-gray-300">Type</p>
                      <p>{energyData.type}</p>
                    </div>
                    <div className="bg-gray-700 p-4 rounded-lg">
                      <p className="text-sm text-gray-300">Timestamp</p>
                      <p>{new Date(energyData.timestamp).toLocaleString()}</p>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>

          <div className="bg-gray-800 rounded-lg p-6 shadow-xl">
            <h2 className="text-xl font-semibold mb-4 flex items-center">
              <MessageSquare className="mr-2" size={24} />
              AI Assistant
            </h2>
            <div className="h-[400px] overflow-y-auto mb-4 space-y-4">
              {messages.map((message, index) => (
                <div
                  key={index}
                  className={`p-3 rounded-lg ${
                    message.role === 'user' ? 'bg-blue-600 ml-auto' : 'bg-gray-700'
                  } max-w-[80%]`}
                >
                  {message.content}
                </div>
              ))}
            </div>
            <div className="flex space-x-2">
              <input
                type="text"
                value={userInput}
                onChange={(e) => setUserInput(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
                className="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500"
                placeholder="Ask about energy readings..."
              />
              <button
                onClick={sendMessage}
                className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg"
              >
                Send
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}