'use client';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Download, Edit3, Loader2, Pause, Play, Type } from 'lucide-react';
import { useEffect, useState } from 'react';

const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive = false }) => {
    const [isPlaying, setIsPlaying] = useState(false);
    const [isExporting, setIsExporting] = useState(false);

    // Listen for timeline state changes
    useEffect(() => {
        const checkTimelineState = () => {
            if (window.timelineControls) {
                setIsPlaying(window.timelineControls.isPlaying);
                setIsExporting(window.timelineControls.isExporting);
            }
        };

        const interval = setInterval(checkTimelineState, 100);
        return () => clearInterval(interval);
    }, []);

    const handlePlayPause = () => {
        if (window.timelineControls) {
            if (isPlaying) {
                window.timelineControls.pause();
            } else {
                window.timelineControls.play();
            }
        }
    };

    const handleExport = () => {
        if (window.timelineControls && !isExporting) {
            window.timelineControls.export();
        }
    };

    return (
        <div className={cn('flex items-center justify-center gap-2', className)}>
            <Button
                variant="default"
                size="icon"
                className="h-12 w-12 rounded-full border shadow-sm"
                onClick={handlePlayPause}
                disabled={!window.timelineControls}
            >
                {isPlaying ? <Pause className="h-8 w-8" /> : <Play className="h-8 w-8" />}
            </Button>

            <Button variant="default" size="icon" className="h-12 w-12 rounded-full border shadow-sm">
                <Type className="h-8 w-8" />
            </Button>

            <Button
                id="edit"
                variant={isEditActive ? 'default' : 'default'}
                size="icon"
                className="h-12 w-12 rounded-full border shadow-sm"
                onClick={onEditClick}
            >
                <Edit3 className={`h-8 w-8 ${isEditActive ? 'text-white' : ''}`} />
            </Button>

            <Button
                variant="default"
                size="icon"
                className="h-12 w-12 rounded-full border shadow-sm"
                onClick={handleExport}
                disabled={isExporting || !window.timelineControls}
            >
                {isExporting ? <Loader2 className="h-8 w-8 animate-spin" /> : <Download className="h-8 w-8" />}
            </Button>
        </div>
    );
};

export default EditorControls;