'use client'

import { useEffect, useState } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { api } from '@/lib/api'
import type { Paginated, Product } from '@/lib/types'
import { ProductCard } from '@/components/ProductCard'

const PER_PAGE = 16

function pageList(current: number, last: number): (number | '…')[] {
  if (last <= 7) return Array.from({ length: last }, (_, i) => i + 1)
  const out: (number | '…')[] = [1]
  const start = Math.max(2, current - 1)
  const end = Math.min(last - 1, current + 1)
  if (start > 2) out.push('…')
  for (let i = start; i <= end; i++) out.push(i)
  if (end < last - 1) out.push('…')
  out.push(last)
  return out
}

export default function AtoZLetterPage() {
  const params = useParams<{ letter: string }>()
  const router = useRouter()
  const letter = decodeURIComponent((params?.letter ?? 'A')).slice(0, 1).toUpperCase()
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [page, setPage] = useState(1)
  const [last, setLast] = useState(1)

  useEffect(() => { setPage(1) }, [letter])

  useEffect(() => {
    setLoading(true)
    window.scrollTo({ top: 0, behavior: 'smooth' })
    api.get<Paginated<Product>>(`/products?letter=${encodeURIComponent(letter)}&sort=name&page=${page}&per_page=${PER_PAGE}`)
      .then((r) => {
        setProducts(r.data ?? [])
        setLast(r.meta?.last_page ?? 1)
      })
      .catch(() => { setProducts([]); setLast(1) })
      .finally(() => setLoading(false))
  }, [letter, page])

  const goPage = (p: number) => { if (p >= 1 && p <= last && p !== page) setPage(p) }

  return (
    <div className="container-x py-6">
      <div className="min-h-[60vh]">
        {loading ? (
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
            {Array.from({ length: PER_PAGE }).map((_, i) => (
              <div key={i} className="flex flex-col overflow-hidden rounded-xl border border-hair bg-white">
                <div className="aspect-square animate-pulse bg-soft" />
                <div className="space-y-2 p-3">
                  <div className="h-3 w-full animate-pulse rounded bg-soft" />
                  <div className="h-3 w-2/3 animate-pulse rounded bg-soft" />
                  <div className="h-4 w-1/2 animate-pulse rounded bg-soft" />
                </div>
              </div>
            ))}
          </div>
        ) : products.length === 0 ? (
          <div className="grid place-items-center rounded-xl border border-hair bg-white p-16 text-center">
            <div className="text-[15px] font-semibold text-ink">No products starting with &ldquo;{letter}&rdquo;</div>
          </div>
        ) : (
          <div className="grid grid-cols-2 items-start gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
            {products.map((p) => (
              <ProductCard key={p.id} product={p} />
            ))}
          </div>
        )}
      </div>

      {!loading && last > 1 && (
        <div className="mt-8 flex flex-wrap items-center justify-center gap-1.5">
          <button onClick={() => goPage(page - 1)} disabled={page <= 1} aria-label="Previous" className="grid h-9 w-9 place-items-center rounded-lg border border-hair text-ink transition hover:border-brand disabled:opacity-40">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m15 18-6-6 6-6" /></svg>
          </button>
          {pageList(page, last).map((p, i) =>
            p === '…' ? (
              <span key={`e${i}`} className="grid h-9 w-9 place-items-center text-sm text-muted">…</span>
            ) : (
              <button
                key={p}
                onClick={() => goPage(p)}
                className={`grid h-9 min-w-9 place-items-center rounded-lg px-2 text-sm font-semibold transition ${p === page ? 'bg-brand text-white' : 'border border-hair text-ink hover:border-brand'}`}
              >{p}</button>
            )
          )}
          <button onClick={() => goPage(page + 1)} disabled={page >= last} aria-label="Next" className="grid h-9 w-9 place-items-center rounded-lg border border-hair text-ink transition hover:border-brand disabled:opacity-40">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m9 18 6-6-6-6" /></svg>
          </button>
        </div>
      )}
    </div>
  )
}