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

function App() {
  const [excel, setExcel] = useState(null);
  const [zip, setZip] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleUpload = async () => {
    if (!excel || !zip) return alert("Please select both files!");
    
    const formData = new FormData();
    formData.append('excel', excel);
    formData.append('zip', zip);

    setLoading(true);
    try {
      await axios.post('http://localhost:3001/send-emails', formData);
      alert("All emails sent successfully!");
    } catch (err) {
      alert("Failed to send emails.");
    }
    setLoading(false);
  };

  return (
    <div className="p-10 flex flex-col items-center border rounded-lg shadow-lg max-w-md mx-auto mt-20">
      <h2 className="text-xl font-bold mb-5">Portfolio Email Sender</h2>
      
      <div className="mb-4 w-full">
        <label className="block mb-2">Upload Excel (Client List):</label>
        <input type="file" onChange={(e) => setExcel(e.target.files[0])} className="w-full border p-2" />
      </div>

      <div className="mb-6 w-full">
        <label className="block mb-2">Upload ZIP (All PDFs):</label>
        <input type="file" onChange={(e) => setZip(e.target.files[0])} className="w-full border p-2" />
      </div>

      <button 
        onClick={handleUpload} 
        disabled={loading}
        className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 w-full"
      >
        {loading ? "Sending..." : "Send Emails"}
      </button>
    </div>
  );
}

export default App;