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: "price", toolbarLabel: "Sort: Price", sheetLabel: "Price" },
  { value: "duration", toolbarLabel: "Sort: Duration", sheetLabel: "Duration" },
];

export default function ServicesScreen() {
  const [services, setServices] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const defaultCurrency = (window.pointlybooking_ADMIN?.currency || "USD").toUpperCase();

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

  useEffect(() => {
    loadServices();
  }, []);

  async function loadServices() {
    try {
      setError("");
      setLoading(true);
      const resp = await bpFetch("/admin/services");
      setServices(resp?.data || []);
    } catch (e) {
      console.error(e);
      setError(e?.message || "Failed to load services");
    } finally {
      setLoading(false);
    }
  }

  const filtered = useMemo(() => {
    return services
      .filter((s) => {
        const hay = `${s.name || ""} ${s.title || ""} ${s.description || ""}`.toLowerCase();
        return hay.includes(search.toLowerCase());
      })
      .filter((s) => {
        if (status === "all") return true;
        const isActive =
          s.is_active !== undefined
            ? !!Number(s.is_active)
            : s.is_enabled !== undefined
              ? !!Number(s.is_enabled)
              : true;
        return status === "active" ? isActive : !isActive;
      })
      .sort((a, b) => {
        if (sortBy === "price") {
          const ap = a.price_cents ?? (a.price ? Math.round(parseFloat(a.price) * 100) : 0);
          const bp = b.price_cents ?? (b.price ? Math.round(parseFloat(b.price) * 100) : 0);
          return ap - bp;
        }
        if (sortBy === "duration") {
          const ad = a.duration_minutes ?? a.duration ?? 0;
          const bd = b.duration_minutes ?? b.duration ?? 0;
          return ad - bd;
        }
        const an = (a.name || "").toLowerCase();
        const bn = (b.name || "").toLowerCase();
        return an.localeCompare(bn);
      });
  }, [services, search, status, sortBy]);

  const stats = useMemo(() => {
    return services.reduce(
      (acc, s) => {
        const isActive =
          s.is_active !== undefined
            ? !!Number(s.is_active)
            : s.is_enabled !== undefined
              ? !!Number(s.is_enabled)
              : true;
        acc.total += 1;
        if (isActive) acc.active += 1;
        else acc.inactive += 1;
        return acc;
      },
      { total: 0, active: 0, inactive: 0 }
    );
  }, [services]);

  return (
    <div className="myplugin-page bp-services">
      <main className="myplugin-content bp-entity-index">
        <div className="bp-page-head">
          <div>
            <div className="bp-h1">Services</div>
            <div className="bp-muted">Manage services, pricing, and availability.</div>
          </div>
          <div className="bp-head-actions">
            <a className="bp-primary-btn" href="admin.php?page=pointlybooking_services_edit">
              + New Service
            </a>
          </div>
        </div>

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

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

        <EntitySearchFilters
          desktopClassName="bp-services__filters-inline"
          mobileClassName="bp-services__toolbar"
          searchPlaceholder="Search services..."
          searchValue={search}
          onSearchChange={setSearch}
          statusValue={status}
          onStatusChange={setStatus}
          statusOptions={STATUS_OPTIONS}
          sortValue={sortBy}
          onSortChange={setSortBy}
          sortOptions={SORT_OPTIONS}
          filtersOpen={filtersOpen}
          setFiltersOpen={setFiltersOpen}
          shownCount={filtered.length}
          loading={loading}
          onClear={() => {
            setSearch("");
            setStatus("all");
            setSortBy("name");
          }}
        />

        {loading ? (
          <EntityStateCard>Loading...</EntityStateCard>
        ) : filtered.length === 0 ? (
          <EntityStateCard>No services found.</EntityStateCard>
        ) : (
          <div className="bp-entity-grid bp-services__grid">
            {filtered.map((s) => {
              const name = s.name || s.title || `#${s.id}`;
              const description = (s.description || "").trim();
              const duration = s.duration_minutes ?? s.duration ?? s.duration_min ?? 0;
              const priceCents =
                s.price_cents ??
                (s.price !== undefined && s.price !== null ? Math.round(parseFloat(s.price) * 100) : null);
              const currency = (s.currency || defaultCurrency || "USD").toUpperCase();
              const priceDisplay = priceCents !== null ? `${currency} ${(priceCents / 100).toFixed(2)}` : "???";
              const isActive =
                s.is_active !== undefined ? !!Number(s.is_active) : s.is_enabled !== undefined ? !!Number(s.is_enabled) : true;
              const imageUrl = s.image_url || s.image || "";
              const initial = (name || "S").trim().charAt(0).toUpperCase();
              const typeDisplay = duration ? `${duration} min` : "???";
              const editHref = `admin.php?page=pointlybooking_services_edit&id=${s.id}`;

              return (
                <a key={s.id} className="bp-entity-card bp-entity-card--link" href={editHref}>
                  <div className="bp-entity-head">
                    <div className="bp-entity-thumb">
                      {imageUrl ? <img src={imageUrl} alt={name} /> : <div className="bp-entity-initial">{initial}</div>}
                    </div>
                    <div className="bp-entity-main">
                      <div className="bp-entity-title">{name}</div>
                      <div className="bp-entity-sub">{description || typeDisplay}</div>
                    </div>
                    <span className={`bp-status-pill ${isActive ? "active" : "inactive"}`}>
                      {isActive ? "Active" : "Inactive"}
                    </span>
                  </div>
                  <div className="bp-entity-meta">
                    <div>
                      <div className="bp-entity-meta-label">Duration</div>
                      <div className="bp-entity-meta-value">{typeDisplay}</div>
                    </div>
                    <div>
                      <div className="bp-entity-meta-label">Price</div>
                      <div className="bp-entity-meta-value">{priceDisplay}</div>
                    </div>
                  </div>
                  <div className="bp-entity-actions">
                    <span className="bp-btn-sm">Edit</span>
                  </div>
                </a>
              );
            })}
          </div>
        )}
      </main>
    </div>
  );
}