import type { ReactNode } from 'react';
import type { BoxProps } from '@mui/material';
export type VideoTimelineRef = {
    goLive: () => void;
};
export type TimeRange = {
    start: number;
    end: number;
};
export type TimestampRange = {
    startDate: string;
    endDate: string;
};
export type VideoSegment = {
    start: number;
    end: number;
};
export type EventPoint = {
    id: string;
    time: number;
    icon?: ReactNode;
    data?: unknown;
};
export type ZoomState = {
    /**
     * Visible window size in seconds.
     * - 86400 = full day (0→24h)
     * - smaller values = zoom in (minutes/seconds/frames)
     */
    windowSeconds: number;
    /**
     * Frames-per-second used when formatting sub-second ticks (HH:MM:SS:FF).
     */
    fps: number;
};
export interface VideoTimelineProps extends Omit<BoxProps, 'height'> {
    /**
     * Quando `true`, o marcador de tempo acompanha o horário real (modo ao vivo).
     * O playhead fica na extremidade direita e avança a cada segundo.
     */
    isLive?: boolean;
    /**
     * When `true`, the playhead pin is not highlighted in red.
     * Use when the video is in recording/playback mode instead of live.
     */
    isRecording?: boolean;
    /**
     * Header title (Figma: "Timeline").
     */
    title?: string;
    /**
     * Header subtitle/instructions.
     */
    subtitle?: string;
    /**
     * Show header area (title + action buttons + zoom controls).
     */
    showHeader?: boolean;
    /**
     * How the time scale should be formatted.
     * - 'day24h': seconds represent time-of-day within a 24h window (CFTV default)
     * - 'duration': seconds represent media duration (00:00 → ...)
     */
    timeScaleMode?: 'day24h' | 'duration';
    /**
     * Optional formatter override for major tick labels.
     */
    tickLabelFormatter?: (timeSeconds: number, stepSeconds: number, fps: number) => string;
    /**
     * Total timeline domain in seconds. Defaults to 24h.
     * For a 0→24h scale, use 86400.
     */
    totalSeconds?: number;
    /**
     * If true, wheel will zoom in/out around the cursor position.
     */
    enableWheelZoom?: boolean;
    /**
     * Pixel height of the timeline.
     */
    height?: number;
    /**
     * When a selection is finished, automatically zoom to the selected range.
     */
    autoZoomOnSelection?: boolean;
    /**
     * When in live mode, the visible window size in seconds. Defaults to 2 hours (7200).
     */
    liveWindowSeconds?: number;
    /**
     * Show zoom controls (- 100% +) on the header.
     */
    showZoomControls?: boolean;
    /**
     * Allow scrubbing by clicking/dragging on the ruler/tracks (not only the playhead).
     */
    enableScrubOnTracks?: boolean;
    /**
     * When `false`, disables range selection by dragging on the tracks area.
     * Dragging on the tracks will instead scroll the timeline horizontally.
     * Defaults to `true`.
     */
    enableRangeSelect?: boolean;
    /**
     * When `true`, the playhead cannot be dragged by the user.
     * Defaults to `false`.
     */
    disablePlayheadDrag?: boolean;
    /**
     * When `true`, shows a time tooltip following the mouse cursor over the timeline tracks.
     * Defaults to `false`.
     */
    showHoverTooltip?: boolean;
    /**
     * Initial playhead position in seconds from the window start (midnight for day24h mode).
     * When provided, the playhead is placed at this position on mount and live mode is disabled.
     */
    startTime?: number;
    /**
     * When clicking an event marker, clear the current selection range (filter) before seeking.
     */
    clearSelectionOnEventClick?: boolean;
    /**
     * Callback when the "Baixar vídeo" (download) button is clicked.
     * If not provided, the download button is hidden.
     */
    onDownloadClick?: () => void;
    /**
     * Current date displayed in the date picker.
     * If not provided, the date picker is hidden.
     */
    date?: Date;
    /**
     * Absolute start date-time of the 24-hour window.
     *
     * Use `new Date(Date.now() - 86_400_000)` to show the last 24 hours,
     * which may span two calendar days (e.g. yesterday 14:00 → today 14:00).
     *
     * When provided, second 0 in the timeline maps to this exact moment and
     * tick labels/timestamps are correctly offset across midnight.
     *
     * If omitted, defaults to midnight of `date` (backwards compatible).
     */
    windowStart?: Date;
    /**
     * Callback when the date changes in the date picker.
     */
    onDateChange?: (date: Date) => void;
    /**
     * Label for the video track. Default: "Vídeo".
     */
    videoLabel?: string;
    /**
     * Label for the events track. Default: "Eventos".
     */
    eventsLabel?: string;
    /**
     * Label for the download button. Default: "Baixar vídeo".
     */
    downloadLabel?: string;
    /**
     * Fired on every meaningful interaction: selection drag, segment click, event click.
     * Returns an absolute timestamp range (ISO 8601 basic format) for API filtering.
     *
     * Uses the `date` prop (defaults to today) to build full timestamps.
     *
     * @example
     * ```tsx
     * <VideoTimeline
     *   date={new Date(2026, 0, 30)}
     *   onChangePeriod={({ startDate, endDate }) => {
     *     // startDate: '20260130T191055Z'
     *     // endDate:   '20260130T191143Z'
     *     fetchVideo({ startDate, endDate });
     *   }}
     * />
     * ```
     */
    onChangePeriod?: (period: TimestampRange) => void;
    /**
     * Called when a video segment is clicked. Receives the clicked time (seconds) and the segment.
     */
    onSegmentClick?: (time: number, segment: VideoSegment) => void;
    /**
     * Called when an event marker is clicked. Receives the event time (seconds) and the event.
     */
    onEventClick?: (time: number, event: EventPoint) => void;
    /**
     * Video availability segments. Each segment has a start/end in seconds.
     *
     * @example
     * ```tsx
     * <VideoTimeline
     *   segments={[
     *     { start: 7221, end: 18601 },  // 02:00:21 → 05:10:01
     *     { start: 36021, end: 40201 }, // 10:00:21 → 11:10:01
     *   ]}
     * />
     * ```
     */
    segments?: VideoSegment[];
    /**
     * When `true` (default), always renders a segment spanning 100% of the timeline behind
     * any real segments. Useful to show the track as always "active".
     * Set to `false` to only render the provided segments.
     */
    fullSegment?: boolean;
    /**
     * Event points on the timeline. Each event has an id, time (seconds), and optional icon/data.
     *
     * @example
     * ```tsx
     * <VideoTimeline
     *   events={[
     *     { id: '1', time: 3600, icon: <PersonIcon /> },
     *     { id: '2', time: 7200 },
     *   ]}
     * />
     * ```
     */
    events?: EventPoint[];
}
