"use client";

import React, { useState } from "react";
import { useModal } from "@/hooks/useModal";
import { Modal } from "../../../components/ui/modal";
import Button from "../../../components/ui/button/Button";
import Input from "../../../components/form/input/InputField";
import Label from "../../../components/form/Label";

interface Address {
  street_and_number?: string;
  city?: string;
  state?: string;
  country?: string;
  postal_code?: string;
}

interface UserAddressCardProps {
  readonly user: any;
  readonly onSave: (updatedAddress: {
    profile: {
      address: Address;
    };
  }) => Promise<boolean>;
  readonly isSaving: boolean;
}

export default function UserAddressCard({ user, onSave, isSaving }: UserAddressCardProps) {
  const { isOpen, openModal, closeModal } = useModal();
  const address = user.profile?.address || {};

  const [form, setForm] = useState<Address>({
    street_and_number: address.street_and_number || "",
    city: address.city || "",
    state: address.state || "",
    country: address.country || "",
    postal_code: address.postal_code || "",
  });

  const handleOpenModal = () => {
    setForm({
      street_and_number: user.profile?.address?.street_and_number || "",
      city: user.profile?.address?.city || "",
      state: user.profile?.address?.state || "",
      country: user.profile?.address?.country || "",
      postal_code: user.profile?.address?.postal_code || "",
    });
    openModal();
  };

  const handleInputChange = (field: keyof Address, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const handleSave = async () => {
    const saved = await onSave({
      profile: {
        address: form,
      },
    });
    if (saved) closeModal();
  };

  return (
    <>
      <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
        <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
              Address
            </h4>

            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-7 2xl:gap-x-32">
              <div>
                <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">Country</p>
                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                  {address.country || "-"}
                </p>
              </div>

              <div>
                <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">City/State</p>
                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                  {address.city || "-"}, {address.state || "-"}
                </p>
              </div>

              <div>
                <p className="mb-2 text-xs text-gray-500 dark:text-gray-400">Postal Code</p>
                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                  {address.postal_code || "-"}
                </p>
              </div>
            </div>
          </div>

          <button onClick={handleOpenModal} className="edit-button-style dark:text-white/90">
            Edit
          </button>
        </div>
      </div>

      <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[700px] m-4">
        <div className="relative w-full p-4 overflow-y-auto bg-white no-scrollbar rounded-3xl dark:bg-gray-900 lg:p-11">
          <div className="px-2 pr-14">
            <h4 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90">
              Edit Address
            </h4>
            <p className="mb-6 text-sm text-gray-500 dark:text-gray-400 lg:mb-7">
              Update your address information.
            </p>
          </div>
          <form className="flex flex-col" onSubmit={(event) => event.preventDefault()}>
            <div className="px-2">
              <div className="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
                <div>
                  <Label>Country</Label>
                  <Input
                    type="text"
                    value={form.country}
                    disabled={isSaving}
                    onChange={(e) => handleInputChange("country", e.target.value)}
                  />
                </div>

                <div>
                  <Label>State</Label>
                  <Input
                    type="text"
                    value={form.state}
                    disabled={isSaving}
                    onChange={(e) => handleInputChange("state", e.target.value)}
                  />
                </div>

                <div>
                  <Label>City</Label>
                  <Input
                    type="text"
                    value={form.city}
                    disabled={isSaving}
                    onChange={(e) => handleInputChange("city", e.target.value)}
                  />
                </div>

                <div>
                  <Label>Postal Code</Label>
                  <Input
                    type="text"
                    value={form.postal_code}
                    disabled={isSaving}
                    onChange={(e) => handleInputChange("postal_code", e.target.value)}
                  />
                </div>
              </div>
            </div>
            <div className="flex items-center gap-3 px-2 mt-6 lg:justify-end">
              <Button
                type="button"
                size="sm"
                variant="outline"
                onClick={closeModal}
                disabled={isSaving}
              >
                Close
              </Button>
              <Button type="button" size="sm" onClick={handleSave} disabled={isSaving}>
                {isSaving ? "Saving..." : "Save Changes"}
              </Button>
            </div>
          </form>
        </div>
      </Modal>
    </>
  );
}