"use client";

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

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

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

    const saveProfile = async () => {
        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") {
            alert("Failed to update profile");
        }
    }

    const savePassword = async () => {
        const response = await axios.post("/api/user/change/password", { token: Cookies.get("token"), old_password: password, password: passwordConfirm });
        if (response.data.message !== "Password updated successfully") {
            alert("Failed to update password");
        }
    }

    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-300 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-300 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="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>
        </div>
    );
}