import { getCurrentUser } from "@/lib/customerAuth";
import { getAddressesForUser } from "@/lib/queries";
import { addAddress, deleteAddress } from "./actions";
import { MapPin, Trash2 } from "lucide-react";

export default async function AddressesPage() {
  const user = await getCurrentUser();
  if (!user) return null;

  const addresses = await getAddressesForUser(user.id);

  return (
    <div>
      <h1 className="font-display font-semibold text-2xl uppercase text-ink mb-6">
        Address Book
      </h1>

      {addresses.length > 0 && (
        <div className="grid sm:grid-cols-2 gap-4 mb-8">
          {addresses.map((addr) => (
            <div key={addr.id} className="border border-line rounded-xl bg-white p-5 relative">
              {addr.isDefault && (
                <span className="absolute top-4 right-4 text-[10px] font-mono uppercase bg-harbor/10 text-harbor px-2 py-1 rounded">
                  Default
                </span>
              )}
              <div className="flex items-center gap-2 mb-2 text-ink/50">
                <MapPin size={14} />
                <span className="text-xs font-mono uppercase">{addr.label || "Address"}</span>
              </div>
              <p className="font-medium text-ink">{addr.firstName} {addr.lastName}</p>
              <p className="text-sm text-ink/70">
                {addr.street}{addr.apartment ? `, ${addr.apartment}` : ""}
              </p>
              <p className="text-sm text-ink/70">{addr.city}, {addr.county}</p>
              <form action={deleteAddress.bind(null, addr.id)} className="mt-3">
                <button type="submit" className="flex items-center gap-1 text-xs text-coral hover:underline">
                  <Trash2 size={12} /> Remove
                </button>
              </form>
            </div>
          ))}
        </div>
      )}

      <div className="border border-line rounded-xl bg-white p-6 max-w-lg">
        <h2 className="font-display font-semibold text-lg uppercase text-ink mb-4">
          Add New Address
        </h2>
        <form action={addAddress} className="flex flex-col gap-4">
          <input
            name="label"
            placeholder="Label (e.g. Home, Office)"
            className="border border-line rounded-lg px-4 py-2.5 text-sm outline-none focus:border-harbor"
          />
          <div className="grid grid-cols-2 gap-3">
            <input
              name="firstName"
              placeholder="First name"
              required
              className="border border-line rounded-lg px-4 py-2.5 text-sm outline-none focus:border-harbor"
            />
            <input
              name="lastName"
              placeholder="Last name"
              required
              className="border border-line rounded-lg px-4 py-2.5 text-sm outline-none focus:border-harbor"
            />
          </div>
          <input
            name="street"
            placeholder="Street address"
            required
            className="border border-line rounded-lg px-4 py-2.5 text-sm outline-none focus:border-harbor"
          />
          <input
            name="apartment"
            placeholder="Apartment / Building (optional)"
            className="border border-line rounded-lg px-4 py-2.5 text-sm outline-none focus:border-harbor"
          />
          <div className="grid grid-cols-2 gap-3">
            <input
              name="city"
              placeholder="City"
              required
              className="border border-line rounded-lg px-4 py-2.5 text-sm outline-none focus:border-harbor"
            />
            <input
              name="county"
              placeholder="County"
              required
              className="border border-line rounded-lg px-4 py-2.5 text-sm outline-none focus:border-harbor"
            />
          </div>
          <label className="flex items-center gap-2 text-sm text-ink/70">
            <input type="checkbox" name="isDefault" />
            Set as default address
          </label>
          <button
            type="submit"
            className="bg-coral hover:bg-coral-dark transition-colors text-white font-display font-semibold uppercase text-sm py-3 rounded-full"
          >
            Save Address
          </button>
        </form>
      </div>
    </div>
  );
}