import { useEffect, useMemo, useState } from "react";
import { Files, RefreshCw, Search } from "lucide-react";
import { Button } from "@/shared/common/ui/button";
import AllRecordsTable from "@/user-management/all-records/components/AllRecordsTable";
import { useAllRecords } from "@/user-management/all-records/hooks/useAllRecords";

const AllRecordsPage = () => {
  const [search, setSearch] = useState("");
  const allRecordsMutation = useAllRecords();

  useEffect(() => {
    allRecordsMutation.mutate({ take: 50, skip: 0 });
  }, []);

  const records = useMemo(() => {
    const items = allRecordsMutation.data?.items ?? [];
    const term = search.trim().toLowerCase();
    if (!term) return items;
    return items.filter((record) =>
      [
        record.referenceNumber,
        typeof record.subject === "string"
          ? record.subject
          : record.subject?.en || record.subject?.am,
        record.status,
      ].some((value) => value?.toLowerCase().includes(term)),
    );
  }, [allRecordsMutation.data?.items, search]);

  return (
    <div className="w-full space-y-6 p-4 sm:p-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="flex items-center gap-2 text-2xl font-bold">
            <Files className="h-6 w-6 text-primary" /> All Records
          </h1>
          <p className="mt-1 text-sm text-slate-500">
            Browse and inspect all records.
          </p>
        </div>
        <span className="w-fit rounded-full bg-slate-100 px-3 py-1 text-sm font-medium dark:bg-slate-800">
          {allRecordsMutation.data?.count ?? 0} records
        </span>
      </div>
      <div className="relative">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
        <input
          value={search}
          onChange={(event) => setSearch(event.target.value)}
          placeholder="Search by reference, subject, or status"
          className="h-10 w-full rounded-md border bg-white pl-9 pr-3 text-sm outline-none focus:ring-2 focus:ring-primary/30 dark:border-slate-700 dark:bg-slate-900"
        />
      </div>
      {allRecordsMutation.isPending ? (
        <div className="h-64 animate-pulse rounded-lg bg-slate-200 dark:bg-slate-800" />
      ) : allRecordsMutation.isError ? (
        <div className="rounded-lg border border-red-200 bg-red-50 p-8 text-center">
          <p className="text-sm text-red-700">The all-records API is not available yet.</p>
          <Button
            variant="outline"
            className="mt-4 gap-2"
            onClick={() => allRecordsMutation.mutate({ take: 50, skip: 0 })}
          >
            <RefreshCw className="h-4 w-4" /> Retry
          </Button>
        </div>
      ) : records.length === 0 ? (
        <div className="rounded-lg border border-dashed p-12 text-center text-slate-500">
          <Files className="mx-auto mb-3 h-9 w-9" />
          <p className="font-medium">No records found</p>
        </div>
      ) : (
        <AllRecordsTable records={records} />
      )}
    </div>
  );
};

export default AllRecordsPage;
