Resources.js

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

const Resources = () => {
  const [file, setFile] = useState(null);
  const [title, setTitle] = useState('');
  const [resources, setResources] = useState([]);
  const [uploading, setUploading] = useState(false);

  const user = JSON.parse(localStorage.getItem('userInfo'));
  const isAdmin = user && (user.isAdmin || user.role === 'tutor');

  const fetchResources = async () => {
    if (!user) return; 
    const config = { headers: { Authorization: `Bearer ${user.token}` } };
    try {
        const { data } = await axios.get('https://studysync-backend-gnzb.onrender.com/api/resources', config);
        setResources(data);
    } catch (error) {
        console.error("Error fetching resources:", error);
    }
  };

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

  const uploadToCloudinary = async (file) => {
    const data = new FormData();
    data.append("file", file);
    data.append("upload_preset", "video_upload"); 
    data.append("cloud_name", "dylhvuybg"); 
    return await axios.post("https://api.cloudinary.com/v1_1/dylhvuybg/auto/upload", data);
  };

  const handleUpload = async (e) => {
    e.preventDefault();
    if (!file) return;

    setUploading(true);
    try {
      const res = await uploadToCloudinary(file);
      const fileUrl = res.data.secure_url;

      const config = { headers: { Authorization: `Bearer ${user.token}` } };
      await axios.post('https://studysync-backend-gnzb.onrender.com/api/resources', { title, fileUrl }, config);
      
      setUploading(false);
      setTitle('');
      setFile(null);
      alert('Upload Successful!');
      fetchResources();
    } catch (error) {
      console.error(error);
      setUploading(false);
      alert('Upload Failed.');
    }
  };

  const handleDelete = async (id) => {
    if (window.confirm('Delete this file?')) {
        try {
            const config = { headers: { Authorization: `Bearer ${user.token}` } };
            await axios.delete(`https://studysync-backend-gnzb.onrender.com/api/resources/${id}`, config);
            alert('File Deleted!');
            fetchResources(); 
        } catch (error) {
            console.error(error);
            alert('Failed to delete file.');
        }
    }
  };

  return (
    <div className="page-container">
      <h1 style={{ textAlign: 'center', marginBottom: '30px' }}>📚 Shared Study Resources</h1>

      {/* If not logged in, show CTA to login/register */}
      {!user && (
        <div style={{ textAlign: 'center', padding: 30, background: 'white', borderRadius: 12, border: '1px solid var(--udemy-border)', marginBottom: 20 }}>
          <h3 style={{ marginTop: 0 }}>Want more resources?</h3>
          <p style={{ color: '#666' }}>Log in or sign up to upload, manage, and access premium resources.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 12 }}>
            <a href="/login" className="btn-login">Log in</a>
            <a href="/register" className="btn-signup">Sign up</a>
          </div>
        </div>
      )}

      {/* Upload Box (Beautiful Card) */}
      {isAdmin && (
          <div className="upload-box">
            <h3>📤 Upload New Material</h3>
            <form onSubmit={handleUpload}>
                <input type="text" placeholder="Resource Title (e.g. React Cheatsheet)" value={title} onChange={(e) => setTitle(e.target.value)} required />
                <input type="file" onChange={(e) => setFile(e.target.files[0])} required />
                <button className="btn-primary" disabled={uploading} style={{ width: '100%' }}>
                    {uploading ? 'Uploading to Cloud... ☁️' : 'Upload Resource 🚀'}
                </button>
            </form>
          </div>
      )}

      {/* Resource Grid (Professional Cards) */}
      <div className="grid-container">
        {user ? resources.map((res) => (
          <div key={res._id} className="resource-card">
            <div>
              <div className="resource-icon">
                {(res.fileUrl || '').toLowerCase().includes('.pdf') ? '📄' : '🖼️'}
              </div>
              <h3 className="resource-title">{res.title}</h3>
              <p style={{ color: '#888', fontSize: '12px' }}>Type: {res.fileType || 'File'}</p>
            </div>

            <div style={{ marginTop: '15px', display: 'flex', gap: '10px' }}>
              <a href={res.fileUrl} target="_blank" rel="noreferrer" className="btn-primary" style={{ flex: 1, textAlign: 'center' }}>
                Download
              </a>
              {isAdmin && (
                <button onClick={() => handleDelete(res._id)} className="btn-logout">
                  🗑️
                </button>
              )}
            </div>
          </div>
        )) : (
          /* Show a small hint when user is not logged in (resources are public if you want to change) */
          <div style={{ textAlign: 'center', width: '100%', padding: 40, border: '1px dashed var(--udemy-border)', borderRadius: 12 }}>
            <p style={{ margin: 0, color: '#666' }}>Sign in to view downloadable resources and upload your own.</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default Resources;