"use client";

import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Download, Globe } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useCallback, useEffect, useId, useMemo, useState } from 'react';
import TimezoneSelect, { type ITimezoneOption } from 'react-timezone-select';
import { toast } from 'sonner';

import { downloadUsageRunsReportApiV1OrganizationsUsageRunsReportGet, getDailyUsageBreakdownApiV1OrganizationsUsageDailyBreakdownGet, getPreferencesApiV1OrganizationsPreferencesGet, getUsageHistoryApiV1OrganizationsUsageRunsGet, getWorkflowsSummaryApiV1WorkflowSummaryGet, savePreferencesApiV1OrganizationsPreferencesPut } from '@/client/sdk.gen';
import type { DailyUsageBreakdownResponse, OrganizationPreferences, UsageHistoryResponse, WorkflowRunUsageResponse, WorkflowSummaryResponse } from '@/client/types.gen';
import { CallTypeCell } from '@/components/CallTypeCell';
import { DailyUsageTable } from '@/components/DailyUsageTable';
import { FilterBuilder } from '@/components/filters/FilterBuilder';
import { MediaPreviewButton, MediaPreviewDialog } from '@/components/MediaPreviewDialog';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { useUserConfig } from '@/context/UserConfigContext';
import { useDispositionCodes } from '@/hooks/useDispositionCodes';
import { detailFromError } from '@/lib/apiError';
import { useAuth } from '@/lib/auth';
import { formatDateTime, getLocalTimezone } from '@/lib/dateTime';
import { usageFilterAttributes, withDispositionCodeOptions } from '@/lib/filterAttributes';
import { decodeFiltersFromURL, encodeFiltersToURL } from '@/lib/filters';
import type { ActiveFilter, DateRangeValue, FilterAttribute, NumberFilterOption } from '@/types/filters';

const buildUsageFilterAttributes = (
    agentOptions: NumberFilterOption[] | null,
    isLoadingAgentOptions: boolean,
    dispositionCodes: string[]
): FilterAttribute[] => {
    return withDispositionCodeOptions(usageFilterAttributes, dispositionCodes).map(attribute => {
        if (attribute.id !== 'workflowId') {
            return attribute;
        }

        return {
            ...attribute,
            label: 'Agent',
            type: 'numberSelect',
            config: {
                ...attribute.config,
                placeholder: 'Select an agent',
                numberSelectLabel: 'Agent',
                ...(agentOptions || isLoadingAgentOptions
                    ? {
                        numberSelectOptions: agentOptions ?? [],
                        numberSelectOptionsLoading: isLoadingAgentOptions,
                    }
                    : {}),
            },
        } satisfies FilterAttribute;
    });
};

