// Rôle : affiche les pages toolbox, le panneau latéral et leurs contrôles.
import { useEffect, useRef, useState } from "react";
import { GuidedTooltipTour } from "../../components/GuidedTooltipTour.jsx";
import { Icon } from "../../components/Icon.jsx";
import { ImportButton } from "../../components/ImportButton.jsx";
import { StorageQuota } from "../../components/StorageQuota.jsx";
import { ToastPositionSwitch } from "../../components/ToastPositionSwitch.jsx";
import { useGroupedReorder } from "../../hooks/useGroupedReorder.js";
import { useInlineEdit } from "../../hooks/useInlineEdit.js";
import { compressImage } from "../../utils/imageCompression.js";
import { getSetting as dbGetSetting, setSetting as dbSetSetting } from "../../utils/indexedDbStorage.js";
import { getGameCardCover, ToolboxCard, ToolboxGameIcon, ToolboxIconPicker } from "./ToolboxCard.jsx";
import { AddToolControls, ToolboxModules } from "./modules/index.jsx";
import {
  clampQty,
  hostnameFromUrl,
  normalizeCalculatorData,
  normalizeCalendarData,
  normalizeChecklistData,
  normalizeCombosData,
  normalizeCountersData,
  normalizeEquipmentPlannerData,
  normalizeImageAnnotationData,
  normalizeLinksData,
  normalizeModuleOrder,
  normalizeNotepadData,
  normalizeTableData,
  normalizeTaskPlannerData,
  normalizeTimerData,
  summarizeEquipmentPlannerData,
  normalizeUrl,
  uid
} from "./storage/toolboxStorage.js";

const DRAWER_WIDTH_SETTING = "drawerWidth";

function addModuleToOrder(moduleOrder, modules, moduleId) {
  const order = normalizeModuleOrder(moduleOrder, modules);
  const two = [
    order.two[0].filter((id) => id !== moduleId),
    order.two[1].filter((id) => id !== moduleId)
  ];
  const targetColumnIndex = two[0].length <= two[1].length ? 0 : 1;
  two[targetColumnIndex].push(moduleId);
  return {
    one: [...order.one.filter((id) => id !== moduleId), moduleId],
    two
  };
}

function removeModuleFromOrder(moduleOrder, modules, moduleId) {
  const order = normalizeModuleOrder(moduleOrder, modules);
  return {
    one: order.one.filter((id) => id !== moduleId),
    two: [
      order.two[0].filter((id) => id !== moduleId),
      order.two[1].filter((id) => id !== moduleId)
    ]
  };
}

async function copyText(value) {
  try {
    await navigator.clipboard.writeText(value);
    return true;
  } catch {
    return false;
  }
}

export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions, storageUsage, toastPosition, setToastPosition }) {
  const content = siteContent.toolboxes;
  const {
    itemReorder,
    getItemProps,
    isItemDragging,
    isItemDropTarget,
    getDropPlacement
  } = useGroupedReorder({
    namespace: "toolbox-cards",
    items: toolboxes,
    getItemId: (toolbox) => toolbox.id,
    orientation: "horizontal",
    getPlacement: (event, target) => {
      const rect = target.getBoundingClientRect();
      return event.clientY > rect.top + rect.height / 2 || event.clientX > rect.left + rect.width / 2 ? "after" : "before";
    },
    onItemMove: (operation) => {
      const nextIds = toolboxes.map((toolbox) => toolbox.id).filter((id) => id !== operation.sourceId);
      const targetIndex = nextIds.indexOf(operation.targetId);
      nextIds.splice(operation.placement === "after" ? targetIndex + 1 : targetIndex, 0, operation.sourceId);
      actions.updateToolboxOrder(nextIds);
    }
  });

  return (
    <div className="toolbox-page">
      <section className="page-hero">
        <div>
          <p className="eyebrow">{content.eyebrow}</p>
          <h1>{content.title}</h1>
          <p>{content.summary}</p>
          <a className="button hero-library-button library-link-button" href="#/library"><Icon name="book" />{content.libraryLink}</a>
        </div>
      </section>
      <section className="toolbar toolbox-actions-row">
        <div>
          <button className="primary" onClick={() => actions.setCreateModal({})}>{content.newButton}</button>
          <ImportButton className="import-button" label={content.importOne} onFile={actions.importToolbox} />
        </div>
        <div>
          <button className="primary" onClick={actions.exportAllToolboxes}>{content.exportAll}</button>
          <ImportButton className="import-button" label={content.importAll} onFile={actions.importAllToolboxes} />
        </div>
      </section>
      <section className="toolbox-preferences-row" aria-label={content.preferencesLabel}>
        <div>
          <p className="eyebrow">{content.preferencesLabel}</p>
          <strong>{content.toastPositionLabel}</strong>
        </div>
        <ToastPositionSwitch
          position={toastPosition}
          onChange={setToastPosition}
          labels={{
            title: content.toastPositionLabel,
            left: content.toastPositionLeft,
            right: content.toastPositionRight
          }}
        />
      </section>
      <section className="cards">
        <StorageHelpCard help={content.storageHelp} />
        {toolboxes.length ? toolboxes.map((toolbox) => (
          <ToolboxCard
            key={toolbox.id}
            toolbox={toolbox}
            game={getToolboxGame(toolbox)}
            actions={actions}
            reorder={{ itemReorder, getItemProps, isItemDragging, isItemDropTarget, getDropPlacement }}
          />
        )) : (
          <div className="empty"><h2>{content.emptyTitle}</h2><p>{content.emptyText}</p></div>
        )}
      </section>
      <StorageQuota usage={storageUsage} />
    </div>
  );
}

