"use client";

import { useMemo, useState } from "react";
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";
import { matchesBankStatusFilter, type BankStatusFilter } from "@/lib/bank-status-utils";

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

const STATUS_FILTER_OPTIONS: { value: BankStatusFilter; label: string }[] = [
  { value: "all", label: "All" },
  { value: "active", label: "Active" },
  { value: "inactive", label: "Inactive" },
];

export default function BankPriorityPage() {
  const [statusFilter, setStatusFilter] = useState<BankStatusFilter>("all");
  const {
    banks,
    loading,
    error,
    saving,
    saveError,
    saveSuccess,
    clearError,
    handleDragStart,
    handleDragOver,
    handleDrop,
    handleSave,
    handleToggleStatus,
  } = useBankPriority();

  const filteredBanks = useMemo(
    () => banks.filter((b) => matchesBankStatusFilter(b, statusFilter)),
    [banks, statusFilter]
  );

  const dragDisabled = statusFilter !== "all";

  return (
    <div className={SETTINGS_PAGE_CONTAINER}>
      <PageHeader
        title="Bank Priority"
        description="Drag to reorder banks when viewing all. Lower numbers mean higher priority. Filter by active or inactive status below."
        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-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-sm font-medium text-slate-600">Status</span>
          <div
            className="inline-flex rounded-lg border border-slate-200 bg-slate-50 p-0.5"
            role="group"
            aria-label="Filter banks by status"
          >
            {STATUS_FILTER_OPTIONS.map(({ value, label }) => (
              <button
                key={value}
                type="button"
                onClick={() => setStatusFilter(value)}
                className={`rounded-md px-3 py-1.5 text-sm font-medium transition ${
                  statusFilter === value
                    ? "bg-white text-slate-900 shadow-sm"
                    : "text-slate-600 hover:text-slate-900"
                }`}
              >
                {label}
              </button>
            ))}
          </div>
        </div>
        {dragDisabled && !loading && !error && (
          <span
            className="inline-flex max-w-md items-center rounded-md border border-red-200 bg-red-50 px-2.5 py-1.5 text-xs font-medium text-red-800 shadow-sm"
            role="note"
          >
            Reordering is available when{" "}
            <strong className="mx-0.5 font-semibold text-red-900">All</strong> is selected.
          </span>
        )}
      </div>

      <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={filteredBanks}
          loading={loading}
          error={error}
          onDragStart={handleDragStart}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          onToggleStatus={handleToggleStatus}
          dragDisabled={dragDisabled}
          statusFilterActive={statusFilter !== "all"}
        />
      </div>
    </div>
  );
}