"use client";
import React, { useState } from "react";
import { DataType } from "./schema";
import { usePaginatedData } from "./hooks";
import { FormComponent } from "./FormComponent";
import { SearchComponent } from "./SearchComponent";
import { getTranslation, LanguageKey } from "./language";
import { ActionButtonsComponent } from "./ActionButtonsComponent";
import { SortingComponent } from "./SortingComponent";
import { PaginationToolsComponent } from "./PaginationToolsComponent";
import { DataDisplayComponent } from "./DataDisplayComponent";

interface TemplateProps {
  lang?: LanguageKey;
}

// Main template component
function TemplateApp({ lang = "en" }: TemplateProps) {
  const t = getTranslation(lang);
  const { data, pagination, loading, error, updatePagination, refetch } =
    usePaginatedData();

  const [mode, setMode] = useState<"list" | "create" | "view" | "update">(
    "list"
  );
  const [selectedItem, setSelectedItem] = useState<DataType | null>(null);

  const handleCreateClick = () => {
    setSelectedItem(null);
    setMode("create");
  };

  const handleViewClick = (item: DataType) => {
    setSelectedItem(item);
    setMode("view");
  };

  const handleUpdateClick = (item: DataType) => {
    setSelectedItem(item);
    setMode("update");
  };

  const handleFormSubmit = async (data: DataType) => {
    console.log("Submitting form data:", data);
    // Here you would call your API to save the data
    // await saveData(data);

    // After saving, refresh the list and go back to list view
    setMode("list");
    setSelectedItem(null);
    refetch();
  };

  const handleFormCancel = () => {
    setMode("list");
    setSelectedItem(null);
  };

  return (
    <div className="container mx-auto px-4 py-6">
      <h1 className="text-2xl font-bold mb-6">{t.title}</h1>

      {/* Search Component */}
      {mode === "list" && (
        <SearchComponent
          onSearch={(query: Record<string, string>) => {
            // Update pagination with both page reset and new query
            updatePagination({
              page: 1,
              query: query,
            });
          }}
          lang={lang}
        />
      )}

      {/* Action Buttons Component */}
      {mode === "list" && (
        <ActionButtonsComponent onCreateClick={handleCreateClick} lang={lang} />
      )}

      {/* Sorting Component */}
      {mode === "list" && (
        <SortingComponent
          pagination={pagination}
          updatePagination={updatePagination}
          lang={lang}
        />
      )}

      {/* Pagination Tools Component */}
      {mode === "list" && (
        <PaginationToolsComponent
          pagination={pagination}
          updatePagination={updatePagination}
          lang={lang}
        />
      )}

      {/* Data Display - Only shown in list mode */}
      {mode === "list" && (
        <DataDisplayComponent
          data={data}
          loading={loading}
          error={error}
          onViewClick={handleViewClick}
          onUpdateClick={handleUpdateClick}
          lang={lang}
        />
      )}

      {(mode === "create" || mode === "update" || mode === "view") && (
        <FormComponent
          initialData={selectedItem || undefined}
          onSubmit={handleFormSubmit}
          onCancel={handleFormCancel}
          readOnly={mode === "view"}
          lang={lang}
        />
      )}
    </div>
  );
}

export default TemplateApp;