components/editor-sections/PowerLogicSection.tsx

"use client";

import { useState } from 'react';
import { UseFormReturn } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
import { Sparkles } from 'lucide-react';

import Editor from 'react-simple-code-editor';
//@ts-nocheck
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-tomorrow.css';
import { heroFormSchema } from '@/lib/validators';

import { Button } from '@/components/ui/button';
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Textarea } from '@/components/ui/textarea';
import { regeneratePowerLogicAction } from '@/app/actions/db.actions';

type FormSchemaType = z.infer<typeof heroFormSchema>;

interface PowerLogicSectionProps {
  form: UseFormReturn<FormSchemaType>;
}

export const PowerLogicSection = ({ form }: PowerLogicSectionProps) => {
  const [isGenerating, setIsGenerating] = useState(false);

  const handleRegenerateCode = async () => {
    setIsGenerating(true);
    const toastId = toast.loading("Generating new superpower logic...");
    const logicDescription = form.getValues('powerLogicDescription');

    const result = await regeneratePowerLogicAction(logicDescription);

    if (result.success && result.data) {
      form.setValue('powerLogic', result.data, { shouldValidate: true, shouldDirty: true });
      toast.success("New logic generated!", { id: toastId });
    } else {
      toast.error(result.message || "Could not generate logic.", { id: toastId });
    }
    setIsGenerating(false);
  };

  return (
    <div className="p-4 border rounded-lg">
      <h3 className="text-lg font-semibold mb-4">Superpower Logic</h3>
      <div className="space-y-4">
        <FormField
          control={form.control}
          name="powerLogicDescription"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Logic Description</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Describe in plain English what this power should do..."
                  className="min-h-[100px]"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="powerLogic"
          render={({ field }) => (
            <FormItem>
              <div className="flex justify-between items-center">
                <FormLabel>JavaScript Power Logic</FormLabel>
                <Button type="button" size="sm" variant="outline" onClick={handleRegenerateCode} disabled={isGenerating}>
                  <Sparkles className="h-4 w-4 mr-2" />
                  {isGenerating ? "Generating..." : "Regenerate with AI"}
                </Button>
              </div>
              <FormControl>
                <div className="bg-gray-900 rounded-md p-2 font-mono text-sm border border-gray-700 h-64 overflow-auto">
                  <Editor
                    value={field.value}
                    onValueChange={field.onChange}
                    highlight={(code) => highlight(code, languages.js, 'javascript')}
                    padding={10}
                    style={{
                      fontFamily: '"Fira Code", "Fira Mono", monospace',
                      fontSize: 14,
                    }}
                  />
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>
    </div>
  );
};