'use client';

import { useState } from 'react';
import axios from 'axios';
import Cookies from 'js-cookie';
import SuccessToast from '../Success';

export const PasswordSettings = ({ onError }: { onError: (message: string) => void }) => {
  const [oldPassword, setOldPassword] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirm, setPasswordConfirm] = useState('');
  const [success, setSuccess] = useState('');

  const handleSave = async () => {
    if (password !== passwordConfirm) return onError('Passwords do not match');
    if (oldPassword === password) return onError('New password must be different');

    try {
      const response = await axios.post('/api/user/change/password', {
        token: Cookies.get('token'),
        old_password: oldPassword,
        password,
      });

      if (response.data.message !== 'Password updated successfully') {
        onError('Failed to update password');
      }
      setSuccess('Password updated successfully');
      setOldPassword('');
      setPassword('');
      setPasswordConfirm('');
    } catch (error: any) {
      onError(error.response?.data?.error || 'An error occurred');
    }
  };

  return (
    <div>
      <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
        <h2 className="text-lg font-bold">Password Settings</h2>
        <p className="text-sm opacity-70">Manage your password</p>
        
        <div className="flex flex-col gap-4 pt-8">
          <div className="flex flex-col gap-2">
            <label htmlFor="oldPassword" className="text-sm font-bold">Old Password</label>
            <input
              type="password"
              id="oldPassword"
              value={oldPassword}
              onChange={(e) => setOldPassword(e.target.value)}
              className="input w-full"
            />
          </div>
          <div className="flex flex-col gap-2">
            <label htmlFor="password" className="text-sm font-bold">Password</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="input w-full"
            />
          </div>
          <div className="flex flex-col gap-2">
            <label htmlFor="passwordConfirm" className="text-sm font-bold">Confirm Password</label>
            <input
              type="password"
              id="passwordConfirm"
              value={passwordConfirm}
              onChange={(e) => setPasswordConfirm(e.target.value)}
              className="input w-full"
            />
          </div>
        </div>
        
        <button className="btn btn-primary mt-8 w-full" onClick={handleSave}>
          Save Changes
        </button>
      </div>
      <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
    </div>
  );
};