function StorageHelpCard({ help }) {
  return (
    <article className="card storage-help-card" aria-labelledby="storage-help-title">
      <div className="card-body">
        <div className="storage-help-heading">
          <span className="storage-help-mark" aria-hidden="true" />
          <div><p className="eyebrow">IndexedDB</p><h2 id="storage-help-title">{help.title}</h2></div>
        </div>
        <p className="storage-help-intro">{help.text}</p>
        <ul className="storage-help-list">
          {help.items.map((item, index) => <li key={item}><span>{index + 1}</span><p>{item}</p></li>)}
        </ul>
      </div>
    </article>
  );
}

export function ToolboxPage(props) {
  const { toolboxId, toolboxes, getToolboxGame } = props;
  const toolbox = toolboxes.find((item) => item.id === toolboxId);
  if (!toolbox) return <div className="empty"><h1>Toolbox introuvable</h1><a className="button" href="#/toolboxes">Retour</a></div>;
  return <ToolboxView {...props} toolbox={toolbox} toolboxGame={getToolboxGame(toolbox)} embedded={false} />;
}

function shouldShowTutorial(toolbox, pendingTutorialToolboxId) {
  return toolbox?.tutorial === true || pendingTutorialToolboxId === toolbox?.id;
}

function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, storageUsage, getModuleData, updateToolbox, updateModuleData, addImageFiles, pendingTutorialToolboxId = "", setPendingTutorialToolboxId }) {
  const toolboxId = toolbox.id;
  const toolboxTutorial = toolbox.tutorial;
  const moduleColumns = embedded || Number(toolbox.moduleColumns) === 1 ? 1 : 2;
  const toolboxGameCover = getGameCardCover(toolboxGame);
  const moduleText = siteContent.toolboxes.modules;
  const [showTutorial, setShowTutorial] = useState(() => shouldShowTutorial(toolbox, pendingTutorialToolboxId));
  const currentToolboxIdRef = useRef(toolboxId);
  const moduleContext = {
    getModuleData,
    moduleText,
    normalizeChecklistData,
    normalizeCombosData,
    normalizeLinksData,
    normalizeCountersData,
    normalizeEquipmentPlannerData,
    normalizeCalculatorData,
    normalizeCalendarData,
    normalizeImageAnnotationData,
    normalizeNotepadData,
    normalizeTableData,
    normalizeTimerData,
    normalizeTaskPlannerData,
    summarizeEquipmentPlannerData,
    normalizeUrl,
    hostnameFromUrl,
    copyText,
    notify: actions.notify,
    compressImageFile: compressImage,
    clampQty,
    uid,
    setModuleData: updateModuleData,
    addImageFiles,
    createImageAnnotationModule,
    setImage: actions.setImage,
    refresh: () => {}
  };

  useEffect(() => {
    if (currentToolboxIdRef.current === toolboxId) {
      if (shouldShowTutorial(toolbox, pendingTutorialToolboxId)) setShowTutorial(true);
      return;
    }
    currentToolboxIdRef.current = toolboxId;
    setShowTutorial(shouldShowTutorial(toolbox, pendingTutorialToolboxId));
  }, [pendingTutorialToolboxId, toolbox, toolboxId, toolboxTutorial]);

  function addModule(type, initialData = null) {
    if (!type) return;
    const module = { id: uid("mod"), type };
    const modules = [...toolbox.modules, module];
    updateToolbox({
      ...toolbox,
      modules,
      moduleOrder: addModuleToOrder(toolbox.moduleOrder, modules, module.id)
    });
    if (initialData) updateModuleData(toolbox.id, module.id, initialData, type);
  }

  function createImageAnnotationModule(dataUrl) {
    if (!dataUrl) return;
    const moduleId = uid("mod");
    const modules = [...toolbox.modules, { id: moduleId, type: "imageAnnotation" }];
    updateToolbox({
      ...toolbox,
      modules,
      moduleOrder: addModuleToOrder(toolbox.moduleOrder, modules, moduleId)
    });
    updateModuleData(toolbox.id, moduleId, { image: dataUrl, markers: [] }, "imageAnnotation");
  }

  return (
    <div className={embedded ? "toolbox-embedded" : "toolbox-page"}>
      <section className={embedded ? "toolbox-head page-hero toolbox-head-embedded" : "toolbox-head page-hero"}>
        <div>
          <p className="eyebrow">Toolbox</p>
          <div className="toolbox-title-row">
            {!embedded && !toolboxGame && <ToolboxIconPicker toolbox={toolbox} onChange={(icon) => updateToolbox({ ...toolbox, icon })} tutorialTarget="icon" />}
            {!embedded && toolboxGameCover && <ToolboxGameIcon game={toolboxGame} />}
            {embedded ? <h1>{toolbox.name}</h1> : (
              <EditableTitle className="toolbox-title" value={toolbox.name} fallback="Nouvelle toolbox" tutorialTarget="title" onSave={(name) => name !== toolbox.name && updateToolbox({ ...toolbox, name })} />
            )}
          </div>
          {toolboxGame && (
            <a
              className="button toolbox-hero-link"
              href={embedded ? `#/toolbox/${toolbox.id}` : `#/games/${toolboxGame.id}`}
              onClick={embedded ? () => actions.setDrawerGameId("") : undefined}
            >
              <Icon name="enter" />
              <span>{embedded ? "Vers la toolbox complète" : "Vers la page de jeu"}</span>
            </a>
          )}
        </div>
        <div className="actions">
          <AddToolControls onAdd={addModule} />
        </div>
      </section>
      {!embedded && showTutorial && (
        <GuidedTooltipTour
          steps={siteContent.toolboxes.tutorial?.items || []}
          labels={{
            dismiss: siteContent.toolboxes.tutorial?.dismissLabel,
            next: siteContent.toolboxes.tutorial?.nextLabel,
            done: siteContent.toolboxes.tutorial?.doneLabel
          }}
          targetAttribute="data-toolbox-tutorial-target"
          onDismiss={() => {
            if (pendingTutorialToolboxId === toolbox.id) setPendingTutorialToolboxId?.("");
            setShowTutorial(false);
          }}
          onStarted={() => {
            if (pendingTutorialToolboxId === toolbox.id) setPendingTutorialToolboxId?.("");
            if (toolbox.tutorial === true) updateToolbox({ ...toolbox, tutorial: false });
          }}
        />
      )}
      {!embedded && (
        <section className="modules-toolbar" aria-label="Options d'affichage des outils">
          <div className="layout-switch" role="group" aria-label="Mode d'affichage des outils">
            <button className={moduleColumns === 1 ? "active" : ""} onClick={() => updateToolbox({ ...toolbox, moduleColumns: 1 })} aria-pressed={moduleColumns === 1} aria-label="Afficher en lignes" title="Afficher en lignes"><Icon name="rows" /></button>
            <button className={moduleColumns === 2 ? "active" : ""} onClick={() => updateToolbox({ ...toolbox, moduleColumns: 2 })} aria-pressed={moduleColumns === 2} aria-label="Afficher en colonnes" title="Afficher en colonnes"><Icon name="columns" /></button>
          </div>
        </section>
      )}
      <ToolboxModules
        toolbox={toolbox}
        moduleColumns={moduleColumns}
        context={moduleContext}
        onRename={(moduleId, title) => updateToolbox({ ...toolbox, modules: toolbox.modules.map((module) => module.id === moduleId ? { ...module, title } : module) })}
        onUpdateModule={(moduleId, updater) => updateToolbox({ ...toolbox, modules: toolbox.modules.map((module) => module.id === moduleId ? updater(module) : module) })}
        onModuleOrderChange={(moduleOrder) => updateToolbox({ ...toolbox, moduleOrder })}
        onDelete={(moduleId) => actions.setConfirmModal({
          title: "Retirer l'outil",
          message: "Retirer cet outil de la toolbox ?",
          confirmLabel: "Retirer",
          danger: true,
          onResolve: (confirmed) => {
            if (!confirmed) return;
            actions.removeModuleData(toolbox.id, moduleId);
            const modules = toolbox.modules.filter((module) => module.id !== moduleId);
            updateToolbox({
              ...toolbox,
              modules,
              moduleOrder: removeModuleFromOrder(toolbox.moduleOrder, modules, moduleId)
            });
          }
        })}
      />
      {!embedded && <StorageQuota usage={storageUsage} />}
    </div>
  );
}

