"use client";

import { Building, Check, Home, Plus, Save, Star, X } from "lucide-react";
import { useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

interface Address {
  id: string;
  label: string;
  name: string;
  street: string;
  city: string;
  state: string;
  zip: string;
  country: string;
  isDefault: boolean;
  type: "home" | "work";
}

const DEFAULT_ADDRESSES: Address[] = [
  {
    id: "1",
    label: "خانه",
    name: "علی رضایی",
    street: "123 Main Street, Apt 4B",
    city: "New York",
    state: "NY",
    zip: "10001",
    country: "United States",
    isDefault: true,
    type: "home",
  },
  {
    id: "2",
    label: "دفتر",
    name: "علی رضایی",
    street: "456 Business Ave, Suite 100",
    city: "New York",
    state: "NY",
    zip: "10018",
    country: "United States",
    isDefault: false,
    type: "work",
  },
];

interface AddressBook2Props {
  addresses?: Address[];
  title?: string;
  className?: string;
}

const AddressBook2 = ({
  addresses: initialAddresses = DEFAULT_ADDRESSES,
  title = "آدرس‌های ارسال",
  className,
}: AddressBook2Props) => {
  const [addresses, setAddresses] = useState(initialAddresses);
  const [selectedId, setSelectedId] = useState(
    addresses.find((a) => a.isDefault)?.id || addresses[0]?.id,
  );
  const [editingId, setEditingId] = useState<string | null>(null);
  const [isAddingNew, setIsAddingNew] = useState(false);
  const [editForm, setEditForm] = useState<Partial<Address>>({});

  const typeIcons = {
    home: <Home className="size-4" />,
    work: <Building className="size-4" />,
  };

  const startEditing = (address: Address) => {
    setEditingId(address.id);
    setEditForm({ ...address });
  };

  const cancelEditing = () => {
    setEditingId(null);
    setEditForm({});
  };

  const saveEdit = () => {
    if (
      editingId &&
      editForm.name &&
      editForm.street &&
      editForm.city &&
      editForm.state &&
      editForm.zip &&
      editForm.country &&
      editForm.type &&
      editForm.label
    ) {
      setAddresses((prev) =>
        prev.map((addr) =>
          addr.id === editingId
            ? ({
                ...addr,
                ...editForm,
              } as Address)
            : addr,
        ),
      );
      setEditingId(null);
      setEditForm({});
    }
  };

  const startAddingNew = () => {
    setIsAddingNew(true);
    setEditForm({
      label: "",
      name: "",
      street: "",
      city: "",
      state: "",
      zip: "",
      country: "ایران",
      type: "home",
      isDefault: addresses.length === 0,
    });
  };

  const cancelAddingNew = () => {
    setIsAddingNew(false);
    setEditForm({});
  };

  const saveNewAddress = () => {
    if (
      editForm.name &&
      editForm.street &&
      editForm.city &&
      editForm.state &&
      editForm.zip &&
      editForm.country &&
      editForm.type &&
      editForm.label
    ) {
      const newAddress: Address = {
        id: Date.now().toString(),
        label: editForm.label,
        name: editForm.name,
        street: editForm.street,
        city: editForm.city,
        state: editForm.state,
        zip: editForm.zip,
        country: editForm.country,
        type: editForm.type as "home" | "work",
        isDefault: addresses.length === 0,
      };
      setAddresses((prev) => [...prev, newAddress]);
      setIsAddingNew(false);
      setEditForm({});
      if (addresses.length === 0) {
        setSelectedId(newAddress.id);
      }
    }
  };

  return (
    <section className={cn("py-16 md:py-24", className)}>
      <div className="container max-w-2xl">
        {/* Header */}
        <div className="mb-6">
          <h2 className="text-xl font-semibold">{title}</h2>
        </div>

        {/* Address Grid */}
        <div className="grid gap-4 sm:grid-cols-2">
          {addresses.map((address) => (
            <Card
              key={address.id}
              className={cn(
                "relative cursor-pointer gap-0 border p-0 transition-all hover:shadow-md",
                selectedId === address.id && editingId !== address.id
                  ? "border-primary shadow-md ring-2 ring-primary"
                  : "",
                editingId === address.id && "border-muted",
              )}
              onClick={() =>
                editingId !== address.id && setSelectedId(address.id)
              }
            >
              <CardContent className="p-4">
                {editingId === address.id ? (
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <h3 className="font-semibold">ویرایش آدرس</h3>
                      <div className="flex gap-2">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            cancelEditing();
                          }}
                        >
                          <X className="size-4" />
                        </Button>
                        <Button
                          size="sm"
                          onClick={(e) => {
                            e.stopPropagation();
                            saveEdit();
                          }}
                        >
                          <Save className="mr-2 size-4" />
                          ذخیره
                        </Button>
                      </div>
                    </div>
                    <div className="grid gap-4">
                      <div className="space-y-2">
                        <Label htmlFor={`label-${address.id}`}>عنوان</Label>
                        <Input
                          id={`label-${address.id}`}
                          value={editForm.label || ""}
                          onChange={(e) =>
                            setEditForm({ ...editForm, label: e.target.value })
                          }
                          onClick={(e) => e.stopPropagation()}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor={`name-${address.id}`}>نام کامل </Label>
                        <Input
                          id={`name-${address.id}`}
                          value={editForm.name || ""}
                          onChange={(e) =>
                            setEditForm({ ...editForm, name: e.target.value })
                          }
                          onClick={(e) => e.stopPropagation()}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor={`street-${address.id}`}>
                          آدرس خیابان
                        </Label>
                        <Input
                          id={`street-${address.id}`}
                          value={editForm.street || ""}
                          onChange={(e) =>
                            setEditForm({ ...editForm, street: e.target.value })
                          }
                          onClick={(e) => e.stopPropagation()}
                        />
                      </div>
                      <div className="grid grid-cols-2 gap-2">
                        <div className="space-y-2">
                          <Label htmlFor={`city-${address.id}`}>شهر</Label>
                          <Input
                            id={`city-${address.id}`}
                            value={editForm.city || ""}
                            onChange={(e) =>
                              setEditForm({ ...editForm, city: e.target.value })
                            }
                            onClick={(e) => e.stopPropagation()}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`state-${address.id}`}>وضعیت</Label>
                          <Input
                            id={`state-${address.id}`}
                            value={editForm.state || ""}
                            onChange={(e) =>
                              setEditForm({
                                ...editForm,
                                state: e.target.value,
                              })
                            }
                            onClick={(e) => e.stopPropagation()}
                          />
                        </div>
                      </div>
                      <div className="grid grid-cols-2 gap-2">
                        <div className="space-y-2">
                          <Label htmlFor={`zip-${address.id}`}>کد پستی </Label>
                          <Input
                            id={`zip-${address.id}`}
                            value={editForm.zip || ""}
                            onChange={(e) =>
                              setEditForm({ ...editForm, zip: e.target.value })
                            }
                            onClick={(e) => e.stopPropagation()}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`country-${address.id}`}>
                            کشور
                          </Label>
                          <Input
                            id={`country-${address.id}`}
                            value={editForm.country || ""}
                            onChange={(e) =>
                              setEditForm({
                                ...editForm,
                                country: e.target.value,
                              })
                            }
                            onClick={(e) => e.stopPropagation()}
                          />
                        </div>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor={`type-${address.id}`}>نوع</Label>
                        <Select
                          value={editForm.type || "home"}
                          onValueChange={(value: "home" | "work") =>
                            setEditForm({ ...editForm, type: value })
                          }
                        >
                          <SelectTrigger
                            id={`type-${address.id}`}
                            onClick={(e) => e.stopPropagation()}
                          >
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="home">خانه</SelectItem>
                            <SelectItem value="work">محل کار</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>
                ) : (
                  <>
                    {/* Selected Indicator */}
                    {selectedId === address.id && (
                      <div className="absolute top-3 right-3 flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
                        <Check className="size-4" />
                      </div>
                    )}

                    {/* Type Icon & Label */}
                    <div className="mb-3 flex items-center gap-2">
                      <div className="flex size-8 items-center justify-center rounded-full bg-muted">
                        {typeIcons[address.type]}
                      </div>
                      <span className="font-medium">{address.label}</span>
                      {address.isDefault && (
                        <Badge variant="secondary" className="gap-1 text-xs">
                          <Star className="size-3 fill-current" />
                          پیش‌فرض
                                                                      </Badge>
                      )}
                    </div>

                    {/* Address Details */}
                    <div className="text-sm text-muted-foreground">
                      <p className="font-medium text-foreground">
                        {address.name}
                      </p>
                      <p>{address.street}</p>
                      <p>
                        {address.city}, {address.state} {address.zip}
                      </p>
                    </div>

                    {/* Actions */}
                    <div className="mt-4 flex gap-2">
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-8 px-2 text-xs"
                        onClick={(e) => {
                          e.stopPropagation();
                          startEditing(address);
                        }}
                      >
                        ویرایش
                      </Button>
                      {!address.isDefault && (
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-8 px-2 text-xs text-destructive hover:text-destructive"
                          onClick={(e) => {
                            e.stopPropagation();
                            setAddresses((prev) =>
                              prev.filter((a) => a.id !== address.id),
                            );
                            if (
                              selectedId === address.id &&
                              addresses.length > 1
                            ) {
                              setSelectedId(
                                addresses.find((a) => a.id !== address.id)
                                  ?.id || "",
                              );
                            }
                            if (editingId === address.id) {
                              setEditingId(null);
                              setEditForm({});
                            }
                          }}
                        >
                          حذف
                        </Button>
                      )}
                    </div>
                  </>
                )}
              </CardContent>
            </Card>
          ))}

          {/* افزودن جدید Card */}
          {isAddingNew ? (
            <Card className="gap-0 border border-muted p-0">
              <CardContent className="p-4">
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <h3 className="font-semibold">افزودن آدرس جدید</h3>
                    <div className="flex gap-2">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={cancelAddingNew}
                      >
                        <X className="size-4" />
                      </Button>
                      <Button size="sm" onClick={saveNewAddress}>
                        <Save className="mr-2 size-4" />
                        ذخیره
                      </Button>
                    </div>
                  </div>
                  <div className="grid gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="new-label">عنوان</Label>
                      <Input
                        id="new-label"
                        value={editForm.label || ""}
                        onChange={(e) =>
                          setEditForm({ ...editForm, label: e.target.value })
                        }
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="new-name">نام کامل</Label>
                      <Input
                        id="new-name"
                        value={editForm.name || ""}
                        onChange={(e) =>
                          setEditForm({ ...editForm, name: e.target.value })
                        }
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="new-street">آدرس خیابان</Label>
                      <Input
                        id="new-street"
                        value={editForm.street || ""}
                        onChange={(e) =>
                          setEditForm({ ...editForm, street: e.target.value })
                        }
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="space-y-2">
                        <Label htmlFor="new-city">شهر</Label>
                        <Input
                          id="new-city"
                          value={editForm.city || ""}
                          onChange={(e) =>
                            setEditForm({ ...editForm, city: e.target.value })
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="new-state">وضعیت</Label>
                        <Input
                          id="new-state"
                          value={editForm.state || ""}
                          onChange={(e) =>
                            setEditForm({ ...editForm, state: e.target.value })
                          }
                        />
                      </div>
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="space-y-2">
                        <Label htmlFor="new-zip">کد پستی</Label>
                        <Input
                          id="new-zip"
                          value={editForm.zip || ""}
                          onChange={(e) =>
                            setEditForm({ ...editForm, zip: e.target.value })
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="new-country">کشور</Label>
                        <Input
                          id="new-country"
                          value={editForm.country || ""}
                          onChange={(e) =>
                            setEditForm({
                              ...editForm,
                              country: e.target.value,
                            })
                          }
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="new-type">نوع</Label>
                      <Select
                        value={editForm.type || "home"}
                        onValueChange={(value: "home" | "work") =>
                          setEditForm({ ...editForm, type: value })
                        }
                      >
                        <SelectTrigger id="new-type">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="home">خانه</SelectItem>
                          <SelectItem value="work">محل کار</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Card
              className="cursor-pointer gap-0 border-dashed p-0 transition-colors hover:border-primary hover:bg-muted/50"
              onClick={startAddingNew}
            >
              <CardContent className="flex h-full min-h-[180px] flex-col items-center justify-center p-4 text-center">
                <div className="mb-3 flex size-12 items-center justify-center rounded-full bg-muted">
                  <Plus className="size-5 text-muted-foreground" />
                </div>
                <p className="font-medium">افزودن آدرس جدید</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  آدرس خود را برای ارسال سفارش‌ها ذخیره کنید.
                                                      </p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </section>
  );
};

export { AddressBook2 };