import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

import { tokenService } from '../services/TokenService';
import { userApi } from '../api/loginApi';

import './ProfileForm.css';

const ProfileForm = () => {
  const navigate = useNavigate();
  const [activeView, setActiveView] = useState('profile');
  const [subView, setSubView] = useState('details');
  const [formData, setFormData] = useState({
    firstname: '',
    lastname: '',
    phone: '',
    username: '',
    createdDate: new Date().toISOString().split('T')[0],
    lastLoginDate: new Date().toISOString().split('T')[0],
  });

  const [passwordData, setPasswordData] = useState({
    currentPassword: '',
    newPassword: '',
    confirmNewPassword: '',
  });

  useEffect(() => {
    const fetchData = async () => {
      const userId = tokenService.getUserId();
      const response = await userApi.get_user_profile(userId);

      if (response) {
        const userProfile = response.data[0];
        setFormData((prev) => ({
          ...prev,
          firstname: userProfile.firstname,
          lastname: userProfile.lastname,
          phone: userProfile.phone_number,
          username: userProfile.username,
          createdDate: userProfile.created,
          lastLoginDate: userProfile.last_login,
        }));
      } else {
        console.error('Error getting user profile');
      }
    };

    fetchData();
  }, []);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handlePasswordChange = (e) => {
    const { name, value } = e.target;
    setPasswordData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleNavClick = (view) => {
    if (view === 'profile') {
      navigate('/user/profile');
    } else {
      navigate(`/${view}`);
    }
  };

  const handlePasswordSubmit = async (e) => {
    e.preventDefault();

    try {
      const userId = tokenService.getUserId();
      const currentPassword = passwordData.currentPassword;
      const newPassword = passwordData.newPassword;
      const confirmNewPassword = passwordData.confirmNewPassword;

      const response = await userApi.update_password(
        userId,
        currentPassword,
        newPassword,
        confirmNewPassword
      );
      if (response) {
        console.log('Successfully updated password');
      } else {
        console.error('Error updating password');
      }
    } catch (error) {
      console.error('Login error:', error);
    } finally {
    }
  };

  const renderPasswordForm = () => (
    <div className="profile-form">
      <h2>Change Password</h2>
      <form onSubmit={handlePasswordSubmit}>
        <div>
          <label htmlFor="currentPassword">Current Password</label>
          <input
            type="password"
            id="currentPassword"
            name="currentPassword"
            value={passwordData.currentPassword}
            onChange={handlePasswordChange}
            required
          />
        </div>
        <div>
          <label htmlFor="newPassword">New Password</label>
          <input
            type="password"
            id="newPassword"
            name="newPassword"
            value={passwordData.newPassword}
            onChange={handlePasswordChange}
            required
          />
        </div>
        <div>
          <label htmlFor="confirmNewPassword">Confirm New Password</label>
          <input
            type="password"
            id="confirmNewPassword"
            name="confirmNewPassword"
            value={passwordData.confirmNewPassword}
            onChange={handlePasswordChange}
            required
          />
        </div>
        <button type="submit">Update Password</button>
        <button type="button" onClick={() => setSubView('details')}>
          Back to Profile
        </button>
      </form>
    </div>
  );

  const renderProfileForm = () => (
    <div className="profile-form">
      <h2>User Profile</h2>
      <form>
        <div>
          <label htmlFor="firstname">First Name</label>
          <input
            type="text"
            id="firstname"
            name="firstname"
            value={formData.firstname}
            onChange={handleChange}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="lastname">Last Name</label>
          <input
            type="text"
            id="lastname"
            name="lastname"
            value={formData.lastname}
            onChange={handleChange}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="phone">Phone</label>
          <input
            type="tel"
            id="phone"
            name="phone"
            value={formData.phone}
            onChange={handleChange}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="username">Username</label>
          <input
            type="text"
            id="username"
            name="username"
            value={formData.username}
            onChange={handleChange}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="createdDate">Created Date</label>
          <input
            type="text"
            id="createdDate"
            name="createdDate"
            value={formData.createdDate}
            readOnly
          />
        </div>
        <div>
          <label htmlFor="lastLoginDate">Last Login Date</label>
          <input
            type="text"
            id="lastLoginDate"
            name="lastLoginDate"
            value={formData.lastLoginDate}
            readOnly
          />
        </div>
      </form>

      <div>
        <button type="button" onClick={() => setSubView('password')}>
          Change Password
        </button>
      </div>
    </div>
  );

  return (
    <div className="dashboard-container">
      {/* Navbar */}
      <nav className="dashboard-nav">
        <div className="nav-logo">
          <span className="logo-text">Dashboard</span>
        </div>
        <div className="nav-links">
          <button
            className={`nav-link ${activeView === 'dashboard' ? 'active' : ''}`}
            onClick={() => handleNavClick('dashboard')}
          >
            Dashboard
          </button>
          <button
            className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
            onClick={() => handleNavClick('settings')}
          >
            Settings
          </button>
          <button
            className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
            onClick={() => handleNavClick('profile')}
          >
            Profile
          </button>
        </div>
      </nav>

      {/* Main Content */}
      {subView === 'details' ? renderProfileForm() : renderPasswordForm()}
    </div>
  );
};

export default ProfileForm;