import { useEffect, useState } from 'react';
import Upload from './Upload';
import Chat from './Chat';
const storedToken = localStorage.getItem('token');


const Opportunities = () => {

  const [token, setToken] = useState(storedToken);
  const [isPopupOpen, setIsPopupOpen] = useState(false); //form popup
  const [opportunities, setOpportunities] = useState([]);
  useEffect(() => {
    const storedToken = localStorage.getItem('token');
    console.log('storedToken*******', storedToken)

    fetch('/api/opportunities', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${storedToken}`,
        'Content-Type': 'application/json'
      }
    }).then(response => response.json())
      .then(data => {
        /*if (!data.success) {
          handleLogout();
          return
        }*/
        console.log('data*******', data, !data.records || data.records.length === 0)
        if (!data.records || data.records.length === 0) {
          setIsPopupOpen(true);
        } else {
          console.log('data.records*******', data.records)
          setOpportunities(data.records);
        }

        setToken(storedToken);
      })
    console.log('storedToken', storedToken)
  }, [])

  const handleLogout = () => {
    localStorage.removeItem('token');
    location = '/'
  };

  return (
    <>
      <Popup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} token={token} title="No Opportunities">
        <p>No opportunities found. Please upload a file to get started.</p>
      </Popup>
      <div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
        <div className="flex-1 overflow-auto p-6">
          <h2 style={{ 'fontSize': 'revert' }}>Opportunities</h2>
          <table className="border-collapse border border-slate-400" style={{fontSize:"12px"}}>
            <thead><tr>{Object.keys(opportunities[0] || []).map((e, index) => <td key={'thead-r-'+index}>{e}</td>)}</tr></thead>
          {opportunities.map((opportunity, id) => (
            <tbody key={id}>
            <tr>
             {Object.keys(opportunity).map((key, index) => (
               <td key={key+'-'+index} className="border border-slate-400 p-2">{opportunity[key]}</td>
             ))}
            </tr>
            </tbody>
          ))}
          </table>
        </div>
        <div className="border-t p-4 bg-white dark:bg-gray-800">
          <div className="flex items-center space-x-2">
            <Chat />
            <Upload token={token} />
            <button onClick={handleLogout} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400">Logout</button>
          </div>
        </div>
      </div>
    </>
  )
}

const Popup = ({ isOpen, onClose, title, children, token }) => {
  const validate = () => {
    //add validation of data
    window.location.reload();
  }
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Overlay */}
      <div
        className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
      />

      {/* Popup Content */}
      <div className="relative z-50 w-full max-w-lg bg-white rounded-lg shadow-xl">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-xl font-semibold">{title}</h2>
        </div>

        {/* Body */}
        <div className="p-4">
          {children}
        </div>
        <div className="flex items-center space-x-2" style={{ 'margin': '10px' }}>
          <Upload token={token} validate={validate} />
        </div>
      </div>
    </div>
  );
};

export default Opportunities;