"use client";

import { PageHeader } from "@/components/ui/PageHeader";
import { TransactionSettingsActions } from "@/components/settings/transaction/TransactionSettingsActions";
import { TransactionColumnList } from "@/components/settings/transaction/TransactionColumnList";
import { AlertMessage } from "@/components/settings/banks/AlertMessage";
import { useTransactionSettings } from "@/hooks/useTransactionSettings";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import { SETTINGS_PAGE_CONTAINER } from "../constants";

export default function TransactionSettingsPage() {
  const {
    available,
    currentWidget,
    showColumns,
    loading,
    error,
    saving,
    saveError,
    saveSuccess,
    columnList,
    dragColId,
    setDragColId,
    handleSelectWidget,
    handleColDrop,
    toggleColumnVisibility,
    handleSaveColumns,
  } = useTransactionSettings();

  return (
    <div className={SETTINGS_PAGE_CONTAINER}>
      <PageHeader
        title="Transaction Priority Scheduling"
        description="Click a widget to view or configure column details. Drag to reorder, use checkboxes to show or hide columns."
        breadcrumbs={[...BREADCRUMBS.transactionSettings]}
        actions={
          <TransactionSettingsActions
            isSaving={saving}
            isLoading={loading}
            hasError={!!error}
            onSave={handleSaveColumns}
          />
        }
      />

      <AlertMessage error={saveError} success={saveSuccess} />

      <div className="mt-6 grid gap-4 lg:grid-cols-[30%_70%]">
        <div className="rounded-lg border border-slate-200 bg-white shadow-lg">
          <div className="border-b px-5 py-3">
            <p className="text-[11px] uppercase tracking-[0.2em] text-slate-500 font-semibold">
              Available
            </p>
          </div>

          <div className="divide-y divide-slate-200">
            {available.map((widget) => (
              <button
                type="button"
                key={widget.widget_id}
                onClick={() => handleSelectWidget(widget)}
                className={`w-full cursor-pointer px-5 py-3 text-left text-sm hover:bg-indigo-50 ${
                  currentWidget === widget.name ? "bg-indigo-100" : ""
                }`}
              >
                <p className="font-semibold text-slate-900">{widget.name}</p>
              </button>
            ))}
          </div>
        </div>

        <div>
          {showColumns && currentWidget && (
            <TransactionColumnList
              title={`${currentWidget} – Columns`}
              columns={columnList}
              dragColId={dragColId}
              onDragStart={setDragColId}
              onDrop={handleColDrop}
              onToggleVisibility={toggleColumnVisibility}
            />
          )}
        </div>
      </div>
    </div>
  );
}