import { Button } from '@/components/v1/ui/button';
import { Card } from '@/components/v1/ui/card';
import { CodeHighlighter } from '@/components/v1/ui/code-highlighter';
import { Label } from '@/components/v1/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/v1/ui/radio-group';
import { Separator } from '@/components/v1/ui/separator';
import { Step, Steps } from '@/components/v1/ui/steps';
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/v1/ui/tabs';
import { useCurrentTenantId } from '@/hooks/use-tenant';
import api from '@/lib/api';
import { cloudApi } from '@/lib/api/api';
import {
  ManagedWorkerEventStatus,
  TemplateOptions,
} from '@/lib/api/generated/cloud/data-contracts';
import { queries } from '@/lib/api/queries';
import { appRoutes } from '@/router';
import {
  PlayIcon,
  CheckCircleIcon,
  ArrowPathIcon,
  KeyIcon,
} from '@heroicons/react/24/outline';
import { ArrowLeftIcon } from '@radix-ui/react-icons';
import { GitHubLogoIcon } from '@radix-ui/react-icons';
import { useMutation, useQuery } from '@tanstack/react-query';
import { Link } from '@tanstack/react-router';
import { useState, useEffect, useCallback } from 'react';

export default function DemoTemplate() {
  const { tenantId } = useCurrentTenantId();
  const [deploying, setDeploying] = useState(false);
  const [deployed, setDeployed] = useState(false);
  const [deployedWorkerId, setDeployedWorkerId] = useState<string | null>(null);
  const [deploymentError, setDeploymentError] = useState<string | null>(null);
  const [deploymentStatus, setDeploymentStatus] = useState<string>('');
  const [isSimulation] = useState(false);
  const [workflowId, setWorkflowId] = useState<string | null>(null);
  const [, setTriggering] = useState(false);
  const [, setTriggerSuccess] = useState(false);
  const [runsTriggered, setRunsTriggered] = useState(0);
  const [allRunsTriggered, setAllRunsTriggered] = useState(false);

  // Step states
  const [overviewOpen, setOverviewOpen] = useState(true);
  const [infoConfirmed, setInfoConfirmed] = useState(false);
  const [deployStepOpen, setDeployStepOpen] = useState(false);
  const [successStepOpen, setSuccessStepOpen] = useState(false);

  // Template selection
  const [selectedTemplate, setSelectedTemplate] = useState<TemplateOptions>(
    TemplateOptions.QUICKSTART_TYPESCRIPT,
  );

  // Create demo template mutation
  const { mutate: createComputeDemoTemplate, isPending } = useMutation({
    mutationFn: (template: TemplateOptions) =>
      cloudApi.managedWorkerTemplateCreate(tenantId, {
        name: template,
      }),
    onSuccess: (response) => {
      // Extract worker ID from the response
      const workerId = response.data.metadata?.id;
      if (workerId) {
        setDeployedWorkerId(workerId);

        // In a real implementation, we would fetch the demo workflow ID here
        if (isSimulation) {
          setWorkflowId(`sim-wf-${Math.random().toString(36).substring(2, 7)}`);
        }
      }
    },
    onError: (error: any) => {
      console.error('Failed to create template:', error);
      setDeploymentError(
        error?.response?.data?.errors?.[0]?.description ||
          'Failed to create template',
      );
      setDeploying(false);
    },
  });

  // Query for monitoring worker events if we have a worker ID
  const workerEventsQuery = useQuery({
    ...queries.cloud.listManagedWorkerEvents(deployedWorkerId || ''),
    enabled: !!deployedWorkerId && !isSimulation,
    refetchInterval:
      deployedWorkerId && !deployed && !isSimulation ? 2000 : false,
  });

  // Simulated deployment steps for the demo
  const simulateDeployment = () => {
    setDeploying(true);
    setDeploymentError(null);
    setDeploymentStatus('Initializing deployment...');

    // Mock a random worker ID for the simulation
    const mockWorkerId = `sim-${Math.random().toString(36).substring(2, 9)}`;
    setDeployedWorkerId(mockWorkerId);
    setWorkflowId(`sim-wf-${Math.random().toString(36).substring(2, 7)}`);

    // Simulate a deployment sequence with delays
    setTimeout(() => {
      setDeploymentStatus('Creating worker resources...');

      setTimeout(() => {
        setDeploymentStatus('Building container image...');

        setTimeout(() => {
          setDeploymentStatus('Deploying managed worker...');

          setTimeout(() => {
            setDeploymentStatus('Deployment complete');
            setDeploying(false);
            setDeployed(true);
            setDeployStepOpen(false);
            setSuccessStepOpen(true);
          }, 2000);
        }, 1500);
      }, 1500);
    }, 1000);
  };

  // Trigger a workflow run
  const triggerWorkflow = useCallback(async () => {
    if (!workflowId) {
      return;
    }

    setTriggering(true);

    if (isSimulation) {
      // Simulate workflow trigger
      setTimeout(() => {
        setTriggering(false);
        setTriggerSuccess(true);
        setRunsTriggered((prev) => prev + 1);
        if (runsTriggered + 1 >= 3) {
          setAllRunsTriggered(true);
        }
      }, 1000);
      return;
    }

    try {
      // In a real implementation, we would call the API to trigger the workflow
      // This is simplified mock code for demonstration
      setTimeout(() => {
        setTriggering(false);
        setTriggerSuccess(true);
        setRunsTriggered((prev) => prev + 1);
        if (runsTriggered + 1 >= 3) {
          setAllRunsTriggered(true);
        }
      }, 1000);
    } catch (error) {
      console.error('Failed to trigger run:', error);
      setTriggering(false);
    }
  }, [workflowId, isSimulation, runsTriggered]);

  // Automatically trigger task runs when success step is opened
  useEffect(() => {
    if (successStepOpen && workflowId && !allRunsTriggered) {
      const triggerRuns = async () => {
        for (let i = 0; i < 3; i++) {
          if (i > 0) {
            // Add a small delay between triggers
            await new Promise((resolve) => setTimeout(resolve, 1500));
          }
          await triggerWorkflow();
        }
      };

      triggerRuns();
    }
  }, [allRunsTriggered, successStepOpen, triggerWorkflow, workflowId]);

  // Monitor events to determine deployment status
  useEffect(() => {
    if (deployedWorkerId && workerEventsQuery.data?.rows && !isSimulation) {
      const events = workerEventsQuery.data.rows;

      // Check for latest event
      if (events.length > 0) {
        // Sort by time, most recent first
        const sortedEvents = [...events].sort(
          (a, b) =>
            new Date(b.timeLastSeen).getTime() -
            new Date(a.timeLastSeen).getTime(),
        );

        const latestEvent = sortedEvents[0];
        setDeploymentStatus(latestEvent.message);

        // Check if deployment is complete - make success detection more robust
        if (latestEvent.status === ManagedWorkerEventStatus.SUCCEEDED) {
          setDeploying(false);
          setDeployed(true);
          setDeployStepOpen(false);
          setSuccessStepOpen(true);

          // In a real implementation, we would fetch the demo workflow ID here
          // For now, use a mock ID for non-simulation case
          if (!workflowId) {
            setWorkflowId(
              `demo-wf-${Math.random().toString(36).substring(2, 7)}`,
            );
          }
        } else if (latestEvent.status === ManagedWorkerEventStatus.FAILED) {
          setDeploymentError(latestEvent.message);
          setDeploying(false);
        }
      }
    }
  }, [deployedWorkerId, workerEventsQuery.data, isSimulation, workflowId]);

  const handleDeploy = async () => {
    if (isSimulation) {
      simulateDeployment();
      return;
    }

    setDeploying(true);
    setDeploymentError(null);
    setDeploymentStatus('Initializing deployment...');

    // Call the actual API to deploy the template
    createComputeDemoTemplate(selectedTemplate);
  };

  const handleConfirmInfo = () => {
    setInfoConfirmed(true);
    setOverviewOpen(false);
    setDeployStepOpen(true);
  };

  const handleLanguageSelection = (value: TemplateOptions) => {
    setSelectedTemplate(value);
  };

  // API token generation
  const [isGeneratingToken, setIsGeneratingToken] = useState(false);
  const [apiToken, setApiToken] = useState<string | null>(null);
  const [tokenRevealed, setTokenRevealed] = useState(true);
  const [selectedCodeTab, setSelectedCodeTab] = useState('typescript');

  // Handle API token generation
  const handleGenerateToken = () => {
    setIsGeneratingToken(true);

    if (isSimulation) {
      // Only simulate token generation in simulation mode
      setTimeout(() => {
        const tokenPrefix = 'hx_sim_';
        const randomPart =
          Math.random().toString(36).substring(2, 15) +
          Math.random().toString(36).substring(2, 15);

        setApiToken(`${tokenPrefix}${randomPart}`);
        setIsGeneratingToken(false);
      }, 1500);
    } else {
      // Call the real API to generate a token
      api
        .apiTokenCreate(tenantId, { name: 'demo-template-token' })
        .then((response: any) => {
          if (response.data && response.data.token) {
            setApiToken(response.data.token);
          } else {
            console.error('Failed to get token from response');
          }
        })
        .catch((error: any) => {
          console.error('Failed to generate token:', error);
        })
        .finally(() => {
          setIsGeneratingToken(false);
        });
    }
  };

  // Code examples for triggering a workflow via API
  const triggerCodeExamples = {
    typescript: `import HatchetClient from '@hatchet-dev/typescript-sdk';

async function main() {
  const hatchet = HatchetClient.init();
  const result = await hatchet.run('first-workflow', {});
  console.log(result);
}

if (require.main === module) {
  main().catch(console.error).finally(() => process.exit(0));
}
`,
    python: `from hatchet_sdk import Hatchet

hatchet = Hatchet()
result = hatchet.run_workflow(name="first-workflow")
print(result)
`,
    go: `package main

import (
	"fmt"

	v1_workflows "github.com/hatchet-dev/hatchet/examples/go/tasks"
	v1 "github.com/hatchet-dev/hatchet/pkg/v1"
	"github.com/hatchet-dev/hatchet/pkg/v1/workflow"
	"github.com/joho/godotenv"
)

func main() {
	err := godotenv.Load()
	if err != nil {
		panic(err)
	}

	hatchet, err := v1.NewHatchetClient()

	if err != nil {
		panic(err)
	}

	simple := v1.WorkflowFactory[any, any](
		workflow.CreateOpts[any]{
			Name: "first-workflow",
		},
		&hatchet,
	)

	result, err := simple.Run(v1_workflows.SimpleInput{
		Message: "Hello, World!",
	})

	if err != nil {
		panic(err)
	}

	fmt.Println(result)
}
`,
  };

  return (
    <div className="h-full w-full flex-grow">
      <div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
        <div className="mb-4 flex flex-row items-center">
          <Link
            to={appRoutes.tenantManagedWorkersRoute.to}
            params={{ tenant: tenantId }}
            className="mr-4"
          >
            <Button variant="ghost" size="icon">
              <ArrowLeftIcon className="size-4" />
            </Button>
          </Link>
          <h2 className="text-2xl font-bold leading-tight text-foreground">
            Deploy Demo Template
          </h2>
        </div>
        <Separator className="my-4" />
        <div className="mx-auto max-w-3xl">
          <Steps className="mt-6">
            <Step
              title="Select your template language"
              open={overviewOpen}
              setOpen={setOverviewOpen}
            >
              <div className="grid gap-6">
                <div className="mb-2 rounded-lg bg-muted/30 p-4">
                  <h4 className="mb-2 font-medium">Demo Includes:</h4>
                  <ul className="space-y-2">
                    <li className="flex items-start">
                      <span className="mr-2 flex items-center text-primary">
                        •
                      </span>
                      <span>Sample workflow with 3 steps</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2 flex items-center text-primary">
                        •
                      </span>
                      <span>1 managed service (limited resources)</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2 flex items-center text-primary">
                        •
                      </span>
                      <span>Active for 1 hour</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2 flex items-center text-primary">
                        •
                      </span>
                      <span>No payment method required</span>
                    </li>
                  </ul>
                </div>

                <div className="mb-4">
                  <h3 className="mb-4 text-lg font-medium">
                    Choose your programming language:
                  </h3>
                  <RadioGroup
                    value={selectedTemplate}
                    onValueChange={handleLanguageSelection}
                    className="flex flex-col space-y-3"
                  >
                    {/* TypeScript Option */}
                    <div
                      className="cursor-pointer"
                      onClick={() =>
                        handleLanguageSelection(
                          TemplateOptions.QUICKSTART_TYPESCRIPT,
                        )
                      }
                    >
                      <Card
                        className={`border-2 p-4 ${selectedTemplate === TemplateOptions.QUICKSTART_TYPESCRIPT ? 'border-primary' : 'border-border'}`}
                      >
                        <div className="flex items-center space-x-3">
                          <RadioGroupItem
                            value={TemplateOptions.QUICKSTART_TYPESCRIPT}
                            id="typescript"
                            className="mr-2"
                          />
                          <div className="grid gap-1">
                            <Label
                              htmlFor="typescript"
                              className="cursor-pointer text-lg font-medium"
                            >
                              TypeScript
                            </Label>
                            <p className="text-sm text-muted-foreground">
                              Modern JavaScript with type safety.
                            </p>
                          </div>
                        </div>

                        {selectedTemplate ===
                          TemplateOptions.QUICKSTART_TYPESCRIPT && (
                          <div className="mt-4 border-t pt-4">
                            <div className="flex items-center justify-between">
                              <a
                                href="https://github.com/hatchet-dev/managed-compute-examples/tree/main/typescript"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center text-sm font-medium text-primary hover:underline"
                              >
                                <GitHubLogoIcon className="mr-2 size-4" />
                                View TypeScript source on GitHub
                                <span className="ml-1">↗</span>
                              </a>
                              <Button
                                onClick={handleConfirmInfo}
                                size="sm"
                                className="px-4"
                              >
                                Continue with TypeScript
                              </Button>
                            </div>
                          </div>
                        )}
                      </Card>
                    </div>

                    {/* Python Option */}
                    <div
                      className="cursor-pointer"
                      onClick={() =>
                        handleLanguageSelection(
                          TemplateOptions.QUICKSTART_PYTHON,
                        )
                      }
                    >
                      <Card
                        className={`border-2 p-4 ${selectedTemplate === TemplateOptions.QUICKSTART_PYTHON ? 'border-primary' : 'border-border'}`}
                      >
                        <div className="flex items-center space-x-3">
                          <RadioGroupItem
                            value={TemplateOptions.QUICKSTART_PYTHON}
                            id="python"
                            className="mr-2"
                          />
                          <div className="grid gap-1">
                            <Label
                              htmlFor="python"
                              className="cursor-pointer text-lg font-medium"
                            >
                              Python
                            </Label>
                            <p className="text-sm text-muted-foreground">
                              Simple, readable syntax for rapid development.
                            </p>
                          </div>
                        </div>

                        {selectedTemplate ===
                          TemplateOptions.QUICKSTART_PYTHON && (
                          <div className="mt-4 border-t pt-4">
                            <div className="flex items-center justify-between">
                              <a
                                href="https://github.com/hatchet-dev/managed-compute-examples/tree/main/python"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center text-sm font-medium text-primary hover:underline"
                              >
                                <GitHubLogoIcon className="mr-2 size-4" />
                                View Python source on GitHub
                                <span className="ml-1">↗</span>
                              </a>
                              <Button
                                onClick={handleConfirmInfo}
                                size="sm"
                                className="px-4"
                              >
                                Continue with Python
                              </Button>
                            </div>
                          </div>
                        )}
                      </Card>
                    </div>

                    {/* Go Option */}
                    <div
                      className="cursor-pointer"
                      onClick={() =>
                        handleLanguageSelection(TemplateOptions.QUICKSTART_GO)
                      }
                    >
                      <Card
                        className={`border-2 p-4 ${selectedTemplate === TemplateOptions.QUICKSTART_GO ? 'border-primary' : 'border-border'}`}
                      >
                        <div className="flex items-center space-x-3">
                          <RadioGroupItem
                            value={TemplateOptions.QUICKSTART_GO}
                            id="go"
                            className="mr-2"
                          />
                          <div className="grid gap-1">
                            <Label
                              htmlFor="go"
                              className="cursor-pointer text-lg font-medium"
                            >
                              Go
                            </Label>
                            <p className="text-sm text-muted-foreground">
                              Efficient, concurrent programming language.
                            </p>
                          </div>
                        </div>

                        {selectedTemplate === TemplateOptions.QUICKSTART_GO && (
                          <div className="mt-4 border-t pt-4">
                            <div className="flex items-center justify-between">
                              <a
                                href="https://github.com/hatchet-dev/managed-compute-examples/tree/main/go"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center text-sm font-medium text-primary hover:underline"
                              >
                                <GitHubLogoIcon className="mr-2 size-4" />
                                View Go source on GitHub
                                <span className="ml-1">↗</span>
                              </a>
                              <Button
                                onClick={handleConfirmInfo}
                                size="sm"
                                className="px-4"
                              >
                                Continue with Go
                              </Button>
                            </div>
                          </div>
                        )}
                      </Card>
                    </div>
                  </RadioGroup>
                </div>

                <Button onClick={handleConfirmInfo} className="mt-2 w-fit">
                  Continue
                </Button>
              </div>
            </Step>

            <Step
              title="Deploy the demo template"
              open={deployStepOpen}
              setOpen={setDeployStepOpen}
              disabled={!infoConfirmed}
            >
              <div className="grid gap-4">
                <div className="rounded-lg border bg-card p-6 shadow-sm">
                  <div className="flex items-start space-x-4">
                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                      <PlayIcon className="h-5 w-5 text-primary" />
                    </div>
                    <div className="flex-1">
                      <h3 className="mb-2 text-xl font-medium">
                        Ready to Deploy
                      </h3>
                      <p className="mb-4 text-muted-foreground">
                        Click the button below to deploy your{' '}
                        {selectedTemplate
                          .replace('QUICKSTART_', '')
                          .toLowerCase()}{' '}
                        demo template. This will create a managed service and
                        workflow that you can use to explore the features.
                      </p>

                      <div className="mb-6 rounded-lg bg-muted/30 p-4">
                        <h4 className="mb-2 font-medium">What happens next:</h4>
                        <ul className="space-y-2">
                          <li className="flex items-start">
                            <span className="mr-2 flex items-center text-primary">
                              •
                            </span>
                            <span>
                              A service will be provisioned with the necessary
                              resources
                            </span>
                          </li>
                          <li className="flex items-start">
                            <span className="mr-2 flex items-center text-primary">
                              •
                            </span>
                            <span>
                              A sample workflow will be created and registered
                            </span>
                          </li>
                          <li className="flex items-start">
                            <span className="mr-2 flex items-center text-primary">
                              •
                            </span>
                            <span>
                              You'll be able to monitor the activity in your
                              dashboard
                            </span>
                          </li>
                        </ul>
                      </div>

                      {deploying && (
                        <div className="mb-4 rounded-lg border bg-muted/20 p-4">
                          <div className="mb-2 flex items-center">
                            <ArrowPathIcon className="mr-2 size-4 animate-spin" />
                            <h4 className="font-medium">
                              Deployment in progress...
                            </h4>
                          </div>
                          <p className="flex items-center justify-between text-sm text-muted-foreground">
                            <span>{deploymentStatus}</span>
                            {deployedWorkerId && (
                              <Link
                                to={appRoutes.tenantManagedWorkerRoute.to}
                                params={{
                                  tenant: tenantId,
                                  managedWorker: deployedWorkerId,
                                }}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="ml-2 text-primary hover:underline"
                              >
                                View Logs
                              </Link>
                            )}
                          </p>
                        </div>
                      )}

                      {deploymentError && (
                        <div className="mb-4 rounded-lg border border-destructive bg-destructive/10 p-4">
                          <h4 className="mb-1 font-medium text-destructive">
                            Deployment failed
                          </h4>
                          <p className="text-sm text-muted-foreground">
                            {deploymentError}
                          </p>
                        </div>
                      )}

                      <div className="border-t pt-4">
                        <div className="flex items-center justify-between">
                          <div className="text-sm text-muted-foreground">
                            {deploying
                              ? 'Deploying demo template...'
                              : isSimulation
                                ? 'Ready to simulate deployment'
                                : 'Ready to deploy'}
                          </div>
                          <Button
                            onClick={handleDeploy}
                            disabled={deploying || (!isSimulation && isPending)}
                            className="min-w-32"
                          >
                            {deploying || (!isSimulation && isPending)
                              ? 'Deploying...'
                              : isSimulation
                                ? 'Simulate Deploy'
                                : 'Deploy Demo'}
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Step>

            <Step
              title="Deployment successful"
              open={successStepOpen}
              setOpen={setSuccessStepOpen}
              disabled={!deployed}
            >
              <div className="grid gap-6">
                {/* Success header */}
                <div className="rounded-lg border bg-card p-6 shadow-sm">
                  <div className="flex flex-col items-center justify-center py-4 text-center">
                    <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10">
                      <CheckCircleIcon className="h-8 w-8 text-green-500" />
                    </div>
                    <h3 className="mb-2 text-xl font-medium">
                      Demo Template Deployed!
                    </h3>
                    <p className="mb-4 max-w-md text-muted-foreground">
                      Your{' '}
                      {selectedTemplate
                        .replace('QUICKSTART_', '')
                        .toLowerCase()}{' '}
                      demo template has been successfully deployed. You can now
                      explore the managed service features.
                      {isSimulation && (
                        <span className="mt-2 block font-medium text-amber-500">
                          Note: This was a simulated deployment. No actual
                          resources were created.
                        </span>
                      )}
                    </p>
                  </div>
                </div>

                {/* Trigger Run Programmatically section */}
                <div className="rounded-lg border bg-card p-6 shadow-sm">
                  <div className="mb-4 flex items-start">
                    <div className="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
                      <KeyIcon className="size-4 text-primary" />
                    </div>
                    <div className="flex-1">
                      <h4 className="mb-1 font-medium">
                        Trigger a Remote Run Programmatically
                      </h4>
                      <p className="mb-4 text-sm text-muted-foreground">
                        Run the following code locally to execute a task on the
                        deployed service.
                      </p>

                      {!apiToken ? (
                        <Button
                          onClick={handleGenerateToken}
                          disabled={isGeneratingToken}
                          fullWidth
                        >
                          {isGeneratingToken ? (
                            <>
                              <ArrowPathIcon className="mr-2 size-4 animate-spin" />
                              Generating Token...
                            </>
                          ) : (
                            'Generate API Token'
                          )}
                        </Button>
                      ) : (
                        <>
                          <div className="mb-4 rounded bg-green-500/10 p-3 text-sm text-green-600">
                            API token successfully generated!
                          </div>

                          <p className="mb-2 text-sm text-muted-foreground">
                            This is the only time we will show you this auth
                            token. Make sure to copy it now.
                          </p>

                          <CodeHighlighter
                            language="plaintext"
                            code={`export HATCHET_CLIENT_TOKEN="${apiToken}"`}
                            copy
                            className="mb-3"
                          />

                          <div className="mb-4 flex space-x-2">
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              onClick={() => setTokenRevealed(!tokenRevealed)}
                            >
                              {tokenRevealed ? 'Hide Token' : 'Reveal Token'}
                            </Button>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={handleGenerateToken}
                              disabled={isGeneratingToken}
                            >
                              Generate New Token
                            </Button>
                          </div>
                        </>
                      )}
                      <div className="mt-2 border-t pt-4">
                        <h5 className="mb-2 font-medium">Example Code</h5>
                        <Tabs
                          value={selectedCodeTab}
                          onValueChange={setSelectedCodeTab}
                          className="w-full"
                        >
                          <TabsList className="mb-2">
                            <TabsTrigger value="typescript">
                              TypeScript
                            </TabsTrigger>
                            <TabsTrigger value="python">Python</TabsTrigger>
                            <TabsTrigger value="go">Go</TabsTrigger>
                          </TabsList>
                          <TabsContent value="typescript" className="mt-0">
                            <CodeHighlighter
                              code={triggerCodeExamples.typescript}
                              language="typescript"
                              copy
                            />
                          </TabsContent>
                          <TabsContent value="python" className="mt-0">
                            <CodeHighlighter
                              code={triggerCodeExamples.python}
                              language="python"
                              copy
                            />
                          </TabsContent>
                          <TabsContent value="go" className="mt-0">
                            <CodeHighlighter
                              code={triggerCodeExamples.go}
                              language="go"
                              copy
                            />
                          </TabsContent>
                        </Tabs>
                      </div>
                    </div>
                  </div>
                </div>

                {/* What's next section */}
                <div className="rounded-lg border bg-card p-6 shadow-sm">
                  <h4 className="mb-3 font-medium">What's next?</h4>
                  <ul className="mb-4 space-y-3">
                    <li className="flex items-start">
                      <span className="mr-2 mt-0.5 flex items-center text-primary">
                        •
                      </span>
                      <span>
                        View your deployed service to see logs and metrics
                      </span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2 mt-0.5 flex items-center text-primary">
                        •
                      </span>
                      <span>
                        Three demo task runs have been triggered for you
                      </span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2 mt-0.5 flex items-center text-primary">
                        •
                      </span>
                      <span>Use the API to trigger additional task runs</span>
                    </li>
                    <li className="flex items-start">
                      <span className="mr-2 mt-0.5 flex items-center text-primary">
                        •
                      </span>
                      <span>Monitor task runs in the dashboard</span>
                    </li>
                  </ul>

                  {/* Main action button */}
                  {deployedWorkerId && (
                    <Link
                      to={appRoutes.tenantManagedWorkerRoute.to}
                      params={{
                        tenant: tenantId,
                        managedWorker: deployedWorkerId,
                      }}
                    >
                      <Button variant="default" fullWidth>
                        View Your Service
                      </Button>
                    </Link>
                  )}

                  {/* Secondary action buttons */}
                  <div className="grid grid-cols-2 gap-3">
                    <Link
                      to={appRoutes.tenantRunsRoute.to}
                      params={{ tenant: tenantId }}
                    >
                      <Button variant="outline" fullWidth>
                        View Runs
                      </Button>
                    </Link>
                    <Link
                      to={appRoutes.tenantWorkflowsRoute.to}
                      params={{ tenant: tenantId }}
                    >
                      <Button variant="outline" fullWidth>
                        View RegisteredTasks
                      </Button>
                    </Link>
                  </div>
                </div>
              </div>
            </Step>
          </Steps>
        </div>
      </div>
    </div>
  );
}
