"use client"

import * as React from "react"
import { MessageSquare } from "lucide-react"
import { toast } from "sonner"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { UserAvatar } from "@/components/ui/user-avatar"
import { cn } from "@/lib/utils"
import {
    DealNoteComposer,
    getEditableTextFromNote,
    getNoteImageUrls,
    mergeEditedNoteTextWithImages,
    NoteContent,
} from "./deal-note-composer"
import { getNoteImageDisplayUrl, type NoteImageUploadResult } from "@/api/client"
import { logNotesDialogImageInventory } from "@/lib/note-image-debug"
import type { Deal } from "./types"

export interface LeadDetailNotesDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    deal: Deal
    apiBaseUrl: string
    canEditNotes: boolean
    isFetching: boolean
    onAddNote: (content: string) => Promise<void>
    onUpdateNote: (noteId: string, text: string) => Promise<void>
    onDeleteNote: (noteId: string) => void
    uploadNoteImage: (dealId: string, file: File) => Promise<NoteImageUploadResult>
}

export function LeadDetailNotesDialog({
    open,
    onOpenChange,
    deal,
    apiBaseUrl,
    canEditNotes,
    isFetching,
    onAddNote,
    onUpdateNote,
    onDeleteNote,
    uploadNoteImage,
}: LeadDetailNotesDialogProps) {
    const [editingNoteId, setEditingNoteId] = React.useState<string | null>(null)
    const [editingNoteText, setEditingNoteText] = React.useState("")
    const [editingNoteRemainingImageUrls, setEditingNoteRemainingImageUrls] = React.useState<string[] | null>(null)
    const [editingNoteUploadingImage, setEditingNoteUploadingImage] = React.useState(false)
    const editNoteFileInputRef = React.useRef<HTMLInputElement>(null)
    const notesEndRef = React.useRef<HTMLDivElement>(null)

    React.useEffect(() => {
        if (!open) {
            setEditingNoteId(null)
            setEditingNoteText("")
            setEditingNoteRemainingImageUrls(null)
        }
    }, [open])

    React.useEffect(() => {
        if (!open) return
        logNotesDialogImageInventory(
            deal.id,
            deal.dealNotes ?? [],
            apiBaseUrl,
            getNoteImageDisplayUrl,
        )
    }, [open, deal.id, deal.dealNotes, apiBaseUrl])

    const handleEditNoteAddImage = async (file: File) => {
        if (!canEditNotes || !file.type.startsWith("image/")) return
        setEditingNoteUploadingImage(true)
        try {
            const res = await uploadNoteImage(deal.id, file)
            const displayUrl = getNoteImageDisplayUrl(res.url)
            setEditingNoteRemainingImageUrls((prev) => [...(prev ?? []), displayUrl])
        } catch (err) {
            console.error("Failed to upload image:", err)
            const msg = err instanceof Error ? err.message : "Failed to upload image"
            toast.error(msg)
        } finally {
            setEditingNoteUploadingImage(false)
        }
    }

    const noteCount = deal.dealNotes?.length ?? 0

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="flex max-h-[min(640px,90vh)] w-[min(520px,96vw)] flex-col gap-0 overflow-hidden p-0">
                <DialogHeader className="shrink-0 border-b border-gray-100 px-5 py-4">
                    <DialogTitle className="font-['Lexend'] text-base font-semibold">
                        Notes {noteCount > 0 ? `(${noteCount})` : ""}
                    </DialogTitle>
                </DialogHeader>

                <div className="flex min-h-0 flex-1 flex-col">
                    {isFetching ? (
                        <div className="shrink-0 border-b border-gray-50 px-5 py-2 text-[11px] font-medium text-[#6C63FF]">
                            Syncing…
                        </div>
                    ) : null}

                    <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4 space-y-4 scrollbar-themed">
                        {deal.dealNotes?.length ? (
                            deal.dealNotes.map((note) => (
                                <div key={note.id} className="group flex gap-3">
                                    <UserAvatar
                                        avatar={note.author?.profile?.avatar}
                                        name={note.author?.name}
                                        size="sm"
                                    />
                                    <div className="min-w-0 flex-1">
                                        <div className="rounded-xl border border-gray-100 bg-gray-50 p-3">
                                            <div className="mb-1 flex items-center justify-between gap-2">
                                                <span className="text-[13px] font-semibold text-gray-900">
                                                    {note.author?.name}
                                                </span>
                                                <span className="text-[10px] text-gray-400">
                                                    {new Date(note.createdAt).toLocaleString()}
                                                </span>
                                            </div>
                                            {editingNoteId === note.id ? (
                                                <div className="space-y-2">
                                                    <Textarea
                                                        className="min-h-[60px] rounded-lg text-[13px]"
                                                        value={editingNoteText}
                                                        onChange={(e) => setEditingNoteText(e.target.value)}
                                                        autoFocus
                                                    />
                                                    <div className="flex gap-2">
                                                        <Button
                                                            size="sm"
                                                            onClick={() =>
                                                                void onUpdateNote(
                                                                    note.id,
                                                                    mergeEditedNoteTextWithImages(
                                                                        editingNoteText,
                                                                        editingNoteRemainingImageUrls ?? [],
                                                                        apiBaseUrl,
                                                                    ),
                                                                ).then(() => {
                                                                    setEditingNoteId(null)
                                                                    setEditingNoteText("")
                                                                    setEditingNoteRemainingImageUrls(null)
                                                                })
                                                            }
                                                        >
                                                            Save
                                                        </Button>
                                                        <Button
                                                            size="sm"
                                                            variant="ghost"
                                                            onClick={() => {
                                                                setEditingNoteId(null)
                                                                setEditingNoteText("")
                                                                setEditingNoteRemainingImageUrls(null)
                                                            }}
                                                        >
                                                            Cancel
                                                        </Button>
                                                    </div>
                                                </div>
                                            ) : (
                                                <NoteContent text={note.text} apiBaseUrl={apiBaseUrl} />
                                            )}
                                        </div>
                                        {editingNoteId !== note.id && canEditNotes ? (
                                            <div className="mt-1 flex gap-3 opacity-0 transition-opacity group-hover:opacity-100">
                                                <button
                                                    type="button"
                                                    className="text-[11px] font-semibold text-gray-500 hover:text-[#6C63FF]"
                                                    onClick={() => {
                                                        setEditingNoteId(note.id)
                                                        setEditingNoteText(getEditableTextFromNote(note.text))
                                                        setEditingNoteRemainingImageUrls(
                                                            getNoteImageUrls(note.text, apiBaseUrl),
                                                        )
                                                    }}
                                                >
                                                    Edit
                                                </button>
                                                <button
                                                    type="button"
                                                    className="text-[11px] font-semibold text-gray-500 hover:text-red-600"
                                                    onClick={() => onDeleteNote(note.id)}
                                                >
                                                    Delete
                                                </button>
                                            </div>
                                        ) : null}
                                    </div>
                                </div>
                            ))
                        ) : (
                            <div className="flex flex-col items-center py-12 text-center opacity-40">
                                <MessageSquare className="mb-2 size-10 text-gray-400" />
                                <p className="text-[12px] font-semibold uppercase tracking-widest text-gray-400">
                                    No notes yet
                                </p>
                            </div>
                        )}
                        <div ref={notesEndRef} />
                    </div>

                    <div className="shrink-0 border-t border-gray-100 bg-white px-5 py-4">
                        <DealNoteComposer
                            dealId={deal.id}
                            apiBaseUrl={apiBaseUrl}
                            disabled={!canEditNotes}
                            placeholder="Write a note…"
                            onSend={async (content) => {
                                await onAddNote(content)
                                setTimeout(() => notesEndRef.current?.scrollIntoView({ behavior: "smooth" }), 100)
                            }}
                            uploadImage={uploadNoteImage}
                        />
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    )
}