'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 { api } from '@/lib/api'
import type { Order, Paginated } from '@/lib/types'
import { money } from '@/lib/format'

const STATUS_COLOR: Record<string, string> = {
  pending: 'bg-amber-100 text-amber-700',
  paid: 'bg-sky-100 text-sky-700',
  processing: 'bg-sky-100 text-sky-700',
  fulfilled: 'bg-brand-soft text-brand-strong',
  cancelled: 'bg-rose-100 text-rose-700',
  refunded: 'bg-soft text-ink',
}

function OrdersInner() {
  const router = useRouter()
  const params = useSearchParams()
  const { user, ready } = useAuth()
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)
  const [filter, setFilter] = useState<'all' | 'current' | 'completed' | 'cancelled'>('all')
  const placed = params.get('placed')

  useEffect(() => { if (ready && !user) router.replace('/login?redirect=/account/orders') }, [ready, user, router])

  useEffect(() => {
    if (!user) return
    api.get<Paginated<Order>>('/orders', true).then((r) => setOrders(r.data ?? [])).catch(() => setOrders([])).finally(() => setLoading(false))
  }, [user])

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

  const groups: Record<string, string[]> = {
    current: ['pending', 'paid', 'processing'],
    completed: ['fulfilled'],
    cancelled: ['cancelled', 'refunded'],
  }
  const shown = filter === 'all' ? orders : orders.filter((o) => groups[filter].includes(o.status))
  const TABS: { key: typeof filter; label: string }[] = [
    { key: 'all', label: 'All' },
    { key: 'current', label: 'Current' },
    { key: 'completed', label: 'Completed' },
    { key: 'cancelled', label: 'Cancelled' },
  ]

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

      {placed !== null && (
        <div className="mt-4 rounded-xl border border-brand-tint bg-brand-soft p-4 text-sm text-brand-dark">
          ✓ Order placed successfully{placed ? <> — reference <span className="font-bold">{placed}</span></> : ''}. We&rsquo;ll notify you as it&rsquo;s processed.
        </div>
      )}

      <div className="mt-5 flex flex-wrap gap-2">
        {TABS.map((t) => (
          <button key={t.key} onClick={() => setFilter(t.key)} className={`rounded-lg border px-4 py-1.5 text-sm ${filter === t.key ? 'border-brand bg-brand-strong text-white' : 'border-hair hover:border-brand'}`}>{t.label}</button>
        ))}
      </div>

      <div className="mt-6 space-y-3">
        {loading ? (
          <ListSkeleton count={3} />
        ) : shown.length === 0 ? (
          <div className="card p-12 text-center">
            <div className="text-lg font-bold">No orders found</div>
            <div className="mt-1 text-sm text-muted">{filter === 'all' ? 'There are no orders yet.' : `No ${filter} orders.`} <Link href="/categories" className="text-brand-strong hover:underline">Start shopping</Link></div>
          </div>
        ) : (
          shown.map((o) => (
            <div key={o.id} className="card p-4">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div>
                  <div className="font-semibold">#{o.reference}</div>
                  <div className="text-[12px] text-muted">{new Date(o.created_at).toLocaleDateString()}</div>
                </div>
                <span className={`tag ${STATUS_COLOR[o.status] ?? 'bg-soft text-muted'}`}>{o.status}</span>
              </div>
              <div className="mt-2 text-sm text-muted">
                {o.vendor_orders?.flatMap((v) => v.items).slice(0, 3).map((it, i) => <span key={i}>{i > 0 && ', '}{it.quantity}× {it.name}</span>)}
              </div>
              <div className="mt-2 text-sm font-bold">{money(o.grand_total)}</div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}

export default function OrdersPage() {
  return <Suspense><OrdersInner /></Suspense>
}