'use client';

import { useEffect, useMemo } from 'react';
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Icons } from '@/components/icons';
import { Button } from '@/components/ui/button';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle
} from '@/components/ui/sheet';
import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
import { createCustomerContactMutation, updateCustomerContactMutation } from '../api/mutations';
import type { CustomerContactMutationPayload, CustomerContactRecord } from '../api/types';
import { customerContactSchema, type CustomerContactFormValues } from '../schemas/customer.schema';

function toDefaultValues(contact?: CustomerContactRecord): CustomerContactFormValues {
  return {
    name: contact?.name ?? '',
    position: contact?.position ?? '',
    department: contact?.department ?? '',
    phone: contact?.phone ?? '',
    mobile: contact?.mobile ?? '',
    email: contact?.email ?? '',
    isPrimary: contact?.isPrimary ?? false,
    notes: contact?.notes ?? '',
    isActive: contact?.isActive ?? true
  };
}

export function ContactFormSheet({
  customerId,
  contact,
  open,
  onOpenChange
}: {
  customerId: string;
  contact?: CustomerContactRecord;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const isEdit = !!contact;
  const defaultValues = useMemo(() => toDefaultValues(contact), [contact]);
  const { FormTextField, FormTextareaField, FormSwitchField } =
    useFormFields<CustomerContactFormValues>();

  const createMutation = useMutation({
    ...createCustomerContactMutation,
    onSuccess: () => {
      toast.success('สร้างผู้ติดต่อสำเร็จ');
      onOpenChange(false);
    },
    onError: (error) =>
      toast.error(error instanceof Error ? error.message : 'ไม่สามารถสร้างผู้ติดต่อได้')
  });

  const updateMutation = useMutation({
    ...updateCustomerContactMutation,
    onSuccess: () => {
      toast.success('อัปเดตผู้ติดต่อสำเร็จ');
      onOpenChange(false);
    },
    onError: (error) =>
      toast.error(error instanceof Error ? error.message : 'ไม่สามารถอัปเดตผู้ติดต่อได้')
  });

  const form = useAppForm({
    defaultValues,
    validators: {
      onSubmit: customerContactSchema
    },
    onSubmit: async ({ value }) => {
      const payload: CustomerContactMutationPayload = value;

      if (isEdit && contact) {
        await updateMutation.mutateAsync({
          customerId,
          contactId: contact.id,
          values: payload
        });
        return;
      }

      await createMutation.mutateAsync({
        customerId,
        values: payload
      });
    }
  });

  useEffect(() => {
    if (!open) {
      return;
    }

    form.reset(defaultValues);
  }, [defaultValues, form, open]);

  const isPending = createMutation.isPending || updateMutation.isPending;

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className='flex flex-col sm:max-w-2xl'>
        <SheetHeader>
          <SheetTitle>{isEdit ? 'แก้ไขผู้ติดต่อ' : 'เพิ่มผู้ติดต่อ'}</SheetTitle>
          <SheetDescription>บันทึกข้อมูลผู้ติดต่อของลูกค้ารายนี้</SheetDescription>
        </SheetHeader>

        <div className='flex-1 overflow-auto'>
          <form.AppForm>
            <form.Form id='customer-contact-form' className='grid gap-4 md:grid-cols-2'>
              <FormTextField name='name' label='ชื่อผู้ติดต่อ' required placeholder='Jane Doe' />
              <FormTextField name='position' label='ตำแหน่ง' placeholder='Procurement Manager' />
              <FormTextField name='department' label='แผนก' placeholder='Procurement' />
              <FormTextField name='phone' label='โทรศัพท์' placeholder='02-000-0000' />
              <FormTextField name='mobile' label='มือถือ' placeholder='081-000-0000' />
              <FormTextField
                name='email'
                label='อีเมล'
                type='email'
                placeholder='jane@example.com'
              />
              <div className='md:col-span-2'>
                <FormTextareaField
                  name='notes'
                  label='หมายเหตุ'
                  placeholder='รูปแบบการติดต่อที่เหมาะสม หมายเหตุการประสานงาน หรือบริบทการประชุม'
                />
              </div>
              <div className='md:col-span-2 grid gap-4 md:grid-cols-2'>
                <FormSwitchField
                  name='isPrimary'
                  label='ผู้ติดต่อหลัก'
                  description='เมื่อเปิดใช้งาน ผู้ติดต่อนี้จะเป็นผู้ติดต่อหลักของลูกค้ารายนี้'
                />
                <FormSwitchField
                  name='isActive'
                  label='ใช้งานอยู่'
                  description='ผู้ติดต่อที่ปิดใช้งานยังคงอยู่ในประวัติและเปิดกลับมาใช้ได้ภายหลัง'
                />
              </div>
            </form.Form>
          </form.AppForm>
        </div>

        <SheetFooter>
          <Button type='button' variant='outline' onClick={() => onOpenChange(false)}>
            ยกเลิก
          </Button>
          <Button type='submit' form='customer-contact-form' isLoading={isPending}>
            <Icons.check className='mr-2 h-4 w-4' />
            {isEdit ? 'อัปเดตผู้ติดต่อ' : 'สร้างผู้ติดต่อ'}
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}
