"use client";

import React from "react";
import { Check, Trash2, MapPin, Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { useTranslations, useLocale } from "next-intl";

interface AddressListProps {
  addresses: any[];
  selectedAddress: number | string | null;
  onSelectAddress: (id: number | string) => void;
  onDeleteAddress?: (id: number | string) => void;
  onAddNewAddress: () => void;
}

export default function AddressList({
  addresses,
  selectedAddress,
  onSelectAddress,
  onDeleteAddress,
  onAddNewAddress,
}: AddressListProps) {
  const t = useTranslations("cart");
  const locale = useLocale();
  const isRtl = locale === "ar";
  
  return (
    <div className="space-y-4 mb-6" dir={isRtl ? "rtl" : "ltr"}>
      <div className="flex items-center justify-between mb-2 gap-4">
        <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
          <MapPin className="w-5 h-5 text-primary" />
          {t("shipping-information")}
        </h3>
        <Button
          variant="outline"
          size="sm"
          onClick={onAddNewAddress}
          className="rounded-full border-primary text-primary hover:bg-primary/10 flex items-center gap-1 font-bold"
        >
          <Plus className="w-4 h-4" />
          {t("or-add-new-address")}
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {addresses.map((address) => {
          const isSelected = selectedAddress === address.id;
          return (
            <Card
              key={address.id}
              onClick={() => onSelectAddress(address.id)}
              className={`relative cursor-pointer transition-all duration-300 p-4 border-2 rounded-2xl ${
                isSelected
                  ? "border-primary bg-primary/5 shadow-md"
                  : "border-gray-100 bg-white hover:border-gray-200"
              }`}
            >
              <div className="flex justify-between items-start mb-2">
                <div className={`p-1.5 rounded-full ${isSelected ? "bg-primary text-white" : "bg-gray-100 text-gray-400"}`}>
                  <Check className="w-4 h-4" />
                </div>
                {onDeleteAddress && (
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      onDeleteAddress(address.id);
                    }}
                    className="p-1.5 text-gray-400 hover:text-red-500 transition-colors"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                )}
              </div>
              
              <div className="space-y-1">
                <p className="font-bold text-gray-900">
                  {address.first_name} {address.last_name}
                </p>
                <p className="text-sm text-gray-600 leading-relaxed">
                  {address.address1 || address.address}
                </p>
                <p className="text-sm text-gray-600">
                  {address.city}, {address.country}
                </p>
                <p className="text-sm font-medium text-gray-900 mt-2" dir="ltr">
                  {address.phone}
                </p>
              </div>

              {isSelected && (
                <div className={`absolute -top-2 ${isRtl ? "-right-2" : "-left-2"} bg-primary text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm`}>
                  {isRtl ? "محدد" : "Selected"}
                </div>
              )}
            </Card>
          );
        })}
      </div>
    </div>
  );
}