import React, { useEffect, useId, useState } from "react";
import { Link } from "react-router-dom";
import { __, sprintf } from "@wordpress/i18n";
import { buildRestUrl, buildUrl } from "@libs/url";
import { getModule } from "@libs/modules";
import "./member-lookup-table.scss";

const MemberLookupTable = ({ detailsPath, showToast }) => {
  const { apiBaseUrl, nonce, wpAdminUrl } = window.arraySubs?.env || {};
  const searchId = useId();
  const [searchQuery, setSearchQuery] = useState("");
  const [customers, setCustomers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const query = searchQuery.trim();
  const tooShort = query.length === 1;
  const storeCreditModule = getModule("store_credit");
  const showStoreCredit = storeCreditModule?.available && storeCreditModule?.enabled;
  const customersUrl = buildUrl(`${wpAdminUrl || "/wp-admin/"}admin.php`, {
    page: "wc-admin",
    path: "/customers",
    filter: "advanced",
    match: "all",
    "arraysubs_subscription_status_is[0]": "arraysubs-active",
  });

  useEffect(() => {
    const controller = new AbortController();
    setCustomers([]);
    setError("");
    setLoading(!tooShort);

    if (tooShort) {
      return () => controller.abort();
    }

    const timer = setTimeout(
      async () => {
        try {
          const response = await fetch(
            buildRestUrl(apiBaseUrl, "arraysubs/v1/members/search", { query }),
            { headers: { "X-WP-Nonce": nonce }, signal: controller.signal },
          );
          const data = await response.json();
          if (!response.ok || !data.success) {
            throw new Error(
              data.message || __("Failed to load customers.", "arraysubs"),
            );
          }
          if (!controller.signal.aborted) {
            setCustomers(data.data);
          }
        } catch (requestError) {
          if (!controller.signal.aborted) {
            const message =
              requestError.message ||
              __("Failed to load customers.", "arraysubs");
            setError(message);
            showToast(message, "error");
          }
        } finally {
          if (!controller.signal.aborted) {
            setLoading(false);
          }
        }
      },
      query ? 300 : 0,
    );

    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [apiBaseUrl, nonce, query, tooShort, showToast]);

  const emptyMessage = loading
    ? __("Loading customers…", "arraysubs")
    : tooShort
    ? __("Enter at least 2 characters to search.", "arraysubs")
    : query
    ? __("No customers found.", "arraysubs")
    : __("No active customers found.", "arraysubs");

  return (
    <section className="arraysubs-member-lookup-table" aria-busy={loading}>
      <div className="arraysubs-member-lookup-table__search">
        <label htmlFor={searchId}>{__("Search customers", "arraysubs")}</label>
        <input
          id={searchId}
          type="search"
          value={searchQuery}
          onChange={(event) => setSearchQuery(event.target.value)}
          placeholder={__("Search by name, username, or email…", "arraysubs")}
        />
      </div>
      {error && (
        <p className="arraysubs-member-lookup-table__error" role="alert">
          {error}
        </p>
      )}
      <div className="arraysubs-member-lookup-table__scroll">
        <table className="widefat">
          <caption>
            {query
              ? __("Search results", "arraysubs")
              : __("Latest active customers", "arraysubs")}
          </caption>
          <thead>
            <tr>
              <th scope="col">{__("Customer", "arraysubs")}</th>
              <th scope="col">{__("Username", "arraysubs")}</th>
              <th scope="col" className="arraysubs-member-lookup-table__number">
                {__("Active subscriptions", "arraysubs")}
              </th>
              <th scope="col" className="arraysubs-member-lookup-table__number">
                {__("Total spend", "arraysubs")}
              </th>
              <th scope="col" className="arraysubs-member-lookup-table__number">
                <abbr title={__("Yearly recurring revenue from active subscriptions", "arraysubs")}>
                  {__("YRR", "arraysubs")}
                </abbr>
              </th>
              {showStoreCredit && (
                <th scope="col" className="arraysubs-member-lookup-table__number">
                  {__("Store credit", "arraysubs")}
                </th>
              )}
              <th scope="col" className="arraysubs-member-lookup-table__number">
                {__("Orders", "arraysubs")}
              </th>
              <th scope="col" className="arraysubs-member-lookup-table__number">
                <abbr title={__("Average order value", "arraysubs")}>
                  {__("AOV", "arraysubs")}
                </abbr>
              </th>
              <th scope="col">{__("Registered", "arraysubs")}</th>
            </tr>
          </thead>
          <tbody>
            {!error &&
              customers.map((customer) => (
                <tr key={customer.id}>
                  <td className="arraysubs-member-lookup-table__customer">
                    <Link to={`${detailsPath}/${customer.id}`}>
                      {customer.display_name}
                    </Link>
                    <span className="arraysubs-member-lookup-table__secondary">
                      {customer.email}
                    </span>
                    <div className="arraysubs-member-lookup-table__actions">
                      <Link to={`${detailsPath}/${customer.id}`}>
                        {__("View Details", "arraysubs")}
                      </Link>
                      {customer.edit_url && (
                        <>
                          <span aria-hidden="true">|</span>
                          <a href={customer.edit_url}>
                            {__("WP User", "arraysubs")}
                          </a>
                        </>
                      )}
                    </div>
                  </td>
                  <td className="arraysubs-member-lookup-table__account">
                    <span>{customer.username}</span>
                    <span className="arraysubs-member-lookup-table__secondary">
                      {sprintf(/* translators: %d: WordPress user ID. */ __("User ID: %d", "arraysubs"), customer.id)}
                    </span>
                  </td>
                  <td className="arraysubs-member-lookup-table__number">
                    {customer.active_subscriptions}
                  </td>
                  <td className="arraysubs-member-lookup-table__number">
                    <span
                      dangerouslySetInnerHTML={{ __html: customer.total_spent_formatted }}
                    />
                  </td>
                  <td
                    className="arraysubs-member-lookup-table__number"
                    title={customer.yrr_mixed_currency
                      ? __("A combined YRR is unavailable because active subscriptions use multiple currencies.", "arraysubs")
                      : undefined}
                  >
                    <span dangerouslySetInnerHTML={{ __html: customer.yrr_formatted }} />
                  </td>
                  {showStoreCredit && (
                    <td className="arraysubs-member-lookup-table__number">
                      {customer.store_credit_enabled ? (
                        <span
                          dangerouslySetInnerHTML={{ __html: customer.store_credit_formatted }}
                        />
                      ) : (
                        "—"
                      )}
                    </td>
                  )}
                  <td className="arraysubs-member-lookup-table__number">
                    {customer.total_orders}
                  </td>
                  <td className="arraysubs-member-lookup-table__number">
                    <span
                      dangerouslySetInnerHTML={{ __html: customer.average_order_value_formatted }}
                    />
                  </td>
                  <td className="arraysubs-member-lookup-table__date">
                    {customer.registered_formatted || "—"}
                  </td>
                </tr>
              ))}
            {(error || !customers.length) && (
              <tr>
                <td colSpan={showStoreCredit ? 9 : 8} role="status">
                  {error
                    ? __("Customers could not be loaded.", "arraysubs")
                    : emptyMessage}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <footer className="arraysubs-member-lookup-table__footer">
        <p>
          {__(
            "Order counts include all statuses. AOV uses paid orders. YRR annualizes active subscriptions.",
            "arraysubs",
          )}
        </p>
        <a className="button button-secondary" href={customersUrl}>
          {__("Browse all active customers", "arraysubs")}
        </a>
      </footer>
    </section>
  );
};

export default MemberLookupTable;