import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
require('dotenv').config();

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

  const adminPassword = process.env.ADMIN_PASSWROD;

  const fetchProfiles = useCallback(async () => {
    try {
      const response = await axios.get('http://localhost:5001/influencers', {
        headers: { 'x-admin-password': adminPassword }
      });
      setProfiles(response.data);
    } catch (error) {
      console.error('Error fetching profiles:', error);
    }
  }, [adminPassword]);

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

  const addProfile = async () => {
    try {
      const updatedProfiles = [...profiles, newProfile];
      await axios.post(
        'http://localhost:5001/influencers',
        { profiles: updatedProfiles },
        { headers: { 'x-admin-password': adminPassword } }
      );
      setProfiles(updatedProfiles);
      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/import-influencers', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            'x-admin-password': adminPassword
          }
        });
        fetchProfiles();
      } catch (error) {
        console.error('Error uploading JSON file:', error);
      }
    }
  };

  const exportJson = async () => {
    try {
      const response = await axios.get('http://localhost:5001/export-influencers', {
        headers: { 'x-admin-password': 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;