"use client"

import * as React from "react"
import { usePathname } from "next/navigation"
import { useForm, type Resolver } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"

import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

import { useAppDispatch, useAppSelector } from "@/store/hooks"
import {
    selectBusinessDealDialog,
    closeBusinessDealDialog,
    setActiveTab,
} from "@/store/slices/business-deal-dialog-slice"

import { Can } from "@/components/providers/ability-provider"
import { GridIcon } from "./deal-form-helpers"

import { FormValues, formSchema, defaultValues } from "@/components/deals/business-deal-form-types"
import { BusinessDealForm } from "@/components/deals/BusinessDealForm"
import { AddDealImportTab } from "./add-deal-import-tab"

/** Lead detail routes (`/leads/:uuid`, sub-pages) — bulk import belongs on the board, not here. */
const LEAD_DETAIL_ROUTE =
    /^\/leads\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}(\/|$)/i

export function BusinessDealFormDialog() {
    const dispatch = useAppDispatch()
    const pathname = usePathname()
    const { open, mode, prefill, activeTab } = useAppSelector(selectBusinessDealDialog)
    const hideImportTab = LEAD_DETAIL_ROUTE.test(pathname ?? "")

    const form = useForm<FormValues>({
        resolver: yupResolver(formSchema) as Resolver<FormValues>,
        defaultValues,
        mode: "onTouched",
    })

    const { reset, watch } = form
    const watchedPipelineId = watch("pipelineId")

    // Sync prefill into form state when dialog opens
    React.useEffect(() => {
        if (!open) return
        if (mode === "create") {
            reset({
                ...defaultValues,
                ...prefill,
                linkKind: prefill?.leadId?.trim() ? "lead" : "customer",
                leadId: prefill?.leadId ?? "",
                customerId: prefill?.customerId ?? "",
                aeIds: prefill?.aeIds ?? [],
                pipelineStageId: "",
                pipelineSubStageId: "",
                pipelineId: "",
            })
        }
    }, [open, mode, prefill, reset])

    React.useEffect(() => {
        if (hideImportTab && activeTab === "import") {
            dispatch(setActiveTab("details"))
        }
        if (activeTab === "notes") {
            dispatch(setActiveTab("details"))
        }
    }, [hideImportTab, activeTab, dispatch])

    return (
        <Dialog
            open={open}
            onOpenChange={(isOpen) => {
                if (!isOpen) dispatch(closeBusinessDealDialog())
            }}


        >
            <DialogContent className="sm:max-w-[1120px] w-full h-full sm:h-[95vh] sm:max-h-[95vh] p-0 overflow-hidden bg-white rounded-none sm:rounded-3xl shadow-2xl flex flex-col border-none">
                {/* HEADER - MATCHING ADD-DEAL-MODAL */}
                <div className="relative overflow-hidden shrink-0">
                    <div className="absolute inset-0 bg-linear-to-br from-[#6C63FF] via-[#7C74FF] to-[#9B8FFF] opacity-100" />
                    <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.12),transparent_60%)]" />

                    <div className="relative px-5 md:px-7 py-4 md:py-5 flex items-start justify-between gap-4">
                        <div className="flex items-center gap-3 md:gap-4 min-w-0">
                            <div className="h-10 w-10 md:h-12 md:w-12 rounded-xl bg-white/15 border border-white/25 backdrop-blur-sm flex items-center justify-center shrink-0 shadow-inner">
                                <GridIcon className="text-white/90 size-5 md:size-6" />
                            </div>
                            <div className="min-w-0 text-left">
                                <DialogTitle className="text-[18px] md:text-[20px] font-extrabold text-white leading-tight truncate">
                                    {mode === "create"
                                        ? "New Business Deal"
                                        : mode === "view"
                                            ? "Deal Details"
                                            : "Edit Business Deal"}
                                </DialogTitle>
                                <div className="text-[12px] md:text-[13px] text-white/75 font-medium mt-0.5 md:mt-1">
                                    {mode === "create"
                                        ? "Configure your new deal opportunity"
                                        : "Review and manage deal specifics"}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <Tabs
                    value={activeTab}
                    onValueChange={(v) => dispatch(setActiveTab(v))}
                    className="flex flex-col flex-1 min-h-0 overflow-hidden"
                >
                    <div className="px-5 md:px-7 pt-4 pb-2 shrink-0 border-b border-gray-100">
                        <TabsList className="bg-gray-100/80 p-1 rounded-xl w-full flex justify-start gap-1">
                            <TabsTrigger
                                value="details"
                                className="px-6 py-2 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm text-sm font-semibold transition-all"
                            >
                                Details
                            </TabsTrigger>
                            {!hideImportTab ? (
                                <Can action="import" subject="Deal">
                                    <TabsTrigger
                                        value="import"
                                        className="px-6 py-2 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm text-sm font-semibold transition-all flex items-center gap-2"
                                    >
                                        <GridIcon className="size-4 opacity-70" />
                                        Import
                                    </TabsTrigger>
                                </Can>
                            ) : null}
                        </TabsList>
                    </div>

                    <div className="flex flex-col flex-1 min-h-0 overflow-hidden bg-white relative">
                        {activeTab !== "import" && (
                            <BusinessDealForm form={form} hideCustomerLink={hideImportTab} />
                        )}

                        {!hideImportTab ? (
                            <TabsContent
                                value="import"
                                className="absolute inset-0 m-0 outline-none overflow-hidden data-[state=active]:flex data-[state=active]:flex-col bg-white"
                            >
                            <div className="flex-1 min-h-0 relative">
                                <AddDealImportTab
                                    hideTargetSelection={true}
                                    defaultTargetType="DEAL"
                                    pipelineId={
                                        watchedPipelineId?.trim() ||
                                        prefill?.pipelineId?.trim() ||
                                        null
                                    }
                                    sessionKey="business-deal-import-dialog"
                                    onClose={() => dispatch(closeBusinessDealDialog())}
                                />
                            </div>
                            </TabsContent>
                        ) : null}
                    </div>
                </Tabs>
            </DialogContent>
        </Dialog>
    )
}