// // // reactstrap components
// // import {
// //   Button,
// //   Card,
// //   CardHeader,
// //   CardBody,
// //   FormGroup,
// //   Form,
// //   Input,
// //   Container,
// //   Row,
// //   Col,
// // } from "reactstrap";
// // // core components
// // import UserHeader from "components/Headers/UserHeader.js";

// // const Profile = () => {
// //   return (
// //     <>
// //       <UserHeader />
// //       {/* Page content */}
// //       {/* <Container className="mt--7" fluid>
// //         <Row>
// //           <Col xl="12">
// //             <Card className="bg-secondary shadow">
// //               <CardHeader className="bg-white border-0">
// //                 <Row className="align-items-center">
// //                   <Col xs="8">
// //                     <h3 className="mb-0">My Profile Settings</h3>
// //                   </Col>
// //                 </Row>
// //               </CardHeader>
// //               <CardBody>
// //                 <Form>
// //                   <Row>
// //                     <Col md="6">
// //                       <FormGroup>
// //                         <label>Your Full Name</label>
// //                         <Input placeholder="Enter full name" type="text" />
// //                       </FormGroup>
// //                     </Col>
// //                     <Col md="6">
// //                       <FormGroup>
// //                         <label>Pronouns</label>
// //                         <Input placeholder="Enter pronouns" type="text" />
// //                       </FormGroup>
// //                     </Col>
// //                   </Row>
// //                   <Row>
// //                     <Col md="6">
// //                       <FormGroup>
// //                         <label>Role</label>
// //                         <Input placeholder="Enter role" type="text" />
// //                       </FormGroup>
// //                     </Col>
// //                     <Col md="6">
// //                       <FormGroup>
// //                         <label>Department or Team</label>
// //                         <Input placeholder="Enter department" type="text" />
// //                       </FormGroup>
// //                     </Col>
// //                   </Row>
// //                   <Row>
// //                     <Col md="12">
// //                       <FormGroup>
// //                         <label>Email</label>
// //                         <Input placeholder="Enter email" type="email" />
// //                       </FormGroup>
// //                     </Col>
// //                   </Row>
// //                   <FormGroup>
// //                     <label>About Me</label>
// //                     <Input
// //                       type="textarea"
// //                       rows="4"
// //                       placeholder="Enter description"
// //                     />
// //                   </FormGroup>
// //                   <Button color="primary" type="submit">
// //                     Update
// //                   </Button>
// //                 </Form>
// //               </CardBody>
// //             </Card>
// //           </Col>
// //         </Row>
// //       </Container>*/}
// //      </> 
// //   );
// // };

// // export default Profile;

// import React from 'react';
// import { Link, useNavigate } from 'react-router-dom';
// import 'bootstrap/dist/css/bootstrap.min.css';

// const Profile = () => {
//   const navigate = useNavigate();

//   const handleLogout = () => {
//     // Clear user session/token and redirect to login or homepage
//     localStorage.removeItem("authToken");
//     navigate('/auth/login');
//   };

//   return (
//     <div className="container mt-5">
//       <h3 className="mb-4">My Profile Settings</h3>

//       <div className="mb-3">
//         <label>Your Full Name</label>
//         <input type="text" className="form-control" value="sysadmin" readOnly />
//       </div>

//       <div className="mb-3">
//         <label>Pronouns</label>
//         <input type="text" className="form-control" placeholder="Enter Pronouns" />
//       </div>

//       <div className="mb-3">
//         <label>Role</label>
//         <input type="text" className="form-control" placeholder="Enter Role" />
//       </div>

//       <div className="mb-3">
//         <label>Department or Team</label>
//         <input type="text" className="form-control" placeholder="Enter Department" />
//       </div>

//       <div className="mb-3">
//         <label>Email</label>
//         <input type="email" className="form-control" value="sysadmin" readOnly />
//       </div>

//       <div className="mb-3">
//         <label>About Me</label>
//         <textarea className="form-control" placeholder="Enter Description"></textarea>
//       </div>

//       <button
//         className="btn btn-primary mb-4"
//         onClick={() => navigate('/error404')}
//       >
//         Update
//       </button>

//       <hr />

//       <p><strong>Password:</strong> Change Password for your account <Link to="/auth/resetpassword">Change password</Link></p>

//       <hr />

