"use client";

import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card } from '@/components/ui/card';
import CustomEditor from './custom-editor';
import FormEditor from './form-editor';

export default function EditorTest() {
  const [testData, setTestData] = useState('Initial test content');
  const [editorType, setEditorType] = useState('custom');
  
  const { control, setValue, watch, handleSubmit } = useForm({
    defaultValues: {
      title: 'Test Title',
      description: testData,
      creatorName: 'Test Creator'
    }
  });

  const watchedValues = watch();

  const handleSetValue = () => {
    const newContent = `<p>Updated content at ${new Date().toLocaleTimeString()}</p><p>This content was set via setValue</p>`;
    setValue('description', newContent);
    setTestData(newContent);
  };

  const handleSetEmpty = () => {
    setValue('description', '');
    setTestData('');
  };

  const handleSetHTML = () => {
    const htmlContent = `
      <h2>HTML Content Test</h2>
      <p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <p>Updated at: ${new Date().toLocaleTimeString()}</p>
    `;
    setValue('description', htmlContent);
    setTestData(htmlContent);
  };

  const onSubmit = (data: any) => {
    console.log('Form submitted:', data);
    alert('Form submitted! Check console for data.');
  };

  return (
    <div className="p-6 max-w-4xl mx-auto space-y-6">
      <h1 className="text-2xl font-bold">Editor Test Component</h1>
      
      <Card className="p-4">
        <div className="space-y-4">
          <div>
            <Label>Editor Type:</Label>
            <div className="flex gap-2 mt-2">
              <Button 
                variant={editorType === 'custom' ? 'default' : 'outline'}
                onClick={() => setEditorType('custom')}
              >
                CustomEditor
              </Button>
              <Button 
                variant={editorType === 'form' ? 'default' : 'outline'}
                onClick={() => setEditorType('form')}
              >
                FormEditor
              </Button>
            </div>
          </div>

          <div className="flex gap-2 flex-wrap">
            <Button onClick={handleSetValue} variant="outline">
              Set Value (Current Time)
            </Button>
            <Button onClick={handleSetEmpty} variant="outline">
              Set Empty
            </Button>
            <Button onClick={handleSetHTML} variant="outline">
              Set HTML Content
            </Button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <Label>Current Test Data:</Label>
              <div className="mt-2 p-2 bg-gray-100 rounded text-sm">
                {testData || '(empty)'}
              </div>
            </div>
            <div>
              <Label>Watched Form Values:</Label>
              <div className="mt-2 p-2 bg-gray-100 rounded text-sm">
                <pre>{JSON.stringify(watchedValues, null, 2)}</pre>
              </div>
            </div>
          </div>
        </div>
      </Card>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
        <Card className="p-4">
          <div className="space-y-4">
            <div>
              <Label>Title:</Label>
              <Controller
                control={control}
                name="title"
                render={({ field }) => (
                  <Input {...field} className="mt-1" />
                )}
              />
            </div>

            <div>
              <Label>Description (Editor):</Label>
              <Controller
                control={control}
                name="description"
                render={({ field }) => (
                  editorType === 'custom' ? (
                    <CustomEditor 
                      onChange={field.onChange} 
                      initialData={field.value} 
                    />
                  ) : (
                    <FormEditor 
                      onChange={field.onChange} 
                      initialData={field.value} 
                    />
                  )
                )}
              />
            </div>

            <div>
              <Label>Creator Name:</Label>
              <Controller
                control={control}
                name="creatorName"
                render={({ field }) => (
                  <Input {...field} className="mt-1" />
                )}
              />
            </div>

            <Button type="submit" className="w-full">
              Submit Form
            </Button>
          </div>
        </Card>
      </form>

      <Card className="p-4">
        <h3 className="font-semibold mb-2">Instructions:</h3>
        <ul className="list-disc list-inside space-y-1 text-sm">
          <li>Switch between CustomEditor and FormEditor to test both</li>
          <li>Click "Set Value" to test setValue functionality</li>
          <li>Click "Set Empty" to test empty content handling</li>
          <li>Click "Set HTML Content" to test rich HTML content</li>
          <li>Type in the editor to test onChange functionality</li>
          <li>Submit the form to see all data</li>
        </ul>
      </Card>
    </div>
  );
}