'use client';

import * as React from 'react';
import { useEffect, useMemo, useState } from 'react';
import { useMutation, useQuery } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Icons } from '@/components/icons';
import { Button } from '@/components/ui/button';
import {
  ProjectPartiesEditor,
  type ProjectPartyEditorItem
} from '@/features/crm/components/project-parties-editor';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle
} from '@/components/ui/sheet';
import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
import { enquiryProjectPartiesOptions } from '../api/queries';
import { createEnquiryMutation, updateEnquiryMutation } from '../api/mutations';
import type { EnquiryMutationPayload, EnquiryRecord, EnquiryReferenceData } from '../api/types';
import { enquirySchema, type EnquiryFormValues } from '../schemas/enquiry.schema';

function toDefaultValues(
  enquiry: EnquiryRecord | undefined,
  referenceData: EnquiryReferenceData
): EnquiryFormValues {
  return {
    customerId: enquiry?.customerId ?? referenceData.customers[0]?.id ?? '',
    contactId: enquiry?.contactId ?? undefined,
    assignedToUserId: enquiry?.assignedToUserId ?? undefined,
    title: enquiry?.title ?? '',
    description: enquiry?.description ?? '',
    requirement: enquiry?.requirement ?? '',
    projectName: enquiry?.projectName ?? '',
    projectLocation: enquiry?.projectLocation ?? '',
    branchId: enquiry?.branchId ?? undefined,
    productType: enquiry?.productType ?? referenceData.productTypes[0]?.id ?? '',
    status: enquiry?.status ?? referenceData.statuses[0]?.id ?? '',
    priority:
      enquiry?.priority ?? referenceData.priorities[1]?.id ?? referenceData.priorities[0]?.id ?? '',
    leadChannel: enquiry?.leadChannel ?? undefined,
    estimatedValue: enquiry?.estimatedValue ?? undefined,
    chancePercent: enquiry?.chancePercent ?? undefined,
    expectedCloseDate: enquiry?.expectedCloseDate ? enquiry.expectedCloseDate.slice(0, 10) : '',
    competitor: enquiry?.competitor ?? '',
    source: enquiry?.source ?? '',
    isHotProject: enquiry?.isHotProject ?? false,
    notes: enquiry?.notes ?? '',
    isActive: enquiry?.isActive ?? true
  };
}

