"use client"

import * as React from "react"
import { Bell, CheckCircle2, Trash2, Users2 } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { MultiSelect } from "@/components/ui/multi-select"
import { DateTimePicker } from "@/components/ui/date-time-picker"
import { cn } from "@/lib/utils"
import type { Deal, DealReminder } from "./types"

export interface LeadDetailRemindersDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    deal: Deal
    reminderText: string
    setReminderText: (v: string) => void
    reminderDate: string
    setReminderDate: (v: string) => void
    reminderTarget: "SELF" | "USERS"
    setReminderTarget: (v: "SELF" | "USERS") => void
    selectedUserIds: string[]
    setSelectedUserIds: (v: string[]) => void
    reminderErrors: { text?: string; date?: string; users?: string }
    setReminderErrors: React.Dispatch<React.SetStateAction<{ text?: string; date?: string; users?: string }>>
    reminderUserOptions: { value: string; label: string }[]
    allUsers: { id: string; name: string }[]
    onAddReminder: () => Promise<void>
    onDeleteReminder: (id: string) => void
}

export function LeadDetailRemindersDialog({
    open,
    onOpenChange,
    deal,
    reminderText,
    setReminderText,
    reminderDate,
    setReminderDate,
    reminderTarget,
    setReminderTarget,
    selectedUserIds,
    setSelectedUserIds,
    reminderErrors,
    setReminderErrors,
    reminderUserOptions,
    allUsers,
    onAddReminder,
    onDeleteReminder,
}: LeadDetailRemindersDialogProps) {
    const reminderCount = deal.dealReminders?.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">
                        Reminders {reminderCount > 0 ? `(${reminderCount})` : ""}
                    </DialogTitle>
                </DialogHeader>

                <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4 space-y-5 scrollbar-themed">
                    <div className="space-y-3 rounded-xl border border-gray-100 bg-gray-50/80 p-4">
                        <Textarea
                            className={cn(
                                "min-h-[72px] rounded-lg text-[13px] bg-white",
                                reminderErrors.text && "border-red-400",
                            )}
                            placeholder="Reminder text…"
                            value={reminderText}
                            onChange={(e) => {
                                setReminderText(e.target.value)
                                if (reminderErrors.text) setReminderErrors((p) => ({ ...p, text: undefined }))
                            }}
                        />
                        <DateTimePicker
                            value={reminderDate}
                            onChange={(v) => {
                                setReminderDate(v ?? "")
                                if (reminderErrors.date) setReminderErrors((p) => ({ ...p, date: undefined }))
                            }}
                            placeholder="Select date & time"
                        />
                        {reminderTarget === "USERS" ? (
                            <MultiSelect
                                options={reminderUserOptions}
                                value={selectedUserIds}
                                onValueChange={(ids) => {
                                    setSelectedUserIds(ids)
                                    if (reminderErrors.users) {
                                        setReminderErrors((p) => ({ ...p, users: undefined }))
                                    }
                                }}
                                placeholder="Select users…"
                            />
                        ) : null}
                        <div className="flex flex-wrap items-center gap-2">
                            <Button
                                size="sm"
                                variant={reminderTarget === "SELF" ? "default" : "outline"}
                                onClick={() => setReminderTarget("SELF")}
                            >
                                Me only
                            </Button>
                            <Button
                                size="sm"
                                variant={reminderTarget === "USERS" ? "default" : "outline"}
                                onClick={() => setReminderTarget("USERS")}
                            >
                                <Users2 className="mr-1 size-3.5" />
                                Users
                            </Button>
                            <Button
                                size="sm"
                                className="ml-auto"
                                onClick={() => void onAddReminder()}
                                disabled={
                                    !reminderText.trim() ||
                                    !reminderDate ||
                                    (reminderTarget === "USERS" && selectedUserIds.length === 0)
                                }
                            >
                                Add
                            </Button>
                        </div>
                    </div>

                    <div className="space-y-2">
                        {(deal.dealReminders?.length ?? 0) > 0 ? (
                            deal.dealReminders!.map((r: DealReminder) => {
                                const targetUserNames =
                                    r.targetType === "USERS" && r.targetUserIds?.length
                                        ? r.targetUserIds
                                              .map((id) => allUsers.find((u) => u.id === id)?.name)
                                              .filter(Boolean)
                                              .join(", ")
                                        : null
                                return (
                                    <div
                                        key={r.id}
                                        className="flex items-center justify-between gap-3 rounded-xl border border-gray-100 bg-white p-3"
                                    >
                                        <div className="min-w-0 flex-1">
                                            <p className="text-[13px] font-semibold text-gray-800">{r.text}</p>
                                            <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-gray-500">
                                                <span>{new Date(r.remindAt).toLocaleString()}</span>
                                                {r.isSent ? (
                                                    <Badge variant="secondary" className="text-[9px]">
                                                        <CheckCircle2 className="mr-0.5 size-3" />
                                                        Sent
                                                    </Badge>
                                                ) : null}
                                                {targetUserNames ? <span>→ {targetUserNames}</span> : null}
                                            </div>
                                        </div>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="shrink-0 text-red-500 hover:text-red-600"
                                            onClick={() => onDeleteReminder(r.id)}
                                        >
                                            <Trash2 className="size-4" />
                                        </Button>
                                    </div>
                                )
                            })
                        ) : (
                            <div className="rounded-xl border border-dashed border-gray-200 py-10 text-center">
                                <Bell className="mx-auto mb-2 size-8 text-gray-300" />
                                <p className="text-[12px] text-gray-400">No reminders scheduled</p>
                            </div>
                        )}
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    )
}