// Rôle : fournit l'outil timer avec chronomètre, comptes à rebours et échange texte.
import { useEffect, useMemo, useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { Tabs } from "../../../components/Tabs.jsx";
import { useDraftForm } from "../../../hooks/useDraftForm.js";
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
import {
  formatDuration,
  formatDurationWithCentiseconds,
  formatTargetTime,
  getCentiseconds,
  getCountdownTargetMs,
  getDailyTargetMs,
  getIntervalAnchorMs,
  getNowMs,
  getTimePatternTargetMs,
  getTimePatternRecurrenceMs,
  timePartsToDurationMs,
  timePartsToString
} from "./timerUtils.js";
import { TextExchangeActions } from "./TextExchangeActions.jsx";

const TIMER_TABS = [
  { id: "stopwatch", label: "Chronomètre", icon: "stopwatch" },
  { id: "countdown", label: "Compte à rebours", icon: "hourglass" }
];

const COUNTDOWN_TYPES = ["duration", "daily_time", "time_pattern", "interval"];
const EMPTY_TIME_PARTS = { hours: "", minutes: "", seconds: "" };
const DEFAULT_COUNTDOWN_FORM = {
  label: "",
  type: "duration",
  duration: EMPTY_TIME_PARTS,
  time: EMPTY_TIME_PARTS,
  pattern: EMPTY_TIME_PARTS,
  interval: EMPTY_TIME_PARTS,
  intervalStartTime: EMPTY_TIME_PARTS
};
const ALERT_MODES = [
  { mode: "off", icon: "sound-mute" },
  { mode: "visible", icon: "sound-min" },
  { mode: "site", icon: "sound-max" }
];
const ALERT_MIN_DELAY_MS = 5 * 60 * 1000;
const AUTO_REFRESH_COUNTDOWN_TYPES = new Set(["time_pattern", "interval"]);
const TOGGLE_REFRESH_COUNTDOWN_TYPES = new Set(["daily_time", "interval"]);

function isAlertGuarded(countdown) {
  if (countdown?.type === "interval") return Number(countdown.intervalMs) < ALERT_MIN_DELAY_MS;
  if (countdown?.type === "time_pattern") return getTimePatternRecurrenceMs(countdown.pattern) < ALERT_MIN_DELAY_MS;
  return false;
}

function getAlertGuardMessage(textContent) {
  return textContent.alertTooSoonTitle || "Alerte indisponible pour une répétition inférieure à 5 minutes";
}

function canToggleAutoRefresh(countdown) {
  return TOGGLE_REFRESH_COUNTDOWN_TYPES.has(countdown?.type) && !isAlertGuarded(countdown);
}

function TimerValue({ ms, compact = false, showCentiseconds = true }) {
  if (!showCentiseconds) return <span className="timer-value">{formatDuration(ms)}</span>;
  if (!compact) return <span className="timer-value">{formatDurationWithCentiseconds(ms)}</span>;

  return (
    <span className="timer-value is-compact">
      <span>{formatDuration(ms)}</span>
      <small>{getCentiseconds(ms)}</small>
    </span>
  );
}

function getCountdownMetaParts(countdown, textContent) {
  if (countdown.type === "duration") return [`${textContent.durationType || "Durée"} ${formatDuration(countdown.durationMs || 0)}`];
  if (countdown.type === "daily_time") return [`${textContent.dailyTimeType || "Heure précise"} ${countdown.time}`];
  if (countdown.type === "time_pattern") return [`${textContent.timePatternType || "Heure / minute / seconde"} ${countdown.pattern}`];
  if (countdown.type === "interval") {
    const startLabel = countdown.startMode === "time" && countdown.startTime
      ? `${textContent.intervalStartTimeLabel || "Départ"} ${countdown.startTime}`
      : `${textContent.intervalStartTimeLabel || "Départ"} ${formatTargetTime(countdown.anchorAt)}`;
    return [`${textContent.intervalType || "Intervalle"} ${formatDuration(countdown.intervalMs || 0)}`, startLabel];
  }
  return [];
}

function handleEditableKeyDown(event, callback) {
  if (event.key !== "Enter" && event.key !== " ") return;
  event.preventDefault();
  callback();
}

function hasTimePartValue(parts) {
  return Boolean(String(parts?.hours || "").trim() || String(parts?.minutes || "").trim() || String(parts?.seconds || "").trim());
}

function getCountdownValidationError(type, draft, textContent) {
  const requiredError = textContent.requiredError || "Valeur requise.";
  const invalidError = textContent.invalidError || "Valeur invalide.";
  if (type === "duration" && timePartsToDurationMs(draft.duration) <= 0) {
    return requiredError;
  }
  if (type === "daily_time" && !timePartsToString(draft.time)) {
    return invalidError;
  }
  if (type === "time_pattern") {
    if (!hasTimePartValue(draft.pattern)) return requiredError;
    if (!timePartsToString(draft.pattern, { allowWildcard: true })) return invalidError;
  }
  if (type === "interval") {
    const startTimeHasValue = hasTimePartValue(draft.intervalStartTime);
    if (timePartsToDurationMs(draft.interval) <= 0) return requiredError;
    if (startTimeHasValue && !timePartsToString(draft.intervalStartTime)) return invalidError;
  }
  return "";
}

export function TimerModule({ toolboxId, moduleId, context, editing }) {
  const data = context.normalizeTimerData(context.getModuleData(toolboxId, moduleId, { activeTab: "stopwatch" }));
  const textContent = context.moduleText?.timer || {};
  const activeTab = data.activeTab;
  const [nowMs, setNowMs] = useState(getNowMs);
  const countdownDraft = useDraftForm(DEFAULT_COUNTDOWN_FORM);

  useEffect(() => {
    const intervalId = window.setInterval(() => setNowMs(getNowMs()), 50);
    return () => window.clearInterval(intervalId);
  }, []);

  const stopwatchElapsedMs = data.stopwatch.startedAt
    ? data.stopwatch.elapsedMs + Math.max(0, nowMs - data.stopwatch.startedAt)
    : data.stopwatch.elapsedMs;
  const visibleCountdowns = useMemo(() => {
    const countdowns = data.countdowns.map((countdown) => ({ ...countdown, targetMs: getCountdownTargetMs(countdown, nowMs) }));
    if (!data.sortResults) return countdowns;
    return [...countdowns].sort((a, b) => (a.targetMs || Number.POSITIVE_INFINITY) - (b.targetMs || Number.POSITIVE_INFINITY));
  }, [data.countdowns, data.sortResults, nowMs]);
  const countdownReorder = useGroupedReorder({
    namespace: "timer-countdowns",
    items: data.countdowns,
    getItemId: (countdown) => countdown.id,
    getParentId: () => moduleId,
    canMoveItem: () => !data.sortResults,
    onItemMove: (operation) => {
      if (data.sortResults) return;
      save({ ...data, countdowns: moveItem(data.countdowns, operation.sourceId, operation.targetId, operation.placement) });
    },
    hierarchy: { enabled: true, stickyParents: true }
  });

  function save(nextData) {
    context.setModuleData(toolboxId, moduleId, nextData);
  }

  function setActiveTab(nextActiveTab) {
    save({ ...data, activeTab: nextActiveTab });
  }

  function setScrollResults(scrollResults) {
    save({ ...data, scrollResults });
  }

  function setSortResults(sortResults) {
    save({ ...data, sortResults });
  }

  function updateStopwatch(stopwatch) {
    save({ ...data, stopwatch });
  }

  function startStopwatch() {
    if (data.stopwatch.startedAt) return;
    updateStopwatch({ ...data.stopwatch, startedAt: getNowMs() });
  }

  function pauseStopwatch() {
    if (!data.stopwatch.startedAt) return;
    updateStopwatch({
      ...data.stopwatch,
      startedAt: 0,
      elapsedMs: stopwatchElapsedMs
    });
  }

  function resetStopwatch() {
    updateStopwatch({ ...data.stopwatch, elapsedMs: 0, startedAt: 0 });
  }

  function addLap() {
    if (!stopwatchElapsedMs) return;
    updateStopwatch({
      ...data.stopwatch,
      laps: [
        {
          id: context.uid("timer"),
          label: "",
          elapsedMs: stopwatchElapsedMs
        },
        ...data.stopwatch.laps
      ]
    });
  }

  function deleteLap(lapId) {
    updateStopwatch({ ...data.stopwatch, laps: data.stopwatch.laps.filter((lap) => lap.id !== lapId) });
  }

  function renameLap(lapId, label) {
    updateStopwatch({
      ...data.stopwatch,
      laps: data.stopwatch.laps.map((lap) => lap.id === lapId ? { ...lap, label: label.trim() } : lap)
    });
  }

  function createCountdown(event) {
    countdownDraft.handleSubmit(event, (draft, { updateValues }) => {
      const type = COUNTDOWN_TYPES.includes(draft.type) ? draft.type : "duration";
      const validationError = getCountdownValidationError(type, draft, textContent);
      if (validationError) return validationError;
      const label = draft.label.trim() || textContent.defaultCountdownLabel || "Timer";
      const now = getNowMs();
      let countdown = null;

      if (type === "duration") {
        const durationMs = timePartsToDurationMs(draft.duration);
        if (durationMs > 0) countdown = { id: context.uid("timer"), label, type, durationMs, targetAt: now + durationMs };
      }
      if (type === "daily_time") {
        const time = timePartsToString(draft.time);
        const targetAt = getDailyTargetMs(time, now);
        if (time && targetAt) countdown = { id: context.uid("timer"), label, type, time, targetAt };
      }
      if (type === "time_pattern") {
        const pattern = hasTimePartValue(draft.pattern) ? timePartsToString(draft.pattern, { allowWildcard: true }) : "";
        if (pattern && getTimePatternTargetMs(pattern, now)) countdown = { id: context.uid("timer"), label, type, pattern };
      }
      if (type === "interval") {
        const intervalMs = timePartsToDurationMs(draft.interval);
        const startTime = hasTimePartValue(draft.intervalStartTime) ? timePartsToString(draft.intervalStartTime) : "";
        const startMode = startTime ? "time" : "now";
        const anchorAt = getIntervalAnchorMs(startMode, startTime, now);
        const targetAt = getCountdownTargetMs({ type, intervalMs, anchorAt, autoRefresh: true }, now);
        if (intervalMs > 0) {
          countdown = {
            id: context.uid("timer"),
            label,
            type,
            intervalMs,
            anchorAt,
            targetAt,
            startMode,
            ...(startTime ? { startTime } : {}),
            autoRefresh: intervalMs >= ALERT_MIN_DELAY_MS
          };
        }
      }

      if (!countdown) return;
      save({ ...data, countdowns: [...data.countdowns, countdown] });
      updateValues({ label: "" });
    });
  }

  function deleteCountdown(countdownId) {
    save({ ...data, countdowns: data.countdowns.filter((countdown) => countdown.id !== countdownId) });
  }

  function resetCountdown(countdown) {
    if (countdown.type !== "duration" && countdown.type !== "daily_time" && countdown.type !== "interval") return;
    const now = getNowMs();
    let nextCountdown = null;
    if (countdown.type === "duration") nextCountdown = { ...countdown, targetAt: now + countdown.durationMs };
    if (countdown.type === "daily_time") nextCountdown = { ...countdown, targetAt: getDailyTargetMs(countdown.time, now) };
    if (countdown.type === "interval") {
      const anchorAt = getIntervalAnchorMs(countdown.startMode, countdown.startTime, now);
      const targetAt = getCountdownTargetMs({ ...countdown, anchorAt, autoRefresh: true }, now);
      nextCountdown = { ...countdown, anchorAt, targetAt };
    }
    if (!nextCountdown) return;
    save({ ...data, countdowns: data.countdowns.map((item) => item.id === countdown.id ? nextCountdown : item) });
  }

  function toggleCountdownAutoRefresh(countdownId) {
    const countdown = data.countdowns.find((item) => item.id === countdownId);
    if (!TOGGLE_REFRESH_COUNTDOWN_TYPES.has(countdown?.type)) return;
    if (!countdown.autoRefresh && !canToggleAutoRefresh(countdown)) {
      context.notify?.(getAlertGuardMessage(textContent));
      return;
    }
    const now = getNowMs();
    save({
      ...data,
      countdowns: data.countdowns.map((item) => {
        if (item.id !== countdownId) return item;
        const autoRefresh = !item.autoRefresh;
        if (item.type === "daily_time") return { ...item, autoRefresh, targetAt: getDailyTargetMs(item.time, now) };
        if (item.type === "interval") {
          const anchorAt = getIntervalAnchorMs(item.startMode, item.startTime, now);
          const targetAt = getCountdownTargetMs({ ...item, anchorAt, autoRefresh: true }, now);
          return { ...item, autoRefresh, anchorAt, targetAt };
        }
        return item;
      })
    });
  }

  function renameCountdown(countdownId, label) {
    save({
      ...data,
      countdowns: data.countdowns.map((countdown) => countdown.id === countdownId ? { ...countdown, label: label.trim() } : countdown)
    });
  }

  function setCountdownAlertMode(countdownId, alertMode) {
    const countdown = data.countdowns.find((item) => item.id === countdownId);
    if (alertMode !== "off" && AUTO_REFRESH_COUNTDOWN_TYPES.has(countdown?.type) && isAlertGuarded(countdown)) {
      context.notify?.(getAlertGuardMessage(textContent));
      return;
    }
    save({
      ...data,
      countdowns: data.countdowns.map((countdown) => countdown.id === countdownId ? { ...countdown, alertMode } : countdown)
    });
  }

  function resetActiveResults() {
    if (activeTab === "stopwatch") {
      resetStopwatch();
      return;
    }
    save({ ...data, countdowns: [] });
  }

  return (
    <div className="timer-module">
      {editing && (
        <div className="module-add-panel timer-exchange-panel">
          <TextExchangeActions type="timer" data={data} context={context} textContent={textContent} onImport={(nextData) => save(nextData)} />
        </div>
      )}
      <section className="timer-control-card">
        <Tabs
          className="timer-tabs"
          tabs={[
            { ...TIMER_TABS[0], label: textContent.stopwatchTab || TIMER_TABS[0].label },
            { ...TIMER_TABS[1], label: textContent.countdownTab || TIMER_TABS[1].label }
          ]}
          activeTab={activeTab}
          onChange={setActiveTab}
          iconOnly
        />
        {activeTab === "stopwatch" ? (
          <StopwatchControls
            textContent={textContent}
            elapsedMs={stopwatchElapsedMs}
            running={Boolean(data.stopwatch.startedAt)}
            onStart={startStopwatch}
            onPause={pauseStopwatch}
            onReset={resetStopwatch}
            onLap={addLap}
          />
        ) : (
          <CountdownControls
            textContent={textContent}
            form={countdownDraft.values}
            error={countdownDraft.error}
            onChange={countdownDraft.updateValues}
            onSubmit={createCountdown}
          />
        )}
      </section>
      <section className={`tool-split-results timer-results-card ${data.scrollResults ? "is-scrollable" : ""}`}>
        <div className="tool-split-actions">
          <button className="tool-split-action-button danger" type="button" onClick={resetActiveResults} aria-label={textContent.resetTitle || "Réinitialiser"} title={textContent.resetTitle || "Réinitialiser"}>
            <Icon name="rubber" />
          </button>
          {activeTab === "countdown" && (
            <button
              className={`tool-split-scroll-toggle timer-sort-toggle ${data.sortResults ? "active" : ""}`}
              type="button"
              onClick={() => setSortResults(!data.sortResults)}
              aria-pressed={data.sortResults}
              title={textContent.sortTitle || "Trier par temps restant"}
              aria-label={textContent.sortTitle || "Trier par temps restant"}
            >
              <Icon name="sort-time" />
              <i aria-hidden="true" />
            </button>
          )}
          <button
            className={`tool-split-scroll-toggle timer-scroll-toggle ${data.scrollResults ? "active" : ""}`}
            type="button"
            onClick={() => setScrollResults(!data.scrollResults)}
            aria-pressed={data.scrollResults}
            title={textContent.scrollableTitle || "Liste scrollable"}
            aria-label={textContent.scrollableTitle || "Liste scrollable"}
          >
            <Icon name="scrollable" />
            <i aria-hidden="true" />
          </button>
        </div>
        <div className={`tool-split-tree timer-tree ${data.scrollResults ? "is-scrollable legacy-scrollbar" : ""}`}>
          {activeTab === "stopwatch" ? (
            <StopwatchLapList laps={data.stopwatch.laps} textContent={textContent} onRename={renameLap} onDelete={deleteLap} />
          ) : (
            <CountdownList countdowns={visibleCountdowns} nowMs={nowMs} textContent={textContent} reorder={countdownReorder} reorderEnabled={!data.sortResults} parentId={moduleId} onRename={renameCountdown} onAlertModeChange={setCountdownAlertMode} onReset={resetCountdown} onAutoRefreshToggle={toggleCountdownAutoRefresh} onDelete={deleteCountdown} />
          )}
        </div>
      </section>
    </div>
  );
}

function TimerAlertModeSwitch({ mode, blocked, textContent, onChange }) {
  const labels = {
    off: textContent.alertOffTitle || "Pas d'alerte",
    visible: textContent.alertVisibleTitle || "Alerte quand la toolbox est affichée",
    site: textContent.alertSiteTitle || "Alerte sur tout le site"
  };
  const blockedTitle = getAlertGuardMessage(textContent);

  return (
    <div
      className={`timer-alert-mode-switch ${blocked ? "is-blocked" : ""}`}
      role="group"
      aria-label={textContent.alertModeTitle || "Mode d'alerte"}
      title={blocked ? blockedTitle : undefined}
      onClick={(event) => event.stopPropagation()}
      onKeyDown={(event) => event.stopPropagation()}
    >
      {ALERT_MODES.map((option) => {
        const label = labels[option.mode];
        const disabled = Boolean(blocked);
        return (
        <button
          key={option.mode}
          className={`timer-alert-mode-button ${!blocked && mode === option.mode ? "active" : ""}`}
          type="button"
          onClick={() => onChange(option.mode)}
          disabled={disabled}
          aria-pressed={mode === option.mode}
          aria-label={disabled ? blockedTitle : label}
          title={disabled ? blockedTitle : label}
        >
          <Icon name={option.icon} />
        </button>
        );
      })}
    </div>
  );
}

function StopwatchControls({ textContent, elapsedMs, running, onStart, onPause, onReset, onLap }) {
  return (
    <div className="timer-control-panel" role="tabpanel">
      <span>{textContent.stopwatchTitle || "Chronomètre à étapes"}</span>
      <strong><TimerValue ms={elapsedMs} compact /></strong>
      <div className="timer-actions">
        <button className="primary timer-action-button" type="button" onClick={running ? onPause : onStart} aria-label={running ? textContent.pauseButton || "Pause" : textContent.startButton || "Lancer"} title={running ? textContent.pauseButton || "Pause" : textContent.startButton || "Lancer"}>
          <Icon name={running ? "pause-circle" : "play-circle"} />
        </button>
        <button className="timer-action-button" type="button" onClick={onLap} disabled={!elapsedMs} aria-label={textContent.lapButton || "Étape"} title={textContent.lapButton || "Étape"}>
          <Icon name="record-circle" />
        </button>
        <button className="danger timer-action-button" type="button" onClick={onReset} aria-label={textContent.resetTitle || "Réinitialiser"} title={textContent.resetTitle || "Réinitialiser"}>
          <Icon name="stop-circle" />
        </button>
      </div>
    </div>
  );
}

function CountdownControls({ textContent, form, error, onChange, onSubmit }) {
  return (
    <form className="timer-control-panel timer-countdown-form" role="tabpanel" onSubmit={onSubmit} aria-describedby={error ? "timer-countdown-error" : undefined}>
      <label>
        <span>{textContent.countdownLabel || "Libellé"}</span>
        <input value={form.label} onChange={(event) => onChange({ label: event.target.value })} placeholder={textContent.countdownLabelPlaceholder || "Boss, event, craft..."} />
      </label>
      <label>
        <span>{textContent.countdownTypeLabel || "Type"}</span>
        <select value={form.type} onChange={(event) => onChange({ type: event.target.value })}>
          <option value="duration">{textContent.durationType || "Durée"}</option>
          <option value="daily_time">{textContent.dailyTimeType || "Heure précise"}</option>
          <option value="time_pattern">{textContent.timePatternType || "Pattern horaire"}</option>
          <option value="interval">{textContent.intervalType || "Intervalle"}</option>
        </select>
      </label>
      {form.type === "duration" && (
        <label>
          <span className="timer-field-spacer" aria-hidden="true" />
          <span className="sr-only">{textContent.durationLabel || "Durée"}</span>
          <TimePartsInput value={form.duration} onChange={(duration) => onChange({ duration })} />
        </label>
      )}
      {form.type === "daily_time" && (
        <label>
          <span className="timer-field-spacer" aria-hidden="true" />
          <span className="sr-only">{textContent.dailyTimeLabel || "Heure"}</span>
          <TimePartsInput value={form.time} onChange={(time) => onChange({ time })} />
        </label>
      )}
      {form.type === "time_pattern" && (
        <label>
          <span className="timer-field-spacer" aria-hidden="true" />
          <span className="sr-only">{textContent.timePatternLabel || "Heure / minute / seconde"}</span>
          <TimePartsInput value={form.pattern} onChange={(pattern) => onChange({ pattern })} allowWildcard />
        </label>
      )}
      {form.type === "interval" && (
        <div className="timer-interval-fields">
          <label>
            <span>{textContent.intervalLabel || "Toutes les"}</span>
            <TimePartsInput value={form.interval} onChange={(interval) => onChange({ interval })} />
          </label>
          <label>
            <span>{textContent.intervalStartTimeLabel || "Départ"}</span>
            <TimePartsInput value={form.intervalStartTime} onChange={(intervalStartTime) => onChange({ intervalStartTime })} />
          </label>
        </div>
      )}
      {error && (
        <p id="timer-countdown-error" className="timer-form-error" role="alert">
          <Icon name="close" />
          <span>{error}</span>
        </p>
      )}
      <button className="primary" type="submit">{textContent.addCountdownButton || "Ajouter"}</button>
    </form>
  );
}

function TimePartsInput({ value, onChange, allowWildcard = false }) {
  function updatePart(part, nextValue) {
    const cleanValue = allowWildcard && /^x+$/i.test(nextValue.trim()) ? "X" : nextValue.replace(/[^\d]/g, "").slice(0, 2);
    onChange({ ...value, [part]: cleanValue });
  }

  return (
    <div className="time-parts-input" role="group" aria-label="Format heure minute seconde">
      <input value={value.hours} onChange={(event) => updatePart("hours", event.target.value)} placeholder="hh" inputMode={allowWildcard ? "text" : "numeric"} />
      <span>:</span>
      <input value={value.minutes} onChange={(event) => updatePart("minutes", event.target.value)} placeholder="mm" inputMode={allowWildcard ? "text" : "numeric"} />
      <span>:</span>
      <input value={value.seconds} onChange={(event) => updatePart("seconds", event.target.value)} placeholder="ss" inputMode={allowWildcard ? "text" : "numeric"} />
    </div>
  );
}

function StopwatchLapList({ laps, textContent, onRename, onDelete }) {
  const [editingId, setEditingId] = useState("");
  if (!laps.length) return <p className="muted">{textContent.emptySteps || "Aucune étape enregistrée."}</p>;
  return (
    <ul className="tool-split-entry-list timer-list">
      {laps.map((lap, index) => (
        <li key={lap.id} className={`timer-list-item ${editingId === lap.id ? "is-editing" : ""}`}>
          <div className="tool-split-entry timer-entry has-single-action">
            {editingId === lap.id ? (
              <EditableTimerLabel
                value={lap.label}
                placeholder={`${textContent.stepLabel || "Étape"} ${laps.length - index}`}
                ariaLabel={textContent.lapLabelAriaLabel || "Libellé de l'étape"}
                onRename={(label) => onRename(lap.id, label)}
                onDone={() => setEditingId("")}
              >
                <TimerValue ms={lap.elapsedMs} />
              </EditableTimerLabel>
            ) : (
              <span
                className="tool-split-entry-summary timer-entry-summary"
                role="button"
                tabIndex={0}
                onClick={() => setEditingId(lap.id)}
                onKeyDown={(event) => handleEditableKeyDown(event, () => setEditingId(lap.id))}
              >
                <span className="timer-entry-line">
                  <TimerValue ms={lap.elapsedMs} />
                  <span>{lap.label || `${textContent.stepLabel || "Étape"} ${laps.length - index}`}</span>
                </span>
              </span>
            )}
            <button className="danger" type="button" onClick={() => onDelete(lap.id)} aria-label={textContent.deleteTitle || "Supprimer"} title={textContent.deleteTitle || "Supprimer"}>
              <Icon name="trash" />
            </button>
          </div>
        </li>
      ))}
    </ul>
  );
}

function CountdownList({ countdowns, nowMs, textContent, reorder, reorderEnabled, parentId, onRename, onAlertModeChange, onReset, onAutoRefreshToggle, onDelete }) {
  const [editingId, setEditingId] = useState("");
  if (!countdowns.length) return <p className="muted">{textContent.emptyCountdowns || "Aucun compte à rebours configuré."}</p>;
  return (
    <ul className="tool-split-entry-list timer-list">
      {countdowns.map((countdown) => {
        const remainingMs = countdown.targetMs - nowMs;
        const expired = remainingMs <= 0;
        const canReset = countdown.type === "duration";
        const canToggleRefresh = TOGGLE_REFRESH_COUNTDOWN_TYPES.has(countdown.type);
        const refreshBlocked = canToggleRefresh && !canToggleAutoRefresh(countdown);
        const refreshTitle = refreshBlocked
          ? getAlertGuardMessage(textContent)
          : textContent.autoRefreshTitle || "Répéter automatiquement";
        const className = [
          "timer-list-item",
          expired ? "is-expired" : "",
          editingId === countdown.id ? "is-editing" : "",
          reorderEnabled && reorder.isItemDragging(countdown.id) ? "is-dragging" : "",
          reorderEnabled && reorder.isItemDropTarget(countdown.id) ? "is-drop-target" : "",
          reorderEnabled && reorder.getDropPlacement("item", countdown.id) === "after" ? "drop-after" : ""
        ].filter(Boolean).join(" ");
        const reorderProps = reorderEnabled ? reorder.getItemProps({ itemId: countdown.id, parentId }) : {};

        return (
          <li key={countdown.id} className={className} {...reorderProps}>
            <div className={`tool-split-entry timer-entry has-single-action ${reorderEnabled ? "has-drag-handle" : ""} ${editingId !== countdown.id ? "has-inline-controls" : ""} ${(canReset || canToggleRefresh) && editingId !== countdown.id ? "has-inline-reset" : ""}`}>
              {reorderEnabled && (
                <button
                  className="timer-drag-handle"
                  type="button"
                  onPointerDown={(event) => reorder.itemReorder.startDrag(event, countdown.id)}
                  aria-label={`${textContent.reorderTitle || "Déplacer"} ${countdown.label}`}
                  title={textContent.reorderTitle || "Déplacer"}
                >
                  <Icon name="drag" />
                </button>
              )}
              {editingId === countdown.id ? (
                <EditableTimerLabel
                  value={countdown.label}
                  placeholder={textContent.defaultCountdownLabel || "Timer"}
                  ariaLabel={textContent.countdownLabel || "Libellé"}
                  onRename={(label) => onRename(countdown.id, label)}
                  onDone={() => setEditingId("")}
                >
                  <TimerValue ms={remainingMs} showCentiseconds={false} />
                </EditableTimerLabel>
              ) : (
                <span
                  className="tool-split-entry-summary timer-entry-summary"
                  role="button"
                  tabIndex={0}
                  onClick={() => setEditingId(countdown.id)}
                  onKeyDown={(event) => handleEditableKeyDown(event, () => setEditingId(countdown.id))}
                >
                  <span className="timer-entry-line">
                    <TimerValue ms={remainingMs} showCentiseconds={false} />
                    <span>{countdown.label}</span>
                    <span className="timer-inline-controls">
                      {canReset && (
                        <button
                          className="timer-inline-reset"
                          type="button"
                          onClick={(event) => {
                            event.stopPropagation();
                            onReset(countdown);
                          }}
                          aria-label={textContent.resetTitle || "Réinitialiser"}
                          title={textContent.resetTitle || "Réinitialiser"}
                        >
                          <Icon name="refresh" />
                        </button>
                      )}
                      {canToggleRefresh && (
                        <button
                          className={`timer-inline-refresh-toggle ${countdown.autoRefresh ? "active" : ""} ${refreshBlocked ? "is-blocked" : ""}`}
                          type="button"
                          onClick={(event) => {
                            event.stopPropagation();
                            onAutoRefreshToggle(countdown.id);
                          }}
                          disabled={refreshBlocked}
                          aria-pressed={Boolean(countdown.autoRefresh)}
                          aria-label={refreshTitle}
                          title={refreshTitle}
                        >
                          <Icon name="refresh" />
                          <i aria-hidden="true" />
                        </button>
                      )}
                    <TimerAlertModeSwitch
                      mode={countdown.alertMode}
                      blocked={AUTO_REFRESH_COUNTDOWN_TYPES.has(countdown.type) && isAlertGuarded(countdown)}
                      textContent={textContent}
                        onChange={(alertMode) => onAlertModeChange(countdown.id, alertMode)}
                      />
                    </span>
                  </span>
                </span>
              )}
              <button className="danger" type="button" onClick={() => onDelete(countdown.id)} aria-label={textContent.deleteTitle || "Supprimer"} title={textContent.deleteTitle || "Supprimer"}>
                <Icon name="trash" />
              </button>
            </div>
            <p className="timer-entry-meta">
              <span>
                {getCountdownMetaParts(countdown, textContent).map((part, index) => (
                  <b key={`${part}-${index}`}>{part}</b>
                ))}
              </span>
              <em>
                <b>{expired ? textContent.finishedLabel || "Terminé" : `${textContent.targetLabel || "Prochaine occurrence"} ${formatTargetTime(countdown.targetMs)}`}</b>
              </em>
            </p>
          </li>
        );
      })}
    </ul>
  );
}

function EditableTimerLabel({ value, placeholder, ariaLabel, children, onRename, onDone }) {
  const inlineEdit = useInlineEdit({
    value,
    onCommit: onRename,
    onDone,
    autoFocus: true,
    commitUnchanged: true
  });

  return (
    <>
      <span className="tool-split-entry-value timer-entry-value is-readonly">{children}</span>
      <input
        {...inlineEdit.getInputProps({
          className: "tool-split-entry-label timer-lap-label",
          placeholder,
          "aria-label": ariaLabel
        })}
      />
    </>
  );
}