export function EnquiryFormSheet({
  enquiry,
  open,
  onOpenChange,
  referenceData,
  workspace = 'enquiry'
}: {
  enquiry?: EnquiryRecord;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  referenceData: EnquiryReferenceData;
  workspace?: 'lead' | 'enquiry';
}) {
  const isEdit = !!enquiry;
  const defaultValues = useMemo(
    () => toDefaultValues(enquiry, referenceData),
    [enquiry, referenceData]
  );
  const [selectedCustomerId, setSelectedCustomerId] = useState(defaultValues.customerId);
  const [projectParties, setProjectParties] = useState<ProjectPartyEditorItem[]>([]);
  const { FormTextField, FormTextareaField, FormSelectField, FormSwitchField } =
    useFormFields<EnquiryFormValues>();
  const projectPartiesQuery = useQuery({
    ...enquiryProjectPartiesOptions(enquiry?.id ?? ''),
    enabled: open && !!enquiry?.id
  });

  const createMutation = useMutation({
    ...createEnquiryMutation,
    onSuccess: () => {
      toast.success(`สร้าง${recordLabel}สำเร็จ`);
      onOpenChange(false);
    },
    onError: (error) =>
      toast.error(error instanceof Error ? error.message : `ไม่สามารถสร้าง${recordLabel}ได้`)
  });

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

  const contactsForCustomer = referenceData.contacts.filter(
    (contact) => contact.customerId === selectedCustomerId
  );
  const selectedCustomer = referenceData.customers.find((customer) => customer.id === selectedCustomerId);

  const form = useAppForm({
    defaultValues,
    validators: {
      onSubmit: enquirySchema
    },
    onSubmit: async ({ value }) => {
      const payload: EnquiryMutationPayload = {
        customerId: value.customerId,
        contactId: value.contactId || null,
        assignedToUserId: value.assignedToUserId || null,
        title: value.title,
        description: value.description,
        requirement: value.requirement,
        projectName: value.projectName,
        projectLocation: value.projectLocation,
        branchId: value.branchId || null,
        productType: value.productType,
        status: value.status,
        priority: value.priority,
        leadChannel: value.leadChannel || null,
        estimatedValue:
          typeof value.estimatedValue === 'number' ? value.estimatedValue : null,
        chancePercent:
          typeof value.chancePercent === 'number' ? value.chancePercent : null,
        expectedCloseDate: value.expectedCloseDate || null,
        competitor: value.competitor,
        source: value.source,
        isHotProject: value.isHotProject ?? false,
        notes: value.notes,
        isActive: value.isActive ?? true,
        projectParties: projectParties
          .filter((item) => item.customerId && item.role)
          .map((item) => ({
            customerId: item.customerId,
            role: item.role,
            remark: item.remark || null
          }))
      };

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

      await createMutation.mutateAsync(payload);
    }
  });

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

    setSelectedCustomerId(defaultValues.customerId);
    form.reset(defaultValues);
    setProjectParties(
      enquiry
        ? (projectPartiesQuery.data?.items ?? []).map((item) => ({
            key: item.id,
            customerId: item.customerId,
            role: item.role,
            remark: item.remark ?? ''
          }))
        : []
    );
  }, [defaultValues, enquiry, form, open, projectPartiesQuery.data?.items]);

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

    const ownerUserId =
      referenceData.customers.find((customer) => customer.id === selectedCustomerId)?.ownerUserId ?? '';

    form.setFieldValue('assignedToUserId', ownerUserId);
  }, [form, isEdit, open, referenceData.customers, selectedCustomerId]);

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

  const recordLabel = workspace === 'lead' ? 'ลีด' : 'โอกาสขาย';

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className='flex flex-col sm:max-w-4xl'>
        <SheetHeader>
          <SheetTitle>{isEdit ? `แก้ไข${recordLabel}` : `เพิ่ม${recordLabel}`}</SheetTitle>
          <SheetDescription>
            {workspace === 'lead'
              ? 'บันทึกข้อมูลลีดของฝ่ายการตลาดก่อนส่งต่อให้ฝ่ายขาย'
              : 'บันทึกข้อมูลโอกาสขายของฝ่ายขายก่อนเริ่มทำใบเสนอราคา'}
          </SheetDescription>
        </SheetHeader>

        <div className='flex-1 overflow-auto'>
          <form.AppForm>
            <form.Form id='enquiry-form-sheet' className='grid gap-4 md:grid-cols-2'>
              <form.AppField
                name='customerId'
                children={(field) => (
                  <field.FieldSet>
                    <field.Field>
                      <field.FieldLabel>ลูกค้าผู้รับใบเสนอราคา *</field.FieldLabel>
                      <Select
                        value={field.state.value ?? ''}
                        onValueChange={(value) => {
                          field.handleChange(value);
                          field.handleBlur();
                          setSelectedCustomerId(value);
                          form.setFieldValue('contactId', '');
                        }}
                      >
                        <SelectTrigger aria-label='ลูกค้า'>
                          <SelectValue placeholder='เลือกลูกค้า' />
                        </SelectTrigger>
                        <SelectContent>
                          {referenceData.customers.map((customer) => (
                            <SelectItem key={customer.id} value={customer.id}>
                              {customer.name} ({customer.code})
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </field.Field>
                    <field.FieldError />
                  </field.FieldSet>
                )}
              />

              <form.AppField
                name='contactId'
                children={(field) => (
                  <field.FieldSet>
                    <field.Field>
                      <field.FieldLabel>ผู้ติดต่อ</field.FieldLabel>
                      <Select
                        value={field.state.value ?? ''}
                        onValueChange={(value) => {
                          field.handleChange(value === '__none__' ? '' : value);
                          field.handleBlur();
                        }}
                      >
                        <SelectTrigger aria-label='ผู้ติดต่อ'>
                          <SelectValue placeholder='เลือกผู้ติดต่อ' />
                        </SelectTrigger>
                        <SelectContent>
                          {contactsForCustomer.length ? (
                            contactsForCustomer.map((contact) => (
                              <SelectItem key={contact.id} value={contact.id}>
                                {contact.name}
                                {contact.isPrimary ? ' (ผู้ติดต่อหลัก)' : ''}
                              </SelectItem>
                            ))
                          ) : (
                            <SelectItem value='__none__'>ไม่เลือกผู้ติดต่อ</SelectItem>
                          )}
                        </SelectContent>
                      </Select>
                    </field.Field>
                    <field.FieldError />
                  </field.FieldSet>
                )}
              />
              <FormSelectField
                name='assignedToUserId'
                label='Suggested Sales Owner'
                description={
                  selectedCustomer?.ownerName
                    ? `Suggested from customer owner: ${selectedCustomer.ownerName}`
                    : 'Optional sales owner suggestion for this lead or enquiry'
                }
                options={referenceData.assignableUsers.map((user) => ({
                  value: user.id,
                  label: user.name
                }))}
              />

              <FormTextField
                name='title'
                label='ชื่อรายการ'
                required
                placeholder='Warehouse crane upgrade enquiry'
              />
              <FormTextField
                name='projectName'
                label='ชื่อโครงการ'
                placeholder='Bangna Warehouse Expansion'
              />
              <FormTextField
                name='projectLocation'
                label='สถานที่โครงการ'
                placeholder='Bangkok'
              />
              <FormTextField
                name='source'
                label='ที่มา'
                placeholder='Existing customer referral'
              />
              <FormSelectField
                name='branchId'
                label='สาขา'
                options={referenceData.branches.map((branch) => ({
                  value: branch.id,
                  label: branch.name
                }))}
              />
              <FormSelectField
                name='productType'
                label='ประเภทสินค้า'
                required
                options={referenceData.productTypes.map((item) => ({
                  value: item.id,
                  label: item.label
                }))}
              />
              <FormSelectField
                name='status'
                label='สถานะ'
                required
                options={referenceData.statuses.map((item) => ({
                  value: item.id,
                  label: item.label
                }))}
              />
              <FormSelectField
                name='priority'
                label='ความสำคัญ'
                required
                options={referenceData.priorities.map((item) => ({
                  value: item.id,
                  label: item.label
                }))}
              />
              <FormSelectField
                name='leadChannel'
                label='ที่มาของลีด'
                options={referenceData.leadChannels.map((item) => ({
                  value: item.id,
                  label: item.label
                }))}
              />
              <FormTextField
                name='estimatedValue'
                label='มูลค่าประมาณการ'
                type='number'
                placeholder='2500000'
              />
              <FormTextField name='chancePercent' label='โอกาสปิดการขาย %' type='number' placeholder='60' />
              <FormTextField
                name='expectedCloseDate'
                label='วันที่คาดว่าจะปิดการขาย'
                placeholder='YYYY-MM-DD'
              />
              <FormTextField name='competitor' label='คู่แข่ง' placeholder='Other vendor name' />
              <div className='md:col-span-2'>
                <FormTextareaField
                  name='description'
                  label='รายละเอียด'
                  placeholder='สรุปภาพรวมของลีดหรือโอกาสขาย'
                />
              </div>
              <div className='md:col-span-2'>
                <FormTextareaField
                  name='requirement'
                  label='ความต้องการ'
                  placeholder='ความต้องการเชิงเทคนิคหรือเชิงพาณิชย์'
                />
              </div>
              <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='isHotProject'
                  label='โครงการด่วน'
                  description='ใช้สำหรับงานเร่งด่วนหรือโครงการสำคัญเชิงกลยุทธ์'
                />
                <FormSwitchField
                  name='isActive'
                  label='ใช้งานอยู่'
                  description='รายการที่ปิดใช้งานจะยังอยู่ในประวัติ แต่ไม่ควรถูกดำเนินการต่อ'
                />
              </div>
              <div className='md:col-span-2'>
                <ProjectPartiesEditor
                  customers={referenceData.customers}
                  roles={referenceData.projectPartyRoles}
                  items={projectParties}
                  onChange={setProjectParties}
                />
              </div>
            </form.Form>
          </form.AppForm>
        </div>

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

export function EnquiryFormSheetTrigger({
  referenceData,
  workspace = 'enquiry'
}: {
  referenceData: EnquiryReferenceData;
  workspace?: 'lead' | 'enquiry';
}) {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        <Icons.add className='mr-2 h-4 w-4' /> {workspace === 'lead' ? 'เพิ่มลีด' : 'เพิ่มโอกาสขาย'}
      </Button>
      <EnquiryFormSheet
        open={open}
        onOpenChange={setOpen}
        referenceData={referenceData}
        workspace={workspace}
      />
    </>
  );
}