import { motion } from 'framer-motion';
import { FlaskConical } from 'lucide-react';
import { cn } from '@/lib/cn';
import { useMockStore } from '@/stores/mockStore';

export const IS_LOCALHOST = typeof window !== 'undefined' &&
  (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');

interface MockToggleProps {
  enabled?: boolean;
  onToggle?: () => void;
}

// Props are accepted for backwards compatibility but ignored, state lives
// in the persisted store so it survives navigation and reloads.
export function MockToggle(_: MockToggleProps = {}) {
  const enabled = useMockStore((s) => s.enabled);
  const toggle = useMockStore((s) => s.toggle);

  if (!IS_LOCALHOST) return null;

  return (
    <motion.button
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      onClick={toggle}
      className={cn(
        'fixed bottom-4 right-4 z-50 flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-bold border transition-all duration-200',
        enabled
          ? 'bg-[#ff6b2c]/15 border-[#ff6b2c]/30 text-[#ff8a50]'
          : 'bg-[#1a1a28]/80 border-[#1e1e30] text-[#5a5a72] hover:text-[#a0a0b8]'
      )}
      title="Toggle mock data (localhost only)"
    >
      <FlaskConical className="w-3.5 h-3.5" />
      {enabled ? 'Mock ON' : 'Mock OFF'}
    </motion.button>
  );
}
