import { useAuthStore } from '@/store/auth-store'
import { useAuthModalStore } from '@/store/auth-modal-store'
import { ProfileCard } from './ProfileCard'
import { XuWalletCard } from './XuWalletCard'
import { DailyGoalCard } from './DailyGoalCard'
import { ExamDateCard } from './ExamDateCard'
import { NotificationsCard } from './NotificationsCard'
import { AccountCard } from './AccountCard'

export function Settings() {
  const user = useAuthStore((s) => s.user)
  const openModal = useAuthModalStore((s) => s.open)

  if (!user) {
    return (
      <div className="px-4 lg:px-6 py-12 max-w-6xl mx-auto flex flex-col items-center justify-center gap-4 text-center">
        <span className="material-symbols-outlined text-slate-300" style={{ fontSize: 64 }}>settings</span>
        <h1 className="text-xl font-bold text-slate-700">Cài đặt</h1>
        <p className="text-slate-400 text-sm max-w-xs">
          Đăng nhập để cá nhân hoá mục tiêu học tập, cài đặt thông báo và quản lý tài khoản.
        </p>
        <button
          onClick={() => openModal('login')}
          className="mt-2 px-6 py-2.5 bg-blue-600 text-white rounded-full font-bold text-sm hover:bg-blue-700 transition-colors"
        >
          Đăng nhập
        </button>
      </div>
    )
  }

  return (
    <div className="px-4 lg:px-6 py-6 max-w-5xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-extrabold text-slate-800 mb-1">Cài đặt</h1>
        <p className="text-slate-400 text-sm">Quản lý hồ sơ, mục tiêu học tập và thông báo.</p>
      </div>

      <div className="grid grid-cols-12 gap-5">
        <ProfileCard />
        <XuWalletCard />
        <DailyGoalCard />
        <ExamDateCard />
        <NotificationsCard />
        <AccountCard />
      </div>
    </div>
  )
}