'use client';
import Link from 'next/link';
import { useEffect, useTransition, useState } from 'react';
import { useForm, useFieldArray } from 'react-hook-form';
import { type User } from 'better-auth';
import { Loader2, Plus } from 'lucide-react';
import { toast } from 'sonner';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Separator } from '@/components/ui/separator';
import {
  Form,
  FormField,
  FormItem,
  FormControl,
  FormMessage,
  FormLabel
} from '@/components/ui/form';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter
} from '@/components/ui/dialog';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Routes } from '@/config/routes';
// import {
//   Select,
//   SelectContent,
//   SelectItem,
//   SelectTrigger,
//   SelectValue
// } from '@/components/ui/select';
import { BusinessOption } from '@/types/interfaces';
import { OrganizationMember } from '@/types/organization';
import { client } from '@/lib/auth/auth-client';
import type { AppRouterOutput } from "@/lib/trpc/router";
// import { Role } from '@/lib/database/schema';

// type Subscriber = {
//   id: string;
//   email: string;
// };

enum FieldEnum {
  MASTER = 'masterEmail',
  SUBSCRIBERS = 'subscribers',
  // PLAN = 'plan'
}

const subscribersSchema = z.object({
    masterEmail: z.string().email().optional(),
    subscribers: z.array(
        z.object({
            email: z.string().trim().email('Indtast en gyldig email').or(z.literal(''))
        })
    ),
    // plan: z.string().optional()
});

type SubscribersFormData = z.infer<typeof subscribersSchema>;

type Props = {
    user: User;
    // initialSubscribers?: Subscriber[];
    // initialPlan?: string;
    currentPlan: (BusinessOption & { plan: string, seats: number }) | undefined;
    members: AppRouterOutput["organization"]["member"]["list"];
    organizationId: string;
};

