import React, { useState } from 'react';
import axios from 'axios';
// If you still want file-saver + docx, import them here

function ResumeRewrite() {
  const [resumeFile, setResumeFile] = useState(null);
  const [jobTitle, setJobTitle] = useState('');
  const [jobDescription, setJobDescription] = useState('');
  const [optimizedResume, setOptimizedResume] = useState('');
  const [error, setError] = useState('');

  const handleFileChange = (e) => {
    setResumeFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!resumeFile || !jobTitle.trim() || !jobDescription.trim()) {
      setError('Please fill in all fields.');
      return;
    }

    try {
      const token = localStorage.getItem('token');
      const formData = new FormData();
      formData.append('resumeFile', resumeFile);
      formData.append('jobTitle', jobTitle);
      formData.append('jobDescription', jobDescription);

      const res = await axios.post('/api/premium/resume/optimize', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: `Bearer ${token}`,
        },
      });

      setOptimizedResume(res.data.optimizedResume || '');
      setError('');
    } catch (err) {
      console.error('Resume optimization error:', err);
      setError(err.response?.data?.error || 'Failed to optimize resume.');
    }
  };

  // Optional: Download as docx
  // const handleDownloadDocx = () => { ... }

  return (
    <div className="max-w-4xl mx-auto mt-8 p-6 bg-white rounded shadow">
      <h2 className="text-2xl font-bold mb-4">Resume Optimizer</h2>

      <form onSubmit={handleSubmit} className="space-y-6">
        {/* File Upload */}
        <div>
          <label className="block font-medium text-gray-700 mb-1">
            Upload Resume (PDF or DOCX):
          </label>
          <input
            type="file"
            accept=".pdf,.docx"
            onChange={handleFileChange}
            className="file:mr-4 file:py-2 file:px-4
                       file:border-0 file:text-sm file:font-semibold
                       file:bg-blue-50 file:text-blue-700
                       hover:file:bg-blue-100
                       cursor-pointer
                       text-gray-600"
          />
        </div>

        {/* Job Title */}
        <div>
          <label className="block font-medium text-gray-700 mb-1">
            Job Title:
          </label>
          <input
            type="text"
            value={jobTitle}
            onChange={(e) => setJobTitle(e.target.value)}
            className="w-full border rounded px-3 py-2 focus:outline-none 
                       focus:ring focus:ring-blue-200"
            placeholder="e.g., Software Engineer"
          />
        </div>

        {/* Job Description */}
        <div>
          <label className="block font-medium text-gray-700 mb-1">
            Job Description:
          </label>
          <textarea
            value={jobDescription}
            onChange={(e) => setJobDescription(e.target.value)}
            rows={4}
            className="w-full border rounded px-3 py-2 focus:outline-none 
                       focus:ring focus:ring-blue-200"
            placeholder="Paste the job listing or requirements here..."
          />
        </div>

        {error && (
          <p className="text-red-600 font-semibold">
            {error}
          </p>
        )}

        <button
          type="submit"
          className="inline-block bg-blue-600 text-white font-semibold 
                     px-5 py-2 rounded hover:bg-blue-700 
                     transition-colors"
        >
          Optimize Resume
        </button>
      </form>

      {/* Optimized Resume Display */}
      {optimizedResume && (
        <div className="mt-8">
          <h3 className="text-xl font-bold mb-2">Optimized Resume</h3>
          <pre className="whitespace-pre-wrap bg-gray-50 p-4 rounded border">
            {optimizedResume}
          </pre>
          {/* 
          Optional Download Button
          <button
            onClick={handleDownloadDocx}
            className="mt-2 inline-block bg-green-600 text-white font-semibold 
                       px-4 py-2 rounded hover:bg-green-700 transition-colors"
          >
            Download as DOCX
          </button> 
          */}
        </div>
      )}
    </div>
  );
}

export default ResumeRewrite;