import { useState } from 'react';
import { supabase } from '@/integrations/supabase/client';
import { notificationService } from '@/lib/notificationService';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { CheckCircle2, XCircle, AlertCircle, Loader2 } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';

interface MigrationResult {
  userId: string;
  email: string;
  success: boolean;
  error?: string;
}

export function NovuMigrationUtility() {
  const { toast } = useToast();
  const [isRunning, setIsRunning] = useState(false);
  const [progress, setProgress] = useState(0);
  const [results, setResults] = useState<MigrationResult[]>([]);
  const [totalUsers, setTotalUsers] = useState(0);

  const runMigration = async () => {
    setIsRunning(true);
    setResults([]);
    setProgress(0);

    try {
      // Fetch users without Novu subscriber IDs
      const { data: users, error: fetchError } = await supabase
        .from('profiles')
        .select('user_id, users:user_id(email)')
        .not('user_id', 'in', 
          supabase
            .from('user_notification_preferences')
            .select('user_id')
            .not('novu_subscriber_id', 'is', null)
        );

      if (fetchError) throw fetchError;

      if (!users || users.length === 0) {
        toast({
          title: "No users to migrate",
          description: "All users are already registered with Novu.",
        });
        setIsRunning(false);
        return;
      }

      setTotalUsers(users.length);
      const migrationResults: MigrationResult[] = [];

      // Process users one by one
      for (let i = 0; i < users.length; i++) {
        const user = users[i];
        const email = (user.users as any)?.email;

        if (!email) {
          migrationResults.push({
            userId: user.user_id,
            email: 'No email found',
            success: false,
            error: 'User email not found',
          });
          continue;
        }

        try {
          const result = await notificationService.createSubscriber({
            subscriberId: user.user_id,
            email,
            data: { userId: user.user_id },
          });

          migrationResults.push({
            userId: user.user_id,
            email,
            success: result.success,
            error: result.error,
          });

          // Small delay to avoid overwhelming the API
          await new Promise(resolve => setTimeout(resolve, 100));
        } catch (error: any) {
          migrationResults.push({
            userId: user.user_id,
            email,
            success: false,
            error: error.message,
          });
        }

        setProgress(((i + 1) / users.length) * 100);
        setResults([...migrationResults]);
      }

      const successCount = migrationResults.filter(r => r.success).length;
      const failureCount = migrationResults.filter(r => !r.success).length;

      toast({
        title: "Migration completed",
        description: `Successfully migrated ${successCount} users. ${failureCount} failures.`,
      });
    } catch (error: any) {
      toast({
        variant: "destructive",
        title: "Migration failed",
        description: error.message,
      });
    } finally {
      setIsRunning(false);
    }
  };

  const successCount = results.filter(r => r.success).length;
  const failureCount = results.filter(r => !r.success).length;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Novu User Migration</CardTitle>
        <CardDescription>
          Register existing users with Novu notification service
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <Alert>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>
            This utility will register all existing users who don't have a Novu subscriber ID.
            The process is non-blocking and will continue even if individual registrations fail.
          </AlertDescription>
        </Alert>

        <Button 
          onClick={runMigration} 
          disabled={isRunning}
          className="w-full"
        >
          {isRunning && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          {isRunning ? 'Migrating Users...' : 'Start Migration'}
        </Button>

        {isRunning && totalUsers > 0 && (
          <div className="space-y-2">
            <div className="flex justify-between text-sm text-muted-foreground">
              <span>Progress</span>
              <span>{Math.round(progress)}%</span>
            </div>
            <Progress value={progress} />
            <p className="text-sm text-muted-foreground">
              Processing {results.length} of {totalUsers} users
            </p>
          </div>
        )}

        {results.length > 0 && (
          <div className="space-y-2">
            <div className="flex gap-4 text-sm">
              <div className="flex items-center gap-2 text-green-600">
                <CheckCircle2 className="h-4 w-4" />
                <span>{successCount} succeeded</span>
              </div>
              <div className="flex items-center gap-2 text-red-600">
                <XCircle className="h-4 w-4" />
                <span>{failureCount} failed</span>
              </div>
            </div>

            <div className="max-h-60 overflow-y-auto border rounded-md p-2 space-y-1">
              {results.map((result, idx) => (
                <div
                  key={idx}
                  className="flex items-center justify-between text-xs p-2 rounded bg-muted/50"
                >
                  <span className="truncate flex-1">{result.email}</span>
                  {result.success ? (
                    <CheckCircle2 className="h-3 w-3 text-green-600 ml-2" />
                  ) : (
                    <div className="flex items-center gap-1 ml-2">
                      <XCircle className="h-3 w-3 text-red-600" />
                      <span className="text-red-600">{result.error}</span>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}