import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import axios from 'axios';
import './App.css';
import Influencers from './Influencers';

function App() {
  const [downloadedFiles, setDownloadedFiles] = useState([]);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [adminPassword, setAdminPassword] = useState('');

  useEffect(() => {
    fetchDownloadedFiles();
    const interval = setInterval(() => {
      fetchDownloadedFiles();
    }, 60000); // Fetch new content every minute
    return () => clearInterval(interval);
  }, []);

  const fetchDownloadedFiles = async () => {
    try {
      const response = await axios.get('http://localhost:5001/downloads');
      setDownloadedFiles(response.data);
    } catch (error) {
      console.error('Error fetching downloaded files:', error);
    }
  };

  const handleLogin = (password) => {
    setAdminPassword(password);
    setIsAuthenticated(true);
  };

  return (
    <Router>
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Insta Local</h1>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/influencers">Add Influencers</Link>
          </nav>
        </header>
        <Routes>
          <Route path="/" element={
            <div className="downloaded-content">
              {downloadedFiles.length === 0 ? (
                <p>No content available</p>
              ) : (
                downloadedFiles.map((file, index) => {
                  const fileUrl = `http://localhost:5001/static/${file}`;
                  return (
                    <div key={index} className="file-item">
                      {file.endsWith('.mp4') ? (
                        <video controls>
                          <source src={fileUrl} type="video/mp4" />
                          Your browser does not support the video tag.
                        </video>
                      ) : (
                        <img src={fileUrl} alt={file} />
                      )}
                    </div>
                  );
                })
              )}
            </div>
          } />
          <Route path="/influencers" element={
            isAuthenticated ? (
              <Influencers adminPassword={adminPassword} />
            ) : (
              <Login onLogin={handleLogin} />
            )
          } />
        </Routes>
      </div>
    </Router>
  );
}

const Login = ({ onLogin }) => {
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    onLogin(password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      <button type="submit">Login</button>
    </form>
  );
};

export default App;