ERitors-Scribe-Desktop/components/book/settings/ToolDetailHeader.tsx

'use client';
import React from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faArrowLeft, faEdit, faPlus, faSave, faShare, faTrash, faTimes} from '@fortawesome/free-solid-svg-icons';
import {IconDefinition} from '@fortawesome/fontawesome-svg-core';
import {useTranslations} from 'next-intl';
import {ViewMode} from '@/shared/interface';

interface ActionButton {
    icon: IconDefinition;
    onClick: () => void;
    title?: string;
    variant?: 'primary' | 'danger' | 'secondary' | 'blue';
}

interface SidebarHeaderProps {
    title: string;
    defaultTitle: string;
    viewMode: ViewMode;
    isNew: boolean;
    onBack: () => void;
    onEdit?: () => void;
    onSave?: () => void;
    onCancel?: () => void;
    onDelete?: () => void;
    onExport?: () => void;
    showExport?: boolean;
    showDelete?: boolean;
}

/**
 * ToolDetailHeader - Header pour les composants Editor (ComposerRightBar) et Settings Detail/Edit
 * Comportement par mode:
 * - list: Retourne null (pas de header)
 * - detail: Boutons Back, Edit, Delete, Export (si applicable)
 * - edit: Boutons Cancel, Save/Create
 */
export default function ToolDetailHeader({
    title,
    defaultTitle,
    viewMode,
    isNew,
    onBack,
    onEdit,
    onSave,
    onCancel,
    onDelete,
    onExport,
    showExport = false,
    showDelete = true,
}: SidebarHeaderProps): React.JSX.Element | null {
    const t = useTranslations();
    
    if (viewMode === 'list') {
        return null;
    }

    function getVariantClasses(variant: 'primary' | 'danger' | 'secondary' | 'blue'): string {
        switch (variant) {
            case 'primary':
                return 'bg-primary/10 hover:bg-primary/20 border-primary/30';
            case 'danger':
                return 'bg-error/10 hover:bg-error/20 border-error/30';
            case 'blue':
                return 'bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/30';
            case 'secondary':
            default:
                return 'bg-secondary/50 hover:bg-secondary border-secondary/50 hover:border-secondary';
        }
    }

    function getIconColorClass(variant: 'primary' | 'danger' | 'secondary' | 'blue'): string {
        switch (variant) {
            case 'primary':
                return 'text-primary';
            case 'danger':
                return 'text-error';
            case 'blue':
                return 'text-blue-500';
            case 'secondary':
            default:
                return 'text-text-primary';
        }
    }

    function renderActionButton(button: ActionButton, index: number): React.JSX.Element {
        const variant = button.variant || 'secondary';
        return (
            <button
                key={`action-${index}`}
                onClick={button.onClick}
                title={button.title}
                className={`group flex items-center justify-center w-10 h-10 rounded-lg border hover:shadow-md hover:scale-110 transition-all duration-200 ${getVariantClasses(variant)}`}
            >
                <FontAwesomeIcon icon={button.icon} className={`w-4 h-4 transition-transform group-hover:scale-110 ${getIconColorClass(variant)}`}/>
            </button>
        );
    }

    function getActionButtons(): ActionButton[] {
        const buttons: ActionButton[] = [];

        if (viewMode === 'detail') {
            if (showExport && onExport) {
                buttons.push({
                    icon: faShare,
                    onClick: onExport,
                    title: t('common.exportToSeries'),
                    variant: 'blue',
                });
            }
            if (showDelete && onDelete) {
                buttons.push({
                    icon: faTrash,
                    onClick: onDelete,
                    title: t('common.delete'),
                    variant: 'danger',
                });
            }
            if (onEdit) {
                buttons.push({
                    icon: faEdit,
                    onClick: onEdit,
                    title: t('common.edit'),
                    variant: 'primary',
                });
            }
        } else if (viewMode === 'edit') {
            if (onCancel) {
                buttons.push({
                    icon: faTimes,
                    onClick: onCancel,
                    title: t('common.cancel'),
                    variant: 'danger',
                });
            }
            if (onSave) {
                buttons.push({
                    icon: isNew ? faPlus : faSave,
                    onClick: onSave,
                    title: isNew ? t('common.create') : t('common.save'),
                    variant: 'primary',
                });
            }
        }

        return buttons;
    }

    return (
        <div className="flex justify-between items-center p-4 border-b border-secondary/50 bg-tertiary/50 backdrop-blur-sm">
            <button
                onClick={onBack}
                className="flex items-center gap-2 bg-secondary/50 py-2 px-4 rounded-xl border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md hover:scale-105 transition-all duration-200"
            >
                <FontAwesomeIcon icon={faArrowLeft} className="text-primary w-4 h-4"/>
                <span className="text-text-primary font-medium">{t('common.back')}</span>
            </button>

            <span className="text-text-primary font-semibold text-lg">
                {title || defaultTitle}
            </span>

            <div className="flex items-center gap-2">
                {getActionButtons().map(renderActionButton)}
            </div>
        </div>
    );
}