import React, { useEffect, useMemo, useState } from "react";
import { bpFetch } from "../api/client";
import { EntityKpiCards, EntitySearchFilters, EntityStateCard } from "../components/EntityIndexControls";

const STATUS_OPTIONS = [
  { value: "all", toolbarLabel: "All statuses", sheetLabel: "All" },
  { value: "active", toolbarLabel: "Active", sheetLabel: "Active" },
  { value: "inactive", toolbarLabel: "Inactive", sheetLabel: "Inactive" },
];

const SORT_OPTIONS = [
  { value: "name", toolbarLabel: "Sort: Name", sheetLabel: "Name" },
  { value: "newest", toolbarLabel: "Sort: Newest", sheetLabel: "Newest" },
];

export default function AgentsScreen() {
  const [agents, setAgents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const [search, setSearch] = useState("");
  const [status, setStatus] = useState("all");
  const [sort, setSort] = useState("name");
  const [filtersOpen, setFiltersOpen] = useState(false);

  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        setLoading(true);
        setError("");
        const resp = await bpFetch("/admin/agents-full");
        if (!alive) return;
        setAgents(resp?.data || []);
      } catch (e) {
        console.error(e);
        if (!alive) return;
        setAgents([]);
        setError(e?.message || "Failed to load agents");
      } finally {
        if (alive) setLoading(false);
      }
    })();
    return () => {
      alive = false;
    };
  }, []);

  const derived = useMemo(() => {
    const q = search.trim().toLowerCase();
    const list = Array.isArray(agents) ? agents : [];

    const mapped = list.map((a) => {
      const fullName = `${a.first_name || ""} ${a.last_name || ""}`.trim();
      const name = (fullName || a.name || "").trim() || `#${a.id}`;
      const isActive =
        a.is_active !== undefined
          ? !!Number(a.is_active)
          : a.is_enabled !== undefined
            ? !!Number(a.is_enabled)
            : true;
      const services = Number(a.services_count ?? a.service_count ?? 0) || 0;
      const email = a.email || "";
      const phone = a.phone || "";
      const imageUrl = a.image_url || "";

      return { id: Number(a.id) || 0, name, isActive, services, email, phone, imageUrl };
    });

    const counts = mapped.reduce(
      (acc, a) => {
        acc.total += 1;
        if (a.isActive) acc.active += 1;
        else acc.inactive += 1;
        return acc;
      },
      { total: 0, active: 0, inactive: 0 }
    );

    let items = mapped;

    if (q) {
      items = items.filter((a) => `${a.name} ${a.email} ${a.phone}`.toLowerCase().includes(q));
    }
    if (status !== "all") {
      items = items.filter((a) => (status === "active" ? a.isActive : !a.isActive));
    }
    items = [...items].sort((a, b) => {
      if (sort === "newest") return (b.id || 0) - (a.id || 0);
      return (a.name || "").toLowerCase().localeCompare((b.name || "").toLowerCase());
    });

    return { counts, items };
  }, [agents, search, status, sort]);

  return (
    <div className="myplugin-page bp-agents">
      <main className="myplugin-content bp-entity-index">
        <div className="bp-page-head">
          <div>
            <div className="bp-h1">Agents</div>
            <div className="bp-muted">Manage team members, photos, and assignments.</div>
          </div>
          <div className="bp-head-actions">
            <a className="bp-primary-btn" href="admin.php?page=pointlybooking_agents_edit">
              + New Agent
            </a>
          </div>
        </div>

        {error ? <div className="bp-error">{error}</div> : null}

        <EntityKpiCards
          items={[
            { label: "Total", value: loading ? "..." : derived.counts.total },
            { label: "Active", value: loading ? "..." : derived.counts.active },
            { label: "Inactive", value: loading ? "..." : derived.counts.inactive },
          ]}
        />

        <EntitySearchFilters
          desktopClassName="bp-agents__filters-inline"
          mobileClassName="bp-agents__toolbar"
          searchPlaceholder="Search agents..."
          searchValue={search}
          onSearchChange={setSearch}
          statusValue={status}
          onStatusChange={setStatus}
          statusOptions={STATUS_OPTIONS}
          sortValue={sort}
          onSortChange={setSort}
          sortOptions={SORT_OPTIONS}
          filtersOpen={filtersOpen}
          setFiltersOpen={setFiltersOpen}
          shownCount={derived.items.length}
          loading={loading}
          onClear={() => {
            setSearch("");
            setStatus("all");
            setSort("name");
          }}
        />

        {loading ? (
          <EntityStateCard>Loading...</EntityStateCard>
        ) : derived.items.length === 0 ? (
          <EntityStateCard>No agents found.</EntityStateCard>
        ) : (
          <div className="bp-entity-grid">
            {derived.items.map((a) => {
              const initials = (a.name || "A")
                .split(" ")
                .map((part) => part[0])
                .slice(0, 2)
                .join("")
                .toUpperCase();

              return (
                <div className="bp-entity-card" key={a.id}>
                  <div className="bp-entity-head">
                    <div className="bp-entity-thumb">
                      {a.imageUrl ? <img src={a.imageUrl} alt={a.name} /> : <div className="bp-entity-initial">{initials}</div>}
                    </div>
                    <div className="bp-entity-main">
                      <div className="bp-entity-title">{a.name}</div>
                      <div className="bp-entity-sub">
                        {a.email || "-"}
                        {a.phone ? ` - ${a.phone}` : ""}
                      </div>
                    </div>
                    <span className={`bp-status-pill ${a.isActive ? "active" : "inactive"}`}>{a.isActive ? "Active" : "Inactive"}</span>
                  </div>

                  <div className="bp-entity-meta">
                    <div>
                      <div className="bp-entity-meta-label">Services</div>
                      <div className="bp-entity-meta-value">{a.services}</div>
                    </div>
                    <div>
                      <div className="bp-entity-meta-label">ID</div>
                      <div className="bp-entity-meta-value">#{a.id}</div>
                    </div>
                  </div>

                  <div className="bp-entity-actions">
                    <a className="bp-btn-sm" href={`admin.php?page=pointlybooking_agents_edit&id=${a.id}`}>
                      Edit
                    </a>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </main>
    </div>
  );
}