import { useState } from "react";
import { useLocalizedName } from "@/shared/common/localizedName";
import { Bell, CheckCircle, Clock } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";
import { Button } from "@/shared/common/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/shared/common/ui/dialog";

interface LocaleValidationDto {
  am?: string;
  en: string;
}

interface NotificationCardProps {
  id: string;
  time?: string;
  isUnread: boolean;
  subject?: LocaleValidationDto;
  onClick: (id: string) => void;
  onRemind?: (id: string, minutes: number) => void;
}

const NotificationCard = ({
  id,
  subject,
  time,
  isUnread,
  onClick,
  onRemind,
}: NotificationCardProps) => {
  const localizedName = useLocalizedName();
  const [showReminder, setShowReminder] = useState(false);
  const [expanded, setExpanded] = useState(false);
  const [openFullText, setOpenFullText] = useState(false);
  const safeTime = typeof time === "string" ? time : "";
  const safeSubject = subject ?? { en: "Notification", am: "" };
  const safeSubjectText =
    localizedName(safeSubject as { am: string; en: string }) || "Notification";
  const hasSubjectText = safeSubjectText.trim().length > 0;

  const handleRemind = (minutes: number, e: React.MouseEvent) => {
    e.stopPropagation();
    if (onRemind) {
      onRemind(id, minutes);
      setShowReminder(false);
    }
  };

  return (
    <div
      className={`group flex cursor-pointer items-start gap-2 rounded-xl p-2.5 shadow-sm ring-1 ring-inset transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md sm:gap-3 sm:p-3 ${
        isUnread
          ? "bg-primary-50/80 ring-primary-300 hover:bg-primary-50 dark:bg-primary-900/25 dark:ring-primary-700/50 dark:hover:bg-primary-900/35"
          : "bg-white ring-gray-200 hover:bg-gray-50 dark:bg-gray-900 dark:ring-gray-700 dark:hover:bg-gray-800"
      }`}
      onClick={() => onClick(id)}
    >
      <div
        className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${
          isUnread
            ? "bg-primary-100 text-primary-700 dark:bg-primary-800/60 dark:text-primary-300"
            : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-300"
        }`}
      >
        <Bell
          className={`h-4 w-4 ${
            isUnread
              ? "text-primary-600 dark:text-primary-300"
              : "text-gray-500 dark:text-gray-300"
          }`}
        />
      </div>

      <div className="flex-1 min-w-0">
        <div className="flex items-start gap-2">
          <p
            className={`min-w-0 break-words text-sm font-semibold text-gray-900 dark:text-gray-100 ${
              expanded ? "line-clamp-none" : "line-clamp-2"
            }`}
          >
            {safeSubjectText}
          </p>
          {isUnread && (
            <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary-500 animate-pulse"></span>
          )}
        </div>

        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1">
          {hasSubjectText && (
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                setExpanded((prev) => !prev);
              }}
              className="text-[11px] font-medium text-primary-600 hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-300"
            >
              {expanded ? "Show less" : "Show more"}
            </button>
          )}

          {hasSubjectText && (
            <Dialog open={openFullText} onOpenChange={setOpenFullText}>
              <DialogTrigger asChild>
                <button
                  type="button"
                  onClick={(e) => e.stopPropagation()}
                  className="text-[11px] font-medium text-primary-600 hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-300"
                >
                  View full
                </button>
              </DialogTrigger>
              <DialogContent
                className="w-[calc(100vw-2rem)] max-w-lg border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
                onClick={(e: React.MouseEvent<HTMLDivElement>) =>
                  e.stopPropagation()
                }
              >
                <DialogHeader>
                  <DialogTitle className="text-base font-semibold text-gray-900 dark:text-gray-100">
                    Notification
                  </DialogTitle>
                  <DialogDescription className="text-xs text-gray-500 dark:text-gray-400">
                    {safeTime}
                  </DialogDescription>
                </DialogHeader>
                <div className="max-h-[50vh] overflow-y-auto rounded-md bg-gray-50 p-3 text-sm leading-relaxed text-gray-700 dark:bg-gray-800 dark:text-gray-200">
                  <p className="whitespace-pre-wrap break-words">
                    {safeSubjectText}
                  </p>
                </div>
              </DialogContent>
            </Dialog>
          )}
        </div>

        <p className="mt-1 text-[11px] font-medium text-gray-400 dark:text-gray-500">
          {safeTime}
        </p>
      </div>

      <div className="flex shrink-0 items-center gap-1 sm:gap-2">
        {onRemind && (
          <DropdownMenu open={showReminder} onOpenChange={setShowReminder}>
            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
              <Button
                variant="ghost"
                size="sm"
                className="h-7 w-7 p-0 hover:bg-primary-100"
              >
                <Clock className="h-4 w-4 text-gray-500" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              <DropdownMenuItem onClick={(e) => handleRemind(5, e)}>
                Remind in 5 minutes
              </DropdownMenuItem>
              <DropdownMenuItem onClick={(e) => handleRemind(15, e)}>
                Remind in 15 minutes
              </DropdownMenuItem>
              <DropdownMenuItem onClick={(e) => handleRemind(30, e)}>
                Remind in 30 minutes
              </DropdownMenuItem>
              <DropdownMenuItem onClick={(e) => handleRemind(60, e)}>
                Remind in 1 hour
              </DropdownMenuItem>
              <DropdownMenuItem onClick={(e) => handleRemind(240, e)}>
                Remind in 4 hours
              </DropdownMenuItem>
              <DropdownMenuItem onClick={(e) => handleRemind(1440, e)}>
                Remind tomorrow
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )}

        {!isUnread && (
          <CheckCircle className="mt-1 h-4 w-4 self-start text-primary-500 dark:text-primary-400" />
        )}
      </div>
    </div>
  );
};

export default NotificationCard;
