'use client'

import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { useAuth } from '@/lib/AuthContext'
import {
  ChevronRight,
  ShoppingBag,
  HandHeart,
  MessageSquareText,
  MapPin,
  Flame,
  Bell,
  Sun,
  Crown,
  LogOut,
  Wallet,
} from 'lucide-react'

/* ─── Quick Actions ──────────────────────────────────────────── */

const QUICK_ACTIONS = [
  { href: '/souq', icon: ShoppingBag, label: 'Souq' },
  { href: '/waqf', icon: HandHeart, label: 'Waqf' },
  { href: '/forum', icon: MessageSquareText, label: 'Forum' },
  { href: '/halal-monitor', icon: MapPin, label: 'Halal Monitor' },
]

/* ─── Settings Items ─────────────────────────────────────────── */

const SETTINGS = [
  {
    icon: Flame,
    label: 'Spirituality Stats',
    value: 'N/A',
    color: 'text-orange-400',
  },
  {
    icon: Bell,
    label: 'Notifications',
    value: '',
    color: 'text-[#999]',
  },
  {
    icon: Sun,
    label: 'Appearance',
    value: 'Dark Mode',
    color: 'text-[#999]',
  },
  {
    icon: Crown,
    label: 'Upgrade to Pro',
    value: '',
    color: 'text-[#D4AF37]',
    gold: true,
  },
]

/* ─── Component ──────────────────────────────────────────────── */

export default function ProfilePage() {
  const router = useRouter()
  const { user, loading } = useAuth()

  const handleSignOut = () => {
    if (typeof window !== 'undefined') {
      localStorage.clear()
    }
    router.push('/login')
  }

  if (loading) {
    return (
      <div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
        <div className="w-8 h-8 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
      </div>
    )
  }

  const displayName = user?.name || 'Guest'
  const initial = displayName.charAt(0).toUpperCase()
  const flhBalance = user?.flhBalance ?? 0
  const usdValue = (flhBalance * 0.004).toFixed(2)

  return (
    <div className="min-h-dvh bg-[#0a0a0f] pb-32 select-none">
      {/* Scrollable content */}
      <div className="overflow-y-auto">
        {/* ═══ Profile Header ═══ */}
        <div className="px-5 pt-14 pb-6">
          <div className="flex items-center gap-4">
            {/* Avatar */}
            <div className="w-[60px] h-[60px] rounded-full bg-[#D4AF37]/20 border-2 border-[#D4AF37]/30 flex items-center justify-center shrink-0">
              <span className="text-xl font-bold text-[#D4AF37]">{initial}</span>
            </div>

            {/* Name + badges */}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <h2 className="text-white font-bold text-lg truncate">{displayName}</h2>
              </div>
              <p className="text-[#999] text-sm truncate">{user?.email}</p>
              <div className="flex items-center gap-2 mt-2">
                {user?.isPremium && (
                  <span className="text-[10px] font-bold text-white bg-[#D4AF37] rounded-full px-2.5 py-0.5 uppercase tracking-wider">
                    Premium
                  </span>
                )}
                {user?.isPro && (
                  <span className="text-[10px] font-bold text-white bg-[#10B981] rounded-full px-2.5 py-0.5 uppercase tracking-wider">
                    Pro
                  </span>
                )}
                {user?.experienceLevel && (
                  <span className="text-[10px] font-bold text-white bg-[#10B981] rounded-full px-2.5 py-0.5 uppercase tracking-wider">
                    {user.experienceLevel}
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* ═══ FLH Wallet Card ═══ */}
        <div className="mx-5 mb-5">
          <Link
            href="/wallet"
            className="block bg-gradient-to-br from-[#D4AF37]/10 to-[#B8860B]/5 rounded-2xl border border-[#D4AF37]/20 p-5 active:scale-[0.98] transition-transform"
          >
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-[#D4AF37]/15 flex items-center justify-center">
                  <Wallet size={20} className="text-[#D4AF37]" />
                </div>
                <div>
                  <p className="text-[11px] text-[#666] font-medium uppercase tracking-widest mb-0.5">
                    FLH Wallet
                  </p>
                  <div className="flex items-baseline gap-2">
                    <span className="text-xl font-bold text-[#D4AF37]">
                      {flhBalance.toLocaleString()}
                    </span>
                    <span className="text-xs text-[#999]">≈ ${usdValue} USD</span>
                  </div>
                </div>
              </div>
              <ChevronRight size={18} className="text-[#D4AF37]" />
            </div>
          </Link>
        </div>

        {/* ═══ Quick Action Grid (2x2) ═══ */}
        <div className="mx-5 mb-5">
          <p className="text-[11px] text-[#666] font-medium uppercase tracking-widest mb-3">
            Quick Actions
          </p>
          <div className="grid grid-cols-2 gap-3">
            {QUICK_ACTIONS.map((action) => {
              const Icon = action.icon
              return (
                <Link
                  key={action.href}
                  href={action.href}
                  className="bg-[#111118] rounded-2xl border border-[#222] p-4 active:scale-[0.96] transition-transform"
                >
                  <div className="w-10 h-10 rounded-xl bg-[#D4AF37]/10 flex items-center justify-center mb-3">
                    <Icon size={20} className="text-[#D4AF37]" />
                  </div>
                  <p className="text-white text-sm font-semibold">{action.label}</p>
                </Link>
              )
            })}
          </div>
        </div>

        {/* ═══ Settings List ═══ */}
        <div className="mx-5 mb-5">
          <p className="text-[11px] text-[#666] font-medium uppercase tracking-widest mb-3">
            Settings
          </p>
          <div className="bg-[#111118] rounded-2xl border border-[#222] overflow-hidden divide-y divide-[#222]">
            {SETTINGS.map((item, idx) => {
              const Icon = item.icon
              return (
                <button
                  key={idx}
                  className="w-full flex items-center gap-3 px-4 py-4 active:bg-[#1a1a24] transition-colors text-left"
                >
                  <div className="w-8 h-8 rounded-lg bg-[#0a0a0f] border border-[#222] flex items-center justify-center shrink-0">
                    <Icon size={15} className={item.color} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <span
                      className={`text-sm font-medium ${
                        item.gold ? 'text-[#D4AF37]' : 'text-white'
                      }`}
                    >
                      {item.label}
                    </span>
                    {item.value && (
                      <span className="text-[11px] text-[#999] ml-2">{item.value}</span>
                    )}
                  </div>
                  <ChevronRight size={15} className="text-[#666] shrink-0" />
                </button>
              )
            })}
          </div>
        </div>

        {/* ═══ Sign Out / Login ═══ */}
        <div className="mx-5 mb-6">
          {!user ? (
            <Link
              href="/login"
              className="w-full flex items-center justify-center gap-2 py-4 rounded-2xl gold-gradient text-bg-deep font-bold active:scale-[0.97] transition-all text-center"
            >
              Login
            </Link>
          ) : (
            <button
              onClick={handleSignOut}
              className="w-full flex items-center justify-center gap-2 py-4 rounded-2xl border border-red-900/40 bg-red-950/20 active:bg-red-950/40 transition-colors cursor-pointer"
            >
              <LogOut size={16} className="text-red-400" />
              <span className="text-sm font-semibold text-red-400">Logout</span>
            </button>
          )}
        </div>

        {/* Bottom spacer */}
        <div className="h-4" />
      </div>
    </div>
  )
}