'use client';
import React, { useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { Form } from 'react-compose-form';
import { FormReset } from '@/components/form/form-reset';
import { FormSubmit } from '@/components/form/form-submit';
import { InputControl } from '@/components/form/control/input.control';
import { OrganizationMemberCollection } from '@/components/form/control/organization-member.collection';
import { Card, CardContent } from '@/components/ui/card';
import { api } from '@/lib/trpc/client';
import type { AppRouterOutput } from '@/lib/trpc/router';
import { MemberRole } from '@/server/modules/organization/types/member-role.enum';
import { Routes } from '@/config/routes';
import Link from "next/link";

const OrganizationEditorSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  slug: z.string().nullable(),
  contactName: z.string().optional().nullable(),
  address: z.string().optional().nullable(),
  postalCode: z.string().optional().nullable(),
  city: z.string().optional().nullable(),
  cvr: z.string().optional().nullable(),
  members: z
    .array(
      z.object({
        userId: z.string().uuid(),
        role: z.nativeEnum(MemberRole)
      })
    )
    .optional()
});

type Props =
  | {
      mode: 'create';
      id?: undefined;
    }
  | {
      mode: 'edit';
      id: string;
      organization: NonNullable<AppRouterOutput['organization']['get']>;
    };

export const OrganizationEditor: React.FC<Props> = (props) => {
  const router = useRouter();

  const createMutation = api.organization.create.useMutation({
    onSuccess(org) {
      router.replace(Routes.DASHBOARD.ORGANIZATION_EDIT(org.id));
    }
  });

  const updateMutation = api.organization.update.useMutation();

  const handleSubmit = useCallback(
    async (data: z.infer<typeof OrganizationEditorSchema>) => {
      switch (props.mode) {
        case 'create': {
          await createMutation.mutateAsync({
            data
          });
          break;
        }

        case 'edit': {
          await updateMutation.mutateAsync({
            id: props.id,
            data
          });
          break;
        }
      }
    },
    [createMutation, updateMutation, props.mode, props.id]
  );

  return (
    <Form
      className='flex gap-6'
      resolver={zodResolver(OrganizationEditorSchema)}
      values={
        props.mode === 'edit'
          ? {
              ...props.organization,
              members: props.organization.members || undefined
            }
          : undefined
      }
      onSubmit={handleSubmit}
    >
      <div className='max-w-4xl flex-1'>
        <div className='flex flex-col gap-4 px-4'>
          <InputControl label='Name' name='name' />
          <InputControl label='Slug' name='slug' />
          <InputControl label='Contact Name' name='contactName' />
          <InputControl label='Address' name='address' />
          <div className='grid grid-cols-2 gap-4'>
            <InputControl label='Postal Code' name='postalCode' />
            <InputControl label='City' name='city' />
          </div>
          <InputControl label='CVR' name='cvr' />

          <div className='pt-4'>
            <OrganizationMemberCollection name='members' />
          </div>
        </div>

        <div className='flex justify-between px-4 pt-5'>
          <div className='flex gap-2'>
            {props.mode === 'edit' && (
              <FormReset asChild>
                <Link href='.'>Cancel</Link>
              </FormReset>
            )}

            <FormSubmit>
              {props.mode === 'create'
                ? 'Create Organization'
                : 'Update Organization'}
            </FormSubmit>
          </div>
        </div>
      </div>

      <div className='w-80 flex-shrink-0'>
        <Card className='mt-5 shadow-none'>
          <CardContent>
            <div className='space-y-4'>
              <div className='text-muted-foreground text-sm'>
                Organization details are used for billing and contact purposes.
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </Form>
  );
};