/**
 * AppFooter Component
 * * Responsibility: Provides the main interface for persistence actions (Save/Reset).
 * Features: 
 * - Sticky bottom positioning with shadow.
 * - Dynamic Save button states (Idle, Dirty, Saving).
 * - Reset button for clearing current form values.
 * - Visual feedback for unsaved changes.
 */

import React from 'react';
import { Button } from "@/components/ui/button";
import { Save, Loader2, RotateCcw, Check } from "lucide-react";
import { useLanguage } from '../../context/LanguageContext';

export default function AppFooter({ onSave, onReset, disabled, isDirty, isSaving, isChecked, onToggleCheck }) {
  const { t } = useLanguage();

  const getSaveButtonStyles = () => {
    if (isSaving) return 'bg-blue-600 opacity-80 cursor-wait';
    if (isDirty) return 'bg-blue-600 hover:bg-blue-700 text-white shadow-blue-200 shadow-lg scale-[1.01]';
    return 'bg-slate-800 text-white opacity-50 cursor-default';
  };

  return (
    <footer className="p-3 md:p-4 border-t bg-white shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
      <div className="flex gap-2">
        {!isSaving && (
          <Button
            variant="outline"
            size="icon"
            onClick={() => onReset()}
            disabled={disabled}
            title={t('resetDataTooltip')}
            className="shrink-0 border-slate-200 text-slate-500 hover:text-red-600 hover:bg-red-50 hover:border-red-100 transition-colors"
          >
            <RotateCcw className="w-4 h-4" />
          </Button>
        )}

        <Button
          onClick={onSave}
          disabled={disabled || (!isDirty && !isSaving)}
          className={`flex-1 py-2 md:py-2.5 rounded-lg font-bold text-sm md:text-base transition-all flex items-center justify-center gap-2 ${getSaveButtonStyles()}`}
        >
          {isSaving ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              {t('saving')}
            </>
          ) : (
            <>
              <Save className="w-4 h-4" />
              {isDirty ? t('saveChanges') : t('allSaved')}
            </>
          )}
        </Button>

        {!isSaving && onToggleCheck && (
          <Button
            variant={isChecked ? "default" : "outline"}
            size="icon"
            onClick={onToggleCheck}
            disabled={disabled}
            title={isChecked ? t('markAsUnchecked') : t('markAsChecked')}
            className={`shrink-0 ${isChecked ? 'bg-green-600 hover:bg-green-700 text-white' : 'border-slate-200 text-slate-500 hover:text-green-600 hover:bg-green-50 hover:border-green-100'} transition-colors`}
          >
            <Check className="w-4 h-4" />
          </Button>
        )}
      </div>

      {isDirty && !isSaving && (
        <p className="text-[10px] text-center text-blue-500 mt-2 font-medium animate-pulse">
          {t('unsavedChangesHint')}
        </p>
      )}
    </footer>
  );
}