import React, { useEffect, useState } from 'react';
import './CryptoPriceTracker.css';
import Modal from 'react-modal';

const CryptoPriceTracker = () => {
  const [prices, setPrices] = useState([]);
  const [selectedCoin, setSelectedCoin] = useState(null);
  const [search, setSearch] = useState('');

  useEffect(() => {
    fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd')
      .then(response => response.json())
      .then(data => setPrices(data))
      .catch(error => console.error('Error fetching prices:', error));
  }, []);

  const handleSelectCoin = (coin) => {
    setSelectedCoin(coin);
  };

  const handleSearchChange = (event) => {
    setSearch(event.target.value);
  };

  const closeModal = () => {
    setSelectedCoin(null);
  };

  const filteredCoins = prices.filter((coin) =>
    coin.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className={`crypto-price-tracker-container ${selectedCoin ? 'blurred' : ''}`}>
      <h1 className="text-hackerGreen font-pixel">Crypto Price Tracker</h1>
      <input
        type="text"
        className="search-input"
        placeholder="Search for a cryptocurrency"
        value={search}
        onChange={handleSearchChange}
      />
      <ul className="coin-list">
        {filteredCoins.map((coin) => (
          <li
            key={coin.id}
            className="coin-item"
            onClick={() => handleSelectCoin(coin)}
          >
            <img src={coin.image} alt={coin.name} className="coin-image" />
            <span>{coin.name}</span>
          </li>
        ))}
      </ul>
      {selectedCoin && (
        <Modal
          isOpen={!!selectedCoin}
          onRequestClose={closeModal}
          contentLabel="Crypto Info"
          className="crypto-modal"
          overlayClassName="crypto-modal-overlay"
        >
          <button onClick={closeModal} className="close-button">X</button>
          <h2>{selectedCoin.name}</h2>
          <p>Symbol: {selectedCoin.symbol.toUpperCase()}</p>
          <p>Current Price: ${selectedCoin.current_price.toFixed(2)}</p>
          <p>24h Change: {selectedCoin.price_change_percentage_24h.toFixed(2)}%</p>
          <p>Market Cap: ${selectedCoin.market_cap.toLocaleString()}</p>
        </Modal>
      )}
    </div>
  );
};

export default CryptoPriceTracker;

.blurred {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

.search-input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #39ff14;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #39ff14;
}

.coin-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* Add some space between the boxes */
}

.coin-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 10px;
  border: 1px solid #39ff14;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 10px #39ff14;
  cursor: pointer;
  width: 100px;
  height: 130px;
  transition: transform 0.3s;
  text-align: center;
  overflow: hidden;
}

.coin-item span {
  font-size: 0.7rem; /* Increase font size */
  text-align: center;
  margin-top: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  overflow: hidden; /* Hides overflow text */
  text-overflow: ellipsis; /* Adds ellipsis for overflow text */
  width: 80px; /* Ensures the ellipsis is shown within the box */
}

.coin-item.selected,
.coin-item:hover {
  transform: scale(1.1);
}

.coin-image {
  width: 50px;
  height: 50px;
}

.crypto-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.9);
  border: 2px solid #39ff14;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 20px #39ff14;
  width: 90%;
  max-width: 500px;
  box-sizing: border-box;
  text-align: left;
}

.crypto-modal-overlay {
  background-color: rgba(0, 0, 0, 0.75);
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #39ff14;
  font-size: 1.5rem;
  cursor: pointer;
}

.crypto-modal h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
}

.crypto-modal p {
  margin: 5px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .coin-item {
    width: 90px;
    height: 120px;
  }

  .coin-item span {
    font-size: 0.65rem;
    width: 70px;
  }

  .coin-image {
    width: 40px;
    height: 40px;
  }
}