import { http } from '@inertiajs/vue3';
import type { QTableProps } from 'quasar';
import { reactive, ref } from 'vue';
import type { GridColumn, GridPagination } from '@/composables/useAdminGrid';
import { DEFAULT_GRID_SORT, normalizeGridSort } from '@/composables/useAdminGrid';
import type { SelectOption } from '@/constants/options';
import { AuctionEnquiryStatus } from '@/enums/auctionEnquiryStatus';

export interface AuctionEnquiryGridFilters {
    search: string | null;
    category: SelectOption;
    status: SelectOption;
}

export interface AuctionEnquiryGridRow {
    id: number;
    category: string;
    category_label: string;
    status: string;
    status_label: string;
    status_color: string;
    created_at: string | null;
    first_name: string;
    last_name: string;
    email: string;
    phone: string;
    state: string;
    price_wanted: string;
    plate_combination: string | null;
    year: string | null;
    make_name: string | null;
    model: string | null;
    odometer_km: number | null;
    item_description: string | null;
    uploads_count: number;
    listed_auction_id: number | null;
    listed_auction_format: string | null;
    listed_auction_format_label: string | null;
    listed_auction_view_url: string | null;
}

export interface AuctionEnquiryGridResponse {
    total: number;
    page: number;
    data: AuctionEnquiryGridRow[];
}

type TableRequest = Parameters<NonNullable<QTableProps['onRequest']>>[0];

function buildGridPayload(
    pagination: GridPagination,
    filters: AuctionEnquiryGridFilters,
): GridPagination & { filters: AuctionEnquiryGridFilters } {
    return {
        page: pagination.page,
        rowsPerPage: pagination.rowsPerPage,
        sortBy: pagination.sortBy,
        descending: pagination.descending,
        rowsNumber: pagination.rowsNumber,
        filters: {
            search: filters.search,
            category: { ...filters.category },
            status: { ...filters.status },
        },
    };
}

export function useAuctionEnquiryGrid(gridUrl: string, initialGrid?: AuctionEnquiryGridResponse) {
    const loading = ref(false);
    const rows = ref<AuctionEnquiryGridRow[]>(initialGrid?.data ?? []);

    const filters = reactive<AuctionEnquiryGridFilters>({
        search: null,
        category: { id: 'all', name: 'All' },
        status: { id: AuctionEnquiryStatus.Pending, name: 'Pending' },
    });

    const pagination = ref<GridPagination>({
        sortBy: DEFAULT_GRID_SORT.sortBy,
        descending: DEFAULT_GRID_SORT.descending,
        page: initialGrid?.page ?? 1,
        rowsPerPage: 10,
        rowsNumber: initialGrid?.total ?? 0,
    });

    const columns: GridColumn[] = [
        { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: true },
        { name: 'created_at', label: 'Date', align: 'left', field: 'created_at', sortable: true },
        { name: 'category', label: 'Category', align: 'left', field: 'category_label', sortable: true },
        { name: 'name', label: 'Name', align: 'left', field: (row) => `${row.first_name} ${row.last_name}`, sortable: true },
        { name: 'email', label: 'Email', align: 'left', field: 'email', sortable: true },
        { name: 'phone', label: 'Phone', align: 'left', field: 'phone', sortable: true },
        { name: 'state', label: 'State', align: 'left', field: 'state', sortable: true },
        { name: 'price_wanted', label: 'Price Wanted', align: 'right', field: 'price_wanted', sortable: true },
        { name: 'status', label: 'Status', align: 'left', field: 'status_label', sortable: true },
        { name: 'actions', label: 'Actions', align: 'left', field: 'id' },
    ];

    async function fetchGrid(): Promise<void> {
        loading.value = true;

        const payload = buildGridPayload(pagination.value, filters);

        try {
            const response = await http.getClient().request({
                method: 'post',
                url: gridUrl,
                data: JSON.stringify(payload),
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
            });

            const result = JSON.parse(response.data) as AuctionEnquiryGridResponse;

            rows.value = result.data;
            pagination.value.rowsNumber = result.total;
            pagination.value.page = result.page;
        } catch (error) {
            console.error('Failed to load auction enquiry grid data', error);
        } finally {
            loading.value = false;
        }
    }

    function onRequest(requestProps: TableRequest): void {
        const { page, rowsPerPage, sortBy, descending } = requestProps.pagination;
        const rowsNumber = pagination.value.rowsNumber;

        const normalizedSort = normalizeGridSort(sortBy, descending);

        pagination.value.page = page;
        pagination.value.rowsPerPage = rowsPerPage;
        pagination.value.sortBy = normalizedSort.sortBy;
        pagination.value.descending = normalizedSort.descending;
        pagination.value.rowsNumber = rowsNumber;

        void fetchGrid();
    }

    function onFilterChange(): void {
        pagination.value.page = 1;
        void fetchGrid();
    }

    return {
        loading,
        rows,
        filters,
        pagination,
        columns,
        fetchGrid,
        onRequest,
        onFilterChange,
    };
}