"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import {
  ArrowLeft,
  ArrowRight,
  Check,
  ChevronDown,
  Copy,
  Loader2,
  Plus,
  Sparkles,
  Trash2,
  Wand2,
} from "lucide-react";
import { useEffect, useState } from "react";
import { type UseFormReturn, useFieldArray, useForm } from "react-hook-form";
import { toast } from "sonner";
import type { z } from "zod";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from "@/components/ui/form";
import { Label } from "@/components/ui/label";
import { Progress } from "@/components/ui/progress";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";

import { evaluatePrompt, improveExamples } from "../app/actions";
import {
  type AnalysisResult,
  defaultExamples,
  type ImprovedExamplesResult,
  promptFormSchema,
} from "../lib/schema";
import { AutosizeTextarea } from "./auto-resize-text-area";
import { CodePreview } from "./code-preview";

import {
  Stepper,
  StepperContent,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperNav,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from "./stepper";

type FormData = z.infer<typeof promptFormSchema>;

const STEPS = [
  {
    id: 1,
    label: "Configure",
    description: "Set up system prompt and examples",
  },
  { id: 2, label: "Test", description: "Run prompt with test input" },
  { id: 3, label: "Evaluate", description: "Evaluate output quality" },
  { id: 4, label: "Improve", description: "Generate better examples" },
  { id: 5, label: "Review & Copy", description: "Review and copy final code" },
] as const;

type StepId = (typeof STEPS)[number]["id"];

export function PromptEditor() {
  const [currentStep, setCurrentStep] = useState<StepId>(1);
  const [completedSteps, setCompletedSteps] = useState<Set<StepId>>(new Set());
  const [promptResult, setPromptResult] = useState<string | null>(null);
  const [isPromptLoading, setIsPromptLoading] = useState(false);
  const [isEvaluating, setIsEvaluating] = useState(false);
  const [isImprovingExamples, setIsImprovingExamples] = useState(false);
  const [streamedResult, setStreamedResult] =
    useState<Partial<AnalysisResult> | null>(null);
  const [improvedExamples, setImprovedExamples] = useState<{
    examples: Array<{ input: string; output: string; explanation: string }>;
    reasoningText: string;
  } | null>(null);

  const [activeExample, setActiveExample] = useState<
    keyof typeof defaultExamples | null
  >(null);

  const form = useForm<FormData>({
    resolver: zodResolver(promptFormSchema),
    defaultValues: {
      systemPrompt: "",
      examples: [{ input: "", output: "" }],
      testInput: "",
    },
  });

  const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: "examples",
  });

  // Step validation logic
  function isStepValid(step: StepId): boolean {
    const formValues = form.getValues();
    switch (step) {
      case 1:
        return (
          formValues.systemPrompt.trim().length > 0 &&
          formValues.examples.length > 0 &&
          formValues.examples.every(
            (ex) => ex.input.trim().length > 0 && ex.output.trim().length > 0
          )
        );
      case 2:
        return formValues.testInput.trim().length > 0 && promptResult !== null;
      case 3:
        return streamedResult?.analysis !== undefined;
      case 4:
        return true; // Optional step, always valid
      case 5:
        return true; // Always valid if reached
      default:
        return false;
    }
  }

  function markStepComplete(step: StepId) {
    setCompletedSteps((prev) => new Set([...prev, step]));
  }

  function goToStep(step: StepId) {
    if (step >= 1 && step <= 5) {
      setCurrentStep(step);
    }
  }

  function goToNextStep() {
    if (currentStep < 5) {
      if (isStepValid(currentStep)) {
        markStepComplete(currentStep);
      }
      // Allow skipping step 4 (Improve) if it's optional
      if (currentStep === 4) {
        setCurrentStep(5);
      } else {
        setCurrentStep((prev) => (prev + 1) as StepId);
      }
    }
  }

  function goToPreviousStep() {
    if (currentStep > 1) {
      setCurrentStep((prev) => (prev - 1) as StepId);
    }
  }

  async function runPrompt(data: FormData) {
    try {
      setIsPromptLoading(true);
      setPromptResult(null);
      setStreamedResult(null);
      setImprovedExamples(null);

      const result = await evaluatePrompt(data);

      if (typeof result.output === "string") {
        setPromptResult(result.output);
      } else {
        setPromptResult(JSON.stringify(result.output, null, 2));
      }
      markStepComplete(2);
      // Auto-advance to Evaluate step
      setCurrentStep(3);
    } catch (_error) {
    } finally {
      setIsPromptLoading(false);
    }
  }

  async function evaluateOutput() {
    if (!promptResult) {
      console.log("[Evaluate] No prompt result available");
      return;
    }

    try {
      setIsEvaluating(true);
      console.log("[Evaluate] Starting evaluation", {
        hasPromptResult: !!promptResult,
        formValues: form.getValues(),
      });

      const result = await evaluatePrompt({
        ...form.getValues(),
        evaluation: true,
        output: promptResult,
      });

      console.log("[Evaluate] Got result from evaluatePrompt", {
        hasOutput: !!result.output,
        outputType: typeof result.output,
        output: result.output,
      });

      // Handle direct return from generateText
      if (
        result.output &&
        typeof result.output === "object" &&
        "analysis" in result.output
      ) {
        const analysis = result.output.analysis;
        console.log("[Evaluate] Processing analysis result", analysis);
        setStreamedResult({
          analysis: {
            consistency: analysis.consistency ?? 0,
            relevance: analysis.relevance ?? 0,
            quality: analysis.quality ?? 0,
            feedback: analysis.feedback ?? "",
          },
        });
        markStepComplete(3);
      } else {
        console.log(
          "[Evaluate] Result does not match expected format",
          result.output
        );
      }
    } catch (error) {
      console.error("[Evaluate] Error during evaluation:", error);
      toast.error("Failed to evaluate output");
    } finally {
      setIsEvaluating(false);
    }
  }

  async function handleImproveExamples() {
    if (!promptResult) {
      console.log("[ImproveExamples] No prompt result available");
      return;
    }

    try {
      setIsImprovingExamples(true);
      setImprovedExamples(null);
      console.log("[ImproveExamples] Starting improvement", {
        hasPromptResult: !!promptResult,
      });

      const result = await improveExamples({
        ...form.getValues(),
        evaluation: true,
        output: promptResult,
      });

      console.log("[ImproveExamples] Got result from improveExamples", {
        hasOutput: !!result.output,
        output: result.output,
      });

      // Handle direct return from generateObject
      if (
        result.output &&
        typeof result.output === "object" &&
        "examples" in result.output &&
        "reasoningText" in result.output
      ) {
        console.log(
          "[ImproveExamples] Processing examples result",
          result.output
        );
        setImprovedExamples(result.output as ImprovedExamplesResult);
      } else {
        console.log(
          "[ImproveExamples] Result does not match expected format",
          result.output
        );
      }
    } catch (error) {
      console.error("[ImproveExamples] Error during improvement:", error);
      toast.error("Failed to improve examples");
    } finally {
      setIsImprovingExamples(false);
    }
  }

  async function applyImprovedExamplesAndReevaluate() {
    if (!improvedExamples?.examples) {
      toast.error("No improved examples to apply");
      return;
    }

    try {
      // Apply improved examples to form
      form.setValue(
        "examples",
        improvedExamples.examples.map(({ input, output }) => ({
          input,
          output,
        }))
      );
      toast.success("Improved examples applied");

      // Clear previous results
      setPromptResult(null);
      setStreamedResult(null);

      // Run prompt with new examples
      setIsPromptLoading(true);
      const formData = form.getValues();
      const result = await evaluatePrompt(formData);

      let newPromptResult: string;
      if (typeof result.output === "string") {
        newPromptResult = result.output;
      } else {
        newPromptResult = JSON.stringify(result.output, null, 2);
      }
      setPromptResult(newPromptResult);
      markStepComplete(2);
      setIsPromptLoading(false);

      // Automatically evaluate the new output
      setIsEvaluating(true);
      const evalResult = await evaluatePrompt({
        ...formData,
        evaluation: true,
        output: newPromptResult,
      });

      if (
        evalResult.output &&
        typeof evalResult.output === "object" &&
        "analysis" in evalResult.output
      ) {
        const analysis = evalResult.output.analysis;
        setStreamedResult({
          analysis: {
            consistency: analysis.consistency ?? 0,
            relevance: analysis.relevance ?? 0,
            quality: analysis.quality ?? 0,
            feedback: analysis.feedback ?? "",
          },
        });
        markStepComplete(3);
      }

      setIsEvaluating(false);

      // Navigate to step 3 to show evaluation results
      setCurrentStep(3);
      toast.success("Examples applied and re-evaluated");
    } catch (error) {
      console.error("[ApplyAndReevaluate] Error:", error);
      toast.error("Failed to apply examples and re-evaluate");
      setIsPromptLoading(false);
      setIsEvaluating(false);
    }
  }

  function renderStep() {
    switch (currentStep) {
      case 1:
        return (
          <ConfigureStep
            activeExample={activeExample}
            append={append}
            fields={fields}
            form={form}
            remove={remove}
            setActiveExample={setActiveExample}
          />
        );
      case 2:
        return (
          <TestStep
            form={form}
            isPromptLoading={isPromptLoading}
            promptResult={promptResult}
            runPrompt={runPrompt}
          />
        );
      case 3:
        return (
          <EvaluateStep
            evaluateOutput={evaluateOutput}
            isEvaluating={isEvaluating}
            promptResult={promptResult}
            streamedResult={streamedResult}
          />
        );
      case 4:
        return (
          <ImproveStep
            applyImprovedExamplesAndReevaluate={
              applyImprovedExamplesAndReevaluate
            }
            form={form}
            goToStep={goToStep}
            handleImproveExamples={handleImproveExamples}
            improvedExamples={improvedExamples}
            isImprovingExamples={isImprovingExamples}
            isPromptLoading={isPromptLoading}
          />
        );
      case 5:
        return <ReviewStep form={form} />;
      default:
        return null;
    }
  }

  return (
    <div className="mx-auto h-full w-full p-4">
      <div className="space-y-6">
        {/* <Header /> */}
        <Stepper
          indicators={{
            completed: <Check className="h-4 w-4" />,
            loading: <Loader2 className="h-4 w-4 animate-spin" />,
          }}
          onValueChange={(value) => goToStep(value as StepId)}
          value={currentStep}
        >
          <StepperNav>
            {STEPS.map((step, index) => {
              const isLoading =
                (step.id === 2 && isPromptLoading) ||
                (step.id === 3 && isEvaluating) ||
                (step.id === 4 && isImprovingExamples);
              return (
                <StepperItem
                  completed={completedSteps.has(step.id)}
                  key={step.id}
                  loading={isLoading}
                  step={step.id}
                >
                  <StepperTrigger
                    disabled={
                      !completedSteps.has(step.id) &&
                      index > 0 &&
                      !completedSteps.has((step.id - 1) as StepId)
                    }
                  >
                    <StepperIndicator>{step.id}</StepperIndicator>
                    <div className="flex flex-col items-start">
                      <StepperTitle className="hidden text-[10px] md:block">
                        {step.label}
                      </StepperTitle>
                      <StepperDescription className="hidden text-[8px] md:block">
                        {step.description}
                      </StepperDescription>
                    </div>
                  </StepperTrigger>
                  {index < STEPS.length - 1 && <StepperSeparator />}
                </StepperItem>
              );
            })}
          </StepperNav>

          <div className="rounded-lg pt-2">
            <StepperContent key={currentStep} value={currentStep}>
              {renderStep()}
            </StepperContent>
          </div>
        </Stepper>

        {/* Navigation */}
        <div className="flex items-center justify-between border-t pt-4">
          <Button
            disabled={currentStep === 1}
            onClick={goToPreviousStep}
            variant="outline"
          >
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back
          </Button>

          <div className="text-muted-foreground text-xs">
            Step {currentStep} of {STEPS.length}
          </div>

          {currentStep < 5 ? (
            <Button
              disabled={currentStep !== 4 && !isStepValid(currentStep)}
              onClick={goToNextStep}
            >
              {currentStep === 4 ? "Skip" : "Next"}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          ) : (
            <div />
          )}
        </div>
      </div>
    </div>
  );
}

