import React from 'react';
import { Database, DatabaseZap } from 'lucide-react';
import { useLocation } from 'react-router-dom';
import { useDummyDataToggle } from '@/lib/useDummyData';
import { useDashboardContext } from '@/contexts/DashboardContext';
import { __ } from '@/lib/i18n';
import { Button } from '@/components/ui/button';

/**
 * Dummy Data Toggle Button
 * Shows in development mode to toggle between real and dummy data
 * Uses Dashboard context when on dashboard pages
 */
export function DummyDataToggle() {
  const location = useLocation();
  const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard');

  // Always call hooks unconditionally
  const dashboardContext = useDashboardContext();
  const localToggle = useDummyDataToggle();

  // Use dashboard context for dashboard routes, otherwise use local state
  const useDummyData = isDashboardRoute ? dashboardContext.useDummyData : localToggle.useDummyData;
  const toggleDummyData = isDashboardRoute
    ? () => dashboardContext.setUseDummyData(!dashboardContext.useDummyData)
    : localToggle.toggleDummyData;

  // Only show in development (always show for now until we have real data)
  // const isDev = import.meta.env?.DEV;
  // if (!isDev) return null;

  return (
    <Button
      variant={useDummyData ? 'default' : 'outline'}
      size="sm"
      onClick={toggleDummyData}
      className="gap-2"
      title={useDummyData ? __('Using dummy data') : __('Using real data')}
    >
      {useDummyData ? (
        <>
          <DatabaseZap className="w-4 h-4" />
          <span className="hidden sm:inline">{__('Dummy Data')}</span>
        </>
      ) : (
        <>
          <Database className="w-4 h-4" />
          <span className="hidden sm:inline">{__('Real Data')}</span>
        </>
      )}
    </Button>
  );
}