export default function UsagePage() {
    const router = useRouter();
    const searchParams = useSearchParams();
    const { organizationPricing } = useUserConfig();
    const auth = useAuth();

    // Usage history state
    const [usageHistory, setUsageHistory] = useState<UsageHistoryResponse | null>(null);
    const [isLoadingHistory, setIsLoadingHistory] = useState(false);
    const [currentPage, setCurrentPage] = useState(() => {
        const pageParam = searchParams.get('page');
        return pageParam ? parseInt(pageParam, 10) : 1;
    });
    const [isExecutingFilters, setIsExecutingFilters] = useState(false);
    // Sort state (initialized from URL). Sorting is server-side because the
    // listing is paginated — sorting the current page client-side would only
    // reorder the 50 rows in hand.
    const [sortBy, setSortBy] = useState<string | null>(() => {
        return searchParams.get('sort_by') || null;
    });
    const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>(() => {
        return searchParams.get('sort_order') === 'asc' ? 'asc' : 'desc';
    });
    const [isDownloadingReport, setIsDownloadingReport] = useState(false);
    const [agentFilterOptions, setAgentFilterOptions] = useState<NumberFilterOption[] | null>(null);
    const [isLoadingAgentFilterOptions, setIsLoadingAgentFilterOptions] = useState(false);
    const { codes: dispositionCodes } = useDispositionCodes();
    const availableUsageFilterAttributes = useMemo(
        () => buildUsageFilterAttributes(agentFilterOptions, isLoadingAgentFilterOptions, dispositionCodes),
        [agentFilterOptions, isLoadingAgentFilterOptions, dispositionCodes]
    );

    // Daily usage breakdown state (only for paid orgs)
    const [dailyUsage, setDailyUsage] = useState<DailyUsageBreakdownResponse | null>(null);
    const [isLoadingDaily, setIsLoadingDaily] = useState(false);

    // Initialize filters from URL. `activeFilters` tracks the in-progress
    // edits in the FilterBuilder; `appliedFilters` is what's actually been
    // committed via Apply (and what drives fetching + the download button).
    const [activeFilters, setActiveFilters] = useState<ActiveFilter[]>(() => {
        return decodeFiltersFromURL(searchParams, availableUsageFilterAttributes);
    });
    const [appliedFilters, setAppliedFilters] = useState<ActiveFilter[]>(() => {
        return decodeFiltersFromURL(searchParams, availableUsageFilterAttributes);
    });

    // Media preview dialog
    const mediaPreview = MediaPreviewDialog();

    // Timezone state - initialize with empty string to avoid hydration mismatch
    const localTimezone = getLocalTimezone();
    const [selectedTimezone, setSelectedTimezone] = useState<ITimezoneOption | string>('');
    const [savingTimezone, setSavingTimezone] = useState(false);
    const [preferences, setPreferences] = useState<OrganizationPreferences>({});
    const [preferencesLoading, setPreferencesLoading] = useState(true);
    const timezoneSelectId = useId(); // Stable ID for react-select to prevent hydration mismatch

    // Translate the FilterBuilder state into the query-param shape the
    // backend expects. Shared between the listing fetch and the CSV export
    // so they stay in lockstep.
    const buildUsageQueryParams = (filters?: ActiveFilter[]) => {
        let filterParam: string | undefined;
        let startDate = '';
        let endDate = '';

        if (filters && filters.length > 0) {
            const dateRangeFilter = filters.find(f => f.attribute.id === 'dateRange');
            if (dateRangeFilter && dateRangeFilter.value) {
                const dateValue = dateRangeFilter.value as DateRangeValue;
                if (dateValue.from) startDate = dateValue.from.toISOString();
                if (dateValue.to) endDate = dateValue.to.toISOString();
            }

            const otherFilters = filters.filter(f => f.attribute.id !== 'dateRange');
            if (otherFilters.length > 0) {
                const filterData = otherFilters.map(filter => ({
                    attribute: filter.attribute.id,
                    type: filter.attribute.type === 'numberSelect' ? 'number' : filter.attribute.type,
                    value: filter.value,
                }));
                filterParam = JSON.stringify(filterData);
            }
        }

        return {
            ...(startDate && { start_date: startDate }),
            ...(endDate && { end_date: endDate }),
            ...(filterParam && { filters: filterParam }),
        };
    };

    // Fetch usage history
    const fetchUsageHistory = useCallback(async (
        page: number,
        filters?: ActiveFilter[],
        sortByParam?: string | null,
        sortOrderParam?: 'asc' | 'desc'
    ) => {
        if (!auth.isAuthenticated) return;
        setIsLoadingHistory(true);
        try {
            const response = await getUsageHistoryApiV1OrganizationsUsageRunsGet({
                query: {
                    page,
                    limit: 50,
                    ...buildUsageQueryParams(filters),
                    ...(sortByParam && { sort_by: sortByParam }),
                    ...(sortOrderParam && { sort_order: sortOrderParam }),
                },
            });

            if (response.data) {
                setUsageHistory(response.data);
            }
        } catch (error) {
            console.error('Failed to fetch usage history:', error);
        } finally {
            setIsLoadingHistory(false);
        }
    }, [auth.isAuthenticated]);

    // Fetch daily usage breakdown
    const fetchDailyUsage = useCallback(async () => {
        if (!auth.isAuthenticated || !organizationPricing?.price_per_second_usd) return;

        setIsLoadingDaily(true);
        try {
            const response = await getDailyUsageBreakdownApiV1OrganizationsUsageDailyBreakdownGet({
                query: { days: 7 },
            });

            if (response.data) {
                setDailyUsage(response.data);
            }
        } catch (error) {
            console.error('Failed to fetch daily usage:', error);
        } finally {
            setIsLoadingDaily(false);
        }
    }, [auth.isAuthenticated, organizationPricing]);

    const fetchAgentFilterOptions = useCallback(async () => {
        if (!auth.isAuthenticated) return;

        setIsLoadingAgentFilterOptions(true);
        try {
            const response = await getWorkflowsSummaryApiV1WorkflowSummaryGet({
                query: {
                    status: 'active',
                },
            });
            if (response.error) {
                throw new Error(detailFromError(response.error, 'Failed to load agents'));
            }

            const options = [...(response.data ?? [])]
                .sort((a: WorkflowSummaryResponse, b: WorkflowSummaryResponse) => (
                    a.name.localeCompare(b.name) || a.id - b.id
                ))
                .map((workflow: WorkflowSummaryResponse) => ({
                    label: `${workflow.name || 'Untitled Agent'} (#${workflow.id})`,
                    value: workflow.id,
                }));
            setAgentFilterOptions(options);
        } catch (error) {
            console.error('Failed to fetch agent filter options:', error);
            setAgentFilterOptions(null);
        } finally {
            setIsLoadingAgentFilterOptions(false);
        }
    }, [auth.isAuthenticated]);

    const fetchPreferences = useCallback(async () => {
        if (!auth.isAuthenticated) return;

        setPreferencesLoading(true);
        try {
            const response = await getPreferencesApiV1OrganizationsPreferencesGet();
            const nextPreferences = response.data || {};
            setPreferences(nextPreferences);
            setSelectedTimezone(nextPreferences.timezone || localTimezone);
        } catch (error) {
            console.error('Failed to fetch organization preferences:', error);
            setSelectedTimezone(localTimezone);
        } finally {
            setPreferencesLoading(false);
        }
    }, [auth.isAuthenticated, localTimezone]);

    // Download a CSV of all runs matching the current filters.
    const handleDownloadReport = async () => {
        if (!auth.isAuthenticated) return;
        setIsDownloadingReport(true);
        try {
            const response = await downloadUsageRunsReportApiV1OrganizationsUsageRunsReportGet({
                query: buildUsageQueryParams(appliedFilters),
                parseAs: 'blob',
            });

            if (response.data) {
                const blob = response.data as Blob;
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'usage_runs_report.csv';
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
            } else {
                toast.error('Failed to download report');
            }
        } catch (error) {
            console.error('Failed to download usage report:', error);
            toast.error('Failed to download report');
        } finally {
            setIsDownloadingReport(false);
        }
    };

    // Handle timezone change
    const handleTimezoneChange = async (timezone: ITimezoneOption | string) => {
        setSelectedTimezone(timezone);
        setSavingTimezone(true);
        const previousTimezone = preferences.timezone || localTimezone;
        try {
            const tzValue = typeof timezone === 'string' ? timezone : timezone.value;
            const response = await savePreferencesApiV1OrganizationsPreferencesPut({
                body: {
                    ...preferences,
                    timezone: tzValue,
                },
            });
            if (response.error) {
                throw new Error('Failed to save timezone');
            }
            setPreferences(response.data || { ...preferences, timezone: tzValue });
        } catch (error) {
            console.error('Failed to save timezone:', error);
            setSelectedTimezone(previousTimezone);
        } finally {
            setSavingTimezone(false);
        }
    };

    // Update timezone when organization preferences load.
    useEffect(() => {
        fetchPreferences();
    }, [fetchPreferences]);

    useEffect(() => {
        fetchAgentFilterOptions();
    }, [fetchAgentFilterOptions]);

    useEffect(() => {
        setActiveFilters(currentFilters => {
            let changed = false;
            const nextFilters = currentFilters.map(filter => {
                const updatedAttribute = availableUsageFilterAttributes.find(
                    attribute => attribute.id === filter.attribute.id
                );

                if (!updatedAttribute || updatedAttribute === filter.attribute) {
                    return filter;
                }

                changed = true;
                return {
                    ...filter,
                    attribute: updatedAttribute,
                };
            });

            return changed ? nextFilters : currentFilters;
        });
    }, [availableUsageFilterAttributes]);

    // Initial load - fetch when auth becomes available
    useEffect(() => {
        if (auth.isAuthenticated) {
            fetchUsageHistory(currentPage, appliedFilters, sortBy, sortOrder);
        }
    }, [auth.isAuthenticated, currentPage, appliedFilters, sortBy, sortOrder, fetchUsageHistory]);

    // Fetch daily usage when organizationPricing becomes available
    useEffect(() => {
        if (auth.isAuthenticated && organizationPricing?.price_per_second_usd) {
            fetchDailyUsage();
        }
    }, [auth.isAuthenticated, organizationPricing, fetchDailyUsage]);

    // Update URL with query parameters
    const updateUrlParams = useCallback((params: {
        page?: number;
        filters?: ActiveFilter[];
        sortBy?: string | null;
        sortOrder?: 'asc' | 'desc';
    }) => {
        const newParams = new URLSearchParams();

        if (params.page !== undefined) {
            newParams.set('page', params.page.toString());
        }

        if (params.sortBy) {
            newParams.set('sort_by', params.sortBy);
            newParams.set('sort_order', params.sortOrder || 'desc');
        }

        // Add filters to URL if present
        if (params.filters && params.filters.length > 0) {
            const filterString = encodeFiltersToURL(params.filters);
            if (filterString) {
                const filterParams = new URLSearchParams(filterString);
                filterParams.forEach((value, key) => newParams.set(key, value));
            }
        }

        router.push(`/usage?${newParams.toString()}`);
    }, [router]);

    const handleApplyFilters = useCallback(async () => {
        setIsExecutingFilters(true);
        setCurrentPage(1); // Reset to first page when applying filters
        setAppliedFilters(activeFilters);
        updateUrlParams({ page: 1, filters: activeFilters, sortBy, sortOrder });
        await fetchUsageHistory(1, activeFilters, sortBy, sortOrder);
        setIsExecutingFilters(false);
    }, [activeFilters, fetchUsageHistory, updateUrlParams, sortBy, sortOrder]);

    const handleFiltersChange = useCallback((filters: ActiveFilter[]) => {
        setActiveFilters(filters);
    }, []);

    const handleClearFilters = useCallback(async () => {
        setIsExecutingFilters(true);
        setCurrentPage(1);
        setActiveFilters([]);
        setAppliedFilters([]);
        updateUrlParams({ page: 1, filters: [], sortBy, sortOrder }); // Clear filters from URL
        await fetchUsageHistory(1, [], sortBy, sortOrder); // Fetch all runs without filters
        setIsExecutingFilters(false);
    }, [fetchUsageHistory, updateUrlParams, sortBy, sortOrder]);

    // Handle page change
    const handlePageChange = (newPage: number) => {
        setCurrentPage(newPage);
        updateUrlParams({ page: newPage, filters: appliedFilters, sortBy, sortOrder });
        fetchUsageHistory(newPage, appliedFilters, sortBy, sortOrder);
    };

    // Toggle sort direction on repeat clicks, otherwise start descending.
    // The fetch effect above picks up the new state; page resets to 1 because
    // the ordering of every page changes.
    const handleSort = useCallback((field: string) => {
        const newSortOrder = sortBy === field && sortOrder === 'desc' ? 'asc' : 'desc';
        setSortBy(field);
        setSortOrder(newSortOrder);
        setCurrentPage(1);
        updateUrlParams({ page: 1, filters: appliedFilters, sortBy: field, sortOrder: newSortOrder });
    }, [sortBy, sortOrder, appliedFilters, updateUrlParams]);

    // Handle row click to navigate to workflow run
    const handleRowClick = (run: WorkflowRunUsageResponse) => {
        router.push(`/workflow/${run.workflow_id}/run/${run.id}`);
    };

    const timezoneValue = typeof selectedTimezone === 'string' ? selectedTimezone : selectedTimezone.value;
    const effectiveTimezone = timezoneValue || localTimezone;

    // Format duration for display
    const formatDuration = (seconds: number) => {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        if (minutes === 0) return `${remainingSeconds}s`;
        if (remainingSeconds === 0) return `${minutes}m`;
        return `${minutes}m ${remainingSeconds}s`;
    };

    return (
        <div className="container mx-auto p-6 space-y-6">
            <div>
                <div className="flex justify-between items-start">
                    <div>
                        <h1 className="text-3xl font-bold mb-2">Agent Runs</h1>
                        <p className="text-muted-foreground">See all your Agent Runs across all Voice Agents. You can use filters to filter out required Agent Runs.</p>
                    </div>
                        <div className="flex items-center gap-2">
                            <Globe className="h-4 w-4 text-muted-foreground" />
                            <div className="w-[300px]">
                                <TimezoneSelect
                                    instanceId={timezoneSelectId}
                                    value={selectedTimezone}
                                    onChange={handleTimezoneChange}
                                    isDisabled={savingTimezone || preferencesLoading}
                                    placeholder={preferencesLoading ? "Loading..." : "Select timezone"}
                                    styles={{
                                        control: (base, state) => ({
                                            ...base,
                                            minHeight: '36px',
                                            fontSize: '14px',
                                            backgroundColor: 'var(--background)',
                                            borderColor: state.isFocused ? 'var(--ring)' : 'var(--border)',
                                            boxShadow: state.isFocused ? '0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent)' : 'none',
                                            '&:hover': {
                                                borderColor: 'var(--border)',
                                            },
                                        }),
                                        menu: (base) => ({
                                            ...base,
                                            zIndex: 9999,
                                            backgroundColor: 'var(--popover)',
                                            border: '1px solid var(--border)',
                                            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
                                        }),
                                        menuList: (base) => ({
                                            ...base,
                                            backgroundColor: 'var(--popover)',
                                            padding: 0,
                                        }),
                                        option: (base, state) => ({
                                            ...base,
                                            backgroundColor: state.isSelected
                                                ? 'var(--accent)'
                                                : state.isFocused
                                                ? 'var(--accent)'
                                                : 'var(--popover)',
                                            color: 'var(--foreground)',
                                            cursor: 'pointer',
                                            '&:active': {
                                                backgroundColor: 'var(--accent)',
                                            },
                                        }),
                                        singleValue: (base) => ({
                                            ...base,
                                            color: 'var(--foreground)',
                                        }),
                                        input: (base) => ({
                                            ...base,
                                            color: 'var(--foreground)',
                                        }),
                                        placeholder: (base) => ({
                                            ...base,
                                            color: 'var(--muted-foreground)',
                                        }),
                                        indicatorSeparator: (base) => ({
                                            ...base,
                                            backgroundColor: 'var(--border)',
                                        }),
                                        dropdownIndicator: (base) => ({
                                            ...base,
                                            color: 'var(--muted-foreground)',
                                            '&:hover': {
                                                color: 'var(--foreground)',
                                            },
                                        }),
                                    }}
                                />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Daily Usage Table - Only for paid organizations */}
                {organizationPricing?.price_per_second_usd && (
                    <div className="mb-6">
                        <DailyUsageTable
                            data={dailyUsage}
                            isLoading={isLoadingDaily}
                        />
                    </div>
                )}

                {/* Filter Builder */}
                <div className="mb-6 space-y-3">
                    <FilterBuilder
                        availableAttributes={availableUsageFilterAttributes}
                        activeFilters={activeFilters}
                        onFiltersChange={handleFiltersChange}
                        onApplyFilters={handleApplyFilters}
                        onClearFilters={handleClearFilters}
                        isExecuting={isExecutingFilters}
                    />
                    {appliedFilters.length > 0 && (
                        <div className="flex justify-end">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={handleDownloadReport}
                                disabled={isDownloadingReport}
                            >
                                <Download className="h-4 w-4 mr-2" />
                                {isDownloadingReport ? 'Preparing...' : 'Download Filtered Results'}
                            </Button>
                        </div>
                    )}
                </div>

                {/* Usage History */}
                <Card>
                    <CardHeader>
                        <div className="flex justify-between items-start">
                            <div className="space-y-1.5">
                                <CardTitle>All Runs</CardTitle>
                                <CardDescription>
                                    Every agent run across your organization, with usage details
                                </CardDescription>
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent>
                        {isLoadingHistory ? (
                            <div className="animate-pulse space-y-3">
                                {[...Array(5)].map((_, i) => (
                                    <div key={i} className="h-12 bg-muted rounded"></div>
                                ))}
                            </div>
                        ) : usageHistory && usageHistory.runs.length > 0 ? (
                            <>
                                <div className="bg-card border rounded-lg overflow-hidden shadow-sm">
                                    <Table>
                                        <TableHeader>
                                            <TableRow className="bg-muted/50">
                                                <TableHead className="font-semibold">Run ID</TableHead>
                                                <TableHead className="font-semibold">Agent Name</TableHead>
                                                <TableHead className="font-semibold">Call Type</TableHead>
                                                <TableHead className="font-semibold">Phone Number</TableHead>
                                                <TableHead className="font-semibold">Disposition</TableHead>
                                                <TableHead className="font-semibold">Date</TableHead>
                                                <TableHead
                                                    className="font-semibold text-right cursor-pointer hover:bg-muted/50 select-none"
                                                    onClick={() => handleSort('duration')}
                                                >
                                                    <div className="flex items-center justify-end gap-1">
                                                        Duration
                                                        {sortBy === 'duration' ? (
                                                            sortOrder === 'asc' ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />
                                                        ) : (
                                                            <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
                                                        )}
                                                    </div>
                                                </TableHead>
                                                {organizationPricing?.price_per_second_usd && (
                                                    <TableHead className="font-semibold text-right">Cost (USD)</TableHead>
                                                )}
                                                <TableHead className="font-semibold">Actions</TableHead>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {usageHistory.runs.map((run) => (
                                                <TableRow
                                                    key={run.id}
                                                >
                                                    <TableCell
                                                        className="font-mono text-sm cursor-pointer hover:underline"
                                                        onClick={() => handleRowClick(run)}
                                                    >
                                                        #{run.id}
                                                    </TableCell>
                                                    <TableCell>{run.workflow_name || 'Unknown'}</TableCell>
                                                    <TableCell>
                                                        <CallTypeCell mode={run.mode} callType={run.call_type} />
                                                    </TableCell>
                                                    <TableCell className="text-sm">
                                                        {(run.call_type === 'inbound'
                                                            ? run.caller_number
                                                            : run.called_number) || '-'}
                                                    </TableCell>
                                                    <TableCell>
                                                        {run.disposition ? (
                                                            <Badge variant="default">
                                                                {run.disposition}
                                                            </Badge>
                                                        ) : (
                                                            <span className="text-sm text-muted-foreground">-</span>
                                                        )}
                                                    </TableCell>
                                                    <TableCell>{formatDateTime(run.created_at, effectiveTimezone)}</TableCell>
                                                    <TableCell className="text-right">
                                                        {formatDuration(run.call_duration_seconds)}
                                                    </TableCell>
                                                    {organizationPricing?.price_per_second_usd && (
                                                        <TableCell className="text-right font-medium">
                                                            {run.charge_usd !== undefined && run.charge_usd !== null
                                                                ? `$${run.charge_usd.toFixed(2)}`
                                                                : '-'
                                                            }
                                                        </TableCell>
                                                    )}
                                                    <TableCell>
                                                        <MediaPreviewButton
                                                            recordingUrl={run.recording_url}
                                                            transcriptUrl={run.transcript_url}
                                                            runId={run.id}
                                                            onOpenPreview={mediaPreview.openPreview}
                                                        />
                                                    </TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                </div>

                                {/* Summary */}
                                {appliedFilters.length > 0 && (
                                    <div className="mt-4 p-3 bg-muted rounded-md">
                                        <p className="text-sm text-muted-foreground">
                                            Total for filtered period: <span className="font-semibold text-foreground">
                                                {usageHistory.total_dograh_tokens.toLocaleString()} Dograh Tokens
                                            </span>
                                            {' • '}
                                            <span className="font-semibold text-foreground">
                                                {formatDuration(usageHistory.total_duration_seconds)}
                                            </span>
                                        </p>
                                    </div>
                                )}

                                {/* Pagination */}
                                {usageHistory.total_pages > 1 && (
                                    <div className="flex items-center justify-between mt-6">
                                        <p className="text-sm text-muted-foreground">
                                            Page {usageHistory.page} of {usageHistory.total_pages} ({usageHistory.total_count} total runs)
                                        </p>
                                        <div className="flex gap-2">
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                onClick={() => handlePageChange(currentPage - 1)}
                                                disabled={currentPage === 1}
                                            >
                                                <ChevronLeft className="h-4 w-4" />
                                                Previous
                                            </Button>
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                onClick={() => handlePageChange(currentPage + 1)}
                                                disabled={currentPage === usageHistory.total_pages}
                                            >
                                                Next
                                                <ChevronRight className="h-4 w-4" />
                                            </Button>
                                        </div>
                                    </div>
                                )}
                            </>
                        ) : (
                            <p className="text-center py-8 text-muted-foreground">No runs found</p>
                        )}
                    </CardContent>
                </Card>

                {/* Media Preview Dialog */}
                {mediaPreview.dialog}
        </div>
    );
}