"use client";

import Sidebar from "@/components/Sidebar";
import ErrorToast from "@/components/Error";
import { useState } from "react";
import axios from "axios";
import Cookies from "js-cookie";

interface SettingsPageProps {
    username: string;
    name: string;
    email: string;
}

export default function SettingsPage({ username, name, email }: SettingsPageProps) {    
    const [profileUsername, setProfileUsername] = useState(username);
    const [profileName, setProfileName] = useState(name);
    const [profileEmail, setProfileEmail] = useState(email);
    const [oldPassword, setOldPassword] = useState("");
    const [password, setPassword] = useState("");
    const [passwordConfirm, setPasswordConfirm] = useState("");

    const [error, setError] = useState("");

    const saveProfile = async () => {
        try {
            const response = await axios.post("/api/user/change/profile", { token: Cookies.get("token"), username: profileUsername, name: profileName, email: profileEmail });
            if (response.data.message !== "Profile updated successfully") {
                setError("Failed to update profile");
            } else {
                window.location.reload();
            }
        } catch (error: any) {
            setError(error.response.data.error);
        }
    }

    const savePassword = async () => {
        if (password !== passwordConfirm) {
            setError("Passwords do not match");
            return;
        }
        if (oldPassword === password) {
            setError("Old password and new password cannot be the same");
            return;
        }
        try {
            const response = await axios.post("/api/user/change/password", { token: Cookies.get("token"), old_password: oldPassword, password: password });
            if (response.data.message !== "Password updated successfully") {
                setError("Failed to update password");
            }
        } catch (error: any) {
            setError(error.response.data.error);
        }
    }

    return (
        <div>
            <Sidebar 
                username={username} 
                fullName={name} 
                breadcrumbPath={['/', 'Dashboard', 'Settings']}
            >
                <main>
                    <h1 className="text-2xl font-bold">Settings</h1>
                    <p className="text-sm opacity-70">Manage your instance settings</p>

                    <div className="tabs tabs-border pt-8">
                        <input type="radio" name="user_settings" className="tab text-primary z-10" aria-label="User Settings" defaultChecked/>
                        <div className="tab-content relative bg-base-100 pl-4 pt-4">
                            <div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
                            <div className="flex flex-col gap-4"> 
                                <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={profileUsername} onChange={(e) => setProfileUsername(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={profileName} onChange={(e) => setProfileName(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={profileEmail} onChange={(e) => setProfileEmail(e.target.value)} className="input w-full" />
                                        </div>
                                    </div>
                                    <button className="btn btn-primary mt-8 w-full" onClick={saveProfile}>Save Changes</button>
                                </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={savePassword}>Save Changes</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </main>
            </Sidebar>
            <ErrorToast message={error} show={error !== ""} onClose={() => setError("")} />
        </div>
    );
}