import { useState } from 'react'
import { useAuthStore } from '@/store/auth-store'
import { supabase } from '@/lib/supabase'
import { cn } from '@/lib/utils'

export function AccountCard() {
  const logout = useAuthStore((s) => s.logout)
  const [changingPw, setChangingPw] = useState(false)
  const [pw, setPw] = useState({ current: '', next: '', confirm: '' })
  const [saving, setSaving] = useState(false)
  const [msg, setMsg] = useState('')
  const [confirmDelete, setConfirmDelete] = useState(false)

  async function changePassword() {
    if (pw.next !== pw.confirm) { setMsg('Mật khẩu xác nhận không khớp.'); return }
    if (pw.next.length < 6) { setMsg('Mật khẩu phải có ít nhất 6 ký tự.'); return }
    setSaving(true)
    setMsg('')
    try {
      const { error } = await supabase.auth.updateUser({ password: pw.next })
      if (error) throw error
      setMsg('Đổi mật khẩu thành công!')
      setChangingPw(false)
      setPw({ current: '', next: '', confirm: '' })
    } catch {
      setMsg('Không thể đổi mật khẩu. Thử lại sau.')
    } finally {
      setSaving(false)
    }
  }

  async function deleteAccount() {
    // Supabase doesn't support self-delete via client SDK — log out and show message
    await logout()
    alert('Vui lòng liên hệ hỗ trợ để xóa tài khoản.')
  }

  return (
    <section className="col-span-12 bg-white rounded-xl p-6 shadow-sm">
      <h2 className="text-lg font-bold mb-5 flex items-center gap-2 text-slate-800">
        <span className="material-symbols-outlined text-blue-600" style={{ fontSize: 22 }}>security</span>
        Tài khoản &amp; Bảo mật
      </h2>

      {/* Change password */}
      <div className="flex items-center justify-between py-4 border-b border-slate-100">
        <div>
          <p className="font-semibold text-slate-800 text-sm">Mật khẩu</p>
          <p className="text-xs text-slate-400 mt-0.5">Cập nhật mật khẩu để bảo mật tài khoản</p>
        </div>
        <button
          onClick={() => { setChangingPw(!changingPw); setMsg('') }}
          className="px-5 py-2 rounded-full border border-slate-200 text-sm font-bold hover:bg-slate-50 transition-colors"
        >
          Đổi mật khẩu
        </button>
      </div>

      {changingPw && (
        <div className="py-4 border-b border-slate-100 space-y-3">
          {(['next', 'confirm'] as const).map((field) => (
            <input
              key={field}
              type="password"
              placeholder={field === 'next' ? 'Mật khẩu mới' : 'Xác nhận mật khẩu mới'}
              value={pw[field]}
              onChange={(e) => setPw((p) => ({ ...p, [field]: e.target.value }))}
              className="w-full max-w-sm border border-slate-200 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200"
            />
          ))}
          <div className="flex gap-2">
            <button
              onClick={changePassword}
              disabled={saving}
              className={cn('px-5 py-2 bg-blue-600 text-white rounded-lg text-sm font-bold hover:bg-blue-700 transition-colors', saving && 'opacity-50')}
            >
              {saving ? 'Đang lưu...' : 'Lưu'}
            </button>
            <button onClick={() => { setChangingPw(false); setMsg('') }} className="px-4 py-2 text-slate-400 text-sm">
              Huỷ
            </button>
          </div>
          {msg && <p className={cn('text-sm', msg.includes('thành công') ? 'text-green-600' : 'text-red-600')}>{msg}</p>}
        </div>
      )}

      {/* Danger zone */}
      <div className="mt-6">
        <p className="text-xs font-bold text-red-500 uppercase tracking-wider mb-3">Khu vực nguy hiểm</p>
        <div className="flex items-center justify-between p-4 bg-red-50 rounded-xl border border-red-100">
          <div>
            <p className="font-semibold text-red-600 text-sm">Xóa tài khoản</p>
            <p className="text-xs text-red-400 mt-0.5">Hành động này không thể hoàn tác. Toàn bộ dữ liệu học tập sẽ bị mất.</p>
          </div>
          {confirmDelete ? (
            <div className="flex gap-2 ml-4 flex-shrink-0">
              <button onClick={deleteAccount} className="px-4 py-2 bg-red-600 text-white rounded-full text-sm font-bold hover:bg-red-700 transition-colors">
                Xác nhận
              </button>
              <button onClick={() => setConfirmDelete(false)} className="px-4 py-2 text-slate-500 text-sm">
                Huỷ
              </button>
            </div>
          ) : (
            <button
              onClick={() => setConfirmDelete(true)}
              className="ml-4 flex-shrink-0 px-5 py-2 bg-red-600 text-white rounded-full text-sm font-bold shadow-sm hover:bg-red-700 transition-colors"
            >
              Xóa tài khoản
            </button>
          )}
        </div>
      </div>
    </section>
  )
}