//       <p><strong>Security:</strong> Logout of all sessions except this current browser <span style={{ color: 'blue', cursor: 'pointer' }} onClick={handleLogout}>Logout other sessions</span></p>

//       <hr />

//       <p><strong>Deactivation:</strong> Remove access to all organizations and workspace in CloudnSure <span style={{ color: 'blue', cursor: 'pointer' }} onClick={handleLogout}>Deactivate account</span></p>
//     </div>
//   );
// };

// export default Profile;



import React, { useState, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

const Profile = () => {
  const navigate = useNavigate();
  const [preview, setPreview] = useState(null);
  const [selectedFile, setSelectedFile] = useState(null);
  const fileInputRef = useRef(null);

  const handleLogout = () => {
    localStorage.removeItem("authToken");
    navigate('/auth/login');
  };

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setSelectedFile(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreview(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const triggerFileInput = () => {
    fileInputRef.current.click();
  };

  const handleCancel = () => {
    setPreview(null);
    setSelectedFile(null);
    fileInputRef.current.value = '';
  };

  const handleUpload = () => {
    if (!selectedFile) return;
    
    // Here you would typically upload the file to your server
    // For example:
    // const formData = new FormData();
    // formData.append('profileImage', selectedFile);
    // fetch('/api/upload-profile-image', {
    //   method: 'POST',
    //   body: formData
    // })
    // .then(response => response.json())
    // .then(data => {
    //   console.log('Upload successful', data);
    // })
    // .catch(error => {
    //   console.error('Upload error', error);
    // });

    alert('Upload functionality would go here');
  };

  return (
    <div className="container mt-5">
      <h3 className="mb-4">My Profile Settings</h3>

      {/* Simple Image Upload Section */}
      <div className="mb-4">
        <h5>PROFILE PHOTO</h5>
        <div className="d-flex align-items-center mb-3">
          <div className="me-3">
            {preview ? (
              <img 
                src={preview} 
                alt="Profile Preview" 
                style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }} 
              />
            ) : (
              <div style={{ width: '100px', height: '100px', borderRadius: '50%', backgroundColor: '#f0f0f0' }}></div>
            )}
          </div>
          <div>
            <input
              type="file"
              ref={fileInputRef}
              onChange={handleFileChange}
              accept="image/*"
              style={{ display: 'none' }}
            />
            <button className="btn btn-outline-primary" onClick={triggerFileInput}>
              Choose File
            </button>
          </div>
        </div>

        {/* Action buttons - shown only when an image is selected */}
        {preview && (
          <div className="d-flex justify-content-end gap-2 mt-3">
            <button className="btn btn-outline-secondary" onClick={handleCancel}>
              Cancel
            </button>
            <button className="btn btn-primary" onClick={handleUpload}>
              Upload
            </button>
          </div>
        )}
      </div>

      {/* Rest of the profile form */}
      <div className="mb-3">
        <label>Your Full Name</label>
        <input type="text" className="form-control" value="sysadmin" readOnly />
      </div>

      <div className="mb-3">
        <label>Pronouns</label>
        <input type="text" className="form-control" placeholder="Enter Pronouns" />
      </div>

      <div className="mb-3">
        <label>Role</label>
        <input type="text" className="form-control" placeholder="Enter Role" />
      </div>

      <div className="mb-3">
        <label>Department or Team</label>
        <input type="text" className="form-control" placeholder="Enter Department" />
      </div>

      <div className="mb-3">
        <label>Email</label>
        <input type="email" className="form-control" value="sysadmin" readOnly />
      </div>

      <div className="mb-3">
        <label>About Me</label>
        <textarea className="form-control" placeholder="Enter Description"></textarea>
      </div>

      <button
        className="btn btn-primary mb-4"
        onClick={() => navigate('/error404')}
      >
        Update Profile
      </button>

      <hr />

      <p><strong>Password:</strong> Change Password for your account <Link to="/admin/resetpassword">Change password</Link></p>

      <hr />

      <p><strong>Security:</strong> Logout of all sessions except this current browser <span style={{ color: 'blue', cursor: 'pointer' }} onClick={handleLogout}>Logout other sessions</span></p>

      <hr />

      <p><strong>Deactivation:</strong> Remove access to all organizations and workspace in CloudnSure <span style={{ color: 'blue', cursor: 'pointer' }} onClick={handleLogout}>Deactivate account</span></p>
    </div>
  );
};

export default Profile;