web/src/pages/BioStreamAI.js

import React, { useState, useRef } from 'react';
import { Upload, DNA, Search, BarChart3, MapPin, Download, Share2, Microscope } from 'lucide-react';

const BioStreamAI = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [analysis, setAnalysis] = useState(null);
  const [loading, setLoading] = useState(false);
  const [dragActive, setDragActive] = useState(false);
  const [sampleLocation, setSampleLocation] = useState('');
  const [waterSource, setWaterSource] = useState('');
  const fileInputRef = useRef(null);

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  const analyzeDNA = async (dnaFile) => {
    setLoading(true);
    setAnalysis(null); // It's good practice to clear old results

    // FormData will package the file for sending
    const formData = new FormData();
    formData.append('dnaFile', dnaFile);

    try {
      // This is the new code that calls your server
      const response = await fetch('http://localhost:5000/api/analyze-dna', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || `Server error: ${response.status}`);
      }

      const analysisData = await response.json();
      console.log("Frontend: Received analysis from backend:", analysisData);

      // Update the screen with the real data from the backend
      const finalReport = {
        ...analysisData,
        fileName: dnaFile.name,
        fileSize: (dnaFile.size / 1024 / 1024).toFixed(2) + ' MB',
      };
      setAnalysis(finalReport);

    } catch (error) {
      console.error('Failed to fetch DNA analysis:', error);
    } finally {
      // This part always runs to make sure the spinner stops
      setLoading(false);
    }
  };
    

    

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
    
    const files = e.dataTransfer.files;
    if (files && files[0]) {
      setSelectedFile(files[0]);
    }
  };

  const handleDragOver = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
  };

  const getAbundanceColor = (abundance) => {
    switch (abundance) {
      case 'Very High': return '#f44336';
      case 'High': return '#FF9800';
      case 'Medium': return '#4CAF50';
      case 'Low': return '#2196F3';
      default: return '#666';
    }
  };

  const getStatusColor = (status) => {
    if (status.includes('Invasive') || status.includes('Pathogen')) return '#f44336';
    if (status.includes('Concern')) return '#FF9800';
    return '#4CAF50';
  };

  const getHealthColor = (health) => {
    switch (health) {
      case 'Excellent': return '#4CAF50';
      case 'Good': return '#8BC34A';
      case 'Fair': return '#FF9800';
      case 'Poor': return '#f44336';
      default: return '#666';
    }
  };

  return (
    <div className="container">

      {/* Header */}

      <div style={{ textAlign: 'center', marginBottom: '40px' }}>

        <h2 style={{ fontSize: '3.5rem', color: '#2E7D32', marginBottom: '10px' }}>

          🧬 Bio-Stream AI: Environmental DNA Analysis

        </h2>

        <p style={{ fontSize: '1.3rem', color: '#666', marginBottom: '15px' }}>

          Revolutionary genetic-level ecosystem monitoring from a single drop of water

        </p>

        <div style={{

          background: 'linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%)',

          color: 'white',

          padding: '15px 30px',

          borderRadius: '25px',

          display: 'inline-block',

          fontSize: '1rem',

          fontWeight: 'bold'

        }}>

          🧬 DNA Sequencing • 🤖 AI Species ID • 📊 Biodiversity Analysis • 🌍 Ecosystem Health

        </div>

      </div>



      {/* Problem Statement */}

      <div className="card" style={{

        marginBottom: '30px',

        background: 'linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%)',

        border: '2px solid #f44336'

      }}>

        <h3 style={{ color: '#d32f2f', marginBottom: '15px' }}>🚨 The Biodiversity Blindness Crisis</h3>

        <p style={{ fontSize: '1.1rem', lineHeight: '1.6', marginBottom: '15px' }}>

          <strong>We have no idea what's truly living in our water systems.</strong> Traditional surveys are slow, 

          expensive, and miss 99% of life (especially microbial). We are blind to the true state of our biodiversity.

        </p>

        <div style={{

          background: 'rgba(244, 67, 54, 0.1)',

          padding: '15px',

          borderRadius: '8px',

          fontSize: '0.95rem'

        }}>

          • Traditional biodiversity surveys take months and cost $50,000+<br />

          • Visual identification misses 99% of microbial life<br />

          • No real-time ecosystem health monitoring<br />

          • Pollution and invasive species go undetected until it's too late

        </div>

      </div>



      {/* Solution */}

      <div className="card" style={{

        marginBottom: '30px',

        background: 'linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%)',

        border: '2px solid #4CAF50'

      }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>💡 The Genetic Barcode Revolution</h3>

        <div style={{

          background: 'white',

          padding: '20px',

          borderRadius: '12px',

          marginBottom: '20px',

          border: '1px solid #4CAF50'

        }}>

          <h4 style={{ color: '#2E7D32', marginBottom: '10px' }}>🎯 Environmental DNA (eDNA) Analysis:</h4>

          <p style={{ fontSize: '1.1rem', lineHeight: '1.6' }}>

            <strong>Every living creature sheds DNA into its environment.</strong> This eDNA is a "genetic barcode" 

            floating in the water. Our AI analyzes raw DNA sequences to create a complete, species-level census 

            of an ecosystem from a single water sample.

          </p>

        </div>



        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px', marginTop: '20px' }}>

          <div style={{ textAlign: 'center', padding: '20px' }}>

            <div style={{ fontSize: '3rem', marginBottom: '15px' }}>💧</div>

            <h4 style={{ color: '#2E7D32', marginBottom: '10px' }}>1. Collect Sample</h4>

            <p style={{ color: '#666' }}>Single drop of water contains all DNA</p>

          </div>

          <div style={{ textAlign: 'center', padding: '20px' }}>

            <div style={{ fontSize: '3rem', marginBottom: '15px' }}>🧬</div>

            <h4 style={{ color: '#2E7D32', marginBottom: '10px' }}>2. DNA Sequencing</h4>

            <p style={{ color: '#666' }}>Extract and sequence environmental DNA</p>

          </div>

          <div style={{ textAlign: 'center', padding: '20px' }}>

            <div style={{ fontSize: '3rem', marginBottom: '15px' }}>🤖</div>

            <h4 style={{ color: '#2E7D32', marginBottom: '10px' }}>3. AI Analysis</h4>

            <p style={{ color: '#666' }}>Match DNA to species database</p>

          </div>

          <div style={{ textAlign: 'center', padding: '20px' }}>

            <div style={{ fontSize: '3rem', marginBottom: '15px' }}>📊</div>

            <h4 style={{ color: '#2E7D32', marginBottom: '10px' }}>4. Ecosystem Report</h4>

            <p style={{ color: '#666' }}>Complete biodiversity analysis</p>

          </div>

        </div>

      </div>



      {/* Sample Information */}

      <div className="card" style={{ marginBottom: '30px' }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>📍 Sample Information</h3>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>

          <div>

            <label style={{ display: 'block', fontWeight: 'bold', marginBottom: '8px' }}>

              Sample Location

            </label>

            <input

              type="text"

              value={sampleLocation}

              onChange={(e) => setSampleLocation(e.target.value)}

              placeholder="e.g., Lake Washington, Seattle, WA"

              style={{

                width: '100%',

                padding: '12px',

                fontSize: '1rem',

                borderRadius: '8px',

                border: '2px solid #4CAF50'

              }}

            />

          </div>

          <div>

            <label style={{ display: 'block', fontWeight: 'bold', marginBottom: '8px' }}>

              Water Source Type

            </label>

            <select

              value={waterSource}

              onChange={(e) => setWaterSource(e.target.value)}

              style={{

                width: '100%',

                padding: '12px',

                fontSize: '1rem',

                borderRadius: '8px',

                border: '2px solid #4CAF50'

              }}

            >

              <option value="">Select source...</option>

              <option value="Lake">Lake</option>

              <option value="River">River</option>

              <option value="Stream">Stream</option>

              <option value="Pond">Pond</option>

              <option value="Ocean">Ocean</option>

              <option value="Wetland">Wetland</option>

              <option value="Groundwater">Groundwater</option>

            </select>

          </div>

        </div>

      </div>



      {/* DNA File Upload */}

      <div className="card" style={{ marginBottom: '30px' }}>

        <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>🧬 Upload DNA Sequence File</h3>

        

        <div style={{ textAlign: 'center', marginBottom: '20px' }}>

          <button

            onClick={() => fileInputRef.current?.click()}

            style={{

              fontSize: '1.2rem',

              padding: '15px 30px',

              background: 'linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%)',

              border: 'none',

              borderRadius: '25px',

              color: 'white',

              fontWeight: 'bold',

              cursor: 'pointer'

            }}

          >

            📁 Upload DNA Sequence File

          </button>

        </div>



        <div

          onDrop={handleDrop}

          onDragOver={handleDragOver}

          onDragLeave={handleDragLeave}

          onClick={() => fileInputRef.current?.click()}

          style={{

            border: `2px dashed ${dragActive ? '#4CAF50' : '#ccc'}`,

            borderRadius: '12px',

            padding: '40px 20px',

            textAlign: 'center',

            background: dragActive ? '#e8f5e8' : '#f9f9f9',

            transition: 'all 0.3s ease',

            cursor: 'pointer',

            marginBottom: '20px'

          }}

        >

          <div style={{ fontSize: '3rem', marginBottom: '15px' }}>

            {dragActive ? '📤' : '🧬'}

          </div>

          <p style={{ fontSize: '1.1rem', color: '#666', marginBottom: '10px' }}>

            {dragActive ? 'Drop DNA sequence file here!' : 'Drag & drop DNA sequence file'}

          </p>

          <p style={{ fontSize: '0.9rem', color: '#999' }}>

            Supports: FASTA, FASTQ, TXT • Raw sequencer output from MinION, Illumina, etc.

          </p>

        </div>



        <input

          ref={fileInputRef}

          type="file"

          accept=".fasta,.fastq,.txt,.fa,.fq"

          onChange={handleFileUpload}

          style={{ display: 'none' }}

        />



        {selectedFile && (

          <div style={{ 

            background: '#e8f5e8', 

            padding: '15px', 

            borderRadius: '8px',

            border: '1px solid #4CAF50'

          }}>

            <p><strong>Selected File:</strong> {selectedFile.name}</p>

            <p><strong>Size:</strong> {(selectedFile.size / 1024 / 1024).toFixed(2)} MB</p>

          </div>

        )}



        {/* --- NEW ANALYSIS BUTTON --- */}

{selectedFile && !loading && !analysis && (

  <div style={{ textAlign: 'center', marginTop: '20px' }}>

    <button

      onClick={() => analyzeDNA(selectedFile)} // Pass the selected file to the function

      style={{

        fontSize: '1.2rem',

        padding: '15px 30px',

        background: 'linear-gradient(135deg, #FF9800 0%, #F57C00 100%)',

        border: 'none',

        borderRadius: '25px',

        color: 'white',

        fontWeight: 'bold',

        cursor: 'pointer'

      }}

    >

      🔬 Analyze DNA Sequence

    </button>

  </div>

)}



      </div>



      {/* Analysis Results */}

      {loading && (

        <div className="card" style={{ textAlign: 'center' }}>

          <div style={{

            width: '48px',

            height: '48px',

            border: '4px solid #f3f3f3',

            borderTop: '4px solid #4CAF50',

            borderRadius: '50%',

            animation: 'spin 1s linear infinite',

            margin: '0 auto 20px'

          }}></div>

          <p>🧬 Analyzing environmental DNA with AI...</p>

          <p style={{ fontSize: '0.9rem', color: '#666' }}>

            Sequencing DNA fragments, matching to species database, calculating biodiversity metrics...

          </p>

        </div>

      )}



      

                   {/* --- FINAL, ULTRA-ROBUST RESULTS DISPLAY --- */}

      {analysis && !loading && (

        <div style={{ display: 'grid', gap: '30px' }}>



          {/* --- Analysis Overview Card --- */}

          {analysis.biodiversityMetrics && (

            <div className="card">

              <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>📊 Genetic Analysis Overview</h3>

              <div style={{

                background: 'linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%)',

                padding: '20px', borderRadius: '12px', border: '2px solid #4CAF50'

              }}>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>

                  <h4 style={{ color: '#2E7D32', margin: 0 }}>

                    Ecosystem Health: {analysis.biodiversityMetrics.ecosystemHealth || 'N/A'}

                  </h4>

                  <div style={{

                    background: getHealthColor(analysis.biodiversityMetrics.ecosystemHealth),

                    color: 'white', padding: '8px 16px', borderRadius: '20px',

                    fontSize: '0.9rem', fontWeight: 'bold'

                  }}>

                    Biodiversity Score: {analysis.biodiversityMetrics.biodiversityScore || 'N/A'}

                  </div>

                </div>

              </div>

            </div>

          )}



          {/* --- Detected Species Card --- */}

          <div className="card">

            <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>🔬 Detected Species</h3>

            {analysis.detectedSpecies && analysis.detectedSpecies.length > 0 ? (

              <div style={{ display: 'grid', gap: '15px' }}>

                {analysis.detectedSpecies.map((species, index) => (

                  <div key={index} style={{

                    border: '1px solid #ddd', borderRadius: '8px',

                    padding: '20px', background: '#f9f9f9'

                  }}>

                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>

                      <div>

                      <h5 style={{ fontSize: '1.1rem', fontWeight: 'bold', marginBottom: '5px' }}>

  {species.species || 'Unknown Species'} ({species.commonName || ''})

</h5>

<p style={{ color: '#666', fontSize: '0.8rem', fontFamily: 'monospace' }}>

  ID: {species.blastId || 'N/A'}

</p>

                      </div>

                      <div style={{ textAlign: 'right' }}>

                        <div style={{

                          background: getAbundanceColor(species.abundance),

                          color: 'white', padding: '4px 8px', borderRadius: '12px'

                        }}>

                          {species.abundance || 'N/A'} Abundance

                        </div>

                        <p>{species.confidence || 'N/A'}% Confidence</p>

                      </div>

                    </div>

                  </div>

                ))}

              </div>

            ) : (

               <p>{analysis.error ? `Analysis Error: ${analysis.error}` : "No species from the database were detected in this sample."}</p>

            )}

          </div>



          {/* --- Recommendations Card --- */}

          {analysis.waterQualityAssessment && (

            <div className="card">

              <h3 style={{ color: '#2E7D32', marginBottom: '20px' }}>📋 Recommendations</h3>

              <ul>

                {analysis.waterQualityAssessment.recommendations?.map((rec, i) => <li key={i}>{rec}</li>) || <li>No recommendations available.</li>}

              </ul>

            </div>

          )}

        </div>

      )}

        



      <style jsx>{`

        @keyframes spin {

          0% { transform: rotate(0deg); }

          100% { transform: rotate(360deg); }

        }

      `}</style>

    </div>
  );
};

export default BioStreamAI;