/**
 * ValidationFooter Component
 *
 * Navigation footer with back/next buttons and summary info.
 * After first sanity check, shows options to view results, recheck, or proceed directly.
 */

import { useContext } from 'react';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { CheckCircle, Loader2, Eye, RefreshCw } from 'lucide-react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { AuthContext } from '@/contexts/AuthContext';

interface ValidationFooterProps {
  onBack?: () => void;
  /** Called to proceed directly to next step (no sanity check) */
  onProceedDirect?: () => void;
  /** Called to view cached sanity check results */
  onViewResults?: () => void;
  /** Called to run a fresh sanity check */
  onRunCheck?: () => void;
  canGoBack: boolean;
  canProceed: boolean;
  errorCount: number;
  rowCount: number;
  /** Whether sanity check is currently running */
  isSanityChecking?: boolean;
  /** Whether sanity check has been run at least once */
  hasRunSanityCheck?: boolean;
  /** Whether to skip sanity check (debug mode) */
  skipSanityCheck?: boolean;
  /** Called when skip sanity check toggle changes */
  onSkipSanityCheckChange?: (skip: boolean) => void;
}

export const ValidationFooter = ({
  onBack,
  onProceedDirect,
  onViewResults,
  onRunCheck,
  canGoBack,
  canProceed,
  errorCount,
  rowCount,
  isSanityChecking = false,
  hasRunSanityCheck = false,
  skipSanityCheck = false,
  onSkipSanityCheckChange,
}: ValidationFooterProps) => {
  const { user } = useContext(AuthContext);
  const hasDebugPermission = Boolean(user?.is_admin || user?.permissions?.includes('admin:debug'));

  return (
    <div className="flex items-center justify-between border-t bg-muted/50 px-6 py-4">
      {/* Back button */}
      <div>
        {canGoBack && onBack && (
          <Button variant="outline" onClick={onBack}>
            Back
          </Button>
        )}
      </div>

      {/* Status summary - only show success message when no errors */}
      <div className="flex items-center gap-4">
        {errorCount === 0 && rowCount > 0 && (
          <div className="flex items-center gap-2 text-green-600">
            <CheckCircle className="h-4 w-4" />
            <span className="text-sm font-medium">
              All {rowCount} products validated
            </span>
          </div>
        )}
      </div>

      {/* Action buttons */}
      <div className="flex items-center gap-2">
        {/* Skip sanity check toggle - only for admin:debug users */}
        {hasDebugPermission && onSkipSanityCheckChange && !hasRunSanityCheck && (
          <TooltipProvider>
            <Tooltip delayDuration={300}>
              <TooltipTrigger asChild>
                <div className="flex items-center gap-2 mr-4">
                  <Switch
                    id="skip-sanity"
                    checked={skipSanityCheck}
                    onCheckedChange={onSkipSanityCheckChange}
                  />
                  <Label
                    htmlFor="skip-sanity"
                    className="text-sm text-muted-foreground cursor-pointer flex items-center gap-1"
                  >
                    Skip Consistency Check
                  </Label>
                </div>
              </TooltipTrigger>
              <TooltipContent side="top">
                <p>Debug: Skip consistency check</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        )}

        {/* Before first sanity check: single "Next" button that runs the check */}
        {!hasRunSanityCheck && !skipSanityCheck && (
          <Button
            onClick={onRunCheck}
            disabled={isSanityChecking || rowCount === 0}
          >
            Next
          </Button>
        )}

        {/* After first sanity check: show all three options */}
        {hasRunSanityCheck && !skipSanityCheck && (
          <>
            {/* View previous results */}
            <TooltipProvider>
              <Tooltip delayDuration={300}>
                <TooltipTrigger asChild>
                  <Button
                    variant="outline"
                    onClick={onViewResults}
                    disabled={isSanityChecking}
                  >
                    <Eye className="h-4 w-4 mr-1" />
                    Review Check Results
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="top">
                  <p>Review previous consistency check results</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

            {/* Run fresh check */}
            <TooltipProvider>
              <Tooltip delayDuration={300}>
                <TooltipTrigger asChild>
                  <Button
                    variant="outline"
                    onClick={onRunCheck}
                    disabled={isSanityChecking || rowCount === 0}
                  >
                    {isSanityChecking ? (
                      <Loader2 className="h-4 w-4 mr-1 animate-spin" />
                    ) : (
                      <RefreshCw className="h-4 w-4 mr-1" />
                    )}
                    {isSanityChecking ? 'Checking...' : 'Check Again'}
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="top">
                  <p>Run a fresh consistency check</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

            {/* Proceed directly */}
            <Button
              onClick={onProceedDirect}
              disabled={isSanityChecking}
              title={
                !canProceed
                  ? `There are ${errorCount} validation errors`
                  : 'Continue to image upload'
              }
            >
              Next
            </Button>
          </>
        )}

        {/* Skip mode: just show Continue */}
        {skipSanityCheck && (
          <Button
            onClick={onProceedDirect}
            disabled={rowCount === 0}
            title="Continue to image upload (sanity check skipped)"
          >
            Next
          </Button>
        )}
      </div>
    </div>
  );
};
