/**
 * FieldCard — Renders a single field card in the checkout builder grid.
 *
 * @package ArraySubsPro
 */
import React from "react";
import { __ } from "@wordpress/i18n";
import {
  GripVertical,
  Pencil,
  Trash2,
  Lock,
  EyeOff,
  Asterisk,
} from "lucide-react";
import { isBuiltinField, isLockedField, isLayoutField } from "./utils";

const TYPE_BADGES = {
  text: __("Text", "arraysubs"),
  number: __("Number", "arraysubs"),
  email: __("Email", "arraysubs"),
  phone: __("Phone", "arraysubs"),
  select: __("Select", "arraysubs"),
  multi_select: __("Multi Select", "arraysubs"),
  textarea: __("Textarea", "arraysubs"),
  checkbox: __("Checkbox", "arraysubs"),
  toggle: __("Toggle", "arraysubs"),
  upload: __("Upload", "arraysubs"),
  image_select: __("Image Select", "arraysubs"),
  grid_select: __("Grid Select", "arraysubs"),
  color_picker: __("Color", "arraysubs"),
  calendar: __("Calendar", "arraysubs"),
  date: __("Date", "arraysubs"),
  datetime: __("DateTime", "arraysubs"),
  time: __("Time", "arraysubs"),
  date_range: __("Date Range", "arraysubs"),
  heading: __("Heading", "arraysubs"),
  section: __("Section", "arraysubs"),
  paragraph: __("Paragraph", "arraysubs"),
  alert: __("Alert", "arraysubs"),
  checkout_coupon_notices: __("Coupon and Notices", "arraysubs"),
  order_info_payment: __("Order Info and Payment", "arraysubs"),
  billing_address: __("Billing Address", "arraysubs"),
  shipping_address: __("Shipping Address", "arraysubs"),
  order_notes: __("Order Notes", "arraysubs"),
  product_table: __("Product Table", "arraysubs"),
};

const FieldCard = ({
  field,
  onEdit,
  onRemove,
  dragHandleProps = {},
  draggableProps = {},
  innerRef,
}) => {
  const locked = isLockedField(field.key);
  const builtin = isBuiltinField(field);
  const layout = isLayoutField(field.type);
  const hasVisibility =
    field.visibility_rules && field.visibility_rules.length > 0;

  return (
    <div
      ref={innerRef}
      className={`arraysubs-cb-field-card ${
        layout ? "arraysubs-cb-field-card--layout" : ""
      } ${locked ? "arraysubs-cb-field-card--locked" : ""}`}
      {...draggableProps}
    >
      <div className="arraysubs-cb-field-card__drag" {...dragHandleProps}>
        <GripVertical size={14} />
      </div>

      <div className="arraysubs-cb-field-card__body">
        <div className="arraysubs-cb-field-card__label">
          {field.label || field.key}
          {field.is_required && (
            <Asterisk size={10} className="arraysubs-cb-field-card__required" />
          )}
          {locked && (
            <Lock size={12} className="arraysubs-cb-field-card__lock" />
          )}
        </div>

        <div className="arraysubs-cb-field-card__meta">
          <span className="arraysubs-cb-field-card__type">
            {TYPE_BADGES[field.type] || field.type}
          </span>
          {hasVisibility && (
            <EyeOff size={12} className="arraysubs-cb-field-card__visibility" />
          )}
          {builtin && (
            <span className="arraysubs-cb-field-card__builtin">
              {__("WC", "arraysubs")}
            </span>
          )}
        </div>
      </div>

      <div className="arraysubs-cb-field-card__actions">
        <button
          type="button"
          className="arraysubs-cb-field-card__action"
          onClick={() => onEdit(field)}
          title={__("Edit element", "arraysubs")}
        >
          <Pencil size={14} />
        </button>
        {!locked && (
          <button
            type="button"
            className="arraysubs-cb-field-card__action arraysubs-cb-field-card__action--delete"
            onClick={() => onRemove(field.key)}
            title={__("Remove element", "arraysubs")}
          >
            <Trash2 size={14} />
          </button>
        )}
      </div>
    </div>
  );
};

export default FieldCard;