import React, { useState, useRef } from 'react';
import { ClipboardList, PlusCircle, MessageCircle, Info, Mail, Award, Stethoscope, Search, X, Send, Upload, User, Clock, Phone, AlertCircle } from 'lucide-react';

export default function App() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [patients, setPatients] = useState([
    { id: 'P-001', name: 'John Doe', age: 32, symptoms: 'Fever', status: 'Infected', note: 'High parasitemia detected in peripheral blood smear.' },
  ]);
  const [showModal, setShowModal] = useState(false);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [patientInfo, setPatientInfo] = useState({ name: '', age: '', symptoms: '' });
  const [selectedFile, setSelectedFile] = useState(null);
  const [scanResult, setScanResult] = useState(null);
  
  const [messages, setMessages] = useState([
    { sender: 'doctor', text: 'Hello! I am your AI clinical assistant. How can I assist you with your screening or research questions today?' }
  ]);
  const [inputValue, setInputValue] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  const fileInputRef = useRef(null);

  const handleScan = () => {
    setIsAnalyzing(true);
    // Simulate clinical reasoning
    setTimeout(() => {
      const isPositive = Math.random() > 0.4;
      const result = {
        status: isPositive ? 'Infected' : 'Uninfected',
        note: isPositive 
          ? 'Analysis detected distinct ring-stage trophozoites and elevated parasitemia levels in the 40x magnified sample.' 
          : 'Negative for Plasmodium species. Normal hematological morphology observed.'
      };
      setScanResult(result);
      setPatients(prev => [{ id: `P-${Math.floor(Math.random()*900)}`, ...patientInfo, ...result }, ...prev]);
      setIsAnalyzing(false);
    }, 2500);
  };

  const handleSendMessage = async () => {
    if (!inputValue.trim()) return;
    const userMessage = inputValue;
    setMessages(prev => [...prev, { sender: 'user', text: userMessage }]);
    setInputValue('');
    setIsTyping(true);

    try {
      const systemPrompt = "You are a highly professional virtual clinical assistant for a Malaria Clinic. Provide accurate, evidence-based, and concise medical information.";
      const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent`;

      const payload = {
        contents: [{ parts: [{ text: userMessage }] }],
        tools: [{ "google_search": {} }],
        systemInstruction: { parts: [{ text: systemPrompt }] }
      };

      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      const result = await response.json();
      const candidate = result.candidates?.[0];
      let assistantText = "I'm sorry, I couldn't process that query right now.";
      let sources = [];

      if (candidate && candidate.content?.parts?.[0]?.text) {
        assistantText = candidate.content.parts[0].text;
        if (candidate.groundingMetadata?.groundingAttributions) {
            sources = candidate.groundingMetadata.groundingAttributions
                .map(attr => ({ uri: attr.web?.uri, title: attr.web?.title }))
                .filter(s => s.uri && s.title);
        }
      }

      setMessages(prev => [...prev, { sender: 'doctor', text: assistantText, sources }]);
    } catch (error) {
      setMessages(prev => [...prev, { sender: 'doctor', text: "I encountered an error while searching for that information. Please try again." }]);
    } finally {
      setIsTyping(false);
    }
  };

  const NavItem = ({ id, icon: Icon, label }) => (
    <button onClick={() => setActiveTab(id)} className={`w-full flex items-center gap-3 p-3 rounded-lg transition ${activeTab === id ? 'bg-blue-600 text-white' : 'text-blue-400 hover:bg-blue-900/20'}`}>
      <Icon size={18} /> {label}
    </button>
  );

  return (
    <div className="min-h-screen bg-[#050810] text-blue-100 flex font-sans">
      <nav className="w-64 bg-[#0b1221] border-r border-blue-900/30 p-6">
        <h1 className="text-xl font-bold text-white mb-8">Clinic Sentinel</h1>
        <div className="space-y-2">
          <NavItem id="dashboard" icon={ClipboardList} label="Dashboard" />
          <NavItem id="about" icon={Info} label="About Us" />
          <NavItem id="achievements" icon={Award} label="Achievements" />
          <NavItem id="chat" icon={MessageCircle} label="Dr. Chat" />
          <NavItem id="contact" icon={Mail} label="Contact Us" />
        </div>
      </nav>

      <div className="flex-1 p-8 relative">
        {activeTab !== 'chat' && (
          <button onClick={() => setActiveTab('chat')} className="fixed bottom-8 right-8 bg-blue-600 p-4 rounded-full shadow-lg shadow-blue-900/50 hover:scale-105 transition z-40">
            <MessageCircle size={28} className="text-white" />
          </button>
        )}

        {activeTab === 'dashboard' && (
          <>
            <header className="flex justify-between items-center mb-10">
              <div>
                <h2 className="text-2xl font-bold">Diagnostic Dashboard</h2>
                <p className="text-blue-400 text-sm">Automated Malaria Screening System</p>
              </div>
              <button onClick={() => { setShowModal(true); setScanResult(null); }} className="bg-blue-600 px-6 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-500 transition">
                <PlusCircle size={18} /> New Diagnostic
              </button>
            </header>
            
            <div className="bg-[#0b1221] border border-blue-900/30 rounded-2xl p-6">
              <h3 className="text-blue-400 font-semibold mb-6">Recent History</h3>
              {patients.map(p => (
                <div key={p.id} className="bg-[#0f172a] p-4 rounded-xl border border-blue-900/20 flex flex-col mb-3">
                  <div className="flex justify-between">
                    <div><p className="font-medium">{p.name} ({p.age}y)</p><p className="text-xs text-blue-500">{p.symptoms}</p></div>
                    <p className={`font-bold ${p.status === 'Infected' ? 'text-red-400' : 'text-green-400'}`}>{p.status}</p>
                  </div>
                  {p.note && <p className="text-xs text-blue-400 mt-2 italic flex items-center gap-1"><AlertCircle size={10}/> {p.note}</p>}
                </div>
              ))}
            </div>
          </>
        )}

        {}
        {activeTab === 'achievements' && (
            <div className="max-w-4xl mx-auto">
                <h2 className="text-3xl font-bold mb-8 text-white">Our Achievements</h2>
                <div className="grid md:grid-cols-3 gap-6">
                    {[
                        { title: "Accuracy Rate", val: "98.99%", desc: "Proven diagnostic precision in clinical trials." },
                        { title: "Processing Speed", val: "< 2s", desc: "Automated analysis reduces waiting times significantly." },
                        { title: "Clinical Reach", val: "10,000+", desc: "Patients screened across endemic regions." }
                    ].map((item, i) => (
                        <div key={i} className="bg-[#0b1221] p-6 rounded-2xl border border-blue-900/50 text-center">
                            <p className="text-4xl font-black text-blue-500 mb-2">{item.val}</p>
                            <h4 className="font-bold text-white mb-2">{item.title}</h4>
                            <p className="text-sm text-blue-400">{item.desc}</p>
                        </div>
                    ))}
                </div>
            </div>
        )}

        {activeTab === 'about' && (
          <div className="max-w-4xl bg-[#0b1221] p-8 rounded-2xl border border-blue-900/30">
            <h2 className="text-2xl font-bold mb-6">About Clinic Sentinel</h2>
            <p className="text-blue-300 leading-relaxed mb-8">
              Clinic Sentinel is an advanced diagnostic initiative dedicated to eradicating the diagnostic bottleneck in malaria detection. 
              Our core model is a custom-engineered Convolutional Neural Network (CNN) that achieves 98.99% accuracy.
            </p>
            
            <h3 className="text-xl font-bold mb-6 flex items-center gap-2"><Stethoscope className="text-blue-500"/> Our Clinical Specialists</h3>
            <div className="grid md:grid-cols-2 gap-6 mb-8">
              <div className="bg-[#050810] p-6 rounded-xl border border-blue-900/30">
                <h4 className="font-bold text-white">Dr. A. Sharma (Chief Pathologist)</h4>
                <p className="text-sm text-blue-400">Over 15 years of experience in tropical medicine and automated diagnostic imaging.</p>
              </div>
              <div className="bg-[#050810] p-6 rounded-xl border border-blue-900/30">
                <h4 className="font-bold text-white">Dr. R. Kulkarni (Clinical AI Lead)</h4>
                <p className="text-sm text-blue-400">Specializes in Deep Learning for medical vision, bridging the gap between AI and patient care.</p>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'chat' && (
          <div className="max-w-2xl mx-auto bg-[#0b1221] p-8 rounded-2xl border border-blue-900/30 flex flex-col h-[600px]">
            <h2 className="text-2xl font-bold mb-6 text-center">Dr. AI Assistant</h2>
            <div className="flex-1 overflow-y-auto space-y-4 mb-4 pr-2">
              {messages.map((m, i) => (
                <div key={i} className={`p-4 rounded-xl max-w-[85%] ${m.sender === 'doctor' ? 'bg-blue-900/30 text-blue-200' : 'bg-blue-600 text-white ml-auto'}`}>
                  {m.text}
                  {m.sources && m.sources.length > 0 && (
                    <div className="mt-3 pt-3 border-t border-blue-800 text-xs text-blue-400">
                      <p className="font-semibold mb-1 flex items-center gap-1"><Search size={12}/> Sources:</p>
                      {m.sources.map((s, idx) => (
                        <a key={idx} href={s.uri} target="_blank" className="block hover:underline truncate" rel="noreferrer">{s.title}</a>
                      ))}
                    </div>
                  )}
                </div>
              ))}
              {isTyping && <div className="text-blue-500 text-sm animate-pulse ml-4">Researching...</div>}
            </div>
            <div className="flex gap-2 bg-[#050810] p-2 rounded-xl">
              <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} placeholder="Ask a medical question..." className="flex-1 bg-transparent p-2 outline-none text-white" />
              <button onClick={handleSendMessage} className="bg-blue-600 p-3 rounded-lg hover:bg-blue-500 transition"><Send size={20} /></button>
            </div>
          </div>
        )}
      </div>

      {showModal && (
        <div className="fixed inset-0 bg-black/90 flex items-center justify-center z-50 p-4">
          <div className="bg-[#0b1221] border border-blue-800 rounded-2xl p-8 max-w-md w-full relative">
            <button onClick={() => setShowModal(false)} className="absolute top-4 right-4 text-blue-500"><X /></button>
            <h2 className="text-xl font-bold mb-6">New Diagnostic Entry</h2>
            
            {!scanResult ? (
              <div className="space-y-4">
                <input placeholder="Patient Full Name" className="w-full bg-[#050810] border border-blue-900 p-3 rounded" onChange={(e) => setPatientInfo({...patientInfo, name: e.target.value})} />
                <input placeholder="Age" type="number" className="w-full bg-[#050810] border border-blue-900 p-3 rounded" onChange={(e) => setPatientInfo({...patientInfo, age: e.target.value})} />
                <input placeholder="Observed Symptoms" className="w-full bg-[#050810] border border-blue-900 p-3 rounded" onChange={(e) => setPatientInfo({...patientInfo, symptoms: e.target.value})} />
                
                <div className="border-2 border-dashed border-blue-900 p-4 rounded-lg text-center cursor-pointer hover:border-blue-600 transition" onClick={() => fileInputRef.current.click()}>
                  <Upload className="mx-auto mb-2 text-blue-500" />
                  <p className="text-sm text-blue-400">{selectedFile ? selectedFile.name : 'Upload Blood Smear Image'}</p>
                  <input type="file" ref={fileInputRef} className="hidden" onChange={(e) => setSelectedFile(e.target.files[0])} />
                </div>

                <button disabled={!patientInfo.name || isAnalyzing || !selectedFile} onClick={handleScan} className="w-full bg-blue-600 py-3 rounded-lg font-bold">
                  {isAnalyzing ? 'Analyzing Sample...' : 'Start Screening'}
                </button>
              </div>
            ) : (
                <div className="text-center">
                    <h3 className={`text-2xl font-bold ${scanResult.status === 'Infected' ? 'text-red-500' : 'text-green-500'}`}>{scanResult.status}</h3>
                    <p className="mt-4 text-blue-300 bg-[#050810] p-4 rounded-xl text-sm">{scanResult.note}</p>
                    <button onClick={() => setShowModal(false)} className="mt-6 w-full bg-blue-600 py-2 rounded-lg font-bold">Close</button>
                </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}