'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { Plus, Trash2, Edit2, Loader2, Star, BookUser } from 'lucide-react';
import { useUserAddresses, useDeleteAddress } from '@/hooks/useAddress';
import { cn } from '@/lib/utils';

import Image from 'next/image';
export default function UserAddressBookPage() {
  const { data: addresses, isLoading } = useUserAddresses();
  const deleteMutation = useDeleteAddress();

  const handleDelete = (id: string) => {
    if (confirm('Apakah Anda yakin ingin menghapus alamat ini?')) {
      deleteMutation.mutate(id);
    }
  };

  return (
    <div className="min-h-screen text-gray-900 relative overflow-hidden pb-24">
      <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 pt-10 sm:pt-12 space-y-8">
        {/* ── Header ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex flex-col sm:flex-row sm:items-end justify-between gap-6"
        >
          <div className="absolute top-0 right-10 pointer-events-none opacity-20 hidden md:block">
            <Image
              src="/mascots/family-hug.avif"
              alt="Family Hug Mascot"
              className="w-40 h-40 object-contain mix-blend-multiply rounded-full"
              width={500}
              height={500}
            />
          </div>
          <div className="relative z-10">
            <h2 className="text-3xl sm:text-4xl font-black text-gray-900 tracking-tight leading-none mb-2">
              Buku <span className="text-[#FFD738]">Alamat</span>
            </h2>
            <p className="text-sm font-medium text-gray-500 tracking-wide">
              Kelola daftar alamat pengiriman untuk mempermudah proses checkout
              Anda.
            </p>
          </div>
          <Link
            href="/dashboard/user/addresses/add"
            className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-[#FFD738] hover:bg-[#FFD738]/90 text-[#1C1D1F] text-sm font-bold shadow-md shadow-[#FFD738]/20 transition-all shrink-0 relative z-10"
          >
            <Plus className="w-5 h-5" /> Tambah Alamat
          </Link>
        </motion.div>

        {/* ── Content ── */}
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
        >
          {isLoading ? (
            <div className="flex flex-col items-center justify-center py-32 space-y-4">
              <Loader2 className="w-10 h-10 animate-spin text-yellow-500" />
              <p className="text-sm font-bold text-gray-500 animate-pulse">
                Memuat alamat...
              </p>
            </div>
          ) : addresses?.length === 0 ? (
            <div className="bg-white/60 backdrop-blur-xl border border-white/50 rounded-3xl p-16 flex flex-col items-center text-center shadow-sm">
              <div className="w-20 h-20 bg-white shadow-sm border border-gray-200 rounded-full flex items-center justify-center mb-6">
                <BookUser className="w-10 h-10 text-gray-400" />
              </div>
              <h3 className="text-xl font-black text-gray-900 mb-2 tracking-tight">
                Belum Ada Alamat Tersimpan
              </h3>
              <p className="text-sm font-medium text-gray-500 mb-8 max-w-sm">
                Tambahkan alamat pengiriman seperti Rumah atau Kantor agar Anda
                tidak perlu mengetik ulang saat checkout.
              </p>
              <Link
                href="/dashboard/user/addresses/add"
                className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-white border border-gray-200 hover:border-yellow-400 hover:bg-yellow-50 text-gray-600 hover:text-yellow-700 text-sm font-bold uppercase tracking-wider transition-all shadow-sm"
              >
                <Plus className="w-4 h-4" /> Tambah Sekarang
              </Link>
            </div>
          ) : (
            <div className="grid md:grid-cols-2 gap-6">
              {addresses?.map((addr, i) => (
                <motion.div
                  initial={{ opacity: 0, scale: 0.96 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: i * 0.05 }}
                  key={addr.id}
                  className={cn(
                    'relative p-6 sm:p-8 rounded-3xl border transition-all overflow-hidden group shadow-sm',
                    addr.is_primary
                      ? 'border-yellow-300 bg-yellow-50'
                      : 'border-white/50 bg-white/60 backdrop-blur-xl hover:bg-white hover:border-yellow-200'
                  )}
                >
                  {/* Primary Badge */}
                  {addr.is_primary && (
                    <div className="absolute top-0 right-6 flex items-center gap-1.5 bg-[#FFD738] text-[#1C1D1F] px-4 py-1.5 rounded-b-xl text-[10px] font-black uppercase tracking-widest shadow-md">
                      <Star className="w-3.5 h-3.5 fill-current" /> Utama
                    </div>
                  )}

                  <div className="flex items-center gap-2 mb-4">
                    <span className="text-[10px] font-bold uppercase tracking-widest bg-white shadow-sm px-3 py-1.5 rounded-lg text-gray-600 border border-gray-200">
                      {addr.label}
                    </span>
                  </div>

                  <h4 className="text-lg font-black text-gray-900 tracking-wide">
                    {addr.recipient_name}
                  </h4>
                  <p className="text-sm font-medium text-gray-500 mb-5">
                    {addr.phone}
                  </p>

                  <p className="text-sm text-gray-600 leading-relaxed mb-6">
                    {addr.address}
                    <br />
                    Kel. {addr.village}, Kec. {addr.district}, {addr.city}
                    <br />
                    {addr.province} {addr.postal_code}
                  </p>

                  <div className="flex items-center gap-3 pt-5 border-t border-gray-200 mt-auto">
                    <Link
                      href={`/dashboard/user/addresses/${addr.id}/edit`}
                      className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold text-gray-600 bg-white shadow-sm hover:bg-yellow-50 border border-gray-200 transition-all"
                    >
                      <Edit2 className="w-3.5 h-3.5" /> Edit
                    </Link>
                    <button
                      onClick={() => handleDelete(addr.id)}
                      disabled={deleteMutation.isPending}
                      className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold text-rose-600 bg-white shadow-sm hover:bg-rose-50 border border-gray-200 transition-all disabled:opacity-50"
                    >
                      {deleteMutation.isPending ? (
                        <Loader2 className="w-3.5 h-3.5 animate-spin" />
                      ) : (
                        <Trash2 className="w-3.5 h-3.5" />
                      )}{' '}
                      Hapus
                    </button>
                  </div>
                </motion.div>
              ))}
            </div>
          )}
        </motion.div>
      </div>
    </div>
  );
}