'use client'

import { useState, useEffect } from 'react'
import Button from '@/components/ui/Button'
import toast from '@/components/ui/toast'
import Notification from '@/components/ui/Notification'
import Container from '@/components/shared/Container'
import ConfirmDialog from '@/components/shared/ConfirmDialog'
import OrderDetailsHeader from './components/OrderDetailsHeader'
import OrderForm from './components/OrderForm'
import OrderFooter from './components/OrderFooter'
import { LiTrash } from '@/icons'
import sleep from '@/utils/sleep'
import { useParams, useRouter } from 'next/navigation'
import type { FormMode, OrderFormData, Order } from './types'

type OrderDetailsProps = {
    data?: Order
}

const OrderDetails = ({ data }: OrderDetailsProps) => {
    const { orderId } = useParams<{ orderId: string }>() || { orderId: '' }

    const mode: FormMode = orderId ? 'edit' : 'create'

    const router = useRouter()

    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false)
    const [isSubmitting, setIsSubmitting] = useState(false)
    const [isDraftSaving, setIsDraftSaving] = useState(false)
    const [isDeleting, setIsDeleting] = useState(false)
    const [orderData, setOrderData] = useState<Order | null>(null)

    useEffect(() => {
        if (data && mode === 'edit') {
            setOrderData(data)
        }
    }, [data, mode])

    const handleSubmit = async (formData: OrderFormData) => {
        setIsSubmitting(true)

        try {
            if (mode === 'create') {
                await sleep(1000)
                toast.push(
                    <Notification
                        type="success"
                        title={'سفارش با موفقیت ایجاد شد'}
                    />,
                )
                console.log('formData', formData)
                router.push('/apps/sales/orders')
            } else if (mode === 'edit' && orderId) {
                await sleep(1000)
                toast.push(
                    <Notification
                        type="success"
                        title={'سفارش با موفقیت به‌روزرسانی شد'}
                    />,
                )
            }
        } catch (error) {
            console.error('Error submitting order:', error)
            toast.push(
                <Notification
                    type="danger"
                    title={
                        error instanceof Error
                            ? error.message
                            : 'ذخیره سفارش ناموفق بود'
                    }
                />,
            )
        } finally {
            setIsSubmitting(false)
        }
    }

    const handleSaveDraft = async (formData: OrderFormData) => {
        setIsDraftSaving(true)
        try {
            await sleep(1000)
            toast.push(
                <Notification
                    type="success"
                    title="پیش‌نویس با موفقیت ذخیره شد"
                />,
            )
            console.log('formData', formData)
        } catch (error) {
            console.error('Error saving draft:', error)
            toast.push(
                <Notification
                    type="danger"
                    title={
                        error instanceof Error
                            ? error.message
                            : 'ذخیره پیش‌نویس ناموفق بود'
                    }
                />,
            )
        } finally {
            setIsDraftSaving(false)
        }
    }

    const handleDelete = async () => {
        if (mode === 'edit' && orderId) {
            setIsDeleting(true)
        } else {
            router.push('/apps/sales/orders')
        }
    }

    const handleCancel = () => {
        setDeleteConfirmationOpen(false)
    }

    return (
        <div className="h-full">
            <div className="flex flex-col h-[calc(100%-100px)]">
                <OrderDetailsHeader
                    mode={mode}
                    data={
                        orderData
                            ? { id: orderData.orderNumber || orderData.id }
                            : undefined
                    }
                />
                <Container size="md" className="p-4">
                    <OrderForm
                        mode={mode}
                        orderId={orderId}
                        onSubmit={handleSubmit}
                        onSaveDraft={handleSaveDraft}
                        initialData={orderData}
                    />
                </Container>
            </div>
            <OrderFooter containerSize="md">
                <div className="flex items-center justify-between gap-2 px-4">
                    <div>
                        <Button
                            className="text-error hover:text-error font-semibold sm:hidden"
                            icon={<LiTrash />}
                            onClick={() => setDeleteConfirmationOpen(true)}
                            loading={isDeleting}
                        />
                        <Button
                            className="text-error hover:text-error font-semibold hidden sm:flex"
                            icon={<LiTrash />}
                            onClick={() => setDeleteConfirmationOpen(true)}
                            loading={isDeleting}
                        >
                            <span>
                                {mode === 'edit' ? 'حذف' : 'انصراف'}
                            </span>
                        </Button>
                    </div>
                    <div className="flex items-center gap-2">
                        <Button loading={isDraftSaving} disabled={isSubmitting}>
                            ذخیره پیش‌نویس
                        </Button>
                        <Button
                            variant="solid"
                            form="order-form"
                            loading={isSubmitting}
                            disabled={isDraftSaving}
                        >
                            {mode === 'edit' ? 'ذخیره سفارش' : 'ایجاد سفارش'}
                        </Button>
                    </div>
                </div>
            </OrderFooter>
            <ConfirmDialog
                isOpen={deleteConfirmationOpen}
                type="danger"
                title={mode === 'edit' ? 'حذف سفارش' : 'انصراف از تغییرات'}
                onClose={handleCancel}
                onCancel={handleCancel}
                onConfirm={handleDelete}
            >
                <p>
                    {mode === 'edit'
                        ? 'آیا مطمئن هستید که می‌خواهید این سفارش را حذف کنید؟ این عمل قابل بازگشت نیست.'
                        : 'آیا مطمئن هستید که می‌خواهید از تغییرات خود انصراف دهید؟ تمام داده‌های ذخیره نشده از دست خواهند رفت.'}
                </p>
            </ConfirmDialog>
        </div>
    )
}

export default OrderDetails