'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form';
import { useTransition, useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { useForm } from 'react-hook-form';
import { Loader2 } from 'lucide-react';
import { type User } from 'better-auth';
import { useActiveOrganization } from '@/lib/auth/auth-client';
import { toast } from 'sonner';

function useCompanySchema() {
  return z.object({
    name: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    contactName: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    address: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    postalCode: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    city: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    cvr: z.string().min(1, { message: 'Dette felt er påkrævet' })
  });
}

type CompanyFormData = z.infer<ReturnType<typeof useCompanySchema>>;

export default function CompanyForm({ user }: { user: User | null }) {
  const [loading, startTransition] = useTransition();
  // const { data: session } = useSession();
  const { data: activeOrganization } = useActiveOrganization();
  const schema = useCompanySchema();

  const form = useForm<CompanyFormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      name: '',
      contactName: '',
      address: '',
      postalCode: '',
      city: '',
      cvr: ''
    }
  });

  // Load existing organization data
  useEffect(() => {
    const loadOrganizationData = async () => {
      if (activeOrganization?.id) {
        try {
          const response = await fetch(
            `/api/organization/${activeOrganization.id}`
          );

          if (response.ok) {
            const org = await response.json();
            form.reset({
              name: org.name || '',
              contactName: org.contactName || '',
              address: org.address || '',
              postalCode: org.postalCode || '',
              city: org.city || '',
              cvr: org.cvr || ''
            });
          }
        } catch {
          // Error loading organization data
        }
      }
    };

    loadOrganizationData();
  }, [activeOrganization?.id, form]);

  const onSubmit = (data: CompanyFormData) => {
    startTransition(async () => {
      try {
        if (activeOrganization?.id) {
          // Update existing organization
          const response = await fetch(
            `/api/organization/${activeOrganization.id}`,
            {
              method: 'PUT',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                name: data.name,
                contactName: data.contactName,
                address: data.address,
                postalCode: data.postalCode,
                city: data.city,
                cvr: data.cvr
              })
            }
          );

          if (!response.ok) {
            throw new Error('Failed to update organization');
          }

          toast.success('Virksomhedsoplysninger opdateret');
        } else {
          // Create new organization
          const response = await fetch('/api/organization', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              name: data.name,
              contactName: data.contactName,
              address: data.address,
              postalCode: data.postalCode,
              city: data.city,
              cvr: data.cvr
            })
          });

          if (!response.ok) {
            throw new Error('Failed to create organization');
          }

          toast.success('Virksomhed oprettet');
        }
      } catch {
        toast.error('Fejl ved gemning af virksomhedsoplysninger');
      }
    });
  };

  if (!user) {
    return null;
  }

  return (
    <Card className='w-full gap-3 rounded-none border-0 bg-neutral-50 font-serif shadow-none'>
      <CardContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className='flex w-full flex-col gap-4 md:flex-row md:gap-6'
          >
            <div className='flex w-full flex-col gap-4'>
              <FormField
                control={form.control}
                name='name'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className='text-base'>
                      Navn på virksomhed
                    </FormLabel>
                    <FormControl>
                      <Input
                        className='h-11 rounded-none bg-white'
                        {...field}
                        placeholder='Name of company'
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name='address'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className='text-base'>Adresse</FormLabel>
                    <FormControl>
                      <Input
                        className='h-11 rounded-none bg-white'
                        {...field}
                        placeholder='Address'
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className='flex w-full gap-4'>
                <FormField
                  control={form.control}
                  name='postalCode'
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className='text-base'>Postnr.</FormLabel>
                      <FormControl>
                        <Input
                          className='h-11 rounded-none bg-white'
                          {...field}
                          placeholder='2100'
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name='city'
                  render={({ field }) => (
                    <FormItem className='w-full'>
                      <FormLabel className='text-base'>By</FormLabel>
                      <FormControl>
                        <Input
                          className='h-11 rounded-none bg-white'
                          {...field}
                          placeholder='Cityname'
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            </div>

            <div className='flex w-full flex-col gap-4'>
              <FormField
                control={form.control}
                name='cvr'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className='text-base'>CVR nummer</FormLabel>
                    <FormControl>
                      <Input
                        className='h-11 rounded-none bg-white'
                        {...field}
                        placeholder='Business ID no.'
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name='contactName'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className='text-base'>
                      Navn på kontaktperson
                    </FormLabel>
                    <FormControl>
                      <Input
                        className='h-11 rounded-none bg-white'
                        {...field}
                        placeholder='Name of contact'
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button
                type='submit'
                className='h-11 min-w-42 self-end bg-neutral-900 text-base font-medium md:mt-8'
                disabled={loading}
              >
                {loading ? (
                  <Loader2 className='animate-spin' />
                ) : (
                  'gem ændringer'
                )}
              </Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}