"use client";

import { useReportSettings } from "@/hooks/useReportSettings";
import { AvailableReportsList } from "@/components/settings/reports/AvailableReportsList";
import { SelectedReportsList } from "@/components/settings/reports/SelectedReportsList";
import { ReportsHeader } from "@/components/settings/reports/ReportsHeader";
import { AlertMessage } from "@/components/settings/banks/AlertMessage";
import { SETTINGS_PAGE_CONTAINER } from "../constants";

export default function ReportSettingsPage() {
  const {
    available,
    selected,
    showSelectedGrid,
    loading,
    error,
    saving,
    saveError,
    saveSuccess,
    dragId,
    handleSelectWidget,
    handleDragStart,
    handleDragOver,
    handleDrop,
    handleSave,
  } = useReportSettings();

  return (
    <div className={SETTINGS_PAGE_CONTAINER}>
      <ReportsHeader
        onReload={() => location.reload()}
        onSave={handleSave}
        saving={saving}
        loading={loading}
        hasError={!!error}
      />

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

      <div className="mt-6 grid gap-4 lg:grid-cols-[30%_70%]">
        <AvailableReportsList
          widgets={available}
          loading={loading}
          error={error}
          onSelect={handleSelectWidget}
        />

        {showSelectedGrid && (
          <SelectedReportsList
            widgets={selected}
            dragId={dragId}
            onDragStart={handleDragStart}
            onDragOver={handleDragOver}
            onDrop={handleDrop}
          />
        )}
      </div>
    </div>
  );
}