// Rôle : rend une ligne d'équipement et délègue ses panneaux d'édition spécialisés.
import { useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
import { DETAIL_TABS, getEquipmentTabLabel } from "./equipmentPlannerOptions.js";
import { CharacteristicsEditor, EquipmentDisplay, MaterialsEditor, SocketItemsEditor, TabIcon } from "./EquipmentPlannerEditors.jsx";

export function EquipmentItem({ equipment, reorder, textContent, onUpdate, onDelete }) {
  const [activeTab, setActiveTab] = useState("stats");
  const [detailEditing, setDetailEditing] = useState(false);
  const nameEdit = useInlineEdit({
    value: equipment.name,
    onCommit: (name) => onUpdate((current) => ({ ...current, name: name || current.name })),
    blurOnEscape: true
  });
  const obtainEdit = useInlineEdit({
    value: equipment.obtain || "",
    onCommit: (obtain) => onUpdate((current) => ({ ...current, obtain })),
    commitOnEnter: false
  });
  const className = [
    "equipment-planner-item",
    equipment.active ? "is-active" : "is-inactive",
    reorder.isItemDragging(equipment.id) ? "is-dragging" : "",
    reorder.isItemDropTarget(equipment.id) ? "is-drop-target" : "",
    reorder.getDropPlacement("item", equipment.id) === "after" ? "drop-after" : ""
  ].filter(Boolean).join(" ");

  return (
    <li className={className} {...reorder.getItemProps({ itemId: equipment.id })}>
      <div className="equipment-planner-line">
        <button
          className="task-planner-drag-handle"
          type="button"
          onPointerDown={(event) => reorder.itemReorder.startDrag(event, equipment.id)}
          aria-label={`${textContent.reorderEquipmentTitle || "Déplacer"} ${equipment.name}`}
          title={textContent.reorderEquipmentTitle || "Déplacer"}
        >
          <Icon name="drag" />
        </button>
        <div className="equipment-planner-identity">
          <span className="equipment-planner-type-icon" aria-hidden="true">
            <Icon name={equipment.icon || "shield"} />
          </span>
          <strong {...nameEdit.getContentEditableProps({ className: "equipment-planner-name", title: textContent.renameEquipmentTitle || "Renommer" })}>{equipment.name}</strong>
        </div>
        <label className="equipment-planner-include-switch">
          <input
            type="checkbox"
            checked={equipment.active}
            onChange={(event) => onUpdate((current) => ({ ...current, active: event.target.checked }))}
          />
          <span aria-hidden="true" />
          <b>{textContent.includeInSummaryLabel || "Inclure dans le résumé"}</b>
        </label>
        <button
          type="button"
          className={`task-planner-settings-button equipment-planner-row-edit-button ${detailEditing ? "active" : ""}`}
          onClick={() => setDetailEditing((value) => !value)}
          aria-pressed={detailEditing}
          title={detailEditing ? textContent.viewModeTitle || "Mode affichage" : textContent.editModeTitle || "Mode édition"}
        >
          <Icon name="edit" />
        </button>
        <button type="button" className="task-planner-delete-button danger" onClick={onDelete} aria-label={`${textContent.deleteEquipmentTitle || "Supprimer"} ${equipment.name}`} title={textContent.deleteEquipmentTitle || "Supprimer"}>
          <Icon name="trash" />
        </button>
      </div>
      <div className="equipment-planner-details">
        {detailEditing ? (
          <>
          <div className="equipment-planner-tabs" role="tablist" aria-label={textContent.tabsLabel || "Ajout de caractéristiques"}>
            {DETAIL_TABS.map((tab) => (
              <button
                key={tab}
                className={`equipment-planner-tab ${activeTab === tab ? "active" : ""}`}
                type="button"
                role="tab"
                aria-selected={activeTab === tab}
                onClick={() => setActiveTab(tab)}
                title={getEquipmentTabLabel(tab, textContent)}
              >
                <TabIcon tab={tab} />
                <span>{getEquipmentTabLabel(tab, textContent)}</span>
              </button>
            ))}
          </div>
          {activeTab === "stats" && <CharacteristicsEditor equipment={equipment} textContent={textContent} editing onUpdate={onUpdate} />}
          {activeTab === "sockets" && <SocketItemsEditor equipment={equipment} textContent={textContent} editing onUpdate={onUpdate} />}
          {activeTab === "craft" && (
            <section className="equipment-planner-craft-tab">
              <label className="equipment-planner-field">
                <span>{textContent.obtainLabel || "Obtention"}</span>
                <textarea {...obtainEdit.getInputProps({ placeholder: textContent.obtainPlaceholder || "Comment obtenir ou créer cet équipement" })} />
              </label>
              <MaterialsEditor equipment={equipment} textContent={textContent} editing onUpdate={onUpdate} />
            </section>
          )}
          </>
        ) : (
          <EquipmentDisplay equipment={equipment} textContent={textContent} />
        )}
      </div>
    </li>
  );
}