// Rôle : expose le suivi du guide dans chaque checklist compatible et marque les cartes terminées.
import { Icon } from "../../components/Icon.jsx";

export function GuideChecklistToggle({ checklist, panel, label }) {
  if (!panel.list) return null;
  return <button
    className={`module-guide-button nds-icon-button ${panel.open ? "active" : ""}`}
    data-size="md"
    data-linked={checklist.selected?.id === panel.list.id || undefined}
    type="button"
    aria-label={`${checklist.content.label} — ${label}`}
    title={checklist.content.label}
    aria-expanded={panel.open}
    aria-pressed={panel.open}
    aria-controls={panel.id}
    onClick={panel.toggle}
  ><Icon name="link" /></button>;
}

export function GuideChecklistControls({ checklist, list, id, open }) {
  if (!list) return null;
  const { content, selected, hideCompleted } = checklist;
  const active = selected?.id === list.id;
  return <div id={id} hidden={!open} className="guide-checklist-controls" data-linked={active || undefined}>
    <div className="guide-checklist-actions">
      <button type="button" className="guide-checklist-link nds-button" data-size="sm" data-variant={active ? "primary" : "secondary"} aria-pressed={active} onClick={() => checklist.associate(active ? "" : list.id)}>{active ? content.unlink : content.associate}</button>
      <button type="button" className="nds-switch" disabled={!active} aria-pressed={active && hideCompleted} onClick={checklist.toggleHidden}><Icon name="hide" /><span>{content.hideCompleted}</span><i aria-hidden="true" /></button>
    </div>
    <p>{list.count ? `${list.count} ${content.matches}` : content.noMatches}</p>
  </div>;
}

export function GuideChecklistPageControls({ checklist }) {
  if (!checklist.selected) return null;
  const { content, hideCompleted } = checklist;
  return (
    <aside className="guide-checklist-page-controls nds-tool-panel" aria-label={content.label}>
      <button className={`nds-switch ${hideCompleted ? "active" : ""}`} data-size="sm" type="button" aria-pressed={hideCompleted} onClick={checklist.toggleHidden}>
        <Icon name="hide" />
        <span>{content.hideCompleted}</span>
        <i aria-hidden="true" />
      </button>
      <button className="nds-button" data-size="xs" data-variant="secondary" type="button" onClick={() => checklist.associate("")}>{content.unlink}</button>
    </aside>
  );
}

export function GuideChecklistMark({ completed, label }) {
  return completed ? <span className="guide-checklist-mark nds-badge" data-variant="neutral" role="img" aria-label={label} title={label}>✓</span> : null;
}

export function GuideChecklistCheckbox({ checklist, itemKey }) {
  if (!checklist.canToggle(itemKey)) return null;
  const completed = checklist.isCompleted(itemKey);
  const label = completed ? checklist.content.uncheckCard : checklist.content.checkCard;
  return <label className="guide-checklist-checkbox" title={label} onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
    <input className="nds-checkbox" data-size="sm" type="checkbox" checked={completed} onChange={() => checklist.toggleCompleted(itemKey)} aria-label={label} />
  </label>;
}