import { useState } from 'react';
import { supabase } from '@/integrations/supabase/client';
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 {
      // Call the server-side migration function
      const { data: { session } } = await supabase.auth.getSession();
      
      if (!session) {
        throw new Error('You must be logged in to run the migration');
      }

      const response = await fetch(
        'https://ydvtmnrszybqnbcqbdcy.supabase.co/functions/v1/migrate-novu-users',
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${session.access_token}`,
          },
        }
      );

      const data = await response.json();

      if (!response.ok || !data.success) {
        throw new Error(data.error || 'Migration failed');
      }

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

      setTotalUsers(data.total);
      setResults(data.results);
      setProgress(100);

      const successCount = data.results.filter((r: MigrationResult) => r.success).length;
      const failureCount = data.results.filter((r: MigrationResult) => !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>
  );
}