import { useState, useEffect } from 'react';
import { Brain, Activity, User, MessageSquare, Layers, Atom, AlertCircle } from 'lucide-react';

export default function ConsciousnessTransferApp() {
  const [transferProgress, setTransferProgress] = useState(0);
  const [status, setStatus] = useState('idle');
  const [messages, setMessages] = useState([]);
  const [bodyStatus, setBodyStatus] = useState({
    materialization: 0,
    neural: 0,
    consciousness: 0,
    stability: 0
  });
  const [userInput, setUserInput] = useState('');

  useEffect(() => {
    if (status === 'transferring') {
      const interval = setInterval(() => {
        setTransferProgress(prev => {
          if (prev >= 100) {
            clearInterval(interval);
            setStatus('complete');
            return 100;
          }
          return prev + 0.1;
        });
      }, 100);
      return () => clearInterval(interval);
    }
  }, [status]);

  const startTransfer = async () => {
    setStatus('transferring');
    // Simulate body materialization
    for (let i = 0; i <= 100; i += 20) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      setBodyStatus(prev => ({
        ...prev,
        materialization: i,
        neural: Math.min(i - 20, 100),
        consciousness: Math.max(0, i - 40)
      }));
    }
  };

  const handleMessageSubmit = async (e) => {
    e.preventDefault();
    if (!userInput.trim()) return;

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

    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:', error);
    }

    setUserInput('');
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white p-4">
      <div className="max-w-4xl mx-auto">
        <header className="flex items-center justify-between mb-8">
          <h1 className="text-2xl font-bold text-blue-400">Consciousness Transfer Interface</h1>
          <div className="flex items-center space-x-2">
            <Activity className="w-5 h-5 text-green-400" />
            <span className="text-green-400">System Online</span>
          </div>
        </header>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-gray-800 rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4 flex items-center">
              <Brain className="w-5 h-5 mr-2 text-purple-400" />
              Transfer Status
            </h2>
            <div className="space-y-4">
              <div>
                <div className="flex justify-between mb-1">
                  <span>Transfer Progress</span>
                  <span>{transferProgress.toFixed(1)}%</span>
                </div>
                <div className="w-full bg-gray-700 rounded-full h-2">
                  <div
                    className="bg-purple-500 rounded-full h-2 transition-all duration-300"
                    style={{ width: `${transferProgress}%` }}
                  ></div>
                </div>
              </div>

              {Object.entries(bodyStatus).map(([key, value]) => (
                <div key={key}>
                  <div className="flex justify-between mb-1">
                    <span className="capitalize">{key}</span>
                    <span>{value}%</span>
                  </div>
                  <div className="w-full bg-gray-700 rounded-full h-2">
                    <div
                      className="bg-blue-500 rounded-full h-2 transition-all duration-300"
                      style={{ width: `${value}%` }}
                    ></div>
                  </div>
                </div>
              ))}
            </div>

            <button
              onClick={startTransfer}
              disabled={status === 'transferring'}
              className={`mt-6 w-full py-3 rounded-lg font-semibold ${
                status === 'transferring'
                  ? 'bg-gray-600 cursor-not-allowed'
                  : 'bg-purple-600 hover:bg-purple-700'
              }`}
            >
              {status === 'idle' ? 'Begin Transfer' : status === 'transferring' ? 'Transfer in Progress' : 'Transfer Complete'}
            </button>
          </div>

          <div className="bg-gray-800 rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4 flex items-center">
              <MessageSquare className="w-5 h-5 mr-2 text-blue-400" />
              Neural Link Communication
            </h2>
            <div className="h-[300px] overflow-y-auto mb-4 space-y-4">
              {messages.map((message, index) => (
                <div
                  key={index}
                  className={`p-3 rounded-lg ${
                    message.role === 'user' ? 'bg-purple-900/50 ml-4' : 'bg-blue-900/50 mr-4'
                  }`}
                >
                  {message.content}
                </div>
              ))}
            </div>
            <form onSubmit={handleMessageSubmit} className="flex gap-2">
              <input
                type="text"
                value={userInput}
                onChange={(e) => setUserInput(e.target.value)}
                placeholder="Communicate with your neural link..."
                className="flex-1 bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
              <button
                type="submit"
                className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg"
              >
                Send
              </button>
            </form>
          </div>
        </div>

        <div className="mt-6 bg-gray-800 rounded-lg p-6">
          <h2 className="text-xl font-semibold mb-4 flex items-center">
            <AlertCircle className="w-5 h-5 mr-2 text-yellow-400" />
            System Warnings
          </h2>
          <div className="text-yellow-400 space-y-2">
            <p>• Consciousness transfer is a one-way process. Please ensure all preparations are complete.</p>
            <p>• Maintain stable neural link connection throughout the transfer process.</p>
            <p>• Do not attempt to disconnect or power down during active transfer.</p>
          </div>
        </div>
      </div>
    </div>
  );
}