"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
    Activity,
    Plus,
    Clock,
    User,
    MessageSquare,
    Package,
    History,
    FileText,
} from "lucide-react"
import {
    useGetExpansionSignalsByCustomerQuery,
    useCreateExpansionSignalMutation,
    type ExpansionSignal,
} from "@/api/rtk/expansion-signals-api"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { ReactSelect } from "@/components/ui/react-select"
import { toast } from "sonner"
import { cn } from "@/lib/utils"
import { Loading } from "@/components/ui/loading"

const ADD_SIGNAL_TYPE_OPTIONS = [
    { value: "Upsell - Product Expansion", label: "Upsell - Product Expansion" },
    { value: "Upsell - Seat Expansion", label: "Upsell - Seat Expansion" },
    { value: "Cross-sell - New Service", label: "Cross-sell - New Service" },
    { value: "TSC Validation Required", label: "TSC Validation Required" },
    { value: "Renewal Opportunity", label: "Renewal Opportunity" },
]

const ADD_SIGNAL_URGENCY_OPTIONS = [
    { value: "LOW", label: "Low" },
    { value: "MEDIUM", label: "Medium" },
    { value: "HIGH", label: "High" },
    { value: "URGENT", label: "Urgent" },
]

export function ExpansionSignalsSection({ customerId }: { customerId: string }) {
    const { data: signals, isLoading } = useGetExpansionSignalsByCustomerQuery(customerId)
    const [isAddModalOpen, setIsAddModalOpen] = React.useState(false)

    if (isLoading) {
        return (
            <Loading
                className="p-8"
                size="md"
                spinnerClassName="text-[#6C63FF]"
            />
        )
    }

    return (
        <div className="mt-8">
            <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-2">
                    <span className="text-[#6C63FF]/60">
                        <Activity size={14} />
                    </span>
                    <h3 className="text-[11px] font-semibold text-gray-400 uppercase tracking-widest">
                        Expansion Signals (Upsells)
                    </h3>
                </div>
                {/* <Button
                    variant="ghost"
                    size="sm"
                    className="h-7 text-[10px] gap-1.5 text-[#6C63FF] hover:text-[#6C63FF] hover:bg-[#6C63FF]/5 px-2"
                    onClick={() => setIsAddModalOpen(true)}
                >
                    <Plus size={12} /> Add signal
                </Button> */}
            </div>

            {!signals || signals.length === 0 ? (
                <div className="p-8 rounded-3xl border border-dashed border-gray-200 flex flex-col items-center justify-center gap-2 bg-gray-50/30">
                    <div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-400">
                        <Activity size={20} />
                    </div>
                    <p className="text-[12px] text-gray-400 font-medium">No signals recorded yet</p>
                </div>
            ) : (
                <div className="grid grid-cols-1 gap-4">
                    {signals.map((signal) => (
                        <SignalCard key={signal.id} signal={signal} />
                    ))}
                </div>
            )}

            <AddSignalModal
                customerId={customerId}
                isOpen={isAddModalOpen}
                onClose={() => setIsAddModalOpen(false)}
            />
        </div>
    )
}

function SignalCard({ signal }: { signal: ExpansionSignal }) {
    const urgencyColors: Record<string, string> = {
        LOW: "bg-blue-50 text-blue-600 border-blue-100",
        MEDIUM: "bg-amber-50 text-amber-600 border-amber-100",
        HIGH: "bg-orange-50 text-orange-600 border-orange-100",
        URGENT: "bg-red-50 text-red-600 border-red-100",
    }

    return (
        <div className="p-5 rounded-2xl bg-white border border-gray-100 shadow-sm hover:border-[#6C63FF]/20 transition-all group">
            <div className="flex items-start justify-between mb-4">
                <div className="flex flex-col gap-1">
                    <div className="flex items-center gap-2">
                        <span className="text-[13px] font-semibold text-gray-800 font-['Lexend']">
                            {signal.signalType}
                        </span>
                        <Badge
                            variant="outline"
                            className={cn(
                                "text-[9px] px-1.5 py-0 font-['Lexend_Deca'] uppercase tracking-wider",
                                urgencyColors[signal.urgency] || urgencyColors.MEDIUM
                            )}
                        >
                            {signal.urgency}
                        </Badge>
                    </div>
                    <p className="text-[11px] text-gray-400 flex items-center gap-1.5">
                        <Clock size={10} />
                        {new Date(signal.createdAt).toLocaleDateString()} at{" "}
                        {new Date(signal.createdAt).toLocaleTimeString([], {
                            hour: "2-digit",
                            minute: "2-digit",
                        })}
                    </p>
                </div>
                <div className="flex items-center gap-2">
                    <div className="h-6 w-6 rounded-full bg-[#6C63FF]/10 flex items-center justify-center text-[#6C63FF]">
                        <User size={12} />
                    </div>
                    <span className="text-[11px] font-medium text-gray-600">
                        {signal.createdBy?.name || "Unknown"}
                    </span>
                </div>
            </div>

            <div className="space-y-3">
                {signal.summary && (
                    <div className="flex gap-2.5">
                        <div className="mt-0.5 text-gray-400 flex-shrink-0">
                            <FileText size={12} />
                        </div>
                        <div className="flex flex-col gap-0.5">
                            <span className="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Summary</span>
                            <p className="text-[12px] text-gray-600 leading-relaxed font-['Lexend']">{signal.summary}</p>
                        </div>
                    </div>
                )}

                {signal.clientLanguage && (
                    <div className="flex gap-2.5">
                        <div className="mt-0.5 text-gray-400 flex-shrink-0">
                            <MessageSquare size={12} />
                        </div>
                        <div className="flex flex-col gap-0.5">
                            <span className="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Exact Client Language</span>
                            <p className="text-[12px] italic text-gray-500 bg-gray-50 p-2 rounded-lg border-l-2 border-gray-200">
                                "{signal.clientLanguage}"
                            </p>
                        </div>
                    </div>
                )}

                {(signal.briefingPackage || signal.accountContext) && (
                    <div className="grid grid-cols-2 gap-4 mt-2 pt-2 border-t border-gray-50">
                        {signal.briefingPackage && (
                            <div className="flex flex-col gap-1">
                                <div className="flex items-center gap-1.5 text-gray-400">
                                    <Package size={10} />
                                    <span className="text-[9px] font-semibold uppercase tracking-wider">Briefing Package</span>
                                </div>
                                <p className="text-[11px] text-gray-600 line-clamp-2">{signal.briefingPackage}</p>
                            </div>
                        )}
                        {signal.accountContext && (
                            <div className="flex flex-col gap-1">
                                <div className="flex items-center gap-1.5 text-gray-400">
                                    <History size={10} />
                                    <span className="text-[9px] font-semibold uppercase tracking-wider">Account Context</span>
                                </div>
                                <p className="text-[11px] text-gray-600 line-clamp-2">{signal.accountContext}</p>
                            </div>
                        )}
                    </div>
                )}
            </div>
        </div>
    )
}

