import React from 'react';
import { useLocation, Link } from 'react-router-dom';  // useLocation to access state passed through the router
import './App.css';  // Import the CSS for styling

const UserDetails = () => {
  // Use useLocation to access the user data passed from UserCard
  const location = useLocation();
  if (!location.state) {
    return <p>No user data available!</p>;
  }

  const user = location.state;

  // Function to export user data to CSV
  const exportToCSV = () => {
    // Create a CSV string with the user details
    const userData = [
      ['First Name', 'Last Name', 'Email', 'Phone', 'Cell', 'Address', 'Date of Birth', 'Nationality', 'Timezone', 'Coordinates', 'Username'],
      [
        user.name.first,
        user.name.last,
        user.email,
        user.phone,
        user.cell,
        `${user.location.street.number} ${user.location.street.name}, ${user.location.city}, ${user.location.state}, ${user.location.country} - ${user.location.postcode}`,
        new Date(user.dob.date).toLocaleDateString(),
        user.nat,
        user.location.timezone.description,
        `${user.location.coordinates.latitude}, ${user.location.coordinates.longitude}`,
        user.login.username
      ]
    ];

    // Convert to CSV format
    const csvContent = userData.map(row => row.join(',')).join('\n');

    // Create a Blob from the CSV data
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

    // Create a link to download the CSV file
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', `${user.name.first}_${user.name.last}_details.csv`);
    link.style.visibility = 'hidden';

    // Append the link to the document body and trigger the download
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="user-details">
      <h2>{user.name.first} {user.name.last}</h2>
      <img src={user.picture.large} alt={user.name.first} className="user-image" />
      
      {/* Display user details */}
      <div className="user-info">
        <div><strong>Email:</strong> {user.email}</div>
        <div><strong>Phone:</strong> {user.phone}</div>
        <div><strong>Cell:</strong> {user.cell}</div>
        <div>
          <strong>Location:</strong> {user.location.street.number} {user.location.street.name}, {user.location.city}, {user.location.state}, {user.location.country} - {user.location.postcode}
        </div>
        <div><strong>Date of Birth:</strong> {new Date(user.dob.date).toLocaleDateString()}</div>
        <div><strong>Nationality:</strong> {user.nat}</div>
        <div><strong>Timezone:</strong> {user.location.timezone.description}</div>
        <div>
          <strong>Coordinates:</strong> {user.location.coordinates.latitude}, {user.location.coordinates.longitude}
        </div>
        <div><strong>Username:</strong> {user.login.username}</div>
      </div> 

      {/* Link to go back to the user list */}
      <Link to="/home" className="back-btn">Back to User List</Link>

      {/* Export Button to download user data as CSV */}
      <button onClick={exportToCSV} className="export-btn">Export to CSV</button>
    </div>
  );
};

export default UserDetails;