function ConfigureStep({
  form,
  activeExample,
  setActiveExample,
  fields,
  append,
  remove,
}: {
  form: UseFormReturn<FormData>;
  activeExample: keyof typeof defaultExamples | null;
  setActiveExample: (example: keyof typeof defaultExamples | null) => void;
  fields: ReturnType<typeof useFieldArray<FormData, "examples">>["fields"];
  append: ReturnType<typeof useFieldArray<FormData, "examples">>["append"];
  remove: ReturnType<typeof useFieldArray<FormData, "examples">>["remove"];
}) {
  return (
    <Form {...form}>
      <div className="space-y-4 bg-muted/50">
        <ScrollArea className="w-full bg-background px-4 py-2">
          <Label className="font-medium text-[10px]">Quick Start</Label>
          <div className="flex gap-2 py-2 pl-[1px]">
            {Object.entries(defaultExamples).map(([key, example]) => (
              <Badge
                className="cursor-pointer"
                key={key}
                onClick={() => {
                  form.reset({
                    systemPrompt: example.systemPrompt,
                    examples: example.examples,
                    testInput: example.testInput || "",
                  });
                  setActiveExample(key as keyof typeof defaultExamples);
                }}
                variant={activeExample === key ? "default" : "outline"}
              >
                {key.charAt(0).toUpperCase() + key.slice(1)}
              </Badge>
            ))}
          </div>
        </ScrollArea>

        <ScrollArea className="h-[calc(100vh-20rem)] p-4">
          <div className="space-y-4 pr-3 pb-2 pl-1">
            {/* System Prompt */}
            <FormField
              control={form.control}
              name="systemPrompt"
              render={({ field }) => (
                <FormItem>
                  <div className="flex items-center">
                    <FormLabel className="font-medium text-[10px]">
                      System Prompt
                    </FormLabel>
                    <CompleteBadge
                      isComplete={isFieldComplete(form.watch("systemPrompt"))}
                    />
                  </div>
                  <FormControl>
                    <AutosizeTextarea
                      className="font-sans text-sm md:text-xs"
                      minHeight={30}
                      placeholder="You are a helpful assistant..."
                      {...field}
                    />
                  </FormControl>
                </FormItem>
              )}
            />

            {/* Examples */}
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <FormLabel className="font-medium text-[10px]">
                    Few Shot Examples{" "}
                    <span className="text-[8px] text-primary">
                      [{fields.length}]
                    </span>
                  </FormLabel>
                  <CompleteBadge
                    isComplete={isFieldComplete(form.watch("examples"))}
                  />
                </div>
                <Button
                  onClick={() => append({ input: "", output: "" })}
                  size="sm"
                  type="button"
                  variant="ghost"
                >
                  <Plus className="mr-1 h-3 w-3 transition-all delay-75 duration-150 ease-out group-hover:rotate-90 group-hover:scale-110" />
                  Add Example
                </Button>
              </div>

              <div className="space-y-3">
                {fields.map((field, index) => (
                  <div
                    className="group relative flex items-start justify-between gap-2 space-y-2 border border-border/70 border-dashed p-2"
                    key={field.id}
                  >
                    <div className="flex-1">
                      <div className="grid gap-2 sm:grid-cols-2">
                        <FormField
                          control={form.control}
                          name={`examples.${index}.input`}
                          render={({ field }) => (
                            <FormItem>
                              <div className="flex items-center">
                                <FormLabel className="font-medium text-[9px] text-muted-foreground/60">
                                  Input
                                </FormLabel>
                                <CompleteBadge
                                  isComplete={isFieldComplete(field.value)}
                                />
                              </div>
                              <FormControl>
                                <AutosizeTextarea
                                  className="h-20 resize-none font-sans text-xs shadow-sm"
                                  minHeight={30}
                                  placeholder="Input..."
                                  {...field}
                                />
                              </FormControl>
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name={`examples.${index}.output`}
                          render={({ field }) => (
                            <FormItem>
                              <div className="flex items-center">
                                <FormLabel className="font-medium text-[9px] text-muted-foreground/60">
                                  Output
                                </FormLabel>
                                <CompleteBadge
                                  isComplete={isFieldComplete(field.value)}
                                />
                              </div>
                              <FormControl>
                                <AutosizeTextarea
                                  className="h-20 resize-none font-sans text-xs shadow-sm"
                                  minHeight={30}
                                  placeholder="Output..."
                                  {...field}
                                />
                              </FormControl>
                            </FormItem>
                          )}
                        />
                      </div>
                    </div>
                    <div className="invisible absolute bottom-2 left-2 translate-y-1 opacity-0 transition-all duration-200 ease-in-out group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
                      <Button
                        className="h-5 bg-background py-3 text-muted-foreground/40 text-xs shadow-sm hover:text-destructive"
                        onClick={() => remove(index)}
                        size="sm"
                        type="button"
                        variant="ghost"
                      >
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </ScrollArea>
      </div>
    </Form>
  );
}

function TestStep({
  form,
  promptResult,
  isPromptLoading,
  runPrompt,
}: {
  form: UseFormReturn<FormData>;
  promptResult: string | null;
  isPromptLoading: boolean;
  runPrompt: (data: FormData) => void;
}) {
  return (
    <Form {...form}>
      <form className="space-y-4" onSubmit={form.handleSubmit(runPrompt)}>
        <div className="space-y-4">
          <FormField
            control={form.control}
            name="testInput"
            render={({ field }) => (
              <FormItem>
                <div className="flex items-center">
                  <FormLabel className="font-medium text-[10px]">
                    Test Input
                  </FormLabel>
                  <CompleteBadge isComplete={isFieldComplete(field.value)} />
                </div>
                <FormControl>
                  <AutosizeTextarea
                    className="resize-none font-sans text-sm"
                    minHeight={100}
                    placeholder="Enter test input..."
                    {...field}
                  />
                </FormControl>
              </FormItem>
            )}
          />

          <Button className="w-full" disabled={isPromptLoading} type="submit">
            {isPromptLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Running...
              </>
            ) : (
              <>
                <Wand2 className="mr-2 h-4 w-4" />
                Run Prompt
              </>
            )}
          </Button>

          {promptResult && (
            <div className="space-y-2">
              <Label className="font-medium text-[10px]">Output</Label>
              <pre className="group relative whitespace-pre-wrap rounded-lg border bg-muted/50 p-4 font-sans text-sm shadow-sm">
                {promptResult}
                <Button
                  className="absolute top-2 right-2 hidden h-6 text-xs group-hover:flex"
                  onClick={() => {
                    navigator.clipboard.writeText(promptResult);
                    toast.success("Copied to clipboard");
                  }}
                  size="sm"
                  variant="ghost"
                >
                  <Copy className="mr-1 h-3 w-3" />
                </Button>
              </pre>
            </div>
          )}
        </div>
      </form>
    </Form>
  );
}

function EvaluateStep({
  promptResult,
  evaluateOutput,
  isEvaluating,
  streamedResult,
}: {
  promptResult: string | null;
  evaluateOutput: () => void;
  isEvaluating: boolean;
  streamedResult: Partial<AnalysisResult> | null;
}) {
  return (
    <div className="space-y-4">
      {promptResult && (
        <div className="space-y-2">
          <Label className="font-medium text-[10px]">Output</Label>
          <pre className="whitespace-pre-wrap rounded-lg border bg-muted/50 p-4 font-sans text-sm">
            {promptResult}
          </pre>
        </div>
      )}

      {!streamedResult?.analysis && (
        <div className="flex justify-center py-8">
          <Button
            className="group"
            disabled={isEvaluating || !promptResult}
            onClick={evaluateOutput}
            size="lg"
            variant="outline"
          >
            {isEvaluating ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Evaluating...
              </>
            ) : (
              <>
                <Sparkles className="group-hover:-rotate-12 mr-2 h-4 w-4 transition-all duration-150 ease-out group-hover:scale-110" />
                Evaluate Output
              </>
            )}
          </Button>
        </div>
      )}

      {streamedResult?.analysis && (
        <div className="space-y-4">
          <AnalysisResults streamedResult={streamedResult} />
          {!isEvaluating && (
            <div className="flex justify-center pt-4">
              <div className="text-muted-foreground text-xs">
                Evaluation complete. You can proceed to the next step or improve
                examples.
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function ImproveStep({
  applyImprovedExamplesAndReevaluate,
  form,
  goToStep,
  handleImproveExamples,
  improvedExamples,
  isImprovingExamples,
  isPromptLoading,
}: {
  applyImprovedExamplesAndReevaluate: () => void;
  form: UseFormReturn<FormData>;
  goToStep: (step: StepId) => void;
  handleImproveExamples: () => void;
  improvedExamples: ImprovedExamplesResult | null;
  isImprovingExamples: boolean;
  isPromptLoading: boolean;
}) {
  return (
    <div className="space-y-4 bg-muted">
      {!improvedExamples && (
        <div className="flex flex-col items-center justify-center space-y-4 py-8">
          <p className="text-center text-muted-foreground text-sm">
            Generate improved examples based on the evaluation results
          </p>
          <Button
            className="group"
            disabled={isImprovingExamples}
            onClick={handleImproveExamples}
            size="lg"
            variant="outline"
          >
            {isImprovingExamples ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Improving...
              </>
            ) : (
              <>
                <Sparkles className="group-hover:-rotate-12 mr-2 h-4 w-4 transition-all duration-150 ease-out group-hover:scale-110" />
                Improve Examples
              </>
            )}
          </Button>
        </div>
      )}

      {improvedExamples && (
        <ImprovedExamples
          applyImprovedExamplesAndReevaluate={
            applyImprovedExamplesAndReevaluate
          }
          form={form}
          goToStep={goToStep}
          handleImproveExamples={handleImproveExamples}
          improvedExamples={improvedExamples}
          isImprovingExamples={isImprovingExamples}
          isPromptLoading={isPromptLoading}
        />
      )}
    </div>
  );
}

function ReviewStep({ form }: { form: UseFormReturn<FormData> }) {
  const [copied, setCopied] = useState(false);
  const formValues = form.getValues();

  const code = `import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";

export async function generateResponse(input: string) {
  const { text } = await generateText({
    model: openai("gpt-4.1-mini"),
    system: ${JSON.stringify(formValues.systemPrompt)},
    messages: [
${formValues.examples
  .map(
    (ex) => `      { role: "user", content: ${JSON.stringify(ex.input)} },
      { role: "assistant", content: ${JSON.stringify(ex.output)} },`
  )
  .join("\n")}
      { role: "user", content: input },
    ],
  });

  return text;
}`;

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
      toast.success("Copied to clipboard");
    } catch (_err) {
      toast.error("Failed to copy");
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-medium text-sm">Final Code</h3>
          <p className="text-muted-foreground text-xs">
            Copy this code to use in your project
          </p>
        </div>
        <Button onClick={copyToClipboard} size="lg" variant="default">
          {copied ? (
            <>
              <Check className="mr-2 h-4 w-4" />
              Copied!
            </>
          ) : (
            <>
              <Copy className="mr-2 h-4 w-4" />
              Copy Code
            </>
          )}
        </Button>
      </div>

      <div className="rounded-lg border bg-background shadow-sm">
        <div className="overflow-x-auto p-4">
          <CodePreview
            className="text-sm leading-relaxed [&_pre]:m-0 [&_pre]:bg-transparent [&_pre]:p-0"
            code={code}
          />
        </div>
      </div>
    </div>
  );
}

function AnalysisResults({
  streamedResult,
}: {
  streamedResult: Partial<AnalysisResult>;
}) {
  if (!streamedResult?.analysis) {
    return null;
  }

  return (
    <div className="mt-6 space-y-1">
      <Label className="font-medium text-[10px]">Evaluation</Label>
      <div className="space-y-4 p-2 shadow-sm">
        <div className="grid gap-3 lg:grid-cols-3">
          {[
            {
              label: "Consistency",
              value: streamedResult.analysis?.consistency ?? 0,
            },
            {
              label: "Relevance",
              value: streamedResult.analysis?.relevance ?? 0,
            },
            {
              label: "Quality",
              value: streamedResult.analysis?.quality ?? 0,
            },
          ].map(({ label, value }) => (
            <div className="space-y-1.5" key={label}>
              <div className="flex items-center justify-between">
                <span className="font-medium text-[8px]">{label}</span>
                <span className="text-[8px] tabular-nums">{value}/100</span>
              </div>
              <Progress
                className={cn(
                  "h-1.5",
                  value < 30 && "[&>div]:bg-destructive",
                  value >= 30 && value < 70 && "[&>div]:bg-muted-foreground/50",
                  value >= 70 && "[&>div]:bg-primary"
                )}
                value={value}
              />
            </div>
          ))}
        </div>

        {streamedResult.analysis?.feedback && (
          <div
            className={cn(
              "border p-3 text-[11px] leading-tight shadow-inner",
              streamedResult.analysis.consistency < 30 &&
                "border-destructive/10 bg-destructive/5 text-destructive",
              streamedResult.analysis.consistency >= 30 &&
                streamedResult.analysis.consistency < 70 &&
                "border-muted-foreground/20 bg-muted/50 text-foreground",
              streamedResult.analysis.consistency >= 70 &&
                "border-primary/20 bg-primary/5 text-foreground"
            )}
          >
            {streamedResult.analysis.feedback}
          </div>
        )}
      </div>
    </div>
  );
}

function ImprovedExamples({
  applyImprovedExamplesAndReevaluate,
  form,
  goToStep,
  handleImproveExamples,
  improvedExamples,
  isImprovingExamples,
  isPromptLoading,
}: {
  applyImprovedExamplesAndReevaluate: () => void;
  form: UseFormReturn<FormData>;
  goToStep: (step: StepId) => void;
  handleImproveExamples: () => void;
  improvedExamples: ImprovedExamplesResult | null;
  isImprovingExamples: boolean;
  isPromptLoading: boolean;
}) {
  const applyImprovedExamples = () => {
    if (
      improvedExamples?.examples &&
      Array.isArray(improvedExamples.examples)
    ) {
      form.setValue(
        "examples",
        improvedExamples.examples.map(({ input, output }) => ({
          input,
          output,
        }))
      );
      toast.success("Improved examples applied");
      goToStep(5);
    }
  };

  const isProcessing = isPromptLoading || isImprovingExamples;
  return (
    <div className="mt-4 space-y-1">
      {!improvedExamples && (
        <div className="flex items-center justify-between px-2 py-3">
          <Label className="font-medium text-[10px]">
            Want better examples?
          </Label>
          <Button
            className="group h-6 text-xs"
            disabled={isImprovingExamples}
            onClick={handleImproveExamples}
            size="sm"
            variant="outline"
          >
            {isImprovingExamples ? (
              <>
                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
                Improving...
              </>
            ) : (
              <>
                <Sparkles className="group-hover:-rotate-12 mr-1 h-3 w-3 transition-all duration-150 ease-out group-hover:scale-110" />
                Improve Examples
              </>
            )}
          </Button>
        </div>
      )}
      {improvedExamples && (
        <div className="space-y-4">
          <Label className="font-medium text-[10px]">Improve</Label>
        </div>
      )}
      <div className="space-y-4">
        {improvedExamples && (
          <ScrollArea className="relative h-[526px]">
            {improvedExamples && (
              <div className="space-y-4">
                <div className="px-2 py-2">
                  <div className="mb-3 p-2 text-xs">
                    <p className="mb-2 font-medium text-[10px]">
                      Improvement Reasoning:
                    </p>
                    <p className="text-muted-foreground">
                      {improvedExamples.reasoningText ||
                        "No reasoning provided"}
                    </p>
                  </div>

                  <div className="space-y-4 pr-4 pb-1 pl-1">
                    {improvedExamples.examples &&
                      improvedExamples.examples.map(
                        (improvedExample, index) => {
                          const originalExample =
                            form.getValues().examples[index];
                          const hasOriginal =
                            originalExample &&
                            (originalExample.input || originalExample.output);

                          return (
                            <Card
                              className="space-y-3 p-3 shadow-sm"
                              key={index}
                            >
                              <div className="flex items-center justify-between pb-2">
                                <h4 className="font-medium font-mono text-sm">
                                  <span className="font-sans text-muted-foreground text-xs tracking-tight">
                                    [Few Shot]
                                  </span>{" "}
                                  Example {index + 1}
                                </h4>
                                {hasOriginal && (
                                  <Button
                                    className="h-6 text-[10px]"
                                    onClick={() => {
                                      const newExamples = [
                                        ...form.getValues().examples,
                                      ];
                                      newExamples[index] = {
                                        input: improvedExample.input,
                                        output: improvedExample.output,
                                      };
                                      form.setValue("examples", newExamples);
                                      toast.success("Example updated");
                                    }}
                                    size="sm"
                                    variant="ghost"
                                  >
                                    <ArrowLeft className="mr-1 h-3 w-3" />
                                    Use This Example
                                  </Button>
                                )}
                              </div>

                              {hasOriginal ? (
                                <div className="grid gap-3 md:grid-cols-2">
                                  {/* Before (Original) */}
                                  <div className="space-y-2">
                                    <div className="flex items-center gap-2">
                                      <span className="font-medium text-[9px] text-muted-foreground">
                                        Before
                                      </span>
                                      <div className="h-px flex-1 bg-border" />
                                    </div>
                                    <div className="space-y-2 rounded-md border border-muted bg-muted/30 p-2">
                                      <div className="space-y-1">
                                        <div className="text-[8px] text-muted-foreground/60">
                                          Input:
                                        </div>
                                        <pre className="whitespace-pre-wrap bg-background p-2 font-sans text-xs">
                                          {originalExample.input || "(empty)"}
                                        </pre>
                                      </div>
                                      <div className="space-y-1">
                                        <div className="text-[8px] text-muted-foreground/60">
                                          Output:
                                        </div>
                                        <pre className="whitespace-pre-wrap bg-background p-2 font-sans text-xs">
                                          {originalExample.output || "(empty)"}
                                        </pre>
                                      </div>
                                    </div>
                                  </div>

                                  {/* After (Improved) */}
                                  <div className="space-y-2">
                                    <div className="flex items-center gap-2">
                                      <span className="font-medium text-[9px] text-primary">
                                        After
                                      </span>
                                      <div className="h-px flex-1 bg-border" />
                                    </div>
                                    <div className="space-y-2 rounded-md border border-primary/20 bg-primary/5 p-2">
                                      <div className="space-y-1">
                                        <div className="text-[8px] text-muted-foreground/60">
                                          Input:
                                        </div>
                                        <pre className="whitespace-pre-wrap bg-background p-2 font-sans text-xs">
                                          {improvedExample.input}
                                        </pre>
                                      </div>
                                      <div className="space-y-1">
                                        <div className="text-[8px] text-muted-foreground/60">
                                          Output:
                                        </div>
                                        <pre className="whitespace-pre-wrap bg-background p-2 font-sans text-xs">
                                          {improvedExample.output}
                                        </pre>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              ) : (
                                /* New example (no original to compare) */
                                <div className="space-y-2">
                                  <div className="flex items-center gap-2">
                                    <span className="font-medium text-[9px] text-primary">
                                      New Example
                                    </span>
                                    <div className="h-px flex-1 bg-border" />
                                  </div>
                                  <div className="grid gap-2 sm:grid-cols-2">
                                    <div className="space-y-1">
                                      <div className="text-[8px] text-muted-foreground/60">
                                        Input:
                                      </div>
                                      <pre className="whitespace-pre-wrap bg-muted/50 p-2 font-sans text-xs shadow-sm">
                                        {improvedExample.input}
                                      </pre>
                                    </div>
                                    <div className="space-y-1">
                                      <div className="text-[8px] text-muted-foreground/60">
                                        Output:
                                      </div>
                                      <pre className="whitespace-pre-wrap bg-muted/50 p-2 font-sans text-xs shadow-sm">
                                        {improvedExample.output}
                                      </pre>
                                    </div>
                                  </div>
                                </div>
                              )}

                              <div className="mt-2 flex flex-col gap-[2px] rounded-md border-muted border-t pt-2 text-xs">
                                <span className="font-medium text-[8px] text-muted-foreground/60">
                                  Why this example?
                                </span>
                                <span>{improvedExample.explanation}</span>
                              </div>
                            </Card>
                          );
                        }
                      )}
                  </div>
                </div>
              </div>
            )}
          </ScrollArea>
        )}
        {improvedExamples && (
          <div className="-mt-3 space-y-2">
            <div className="grid gap-2 p-2 sm:grid-cols-2">
              <Button
                className="w-full shadow-sm"
                disabled={isProcessing}
                onClick={applyImprovedExamplesAndReevaluate}
                size="lg"
              >
                {isProcessing ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Processing...
                  </>
                ) : (
                  <>
                    <Sparkles className="mr-2 h-4 w-4" />
                    Apply & Re-evaluate
                  </>
                )}
              </Button>
              <Button
                className="w-full shadow-sm"
                disabled={isProcessing}
                onClick={applyImprovedExamples}
                size="lg"
                variant="outline"
              >
                <Check className="mr-2 h-4 w-4" />
                Apply Improvements and Continue
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// Add completion check function
function isFieldComplete(value: any): boolean {
  if (typeof value === "string") return value.trim().length > 0;
  if (Array.isArray(value)) {
    return (
      value.length > 0 &&
      value.every((item) =>
        Object.values(item).every(
          (val) => typeof val === "string" && val.trim().length > 0
        )
      )
    );
  }
  return false;
}

// Add checkmark badge component
function CompleteBadge({ isComplete }: { isComplete: boolean }) {
  if (!isComplete) return null;

  return (
    <div className="ml-2 inline-flex">
      <Badge
        className="flex h-3 w-3 items-center justify-center bg-background p-0 text-primary shadow-sm"
        variant="secondary"
      >
        <Check className="h-2 w-2" />
      </Badge>
    </div>
  );
}
AI SDK Prompt Few-Shot Editor

AI SDK Prompt Few-Shot Editor

AI SDK Prompt Few-Shot Editor

AI SDK Prompt Few-Shot Editor
