'use client';

import { useState } from 'react';
import axios from 'axios';
import Cookies from 'js-cookie';

interface ProfileSettingsProps {
  initialUsername: string;
  initialName: string;
  initialEmail: string;
  onError: (message: string) => void;
}

export const ProfileSettings = ({
  initialUsername,
  initialName,
  initialEmail,
  onError,
}: ProfileSettingsProps) => {
  const [username, setUsername] = useState(initialUsername);
  const [name, setName] = useState(initialName);
  const [email, setEmail] = useState(initialEmail);

  const handleSave = async () => {
    try {
      const response = await axios.post('/api/user/change/profile', {
        token: Cookies.get('token'),
        username,
        name,
        email,
      });

      if (response.data.message === 'Profile updated successfully') {
        window.location.reload();
      } else {
        onError('Failed to update profile');
      }
    } catch (error: any) {
      onError(error.response?.data?.error || 'An error occurred');
    }
  };

  return (
    <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
      <h2 className="text-lg font-bold">Profile Settings</h2>
      <p className="text-sm opacity-70">Manage your profile settings</p>
      
      <div className="flex flex-col gap-2 pt-8">
        <div className="flex flex-col gap-1">
          <label htmlFor="username" className="text-sm font-bold">Username</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            className="input w-full"
          />
        </div>
        <div className="flex flex-col gap-1">
          <label htmlFor="name" className="text-sm font-bold">Name</label>
          <input
            type="text"
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="input w-full"
          />
        </div>
        <div className="flex flex-col gap-1">
          <label htmlFor="email" className="text-sm font-bold">Email</label>
          <input
            type="email"
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="input w-full"
          />
        </div>
      </div>
      
      <button className="btn btn-primary mt-8 w-full" onClick={handleSave}>
        Save Changes
      </button>
    </div>
  );
};