'use client';

import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { UploadButton, UploadDropzone } from '@/lib/uploadthing';
import { modsSchema } from '@/lib/validations/validation';

const AdminPage = () => {
  const form = useForm<z.infer<typeof modsSchema>>({
    resolver: zodResolver(modsSchema),
  });

  const onSubmit: SubmitHandler<z.infer<typeof modsSchema>> = async (data) => {
    const response = await fetch('/api/uploadmods', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (response.ok) {
      form.reset();
      console.log('Upload successful');
      alert('Uploaded');
    } else {
      console.error('Upload failed');
      alert('Upload Failed');
    }
  };

  return (
    <section id="admin-page" className="wrapper container">
      <h1 className="text-3xl font-bold py-6">Admin Upload Section</h1>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          <FormField
            control={form.control}
            name="fileName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>File Name</FormLabel>
                <FormControl>
                  <Input {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="version"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Version</FormLabel>
                <FormControl>
                  <Input {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="downloadLink"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Download Link</FormLabel>
                <UploadButton
                  endpoint="imageUploader"
                  onClientUploadComplete={(res) => {
                    field.onChange(res[0].url);
                  }}
                  onUploadError={(error: Error) => {
                    alert(`ERROR! ${error.message}`);
                  }}
                />
                <FormControl>
                  <Input {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="fileSize"
            render={({ field }) => (
              <FormItem>
                <FormLabel>File Size</FormLabel>
                <FormControl>
                  <Input {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button
            type="submit"
            className="w-full text-lg rounded-full"
            size={'lg'}
          >
            Submit
          </Button>
        </form>
      </Form>
    </section>
  );
};

export default AdminPage;