import React, { useState } from "react";
import { MessageSquareMore, MessageSquareText } from "lucide-react";
import { t } from "i18next";
import RemarkCreationDialog, { InstanceType } from "./remarkCreationCard";
import { Button } from "@/shared/common/ui/button";

interface IncomingInstanceDetailProps {
  rowData?: any;
  instanceId: string;
  iconSize?: number;
  className?: string;
  instanceType?: InstanceType;
  fromTable?: boolean;
}

const IncomingInstanceDetail = ({
  instanceId,
  rowData,
  iconSize = 20,
  className = "",
  instanceType,
  fromTable = true,
}: IncomingInstanceDetailProps) => {
  const [isRemarkDialogOpen, setIsRemarkDialogOpen] = useState(false);

  const commentCount = 0;

  return (
    <>
      {/* Comments Icon with Badge */}
      {fromTable ? (
        <button
          onClick={() => setIsRemarkDialogOpen(true)}
          className={`relative inline-flex items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground transition-colors p-1 ${className}`}
          title={t("remark.viewAndAdd", "View & Add Remarks")}
        >
          <MessageSquareText
            style={{ width: iconSize, height: iconSize }}
            className="text-muted-foreground hover:text-primary transition-colors"
          />
          {commentCount > 0 && (
            <span className="absolute -top-1 -right-1 flex min-w-[18px] h-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-white">
              {commentCount > 99 ? "99+" : commentCount}
            </span>
          )}
        </button>
      ) : (
        <Button
          variant="outline"
          size="sm"
          onClick={() => setIsRemarkDialogOpen(true)}
          className="h-9 rounded-full border-violet-200 bg-gradient-to-r from-violet-50 to-purple-50 px-4 shadow-sm transition-all duration-300 hover:border-violet-300 hover:from-violet-100 hover:to-purple-100 dark:border-violet-800/50 dark:from-violet-950/30 dark:to-purple-950/30 dark:hover:border-violet-700/60 dark:hover:from-violet-900/50 dark:hover:to-purple-900/50"
        >
          <MessageSquareMore className="mr-2 h-4 w-4 text-violet-600 dark:text-violet-400" />
          {t("userIncoming.Remark", "Remark")}
        </Button>
      )}

      {/* Remarks Dialog */}
      <RemarkCreationDialog
        open={isRemarkDialogOpen}
        onClose={() => setIsRemarkDialogOpen(false)}
        incomingInstanceId={instanceId}
        onSuccess={() => {}}
        instanceType={instanceType}
        rowData={rowData}
      />
    </>
  );
};

export default IncomingInstanceDetail;
