"use client";

import { PageHeader } from "@/components/ui/PageHeader";
import { ErrorMessage } from "@/components/ui/ErrorMessage";
import { useBankPriority } from "@/hooks/useBankPriority";
import { BankTable } from "@/components/settings/banks/BankTable";
import { AlertMessage } from "@/components/settings/banks/AlertMessage";
import { SaveButton } from "@/components/settings/banks/SaveButton";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import { SETTINGS_PAGE_CONTAINER } from "../constants";

const TABLE_HEADERS = [
  { key: "order", label: "#" },
  { key: "name", label: "Name" },
  { key: "status", label: "Status" },
  { key: "updated", label: "Updated" },
] as const;

export default function BankPriorityPage() {
  const {
    banks,
    loading,
    error,
    saving,
    saveError,
    saveSuccess,
    clearError,
    handleDragStart,
    handleDragOver,
    handleDrop,
    handleSave,
  } = useBankPriority();

  return (
    <div className={SETTINGS_PAGE_CONTAINER}>
      <PageHeader
        title="Bank Priority"
        description="Drag to reorder banks. Lower numbers mean higher priority."
        breadcrumbs={[...BREADCRUMBS.bankSettings]}
        actions={
          <SaveButton
            onClick={handleSave}
            disabled={saving || loading || !!error}
            saving={saving}
          />
        }
      />

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

      {error && (
        <ErrorMessage
          error={error}
          onDismiss={clearError}
          className="mt-6"
        />
      )}

      <div className="mt-6 overflow-hidden rounded-lg border border-slate-200 bg-white shadow-lg">
        <div className="grid grid-cols-[60px_1.4fr_1fr_1fr] bg-slate-50 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-500">
          {TABLE_HEADERS.map(({ label }) => (
            <span key={label}>{label}</span>
          ))}
        </div>
        <BankTable
          banks={banks}
          loading={loading}
          error={error}
          onDragStart={handleDragStart}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
        />
      </div>
    </div>
  );
}