import '../styles/EditingTools.css';
import { useEffect, useState } from 'react';
import logger from '@/lib/logger';

interface EditingToolsProps {
    onSplit: () => void;
    onReset: () => void;
    onUndo: () => void;
    onRedo: () => void;
    onPlaySegments: () => void;
    onPlay: () => void;
    canUndo: boolean;
    canRedo: boolean;
    isPlaying?: boolean;
    isPlayingSegments?: boolean;
}

const EditingTools = ({
    onSplit,
    onReset,
    onUndo,
    onRedo,
    onPlaySegments,
    onPlay,
    canUndo,
    canRedo,
    isPlaying = false,
    isPlayingSegments = false,
}: EditingToolsProps) => {
    const [isSmallScreen, setIsSmallScreen] = useState(false);

    useEffect(() => {
        const checkScreenSize = () => {
            setIsSmallScreen(window.innerWidth <= 640);
        };

        checkScreenSize();
        window.addEventListener('resize', checkScreenSize);
        return () => window.removeEventListener('resize', checkScreenSize);
    }, []);

    // Handle play button click with iOS fix
    const handlePlay = () => {
        // Ensure lastSeekedPosition is used when play is clicked
        if (typeof window !== 'undefined') {
            logger.debug('Play button clicked, current lastSeekedPosition:', window.lastSeekedPosition);
        }

        // Call the original handler
        onPlay();
    };

    return (
        <div className="editing-tools-container">
            <div className="flex-container single-row">
                {/* Left side - Play buttons group */}
                <div className="button-group play-buttons-group">
                    {/* Play Chapters button */}
                    <button
                        className={`button segments-button`}
                        onClick={onPlaySegments}
                        data-tooltip={
                            isPlayingSegments ? 'Stop chapters playback' : 'Play chapters in one continuous flow'
                        }
                        style={{ fontSize: '0.875rem' }}
                    >
                        {isPlayingSegments ? (
                            <>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                >
                                    <circle cx="12" cy="12" r="10" />
                                    <line x1="10" y1="15" x2="10" y2="9" />
                                    <line x1="14" y1="15" x2="14" y2="9" />
                                </svg>
                                <span className="full-text">Stop Preview</span>
                                <span className="short-text">Stop Preview</span>
                            </>
                        ) : (
                            <>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                >
                                    <circle cx="12" cy="12" r="10" />
                                    <polygon points="10 8 16 12 10 16 10 8" />
                                </svg>
                                <span className="full-text">Play Preview</span>
                                <span className="short-text">Play Preview</span>
                            </>
                        )}
                    </button>

                    {/* Play Preview button */}
                    {/* <button 
            className="button preview-button"
            onClick={onPreview}
            data-tooltip={isPreviewMode ? "Stop preview playback" : "Play only segments (skips gaps between segments)"}
            style={{ fontSize: '0.875rem' }}
          >
            {isPreviewMode ? (
              <>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="10" />
                  <line x1="10" y1="15" x2="10" y2="9" />
                  <line x1="14" y1="15" x2="14" y2="9" />
                </svg>
                <span className="full-text">Stop Preview</span>
                <span className="short-text">Stop</span>
              </>
            ) : (
              <>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="10" />
                  <polygon points="10 8 16 12 10 16 10 8" />
                </svg>
                <span className="full-text">Play Preview</span>
                <span className="short-text">Preview</span>
              </>
            )}
          </button> */}

                    {/* Standard Play button (only shown when not in segments playback on small screens) */}
                    {(!isPlayingSegments || !isSmallScreen) && (
                        <button
                            className={`button play-button ${isPlayingSegments ? 'greyed-out' : ''}`}
                            onClick={handlePlay}
                            data-tooltip={isPlaying ? 'Pause video' : 'Play full video'}
                            style={{ fontSize: '0.875rem' }}
                            disabled={isPlayingSegments}
                        >
                            {isPlaying && !isPlayingSegments ? (
                                <>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        strokeWidth="2"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    >
                                        <circle cx="12" cy="12" r="10" />
                                        <line x1="10" y1="15" x2="10" y2="9" />
                                        <line x1="14" y1="15" x2="14" y2="9" />
                                    </svg>
                                    <span className="full-text">Pause</span>
                                    <span className="short-text">Pause</span>
                                </>
                            ) : (
                                <>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        strokeWidth="2"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    >
                                        <circle cx="12" cy="12" r="10" />
                                        <polygon points="10 8 16 12 10 16 10 8" />
                                    </svg>
                                    <span className="full-text">Play</span>
                                    <span className="short-text">Play</span>
                                </>
                            )}
                        </button>
                    )}

                    {/* Segments Playback message (replaces play button during segments playback) */}
                    {/* {isPlayingSegments && !isSmallScreen && (
            <div className="segments-playback-message">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="16" x2="12" y2="12" />
                <line x1="12" y1="8" x2="12" y2="8" />
              </svg>
              Preview Mode
            </div>
          )} */}

                    {/* Preview mode message (replaces play button) */}
                    {/* {isPreviewMode && (
            <div className="preview-mode-message">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="16" x2="12" y2="12" />
                <line x1="12" y1="8" x2="12" y2="8" />
              </svg>
              Preview Mode
            </div>
          )} */}
                </div>

                {/* Right side - Editing tools */}
                <div className="button-group secondary">
                    <button
                        className="button"
                        aria-label="Undo"
                        data-tooltip={isPlayingSegments ? 'Disabled during preview' : 'Undo last action'}
                        disabled={!canUndo || isPlayingSegments}
                        onClick={onUndo}
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path d="M9 14 4 9l5-5" />
                            <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" />
                        </svg>
                        <span className="button-text">Undo</span>
                    </button>
                    <button
                        className="button"
                        aria-label="Redo"
                        data-tooltip={isPlayingSegments ? 'Disabled during preview' : 'Redo last undone action'}
                        disabled={!canRedo || isPlayingSegments}
                        onClick={onRedo}
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path d="m15 14 5-5-5-5" />
                            <path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13" />
                        </svg>
                        <span className="button-text">Redo</span>
                    </button>
                    <div className="divider"></div>
                    <button
                        className="button"
                        onClick={onReset}
                        data-tooltip={isPlayingSegments ? 'Disabled during preview' : 'Reset to full video'}
                        disabled={isPlayingSegments}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path
                                fillRule="evenodd"
                                d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                                clipRule="evenodd"
                            />
                        </svg>
                        <span className="reset-text">Reset</span>
                    </button>
                </div>
            </div>
        </div>
    );
};

export default EditingTools;