"use client";
import { useState } from "react";
import AuthGuard from "../../components/AuthGuard";
import styles from "../../styles/dashboard.module.css";
import navStyles from "../../styles/navigation.module.css";
import accountStyles from "../../styles/account.module.css";
import { 
  Person as UserIcon,
  Email as MailIcon,
  Phone as PhoneIcon,
  LocationOn as MapPinIcon,
  CalendarMonth as CalendarIcon,
  Business as CompanyIcon,
  Work as WorkIcon,
  Edit as EditIcon,
  Save as SaveIcon,
  Lock as KeyIcon,
  Visibility as EyeIcon,
  VisibilityOff as EyeOffIcon,
  Notifications as BellIcon
} from "@mui/icons-material";
import AccountProfile from "../../components/AccountProfile";
import AccountSecurity from "../../components/AccountSecurity";
import AccountNotifications from "../../components/AccountNotifications";
import AccountAgentTransactionSection from "../../components/AccountAgentTransactionSection";

const initialNotifications = {
  emailNotifications: true,
  smsNotifications: false,
  pushNotifications: true,
  weeklyReports: true,
  payoutAlerts: true
};

export default function AccountPage() {
  const [showPassword, setShowPassword] = useState(false);
  const [activeTab, setActiveTab] = useState("profile");
  const [passwordForm, setPasswordForm] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: ""
  });
  const [notifications, setNotifications] = useState(initialNotifications);

  const tabs = [
    { id: "profile", label: "Профиль", icon: <UserIcon fontSize="small" /> },
    { id: "security", label: "Безопасность", icon: <KeyIcon fontSize="small" /> },
    { id: "notifications", label: "Уведомления", icon: <BellIcon fontSize="small" /> },
    { id: "agent-transactions", label: "Транзакции агентов", icon: <WorkIcon fontSize="small" /> },
  ];

  return (
    <AuthGuard>
      <div className={styles.dashboard}>
        <h1 className={styles.title}>Аккаунт</h1>
        <div className={accountStyles.accountTabsNav}>
          <nav className={accountStyles.accountTabsNav}>
            {tabs.map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={
                  activeTab === tab.id
                    ? `${accountStyles.accountTabsButton} ${accountStyles.accountTabsButtonActive}`
                    : accountStyles.accountTabsButton
                }
              >
                {tab.icon}
                {tab.label}
              </button>
            ))}
          </nav>
        </div>
        {activeTab === "profile" && (
          <AccountProfile />
        )}
        {activeTab === "security" && (
          <AccountSecurity />
        )}
        {activeTab === "notifications" && (
          <AccountNotifications notifications={notifications} setNotifications={setNotifications} />
        )}
        {activeTab === "agent-transactions" && (
          <AccountAgentTransactionSection />
        )}
      </div>
    </AuthGuard>
  );
}