import React from "react";
import { __ } from "@wordpress/i18n";
import { Lock, User, Bot, Shield, CreditCard, Trash2 } from "lucide-react";
import { getDisplayDate } from "@/libs/dateTime";

/**
 * Note Item Component
 *
 * Displays a single subscription note with metadata and actions.
 *
 * @param {Object} props Component props
 * @param {Object} props.note The note object
 * @param {Function} props.onDelete Handler for deleting the note
 */
const NoteItem = ({ note, onDelete }) => {
  const isSystem = note.is_system;
  const isPrivate = note.note_type === "private";
  const authorRole = note.author_role || (isSystem ? "system" : "customer");
  const authorLabel = note.author_label || __("System", "arraysubs");

  /**
   * Get the appropriate icon for note type
   */
  const getTypeIcon = () =>
    isPrivate ? <Lock size={14} /> : <User size={14} />;

  /**
   * Get the type label
   */
  const getTypeLabel = () =>
    isPrivate ? __("Private", "arraysubs") : __("Customer", "arraysubs");

  /**
   * Get the author badge icon.
   */
  const getAuthorIcon = () => {
    switch (authorRole) {
      case "gateway":
        return <CreditCard size={14} />;
      case "admin":
        return <Shield size={14} />;
      case "customer":
        return <User size={14} />;
      default:
        return <Bot size={14} />;
    }
  };

  return (
    <div
      className={`arraysubs-note-item ${
        isSystem ? "arraysubs-note-item--system" : ""
      } ${
        isPrivate
          ? "arraysubs-note-item--private"
          : "arraysubs-note-item--customer"
      }`}
    >
      <div
        className="arraysubs-note-item__content"
        dangerouslySetInnerHTML={{ __html: note.content }}
      />

      <div className="arraysubs-note-item__footer">
        <div className="arraysubs-note-item__meta">
          <span
            className={`arraysubs-note-item__author-badge arraysubs-note-item__author-badge--${authorRole}`}
          >
            {getAuthorIcon()}
            {authorLabel}
          </span>

          {note.author_name && note.author_name !== authorLabel && (
            <span className="arraysubs-note-item__author-name">
              {note.author_name}
            </span>
          )}

          <span className="arraysubs-note-item__date">
            {getDisplayDate(note.date_display, note.date_gmt || note.date)}
          </span>

          <span
            className={`arraysubs-note-item__type arraysubs-note-item__type--${note.note_type}`}
          >
            {getTypeIcon()}
            {getTypeLabel()}
          </span>
        </div>

        <button
          type="button"
          className="arraysubs-note-item__delete"
          onClick={() => onDelete(note.id)}
          title={__("Delete note", "arraysubs")}
        >
          <Trash2 size={14} />
          <span>{__("Delete", "arraysubs")}</span>
        </button>
      </div>
    </div>
  );
};

export default NoteItem;