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

import { Send, MessageSquare } from 'lucide-react';

import { GoogleGenerativeAI } from '@google/generative-ai';

const MODEL_NAME = "gemini-1.0-pro";

const API_KEY = "AIzaSyBm9zIIsYIeh_eYIkHwCCd56FjRVUrTm64";

const SearchBar = () => {

const [searchText, setSearchText] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [messages, setMessages] = useState([]);
const inputRef = useRef(null);
const messagesEndRef = useRef(null);

const scrollToBottom = () => {

messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};

const handleSearchSubmit = async (e) => {

e.preventDefault();
if (!searchText.trim()) return;

setIsLoading(true);
try {
const genAI = new GoogleGenerativeAI(API_KEY);
const model = genAI.getGenerativeModel({ model: MODEL_NAME });

const result = await model.generateContent({

contents: [{ role: "user", parts: [{ text: searchText }] }]
});

const aiContent = await result.response.text();

setMessages(prev => [...prev, {
question: searchText,
content: aiContent
}]);

setSearchText('');
setTimeout(scrollToBottom, 100);
} catch (error) {
console.error("Error:", error);
} finally {
setIsLoading(false);
}
};

return (
<div className="main-container">
<div className="messages-container">
{messages.length === 0 ? (
<div className="welcome-message">
<div className="message-header">
<img src="public/indian navey anchor icon.PNG" alt="Navy Logo"
className="logo" />
<div>
<h1>Welcome To SANDARBH.AI</h1>
<p>I am your virtual assistant.</p>
<p>Please ask me questions related to Indian Navy.</p>
</div>
 </div>
</div>
) : (
messages.map((message, index) => (
<div key={index} className="message">
<div className="message-header">
<img src="public/inicai-removebg-preview.png" alt="Navy Logo"
className="logo" />
<div className="message-question">{message.question}</div>
</div>
<div className="message-content">
{message.content}
<div className="references">References:</div>
</div>
</div>
))
)}
<div ref={messagesEndRef} />
</div>

<div className="search-section">
<div className="search-container">
<div className="search-box">
<input
ref={inputRef}
type="text"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !isLoading) {
handleSearchSubmit(e);
}
}}
placeholder="Please give sufficient query context for improved
response accuracy"
className="search-input"
/>

<div className="button-group">
<button className="custom-chat-btn">
<MessageSquare size={16} />
Custom Chat
</button>

<button className="analytics-btn">
Sandarbh Analytics
</button>

<button
onClick={handleSearchSubmit}
disabled={isLoading}
className="submit-btn"
>
{isLoading ? (
<div className="loading-spinner" />
) : (
<Send size={20} />
)}
</button>
 </div>
</div>

<div className="footer-text">
Directorates/Command Authorities are requested to forward latest
Policies/Orders to NUD Email ID - WNC-INICAL-SANDARBHADMIN (for updating the AI
Model)
</div>
</div>
</div>

<style jsx>{`
.main-container {
height: 100vh;
padding-bottom: 160px;
overflow-y: auto;
margin-right: 300px; /* Changed from margin-left to margin-right */
}

.messages-container {
padding: 0px;
border-right: 1px solid #e0e0e0; /* Changed from border-left to border-
right */
}

.welcome-message {
padding: 20px;
background: #f0f2f5;
border-radius: 8px;
margin-bottom: 20px;
}

.welcome-message h1 {
margin: 0;
font-size: 20px;
font-weight: 600;
}

.welcome-message p {
margin: 2px 0;
color: #666;
font-size: 14px;
}

.message {
padding: 16px;
background: white;
border-bottom: 1px solid #f0f2f5;
margin: 0;
}

.message-header {
display: flex;
align-items: flex-start;
gap: 8px;
}

.logo {
width: 24px;
 height: 24px;
}

.message-question {
font-weight: 500;
color: #1a1a1a;
}

.message-content {
margin-left: 32px;
margin-top: 4px;
line-height: 1.5;
}

.references {
margin-top: 12px;
color: #666;
font-size: 14px;
}

.search-section {
position: fixed;
bottom: 0;
left: 0;
right: 300px;
background: white;
padding: 20px 20px 20px 320px; /* Added left padding to accommodate
sidebar */
box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
z-index: 100;
}

.search-container {
max-width: 1400px;
margin: 0 10px;
}

.search-box {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}

.search-input {
flex: 1;
min-width: 600px;
padding: 10px 16px;
border: 1px solid #dee2e6;
border-radius: 4px;
font-size: 14px;
}

.button-group {
display: flex;
gap: 8px;
align-items: center;
white-space: nowrap;
}
 .custom-chat-btn,
.analytics-btn {
padding: 8px 16px;
border: 1px solid #dee2e6;
border-radius: 4px;
background: white;
color: #666;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}

.submit-btn {
width: 40px;
height: 36px;
background: #0d6efd;
color: white;
border: none;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}

.footer-text {
text-align: center;
color: #666;
font-size: 14px;
}

.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid white;
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

@media (max-width: 1600px) {

.search-input {
min-width: 400px;
}
}
`}</style>
</div>
);
};

export default SearchBar;