"use client"

import * as React from "react"
import { useParams, useRouter } from "next/navigation"
import { CustomerDetailView } from "@/components/customers/customer-detail-view"
import { EditCustomerModal } from "@/components/customers/edit-customer-modal"
import { useAuthToken } from "@/hooks/use-auth-token"
import { useGetTeamsQuery } from "@/api/rtk/teams-api"
import { useGetCustomerQuery } from "@/api/rtk/customers-api"
import type { CustomerBackend } from "@/api/rtk/customers-api"
import type { Customer, CustomerStatus } from "@/components/customers/types"
import { hasPermission, isAdminUser, type PermissionSource } from "@/lib/permissions"
import { useSession } from "next-auth/react"

function mapBackendToCustomer(c: CustomerBackend): Customer {
    const name =
        c.fullName ?? c.customerName ?? c.companyName ?? ""
    const initials =
        name.split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase() ||
        "—"
    return {
        id: c.id,
        name,
        initials,
        company: c.companyName ?? c.company ?? "",
        email: c.email ?? "",
        phone: c.phone ?? "",
        dealValue: Number(c.totalLifetimeValue) || 0,
        rep: c.assignedAm?.name ?? c.owner?.name ?? "",
        repAv: "",
        team: c.team ?? "",
        lastPurchase: "N/A",
        status: (c.customerStatus as CustomerStatus) ?? "Active",
        color: "#6C63FF",
        addressUsa: c.addressUsa ?? "",
        addressIntl: c.addressIntl ?? "",
        postalCode: c.postalCode ?? "",
        country: c.country ?? "",
        website: c.website ?? "",
        brand: c.brand ?? "",
        assignedAmId: c.assignedAmId ?? "",
        accountTier: c.accountTier ?? "",
        contractExpiryDate: c.contractExpiryDate ?? "",
        npsScore: c.npsScore ?? undefined,
        npsDate: c.npsDate ?? "",
        notes: c.notes ?? "",
        signalType: c.signalType ?? "",
        urgency: c.urgency ?? "",
        clientLanguage: c.clientLanguage ?? "",
        briefingPackage: c.briefingPackage ?? "",
        accountContext: c.accountContext ?? "",
        signalSummary: c.signalSummary ?? "",
    }
}

export default function CustomerDetailPage() {
    const params = useParams()
    const router = useRouter()
    const { token } = useAuthToken()
    const { data: session } = useSession()
    const customerId = params.id as string
    const [editOpen, setEditOpen] = React.useState(false)

    const { data: teams } = useGetTeamsQuery(undefined, { skip: !token })
    const { data: customerBackend } = useGetCustomerQuery(customerId, {
        skip: !token || !customerId,
    })

    const permissionSource = (session as { backendUser?: PermissionSource } | null)
        ?.backendUser
    const isAdmin = isAdminUser(permissionSource)
    const canUpdateCustomers =
        isAdmin ||
        hasPermission(permissionSource, "UPDATE", "CUSTOMER")

    const customerForEdit = React.useMemo(
        () => (customerBackend ? mapBackendToCustomer(customerBackend) : null),
        [customerBackend]
    )

    if (!token) return null

    return (
        <>
            <CustomerDetailView
                customerId={customerId}
                fetchEnabled={!!customerId}
                variant="page"
                onBack={() => router.push("/customers")}
                onEdit={
                    canUpdateCustomers
                        ? () => setEditOpen(true)
                        : undefined
                }
            />
            <EditCustomerModal
                customer={customerForEdit}
                isOpen={editOpen}
                onClose={() => setEditOpen(false)}
                teams={teams}
            />
        </>
    )
}