import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';

function Influencers({ adminPassword }) {
  const [profiles, setProfiles] = useState([]);
  const [newProfile, setNewProfile] = useState('');

  const fetchProfiles = useCallback(async () => {
    try {
      const response = await axios.get('http://localhost:5001/profiles', {
        headers: { Authorization: `Bearer ${adminPassword}` }
      });
      console.log('Fetched profiles:', response.data);
      setProfiles(response.data);
    } catch (error) {
      console.error('Error fetching profiles:', error);
    }
  }, [adminPassword]);

  useEffect(() => {
    fetchProfiles();
  }, [fetchProfiles]);

  const addProfile = async () => {
    try {
      await axios.post(
        'http://localhost:5001/profiles',
        { username: newProfile },
        { headers: { Authorization: `Bearer ${adminPassword}` } }
      );
      setNewProfile('');
      fetchProfiles();
    } catch (error) {
      console.error('Error adding profile:', error);
    }
  };

  const handleJsonUpload = async (event) => {
    const file = event.target.files[0];
    if (file) {
      const formData = new FormData();
      formData.append('file', file);

      try {
        await axios.post('http://localhost:5001/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${adminPassword}`
          }
        });
        fetchProfiles();
      } catch (error) {
        console.error('Error uploading JSON file:', error);
      }
    }
  };

  const exportJson = async () => {
    try {
      const response = await axios.get('http://localhost:5001/export', {
        headers: { Authorization: `Bearer ${adminPassword}` },
        responseType: 'blob'
      });
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'influencers.json');
      document.body.appendChild(link);
      link.click();
    } catch (error) {
      console.error('Error exporting JSON file:', error);
    }
  };

  return (
    <div>
      <h2>Add Influencers</h2>
      <input
        type="text"
        value={newProfile}
        onChange={(e) => setNewProfile(e.target.value)}
        placeholder="Enter Instagram username"
      />
      <button onClick={addProfile}>Add</button>
      <h3>Current Influencers</h3>
      <ul>
        {profiles.map((profile, index) => (
          <li key={index}>{profile}</li>
        ))}
      </ul>
      <h3>Import/Export Influencers</h3>
      <input
        type="file"
        accept="application/json"
        onChange={handleJsonUpload}
      />
      <button onClick={exportJson}>Export JSON</button>
    </div>
  );
}

export default Influencers;