function AddSignalModal({
    customerId,
    isOpen,
    onClose,
}: {
    customerId: string
    isOpen: boolean
    onClose: () => void
}) {
    const [createSignal, { isLoading }] = useCreateExpansionSignalMutation()
    const [formData, setFormData] = React.useState({
        signalType: "",
        urgency: "MEDIUM",
        clientLanguage: "",
        briefingPackage: "",
        accountContext: "",
        summary: "",
    })

    const handleSave = async () => {
        if (!formData.signalType) {
            toast.error("Please specify a signal type")
            return
        }
        try {
            await createSignal({ customerId, ...formData }).unwrap()
            toast.success("Expansion signal added successfully")
            onClose()
            setFormData({
                signalType: "",
                urgency: "MEDIUM",
                clientLanguage: "",
                briefingPackage: "",
                accountContext: "",
                summary: "",
            })
        } catch (err) {
            toast.error("Failed to add expansion signal")
        }
    }

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle className="text-xl font-['Lexend']">Add Expansion Signal</DialogTitle>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                    <div className="grid gap-2">
                        <Label htmlFor="signalType" className="text-xs uppercase tracking-wider text-gray-400 font-semibold">Signal Type</Label>
                        <ReactSelect
                            id="signalType"
                            value={formData.signalType}
                            onValueChange={(v) => setFormData({ ...formData, signalType: v })}
                            options={ADD_SIGNAL_TYPE_OPTIONS}
                            placeholder="Select signal type"
                            triggerClassName="min-h-10"
                        />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="urgency" className="text-xs uppercase tracking-wider text-gray-400 font-semibold">Urgency</Label>
                        <ReactSelect
                            id="urgency"
                            value={formData.urgency}
                            onValueChange={(v) => setFormData({ ...formData, urgency: v })}
                            options={ADD_SIGNAL_URGENCY_OPTIONS}
                            triggerClassName="min-h-10"
                        />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="summary" className="text-xs uppercase tracking-wider text-gray-400 font-semibold">Signal Summary</Label>
                        <Textarea
                            id="summary"
                            placeholder="Briefly describe the signal..."
                            className="h-20"
                            value={formData.summary}
                            onChange={(e) => setFormData({ ...formData, summary: e.target.value })}
                        />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="clientLanguage" className="text-xs uppercase tracking-wider text-gray-400 font-semibold">Exact Client Language</Label>
                        <Textarea
                            id="clientLanguage"
                            placeholder="What did the client say exactly?"
                            className="h-20"
                            value={formData.clientLanguage}
                            onChange={(e) => setFormData({ ...formData, clientLanguage: e.target.value })}
                        />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="briefingPackage" className="text-xs uppercase tracking-wider text-gray-400 font-semibold">AE Briefing Package</Label>
                        <Input
                            id="briefingPackage"
                            placeholder="Links or materials for the AE..."
                            value={formData.briefingPackage}
                            onChange={(e) => setFormData({ ...formData, briefingPackage: e.target.value })}
                        />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="accountContext" className="text-xs uppercase tracking-wider text-gray-400 font-semibold">Account Context</Label>
                        <Input
                            id="accountContext"
                            placeholder="Current account state or history..."
                            value={formData.accountContext}
                            onChange={(e) => setFormData({ ...formData, accountContext: e.target.value })}
                        />
                    </div>
                </div>
                <DialogFooter className="gap-2 sm:justify-start">
                    <Button
                        type="button"
                        className="bg-[#6C63FF] hover:bg-[#5A52D5]"
                        onClick={handleSave}
                        disabled={isLoading}
                    >
                        {isLoading ? "Saving..." : "Save Signal"}
                    </Button>
                    <Button
                        type="button"
                        variant="ghost"
                        onClick={onClose}
                        disabled={isLoading}
                    >
                        Cancel
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}