import { useState, useEffect } from 'react'
import './App.css'
import InfiniteCanvas from './components/InfiniteCanvas'
import AdvancedCharts from './components/AdvancedCharts'
import DataflowCanvas from './components/DataflowCanvas'
import { FaDatabase, FaChartBar, FaProjectDiagram } from 'react-icons/fa'

function App() {
  const [activeTab, setActiveTab] = useState('canvas'); // 'canvas', 'charts', or 'dataflow'
  
  // Listen for the custom event to switch to DataFlow tab
  useEffect(() => {
    const handleViewDataFlow = (event) => {
      // Switch to the dataflow tab
      setActiveTab('dataflow');
      
      // Log the database info (in a real app, you would use this to initialize the DataFlow view)
      console.log('Viewing DataFlow for database:', event.detail);
    };
    
    // Add event listener
    window.addEventListener('viewDataFlow', handleViewDataFlow);
    
    // Clean up
    return () => {
      window.removeEventListener('viewDataFlow', handleViewDataFlow);
    };
  }, []);
  
  return (
    <div className="app-container" style={{ 
      width: '100vw', 
      height: '100vh', 
      display: 'flex', 
      flexDirection: 'column',
      overflow: 'hidden',
      background: '#121212', /* Dark background */
      color: '#ffffff'
    }}>
      <header>
        {/* Logo and Title */}
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ 
            width: '40px', 
            height: '40px', 
            background: 'linear-gradient(45deg, #00a99d, #52c41a)', 
            borderRadius: '8px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginRight: '15px',
            boxShadow: '0 0 10px rgba(82, 196, 26, 0.5)',
            animation: 'pulse 2s infinite'
          }}>
            <FaDatabase style={{ fontSize: '20px', color: 'white' }} />
          </div>
          <h1 style={{ 
            margin: 0, 
            fontSize: '1.5rem',
            background: 'linear-gradient(90deg, #00a99d, #52c41a, #fa8c16)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            textShadow: '0 0 20px rgba(82, 196, 26, 0.3)'
          }}>
            The Metricverse
          </h1>
        </div>
        
        {/* Navigation */}
        <div>
          <span 
            style={{ 
              marginRight: '25px', 
              cursor: 'pointer',
              padding: '8px 12px',
              borderRadius: '4px',
              transition: 'all 0.3s ease',
              position: 'relative',
              background: activeTab === 'canvas' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
              color: activeTab === 'canvas' ? '#00a99d' : '#ffffff'
            }} 
            className="nav-item"
            onClick={() => setActiveTab('canvas')}
          >
            Data Explorer
          </span>
          <span 
            style={{ 
              marginRight: '25px', 
              cursor: 'pointer',
              padding: '8px 12px',
              borderRadius: '4px',
              transition: 'all 0.3s ease',
              position: 'relative',
              background: activeTab === 'charts' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
              color: activeTab === 'charts' ? '#00a99d' : '#ffffff'
            }} 
            className="nav-item"
            onClick={() => setActiveTab('charts')}
          >
            Advanced Charts
          </span>
          <span 
            style={{ 
              marginRight: '25px',
              cursor: 'pointer',
              padding: '8px 12px',
              borderRadius: '4px',
              transition: 'all 0.3s ease',
              position: 'relative',
              background: activeTab === 'dataflow' ? 'rgba(0, 169, 157, 0.2)' : 'transparent',
              color: activeTab === 'dataflow' ? '#00a99d' : '#ffffff'
            }} 
            className="nav-item"
            onClick={() => setActiveTab('dataflow')}
          >
            Data Flow
          </span>
          <span 
            style={{ 
              cursor: 'pointer',
              padding: '8px 12px',
              borderRadius: '4px',
              transition: 'all 0.3s ease',
              position: 'relative'
            }} 
            className="nav-item"
          >
            Settings
          </span>
        </div>
      </header>
      
      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
        <aside>
          <h3 style={{ 
            color: '#52c41a', 
            marginBottom: '15px',
            borderBottom: '1px solid #333',
            paddingBottom: '10px',
            fontSize: '1.1rem'
          }}>Data Sources</h3>
          
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ 
              padding: '10px', 
              cursor: 'pointer', 
              color: '#ffffff', 
              fontWeight: 'bold',
              borderRadius: '6px',
              background: 'rgba(0, 169, 157, 0.1)',
              marginBottom: '8px',
              border: '1px solid rgba(0, 169, 157, 0.3)',
              transition: 'all 0.3s ease',
              boxShadow: '0 0 10px rgba(0, 169, 157, 0.1)'
            }} className="glow-effect">
              <span style={{ 
                display: 'inline-flex', 
                alignItems: 'center',
                justifyContent: 'center',
                width: '24px', 
                height: '24px', 
                background: 'linear-gradient(45deg, #00a99d, #52c41a)', 
                borderRadius: '4px',
                color: 'white',
                marginRight: '10px',
                fontSize: '12px'
              }}>
                <FaDatabase />
              </span> 
              Dbtez
            </li>
          </ul>
       
          <h3 style={{ 
            color: '#fa8c16', 
            marginTop: '25px',
            marginBottom: '15px',
            borderBottom: '1px solid #333',
            paddingBottom: '10px',
            fontSize: '1.1rem'
          }}>Saved Views</h3>
          
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ 
              padding: '10px', 
              cursor: 'pointer',
              borderRadius: '6px',
              transition: 'all 0.3s ease',
              marginBottom: '8px',
              background: 'rgba(255, 255, 255, 0.03)'
            }}>
              <span style={{ 
                color: '#fa8c16', 
                marginRight: '8px',
                fontSize: '16px'
              }}>📊</span> 
              Sales Overview
            </li>
            <li style={{ 
              padding: '10px', 
              cursor: 'pointer',
              borderRadius: '6px',
              transition: 'all 0.3s ease',
              marginBottom: '8px',
              background: 'rgba(255, 255, 255, 0.03)'
            }}>
              <span style={{ 
                color: '#fa8c16', 
                marginRight: '8px',
                fontSize: '16px'
              }}>📊</span> 
              Marketing Performance
            </li>
            <li style={{ 
              padding: '10px', 
              cursor: 'pointer',
              borderRadius: '6px',
              transition: 'all 0.3s ease',
              background: 'rgba(255, 255, 255, 0.03)'
            }}>
              <span
               style={{ 
                color: '#fa8c16', 
                marginRight: '8px',
                fontSize: '16px'
              }}
              >📊</span> 
              Financial Summary
            </li>
          </ul>
        </aside>
        
        <main style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
          {activeTab === 'canvas' && (
            <>
              <InfiniteCanvas />
              <div style={{ 
                position: 'absolute', 
                bottom: '20px', 
                left: '20px', 
                background: 'rgba(26, 26, 26, 0.8)', 
                padding: '12px 16px',
                borderRadius: '8px',
                boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
                fontSize: '12px',
                pointerEvents: 'none',
                backdropFilter: 'blur(5px)',
                border: '1px solid rgba(82, 196, 26, 0.3)',
                color: '#ffffff',
                maxWidth: '300px',
                animation: 'fadeIn 0.5s ease'
              }}>
                <p style={{ 
                  margin: 0, 
                  display: 'flex', 
                  alignItems: 'center',
                  fontSize: '13px'
                }}>
                  <span style={{ 
                    display: 'inline-block', 
                    width: '8px', 
                    height: '8px', 
                    background: '#52c41a', 
                    borderRadius: '50%', 
                    marginRight: '8px',
                    boxShadow: '0 0 8px #52c41a'
                  }}></span>
                  {/* Infinite Canvas - Zoom and pan without limits */}
                  The Only Limit is Your Imagination.
                </p>
                <p style={{ 
                  margin: '5px 0 0 16px', 
                  fontSize: '11px', 
                  opacity: 0.7 
                }}>
                  Scroll to zoom • Drag to pan • Connect nodes
                </p>
              </div>
            </>
          )}
          
          {activeTab === 'charts' && (
            <div style={{ padding: '20px', height: '100%', overflow: 'auto' }}>
              <AdvancedCharts />
            </div>
          )}
          
          {activeTab === 'dataflow' && (
            <>
              <DataflowCanvas />
              <div style={{ 
                position: 'absolute', 
                bottom: '20px', 
                left: '20px', 
                background: 'rgba(26, 26, 26, 0.8)', 
                padding: '12px 16px',
                borderRadius: '8px',
                boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
                fontSize: '12px',
                pointerEvents: 'none',
                backdropFilter: 'blur(5px)',
                border: '1px solid rgba(250, 140, 22, 0.3)',
                color: '#ffffff',
                maxWidth: '300px',
                animation: 'fadeIn 0.5s ease'
              }}>
                <p style={{ 
                  margin: 0, 
                  display: 'flex', 
                  alignItems: 'center',
                  fontSize: '13px'
                }}>
                  <span style={{ 
                    display: 'inline-block', 
                    width: '8px', 
                    height: '8px', 
                    background: '#fa8c16', 
                    borderRadius: '50%', 
                    marginRight: '8px',
                    boxShadow: '0 0 8px #fa8c16'
                  }}></span>
                  Visualize data flows between tables
                </p>
                <p style={{ 
                  margin: '5px 0 0 16px', 
                  fontSize: '11px', 
                  opacity: 0.7 
                }}>
                  Add tables • Create processes • Connect data flows
                </p>
              </div>
            </>
          )}
        </main>
      </div>
    </div>
  )
}

export default App