"use client";

import { Input } from "@/components/ui/input";
import { FIXED_PACKAGES_LIST } from "@/lib/strings";
import { EmptyState } from "@/components/shared/empty-state";
import { FixedPackageCard } from "@/components/shared/fixed-package-card";
import type { ApiFixPackage } from "@/core/api/services/fix-packages/fix-packages.types";
import { getFixPackagesListAction } from "@/features/fixed-packages/actions/fix-packages-actions";
import {
  parseLocationSegments,
  calculateDiscount,
  type FixedPackagesContentProps,
} from "@/features/fixed-packages/types/fixed-packages-list.types";
import { Package, Search } from "lucide-react";
import { useEffect, useState } from "react";

export function FixedPackagesContent({
  initialPackages,
  initialPagination,
}: FixedPackagesContentProps) {
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(
    initialPagination?.current_page ?? 1
  );
  const [packages, setPackages] = useState<ApiFixPackage[]>(initialPackages);
  const [pagination, setPagination] = useState(initialPagination ?? null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setPackages(initialPackages);
    setPagination(initialPagination ?? null);
    setCurrentPage(initialPagination?.current_page ?? 1);
  }, [initialPackages, initialPagination]);

  useEffect(() => {
    if (currentPage === pagination?.current_page) return;

    let cancelled = false;
    setLoading(true);
    setError(null);

    (async () => {
      const result = await getFixPackagesListAction(undefined, currentPage);
      if (cancelled) return;

      setLoading(false);
      if (result.success && result.data) {
        setPackages(result.data.data);
        setPagination(result.data);
      } else {
        setError(result.error ?? "Failed to load packages.");
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [currentPage, pagination?.current_page]);

  const filteredPackages = packages.filter((pkg) => {
    const q = searchQuery.toLowerCase();
    return (
      pkg.name.toLowerCase().includes(q) ||
      (pkg.location_detail?.toLowerCase().includes(q) ?? false)
    );
  });

  const pageCount = pagination?.last_page ?? 1;
  const totalPackages = pagination?.total ?? packages.length;

  return (
    <div className="space-y-4">
      {/* Search & Filter */}
      <div className="mb-8 space-y-4">
        <div className="relative w-full">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
          <Input
            placeholder={FIXED_PACKAGES_LIST.SEARCH_PLACEHOLDER}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10 h-12 bg-white shadow-sm w-full"
          />
        </div>
        <p className="text-sm text-gray-500">
          {FIXED_PACKAGES_LIST.SHOWING} {filteredPackages.length} /{" "}
          {totalPackages}{" "}
          {filteredPackages.length === 1
            ? FIXED_PACKAGES_LIST.PACKAGE
            : FIXED_PACKAGES_LIST.PACKAGES}
        </p>
      </div>

      {error ? (
        <div className="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
          {error}
        </div>
      ) : null}

      {filteredPackages.length === 0 ? (
        <EmptyState
          icon={Package}
          title={FIXED_PACKAGES_LIST.NO_PACKAGES_FOUND}
          description={FIXED_PACKAGES_LIST.TRY_ADJUSTING_SEARCH}
        />
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5">
            {filteredPackages.map((pkg) => {
              const discount = calculateDiscount(pkg.price, pkg.discount_price);
              const nights = Math.max(0, pkg.total_days - 1);
              const durationLabel = [
                pkg.total_days > 0 ? `${pkg.total_days}D` : "",
                nights > 0 ? `${nights}N` : "",
              ]
                .filter(Boolean)
                .join("/");
              const locationSegments = pkg.location_detail
                ? parseLocationSegments(pkg.location_detail)
                : [];

              return (
                <FixedPackageCard
                  key={pkg.id}
                  pkg={pkg}
                  discount={discount}
                  locationSegments={locationSegments}
                  durationLabel={durationLabel}
                />
              );
            })}
          </div>

          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="text-sm text-gray-600">
              Page {currentPage} of {pageCount} — Total {totalPackages} packages
            </div>
            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage <= 1 || loading}
                className="inline-flex items-center justify-center rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
              >
                Previous
              </button>
              <button
                type="button"
                onClick={() =>
                  setCurrentPage(Math.min(pageCount, currentPage + 1))
                }
                disabled={currentPage >= pageCount || loading}
                className="inline-flex items-center justify-center rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
              >
                Next
              </button>
            </div>
          </div>
          {loading ? (
            <div className="text-sm text-slate-500">Loading packages…</div>
          ) : null}
        </>
      )}
    </div>
  );
}