"use client";

import { PagesFilterPanel } from "@/components/dashboard/pages/pages-filter-panel";
import { PagesTable } from "@/components/dashboard/pages/pages-table";
import type {
  DashboardPageItem,
  PagesListFilters,
} from "@/components/dashboard/pages/pages-types";
import { Card, CardContent } from "@/components/ui/card";
import { FilterButton } from "@/components/ui/filter/filter-button";
import { Pagination } from "@/components/ui/pagination";
import { SearchInput } from "@/components/ui/search-input";
import { useTranslations } from "next-intl";
import { DataTableSkeleton } from "../../ui/data-table";

interface PagesPageViewProps {
  data: DashboardPageItem[];
  page: number;
  perPage: number;
  totalPages: number;
  totalItems: number;
  isLoading: boolean;
  isError: boolean;
  isFilterOpen: boolean;
  filters: PagesListFilters;
  onToggleFilter: () => void;
  onApplyFilters: (next: PagesListFilters) => void;
  onClearFilters: () => void;
  onAddNew: () => void;
  onToggleStatus: (item: DashboardPageItem) => void;
  onDelete: (item: DashboardPageItem) => void;
  onEdit: (item: DashboardPageItem) => void;
  onPreview: (item: DashboardPageItem) => void;
}

export function PagesPageView({
  data,
  page,
  perPage,
  totalPages,
  totalItems,
  isLoading,
  isError,
  isFilterOpen,
  filters,
  onToggleFilter,
  onApplyFilters,
  onClearFilters,
  onToggleStatus,
  onDelete,
  onEdit,
  onPreview,
}: PagesPageViewProps) {
  const tTitles = useTranslations("dashboard.pages.titles");
  const tCommonRoot = useTranslations("common");

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold text-foreground">{tTitles("list")}</h1>

      </div>

      <section className="overflow-hidden rounded-2xl border border-border bg-card">
        <div className="flex items-center justify-between gap-4 p-6">
          <div className="flex items-center gap-4">
            <SearchInput />
            <FilterButton isActive={isFilterOpen} onClick={onToggleFilter} />
          </div>
        </div>

        {isFilterOpen && (
          <PagesFilterPanel
            isOpen={isFilterOpen}
            onClose={onToggleFilter}
            value={filters}
            onApply={onApplyFilters}
            onClear={onClearFilters}
          />
        )}

        {isLoading ? (
          <Card className="rounded-none border-0 shadow-none">
              <DataTableSkeleton
                        rows={perPage}
                        columns={7}
                        minWidth={1040}
                      />
          </Card>
        ) : isError ? (
          <Card className="rounded-none border-0 shadow-none">
            <CardContent className="flex h-52 items-center justify-center p-6 text-sm text-destructive">
              {tCommonRoot("loadError")}
            </CardContent>
          </Card>
        ) : (
          <PagesTable
            data={data}
            page={page}
            perPage={perPage}
            onToggleStatus={onToggleStatus}
            onDelete={onDelete}
            onEdit={onEdit}
            onPreview={onPreview}
          />
        )}

        <Pagination
          currentPage={page}
          totalPages={totalPages}
          totalItems={totalItems}
          itemsPerPage={perPage}
          className="border-t border-border bg-card"
        />
      </section>
    </div>
  );
}