'use client'

import { PageSkeleton, ListSkeleton } from '@/components/Skeletons'
import { Suspense, useEffect, useState } from 'react'
import Link from 'next/link'
import { useRouter, useSearchParams } from 'next/navigation'
import { useAuth } from '@/lib/auth'
import { useWishlist } from '@/lib/wishlist'
import { api, ApiError } from '@/lib/api'
import { money } from '@/lib/format'
import type { AuthUser } from '@/lib/types'

function AccountInner() {
  const router = useRouter()
  const params = useSearchParams()
  const { user, ready, logout, setUser } = useAuth()
  const wishItems = useWishlist((s) => s.items)
  const removeWish = useWishlist((s) => s.remove)

  const [email, setEmail] = useState('')
  const [gender, setGender] = useState('')
  const [dob, setDob] = useState('')
  const [saving, setSaving] = useState(false)
  const [msg, setMsg] = useState<string | null>(null)
  const tab = params.get('tab') || 'profile'

  useEffect(() => { if (ready && !user) router.replace('/login?redirect=/account') }, [ready, user, router])
  useEffect(() => {
    if (user) { setEmail(user.email || ''); setGender(user.gender || ''); setDob(user.date_of_birth || '') }
  }, [user])

  if (!ready || !user) return <PageSkeleton />

  const save = async () => {
    setSaving(true); setMsg(null)
    try {
      const updated = await api.put<AuthUser>('/profile', { email: email || undefined, gender: gender || undefined, date_of_birth: dob || undefined }, true)
      setUser({ ...user, ...updated })
      setMsg('Profile updated.')
    } catch (e) {
      setMsg((e as ApiError).message || 'Could not save changes.')
    } finally { setSaving(false) }
  }

  const tiles = [
    { label: 'Order History', href: '/account/orders' },
    { label: 'Delivery Address', href: '/account/addresses' },
    { label: 'Payment Methods', href: '/account/cards' },
    { label: 'Wishlist', href: '/account?tab=wishlist' },
    { label: 'Membership', href: '/plans' },
  ]

  return (
    <div className="container-x py-8">
      <nav className="mb-2 text-xs text-muted"><Link href="/">Home</Link> / <span className="text-ink">My account</span></nav>

      <div className="flex flex-wrap items-center gap-3">
        <h1 className="text-2xl font-extrabold text-brand-strong">{user.name}</h1>
        {user.email_verified && <span className="rounded-full bg-brand-strong px-3 py-1 text-[11px] font-bold text-white">VERIFIED</span>}
      </div>
      {user.phone && <div className="mt-1 text-lg font-semibold text-brand-strong">{user.phone}</div>}

      {/* tiles */}
      <div className="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
        {tiles.map((t) => (
          <Link key={t.label} href={t.href} className="card flex flex-col items-center gap-2 p-5 text-center hover:border-brand hover:shadow-md transition">
            <span className="grid h-10 w-10 place-items-center rounded-full bg-soft text-brand-strong">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg>
            </span>
            <span className="text-[13px] font-medium">{t.label}</span>
          </Link>
        ))}
      </div>

      {tab === 'wishlist' ? (
        <div className="mt-8">
          <h2 className="mb-3 text-lg font-bold">My Wishlist</h2>
          {wishItems.length === 0 ? (
            <div className="card p-10 text-center text-muted">No products in your wishlist yet. <Link href="/categories" className="text-brand-strong">Discover products</Link></div>
          ) : (
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
              {wishItems.map((w) => (
                <div key={w.product_id} className="card flex flex-col overflow-hidden">
                  <Link href={`/product/${w.product_id}`} className="block aspect-square bg-soft">
                    {w.image && (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={w.image} alt={w.name} className="h-full w-full object-contain p-3" />
                    )}
                  </Link>
                  <div className="flex flex-1 flex-col p-3">
                    <Link href={`/product/${w.product_id}`} className="line-clamp-2 text-[13px] font-medium hover:text-brand-strong">{w.name}</Link>
                    <div className="mt-1 font-bold">{money(w.price)}</div>
                    <button onClick={() => removeWish(w.product_id)} className="mt-2 text-[12px] text-rose-600 hover:underline">Remove</button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      ) : (
        <div className="mt-8 max-w-3xl">
          <h2 className="mb-3 text-lg font-bold">Profile details</h2>
          <div className="grid gap-4 sm:grid-cols-3">
            <div>
              <label className="mb-1 block text-sm font-semibold">Email</label>
              <input value={email} onChange={(e) => setEmail(e.target.value)} className="input" placeholder="you@example.com" />
            </div>
            <div>
              <label className="mb-1 block text-sm font-semibold">Birthday</label>
              <input type="date" value={dob} onChange={(e) => setDob(e.target.value)} className="input" />
            </div>
            <div>
              <label className="mb-1 block text-sm font-semibold">Gender</label>
              <select value={gender} onChange={(e) => setGender(e.target.value)} className="input">
                <option value="">Gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
              </select>
            </div>
          </div>
          {msg && <p className="mt-3 text-sm text-brand-strong">{msg}</p>}
          <div className="mt-5 flex gap-3">
            <button onClick={save} disabled={saving} className="btn btn-primary disabled:opacity-60">{saving ? 'Saving…' : 'Save changes'}</button>
            <button onClick={() => { logout(); router.push('/') }} className="btn btn-brand">Logout</button>
          </div>
        </div>
      )}
    </div>
  )
}

export default function AccountPage() {
  return <Suspense><AccountInner /></Suspense>
}