import { AlertTriangle, Save, LogOut } from 'lucide-react'
import { t } from '@/lib/i18n'
import { Button } from './Button'

interface UnsavedChangesModalProps {
    isOpen: boolean
    onCancel: () => void
    onDiscard: () => void
    onSave: () => void
    onSaveAlways: () => void
    isSaving?: boolean
    errorMessage?: string | null
}

export function UnsavedChangesModal({
    isOpen,
    onCancel,
    onDiscard,
    onSave,
    onSaveAlways,
    isSaving = false,
    errorMessage = null,
}: UnsavedChangesModalProps) {
    if (!isOpen) return null

    return (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
            <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 overflow-hidden">
                {/* Header */}
                <div className="bg-amber-50 px-6 py-4 flex items-center gap-3 border-b border-amber-100">
                    <AlertTriangle className="w-6 h-6 text-amber-600" />
                    <h3 className="font-semibold text-amber-900">{t('Unsaved changes')}</h3>
                </div>
                
                {/* Content */}
                <div className="px-6 py-4">
                    <p className="text-gray-700 mb-4">
                        {t('You have unsaved changes. What would you like to do?')}
                    </p>
                    {errorMessage && (
                        <div className="mt-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                            {errorMessage}
                        </div>
                    )}
                </div>
                
                {/* Actions */}
                <div className="px-6 py-4 bg-gray-50 flex flex-col gap-2">
                    {/* Primary actions */}
                    <div className="flex gap-2">
                        <Button
                            onClick={onDiscard}
                            variant="outline"
                            className="flex-1"
                            disabled={isSaving}
                        >
                            <LogOut className="w-4 h-4 me-2" />
                            {t('Leave without saving')}
                        </Button>
                        
                        <Button
                            onClick={onSave}
                            className="flex-1"
                            disabled={isSaving}
                        >
                            <Save className="w-4 h-4 me-2" />
                            {isSaving ? t('Saving...') : t('Save and leave')}
                        </Button>
                    </div>
                    
                    {/* Always save option */}
                    <button
                        onClick={onSaveAlways}
                        disabled={isSaving}
                        className="text-sm text-gray-500 hover:text-gray-700 py-2"
                    >
                        {t('Always auto-save before leaving')}
                    </button>
                    
                    {/* Cancel */}
                    <button
                        onClick={onCancel}
                        disabled={isSaving}
                        className="text-sm text-gray-400 hover:text-gray-600"
                    >
                        {t('Cancel - stay on page')}
                    </button>
                </div>
            </div>
        </div>
    )
}





