'use client';
import React from 'react';
import {ArrowLeft, LucideIcon, Pencil, Plus, Save, Share2, Trash2, X} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import {ViewMode} from '@/lib/types/settings';
import Button from '@/components/ui/Button';
import IconButton from '@/components/ui/IconButton';

type ActionVariant = 'primary' | 'danger' | 'ghost';

interface ActionButton {
    icon: LucideIcon;
    onClick: () => void;
    title?: string;
    variant?: ActionVariant;
}

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 renderActionButton(button: ActionButton, index: number): React.JSX.Element {
        return (
            <IconButton
                key={`action-${index}`}
                icon={button.icon}
                variant={button.variant || 'ghost'}
                shape="square"
                onClick={button.onClick}
                tooltip={button.title}
            />
        );
    }
    
    function getActionButtons(): ActionButton[] {
        const buttons: ActionButton[] = [];
        
        if (viewMode === 'detail') {
            if (showExport && onExport) {
                buttons.push({
                    icon: Share2,
                    onClick: onExport,
                    title: t('common.exportToSeries'),
                    variant: 'primary',
                });
            }
            if (showDelete && onDelete) {
                buttons.push({
                    icon: Trash2,
                    onClick: onDelete,
                    title: t('common.delete'),
                    variant: 'danger',
                });
            }
            if (onEdit) {
                buttons.push({
                    icon: Pencil,
                    onClick: onEdit,
                    title: t('common.edit'),
                    variant: 'primary',
                });
            }
        } else if (viewMode === 'edit') {
            if (onCancel) {
                buttons.push({
                    icon: X,
                    onClick: onCancel,
                    title: t('common.cancel'),
                    variant: 'danger',
                });
            }
            if (onSave) {
                buttons.push({
                    icon: isNew ? Plus : Save,
                    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 bg-darkest-background">
            <Button variant="secondary" size="sm" icon={ArrowLeft} onClick={onBack}>
                {t('common.back')}
            </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>
    );
}