export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, actions, storageUsage, getModuleData, updateToolbox, updateModuleData, addImageFiles }) {
  const selectedId = links[gameId] || "";
  const toolbox = toolboxes.find((item) => item.id === selectedId);
  const [width, setWidth] = useState("");
  const panelRef = useRef(null);

  useEffect(() => {
    let cancelled = false;
    dbGetSetting(DRAWER_WIDTH_SETTING, "")
      .then((storedWidth) => {
        if (cancelled) return;
        const value = Number(storedWidth);
        if (Number.isFinite(value) && value > 0) setWidth(Math.min(Math.max(value, 360), Math.floor(window.innerWidth * 0.94)));
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  function startResize(event) {
    const panel = panelRef.current;
    if (!panel) return;
    event.preventDefault();
    const startX = event.clientX;
    const startWidth = panel.getBoundingClientRect().width;
    const minWidth = 360;
    const maxWidth = Math.floor(window.innerWidth * 0.94);
    document.body.classList.add("is-resizing-drawer");
    const onMove = (moveEvent) => {
      const nextWidth = Math.min(Math.max(startWidth + startX - moveEvent.clientX, minWidth), maxWidth);
      setWidth(nextWidth);
      dbSetSetting(DRAWER_WIDTH_SETTING, Math.round(nextWidth)).catch(() => {});
    };
    const stop = () => {
      document.body.classList.remove("is-resizing-drawer");
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerup", stop);
      window.removeEventListener("pointercancel", stop);
    };
    window.addEventListener("pointermove", onMove);
    window.addEventListener("pointerup", stop);
    window.addEventListener("pointercancel", stop);
  }

  return (
    <aside className="drawer" id="toolbox-drawer" aria-hidden="false" style={width ? { "--drawer-panel-width": `${width}px` } : undefined}>
      <div className="drawer-backdrop" onClick={() => actions.setDrawerGameId("")} />
      <span className="drawer-resize-handle" aria-hidden="true" onPointerDown={startResize} />
      <section className="drawer-panel legacy-scrollbar" ref={panelRef} style={width ? { width } : undefined}>
        <div className="drawer-content">
          <header>
            <div>
              <p className="eyebrow">Toolbox liée</p>
              <div className="drawer-toolbox-actions" aria-label="Actions toolbox liée">
                <button className="drawer-action-button" onClick={() => actions.setLinkModalGameId(gameId)} aria-label="Lier une toolbox" title="Lier"><Icon name="link" /></button>
                <ImportButton className="drawer-action-button import-icon-button" ariaLabel="Importer une toolbox" title="Importer" icon="import" onFile={(file) => actions.importToolbox(file, gameId)} />
                <button className="drawer-action-button" onClick={() => actions.exportToolbox(selectedId)} disabled={!selectedId} aria-label="Exporter la toolbox liée" title="Exporter"><Icon name="export" /></button>
              </div>
            </div>
            <button className="drawer-close-button" onClick={() => actions.setDrawerGameId("")} aria-label="Fermer" title="Fermer"><Icon name="close" /></button>
          </header>
          {toolbox ? <ToolboxView siteContent={siteContent} toolbox={toolbox} toolboxGame={game} embedded actions={actions} storageUsage={storageUsage} getModuleData={getModuleData} updateToolbox={updateToolbox} updateModuleData={updateModuleData} addImageFiles={addImageFiles} /> : (
            <div className="empty"><p>Aucune toolbox associée à cette page jeu.</p><button className="primary" onClick={() => actions.setCreateModal({ gameId })}>Créer et associer</button></div>
          )}
          <StorageQuota usage={storageUsage} />
        </div>
      </section>
    </aside>
  );
}

function EditableTitle({ value, fallback, onSave, className = "module-title", tutorialTarget = "" }) {
  const inlineEdit = useInlineEdit({
    value,
    onCommit: (title) => onSave(title || fallback),
    blurOnEscape: true
  });

  return (
    <h1
      {...inlineEdit.getContentEditableProps({
        className,
        "data-toolbox-tutorial-target": tutorialTarget || undefined,
        title: "Cliquer pour renommer"
      })}
    >{value}</h1>
  );
}