| import React, { useState, useEffect } from 'react';
|
| import { RefreshCw, Check, X, Send, Edit, Copy } from 'lucide-react';
|
| import axios from 'axios';
|
| import { API_BASE_URL } from '../config';
|
|
|
| const GeneratorView = ({ uploadData }) => {
|
| const [generatedEmails, setGeneratedEmails] = useState([]);
|
| const [selectedEmailIndex, setSelectedEmailIndex] = useState(0);
|
| const [loading, setLoading] = useState(false);
|
| const [sending, setSending] = useState(false);
|
|
|
| useEffect(() => {
|
| if (uploadData && generatedEmails.length === 0) {
|
| generateEmails();
|
| }
|
| }, [uploadData]);
|
|
|
| const generateEmails = async () => {
|
| setLoading(true);
|
| try {
|
| const res = await axios.post(`${API_BASE_URL}/generate-emails`, {
|
| resume_filename: uploadData.resume_filename,
|
| excel_filename: uploadData.excel_filename
|
| });
|
| setGeneratedEmails(res.data.emails);
|
| } catch (e) {
|
| console.error(e);
|
| alert("Error generating emails");
|
| } finally {
|
| setLoading(false);
|
| }
|
| };
|
|
|
| const handleSendCurrent = async () => {
|
|
|
| if (!uploadData.smtpEmail || !uploadData.smtpPassword) {
|
| alert("Missing SMTP Credentials. Go back to Upload.");
|
| return;
|
| }
|
|
|
| const current = generatedEmails[selectedEmailIndex];
|
| setSending(true);
|
| try {
|
| const payload = {
|
| emails: [{
|
| to: current.hr_email,
|
| subject: current.email.split('\n')[0].replace("Subject: ", ""),
|
| body: current.email
|
| }],
|
| smtp_email: uploadData.smtpEmail,
|
| smtp_password: uploadData.smtpPassword,
|
| resume_filename: uploadData.resume_filename
|
| };
|
| await axios.post(`${API_BASE_URL}/send-bulk-emails`, payload);
|
| alert(`Email sent to ${current.company}`);
|
| } catch (e) {
|
| console.error(e);
|
| alert("Sending failed.");
|
| } finally {
|
| setSending(false);
|
| }
|
| };
|
|
|
| if (!uploadData) return (
|
| <div className="flex items-center justify-center h-full text-slate-500">
|
| No data loaded. Please start from Upload page.
|
| </div>
|
| );
|
|
|
| return (
|
| <div className="h-[calc(100vh-100px)] flex gap-6">
|
| {/* Left: List */}
|
| <div className="w-1/3 glass-panel overflow-hidden flex flex-col bg-white">
|
| <div className="p-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
|
| <h3 className="font-semibold text-slate-900">Candidates ({generatedEmails.length})</h3>
|
| <button
|
| onClick={generateEmails}
|
| className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
| title="Regenerate All"
|
| >
|
| <RefreshCw className={`w-4 h-4 text-slate-400 ${loading ? 'animate-spin' : ''}`} />
|
| </button>
|
| </div>
|
|
|
| <div className="overflow-y-auto flex-1 p-2 space-y-2">
|
| {loading ? (
|
| <div className="text-center p-8 text-slate-500">AI is brainstorming...</div>
|
| ) : generatedEmails.map((item, idx) => (
|
| <div
|
| key={idx}
|
| onClick={() => setSelectedEmailIndex(idx)}
|
| className={`p-4 rounded-xl cursor-pointer border transition-all ${selectedEmailIndex === idx ? 'bg-indigo-50 border-indigo-200' : 'bg-transparent border-transparent hover:bg-slate-50'}`}
|
| >
|
| <div className="flex justify-between items-center mb-1">
|
| <h4 className={`font-medium ${selectedEmailIndex === idx ? 'text-indigo-700' : 'text-slate-700'}`}>{item.company}</h4>
|
| <span className="text-xs text-slate-500 px-2 py-0.5 rounded-full bg-slate-100">95%</span>
|
| </div>
|
| <p className="text-xs text-slate-500 truncate">{item.hr_email}</p>
|
| </div>
|
| ))}
|
| </div>
|
| </div>
|
|
|
| {/* Right: Preview */}
|
| <div className="flex-1 glass-panel flex flex-col overflow-hidden relative bg-white">
|
| {generatedEmails.length > 0 && (
|
| <>
|
| <div className="p-6 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
|
| <div>
|
| <p className="text-sm text-slate-500 mb-1">Subject</p>
|
| <h2 className="text-lg font-medium text-slate-900 truncate max-w-lg">
|
| {generatedEmails[selectedEmailIndex].email.split('\n')[0].replace("Subject: ", "")}
|
| </h2>
|
| </div>
|
| <div className="flex gap-2">
|
| <button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 text-sm font-medium transition-colors">
|
| <Edit className="w-4 h-4" /> Edit
|
| </button>
|
| <button
|
| onClick={handleSendCurrent}
|
| disabled={sending}
|
| className="flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium transition-colors shadow-lg shadow-indigo-500/20"
|
| >
|
| <Send className="w-4 h-4" /> {sending ? 'Sending...' : 'Send Now'}
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div className="flex-1 p-8 overflow-y-auto bg-slate-100/50">
|
| <div className="max-w-3xl mx-auto bg-white text-slate-900 p-8 rounded-lg shadow-sm border border-slate-200 min-h-full font-serif loading-relaxed leading-7 whitespace-pre-wrap">
|
| {generatedEmails[selectedEmailIndex].email}
|
| </div>
|
| </div>
|
| </>
|
| )}
|
| </div>
|
| </div>
|
| );
|
| };
|
|
|
| export default GeneratorView;
|
|
|
