import { useEffect, useState, useCallback } from 'react';
import { FiSun, FiMoon, FiDownload, FiGrid, FiZap } from 'react-icons/fi';
import Messenger from '../random-text';

const Footer = ({ setCurrentMatrix }) => {
  const [theme, setTheme] = useState('dark'),
    [matrix, setMatrix] = useState('off'),
    [served, setServed] = useState({ served: 0, lastscan: 0, server: 0, instances: 0, peers: 0, created: 0, updated: 0 }),
    toggleLoader = useCallback(() => {
      const loader = document.querySelector('.loader-content')
      if (loader) {
        loader.style.display = 'initial'
        setTimeout(() => {
          loader.style.display = 'none'
        }, 60 * 1000)
      }
    }, []),
    toggleTheme = useCallback(() => {
      setTheme(prev => (prev === 'light' ? 'dark' : 'light'))
    }, []),
    refreshServed = useCallback(async () => {
      try {
        const response = await fetch('/api/served')
        if (response.ok) {
          setServed(await response.json())
        }
      } catch (e) {
        console.error(e)
      }
    }, []),
    toggleMatrix = useCallback(() => {
      setMatrix(prev => {
        const next = prev === 'off' ? 'on' : 'off'
        setCurrentMatrix(next)
        return next
      })
    }, [setCurrentMatrix])

  useEffect(() => {
    document.documentElement.dataset.theme = theme
  }, [theme])

  useEffect(() => {
    refreshServed()
  }, [refreshServed])

  useEffect(() => {
    if (matrix === 'on') {
      const root = document.getElementById('root')
      if (root) {
        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
        while (walker.nextNode()) {
          if (walker.currentNode.textContent.length > 1) {
            new Messenger(walker.currentNode)
          }
        }
      }
    }
  }, [matrix])

  return (
    <footer className="app-footer">
      <div className="footer-metrics">
        <div>
          <FiGrid aria-hidden="true" />
          <p>
            <strong>{served.served}</strong> requests served - Last scan {served.lastscan}
          </p>
        </div>
        <p>
          Total {served.instances} instances - {served.peers} peers - {served.created} created - {served.updated} updated - server {served.server}
        </p>
      </div>
      <div className="footer-actions">
        <button type="button" onClick={toggleMatrix}>
          <FiZap aria-hidden="true" />
          Matrix {matrix === 'on' ? 'ON' : 'OFF'}
        </button>
        <a className="download_index" href="/api/download_index" onClick={toggleLoader} download="fediblock-index.json.gz" target="_blank" rel="noreferrer">
          <FiDownload aria-hidden="true" />
          Download index
        </a>
        <button type="button" onClick={toggleTheme}>
          {theme === 'dark' ? <FiSun aria-hidden="true" /> : <FiMoon aria-hidden="true" />}
          {theme === 'dark' ? 'Light mode' : 'Dark mode'}
        </button>
        <a href="https://about.manalejandro.com" target="_blank" rel="noreferrer" className="footer-credit">
          by ale <s>&copy;</s>2025
        </a>
      </div>
    </footer>
  )
}

export default Footer;