export default function MemberControlForm({
    user,
    currentPlan,
    members,
    organizationId
    // tariffPlans = plans
}: Props) {
    const form = useForm<SubscribersFormData>({
        resolver: zodResolver(subscribersSchema),
        defaultValues: {
            masterEmail: user.email || '',
            subscribers: members.map((sub) => ({ email: sub.user.email })),
            // plan: currentPlan?.value
        }
    });

    const { fields, append, remove } = useFieldArray({
        control: form.control,
        name: FieldEnum.SUBSCRIBERS
    });

  const [loading, startTransition] = useTransition();
  const [editable, setEditable] = useState<boolean[]>(
    members.map(() => false)
  );
  const [removeIndex, setRemoveIndex] = useState<number | null>(null);

  useEffect(() => {
    form.reset({
      subscribers: members.map((sub) => ({ email: sub.user.email }))
    });
    setEditable(members.map(() => false));
  }, [members, form]);

  const onSubmit = (data: SubscribersFormData) => {
    startTransition(async () => {
      try {
        console.log('onSubmit: ', data);
        const { data: inviteData, error } = await client.organization.inviteMember({
          email: "nightrino777+2@gmail.com",
          role: "member",
          organizationId,
          resend: true,
        });

        console.log('inviteData: ', inviteData);
        console.log('error: ', error);

        toast.success('Succes', {
          description: 'Du er blevet succesfuldt tilmeldt.'
        });
      } catch(error) {
        console.log('error: ', error);
        toast.error('Fejl ved lagring af formular.');
      }
    });
  };

  const handleEdit = (index: number) => {
    setEditable((prev) =>
      prev.map((value, i) => (i === index ? !value : value))
    );
  };

  const handleRemove = async (index: number) => {
    try {
      const { data, error } = await client.organization.removeMember({
        memberIdOrEmail: members[index].user.email,
        organizationId,
      });
      if (data && !error) {
        toast.success('Medlem fjernet');
        setRemoveIndex(index);
      }
    } catch (error) {
      console.log('error: ', error);
    }
  };

  const confirmRemove = () => {
    if (removeIndex === null) return;
    remove(removeIndex);
    setRemoveIndex(null);
  };

  const handleAddNew = () => {
    if (currentPlan && currentPlan.seats <= members.length) {
      toast.error('Du har allerede nået den maksimale antal medlemmer for dit abonnement.');
      return;
    }
    append({ email: '' });
    setEditable((prev) => [...prev, true]);
  };

  return (
    <Card className='w-full rounded-none border-0 bg-neutral-50 font-serif shadow-none'>
      <CardHeader>
        <CardTitle className='text-2xl'>Abonnement</CardTitle>
        <Separator />
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-2'>
            <p className='text-sm'>Du har {currentPlan?.seats} aktive abonnementer:</p>
            <div className='grid gap-1'>
              <FormField
                control={form.control}
                name={FieldEnum.MASTER}
                render={({ field }) => (
                  <FormItem>
                    <div className='grid grid-cols-1 gap-2'>
                      <FormControl>
                        <Input
                          {...field}
                          disabled
                          className='h-11 rounded-none bg-neutral-200 text-neutral-700'
                          placeholder='Email / brugernavn'
                        />
                      </FormControl>
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <span className='text-xs text-neutral-700'>
                Hvis du vil andre email-addressen for dit master-abonnement, sà
                skal du gore det{' '}
                <Link
                  className='text-client-red hover:underline'
                  href={Routes.PROFILE}
                >
                  Konto
                </Link>
              </span>
            </div>

            <div className='my-4 grid gap-3'>
              {fields.map((field, index) => (
                <div key={field.id} className='grid gap-1'>
                  <FormField
                    control={form.control}
                    name={`${FieldEnum.SUBSCRIBERS}.${index}.email`}
                    render={({ field }) => (
                      <FormItem>
                        <div className='grid grid-cols-[1fr_auto_auto] items-center gap-3'>
                          <FormControl>
                            <Input
                              {...field}
                              disabled={!editable[index]}
                              className='h-11 rounded-none bg-white'
                              placeholder='Email / brugernavn'
                            />
                          </FormControl>

                          <Button
                            type='button'
                            className='h-11 rounded-none'
                            onClick={() => handleEdit(index)}
                          >
                            ret
                          </Button>

                          <Button
                            type='button'
                            variant='destructive'
                            className='h-11 rounded-none'
                            onClick={() => handleRemove(index)}
                          >
                            fjern
                          </Button>
                        </div>

                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              ))}
            </div>

            <span className='text-xs leading-[1.1] text-neutral-700'>
              Du kan frit andre hvilke ovrige brugere der skal have adgang til
              Magasinet KBH som del af dit abonnement. Brugerprofilen som der
              logges ind med, skal blot være registreret med samme email som
              herover.
            </span>

            <Button
              type='button'
              variant='secondary'
              className='mt-4 h-11 w-fit rounded-none bg-white'
              onClick={handleAddNew}
            >
              <Plus className='h-4 w-4' /> Tilføj medarbejder
            </Button>

            <Button
              type='submit'
              disabled={loading}
              className='h-11 min-w-54 justify-self-end rounded-none bg-neutral-900 text-base font-medium'
            >
              {loading ? (
                <Loader2 className='animate-spin' />
              ) : (
                'gem medarbejderkonti'
              )}
            </Button>

            {/* <Separator className='my-4' /> */}

            {/* <div className='grid gap-2'>
              <FormField
                control={form.control}
                name={FieldEnum.PLAN}
                render={({ field }) => (
                  <FormItem className='w-full max-w-88 font-serif'>
                    <FormLabel className=''>Ændre dit abonnement:</FormLabel>
                    <FormControl>
                      <Select
                        onValueChange={field.onChange}
                        value={field.value}
                      >
                        <SelectTrigger className='relative min-h-11 w-full truncate rounded-none bg-white [&>svg]:!text-neutral-900 [&>svg]:!opacity-100'>
                          <SelectValue placeholder='Vælg antal' />
                        </SelectTrigger>
                        <SelectContent className='rounded-none font-serif'>
                          {tariffPlans.map((o) => (
                            <SelectItem key={o.value} value={o.value}>
                              {o.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div> */}
          </form>
        </Form>
      </CardContent>
      <Dialog
        open={removeIndex !== null}
        onOpenChange={() => setRemoveIndex(null)}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Er du sikker?</DialogTitle>
          </DialogHeader>

          <p>Dette vil fjerne medarbejderen fra listen.</p>

          <DialogFooter>
            <Button variant='outline' onClick={() => setRemoveIndex(null)}>
              Annuller
            </Button>
            <Button variant='destructive' onClick={confirmRemove}>
              Fjern
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  );
}