koin_ping_0.2.0/frontend/src/pages/addresses/Addresses.jsx

import { useState, useEffect } from "react";
import { useAuth } from "../../contexts/AuthContext";
import AddressForm from "../../components/AddressForm";
import UpgradeBanner from "../../components/UpgradeBanner";
import { getAddresses, createAddress, deleteAddress, updateAddress } from "../../api/addresses";
import "./Addresses.css";

export default function Addresses() {
  const { tierLimits, refreshAccount } = useAuth();
  const [addresses, setAddresses] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [editingId, setEditingId] = useState(null);
  const [editLabel, setEditLabel] = useState("");

  const maxAddresses = tierLimits.max_addresses;
  const isUnlimited = maxAddresses === -1;
  const atLimit = !isUnlimited && addresses.length >= maxAddresses;

  useEffect(() => {
    async function fetchAddresses() {
      try {
        setLoading(true);
        const data = await getAddresses();
        setAddresses(data);
      } catch (err) {
        setError(err.message);
        console.error("Failed to fetch addresses:", err);
      } finally {
        setLoading(false);
      }
    }

    fetchAddresses();
  }, []);

  async function handleAddressSubmit(data) {
    try {
      const newAddress = await createAddress(data);
      setAddresses((prev) => [...prev, newAddress]);
      setError(null);
      refreshAccount();
    } catch (err) {
      setError(err.message);
      console.error("Failed to create address:", err);
    }
  }

  async function handleDelete(id, label) {
    const displayName = label || "this address";
    if (!window.confirm(`Remove "${displayName}"? This will also delete all associated alert rules.`)) {
      return;
    }
    try {
      await deleteAddress(id);
      setAddresses((prev) => prev.filter((a) => a.id !== id));
      setError(null);
      refreshAccount();
    } catch (err) {
      setError(err.message);
      console.error("Failed to delete address:", err);
    }
  }

  function handleEditStart(addr) {
    setEditingId(addr.id);
    setEditLabel(addr.label ?? "");
  }

  async function handleEditSave(id) {
    try {
      const updated = await updateAddress(id, { label: editLabel || null });
      setAddresses((prev) => prev.map((a) => (a.id === id ? updated : a)));
      setEditingId(null);
      setEditLabel("");
      setError(null);
    } catch (err) {
      setError(err.message);
      console.error("Failed to update address:", err);
    }
  }

  function handleEditCancel() {
    setEditingId(null);
    setEditLabel("");
  }

  return (
    <div className="page">
      <h1>Add Addresses to Track</h1>

      {atLimit && (
        <UpgradeBanner
          message={`Your plan allows ${maxAddresses} address${maxAddresses !== 1 ? "es" : ""}. Upgrade to track more.`}
        />
      )}

      <div className={`mb-xl${atLimit ? " tier-locked" : ""}`}>
        <AddressForm onSubmit={handleAddressSubmit} />
      </div>

      <div>
        <h2>Existing Tracked Addresses</h2>
        {loading && <p>Loading addresses...</p>}
        {error && <p className="text-error">Error: {error}</p>}
        {!loading && !error && addresses.length === 0 && (
          <p className="text-dimmed">
            No addresses tracked yet. Add one above to get started.
          </p>
        )}
        {addresses.length > 0 && (
          <ul className="list-unstyled">
            {addresses.map((addr, index) => (
              <li key={addr.id || index} className="list-item--card">
                <div className="flex flex--between flex--center">
                  <div>
                    {editingId === addr.id ? (
                      <div className="flex flex--center gap-sm mb-sm">
                        <input
                          value={editLabel}
                          onChange={(e) => setEditLabel(e.target.value)}
                          placeholder="Label (optional)"
                          className="address__edit-input"
                          onKeyDown={(e) => {
                            if (e.key === "Enter") handleEditSave(addr.id);
                            if (e.key === "Escape") handleEditCancel();
                          }}
                          autoFocus
                        />
                        <button
                          onClick={() => handleEditSave(addr.id)}
                          className="btn btn--primary btn--sm"
                        >
                          Save
                        </button>
                        <button
                          onClick={handleEditCancel}
                          className="btn btn--ghost btn--sm"
                        >
                          Cancel
                        </button>
                      </div>
                    ) : (
                      <div className="flex flex--center gap-sm mb-sm">
                        <span className="text-bold">
                          {addr.label || "Unlabeled"}
                        </span>
                        <button
                          onClick={() => handleEditStart(addr)}
                          className="address__edit-link"
                        >
                          Edit
                        </button>
                      </div>
                    )}
                    <div className="text-mono text-sm text-muted">
                      {addr.address}
                    </div>
                  </div>
                  <button
                    onClick={() => handleDelete(addr.id, addr.label)}
                    className="address__remove"
                  >
                    Remove
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}