import { Cloud, X } from "lucide-react";
import { Button } from "@/shared/common/ui/button";
import { formatBytes, resolveOwnerName } from "@/DMS/pages/_shared/utils";

interface DmsAttachmentItemProps {
  doc: any;
  onRemove: () => void;
}

export function DmsAttachmentItem({ doc, onRemove }: DmsAttachmentItemProps) {
  const originalname =
    doc.fileInfo?.originalname ||
    (typeof doc.name === "object" ? doc.name?.en || doc.name?.am : doc.name) ||
    "document";
  const size = doc.fileInfo?.size || 0;
  const owner = resolveOwnerName(doc.ownerName) || "N/A";

  return (
    <div className="relative flex items-center gap-2.5 rounded-md border border-transparent p-2 dark:border-gray-700 dark:bg-gray-800/50">
      <div className="flex flex-1 gap-2.5 items-center min-w-0">
        <div className="p-2 bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 rounded-md shrink-0">
          <Cloud className="size-5" />
        </div>
        <div className="flex w-full flex-col min-w-0">
          <div className="flex items-center gap-2 min-w-0">
            <p className="truncate text-sm font-medium text-foreground/80">
              {originalname}
            </p>
            <span className="shrink-0 text-[10px] text-blue-600 dark:text-blue-400 font-semibold bg-blue-50 dark:bg-blue-950/50 border border-blue-100 dark:border-blue-900/30 px-1.5 py-0.5 rounded-full select-none">
              DMS
            </span>
          </div>
          <p className="text-xs text-muted-foreground flex items-center gap-2 mt-0.5">
            <span>{formatBytes(size)}</span>
            {owner !== "N/A" && (
              <>
                <span className="text-gray-300 dark:text-gray-700">•</span>
                <span className="truncate max-w-[120px]">Owner: {owner}</span>
              </>
            )}
          </p>
        </div>
      </div>
      <div className="flex items-center gap-2 shrink-0">
        <Button
          type="button"
          variant="outline"
          size="icon"
          className="size-7 dark:border-gray-600 dark:hover:bg-gray-700"
          onClick={onRemove}
        >
          <X className="size-4" aria-hidden="true" />
          <span className="sr-only">Remove file</span>
        </Button>
      </div>
    </div>
  );
}
