// Display-only catalog, generated from the reviewed macOS handoff snapshot.
const ACTION_CATEGORIES = [
  { id: 'quick', title: 'Quick', icon: 'zap' },
  { id: 'writing', title: 'Writing', icon: 'pen-line' },
  { id: 'code', title: 'Code', icon: 'code' },
  { id: 'vision', title: 'Vision', icon: 'eye' },
  { id: 'translate', title: 'Translate', icon: 'languages' },
];
const ACTION_INPUTS = {
  selectedText: 'Selected text from the app you are working in.',
  command: 'The prompt you type in Caret.',
  auto: 'Context chosen automatically by Caret.',
  image: 'An image copied to your clipboard.',
  none: 'No explicit input is requested by this catalog action.',
};
const ACTION_OUTPUTS = {
  dialogue: 'Show the result in Caret’s dialogue panel.',
  replaceSelection: 'Replace the selected text.',
  paste: 'Paste the result at the cursor.',
  copy: 'Copy the result to the clipboard.',
};
function ActionLibrary() {
  const [query, setQuery] = useState('');
  const [category, setCategory] = useState('all');
  const actions = window.CARET_ACTIONS;
  const filtered = actions.filter(action => (category === 'all' || category === action.assignedTabID) &&
    [action.title, action.subtitle, action.assignedTabID, action.alias].join(' ').toLowerCase().includes(query.trim().toLowerCase()));
  return <section id="actions" className="section"><div className="wrap-wide">
    <SectionHead eyebrow="Action Library" title={`${actions.length} actions to start. A library built to grow.`} sub="Explore actions for writing, code, images, translation, and everyday questions. New actions can be added to the shared library without rebuilding the app. Refresh the library in Caret to pick them up." />
    <div className="catalog-tools">
      <label htmlFor="action-search">Find your next action</label>
      <input id="action-search" type="search" placeholder="Search actions…" value={query} onChange={event => setQuery(event.target.value)} aria-controls="action-results" />
      <div className="catalog-filters" role="group" aria-label="Filter actions by category">
        {[{id:'all',title:'All'}, ...ACTION_CATEGORIES].map(item => <button key={item.id} type="button" aria-pressed={category === item.id} onClick={() => setCategory(item.id)}>{item.title} <span>{item.id === 'all' ? actions.length : actions.filter(a => a.assignedTabID === item.id).length}</span></button>)}
      </div>
      <p className="feature-note" role="status">{filtered.length} {filtered.length === 1 ? 'action' : 'actions'} found</p>
    </div>
    <div id="action-results" className="catalog-grid">
      {filtered.map(action => {
        const tab = ACTION_CATEGORIES.find(item => item.id === action.assignedTabID);
        return <article className="catalog-card" key={action.id}>
          <div className="catalog-card-top"><span className={'tabicon t-' + tab.id}><Icon name={tab.icon} size={19} color="#fff" /></span><span className="catalog-category">{tab.title}</span><Alias>{action.alias}</Alias></div>
          <h3>{action.title}</h3><p>{action.subtitle}</p>
          <details onKeyDown={event => { if (event.key === 'Escape') { event.currentTarget.open = false; event.currentTarget.querySelector('summary').focus(); } }}>
            <summary aria-label={'View details for ' + action.title}>View details</summary>
            <dl><dt>Input</dt><dd>{ACTION_INPUTS[action.input]}</dd><dt>Default result</dt><dd>{ACTION_OUTPUTS[action.outputMode]}</dd></dl>
            {action.id === 'commit' && <p className="feature-note">Supply selected diff or change context yourself. Caret does not automatically read your repository or staged changes.</p>}
            <h4>How to use</h4><ol><li>Connect an AI provider in Settings.</li><li>{action.input === 'image' ? 'Copy an image to your clipboard.' : action.input === 'selectedText' ? 'Select the text you want to work with.' : action.input === 'command' ? 'Have your prompt ready to type.' : 'Prepare the context you want to work with.'}</li><li>Summon Caret, type <Key>{action.alias}</Key>{action.input === 'command' ? ' and your prompt' : ''}, then press <Key>Enter</Key>.</li></ol>
          </details>
        </article>;
      })}
    </div>
    {!filtered.length && <div className="catalog-empty"><h3>No matching actions.</h3><p>Try another name, category or alias.</p><button className="btn btn-ghost" onClick={() => {setQuery('');setCategory('all');}}>Clear filters</button></div>}
    <div className="library-growth">
      <div><Eyebrow>Room for what’s next</Eyebrow><h3>A library that grows with your work.</h3><p>The shared catalog can be extended with new prompts and workflows. Choose which actions appear, organize their tabs, and pick the model and shortcut for each. The shared catalog supplies their prompts and aliases.</p><p>Apps, Files, Clipboard and Snippets are additional utilities, outside this AI action count.</p><a className="btn btn-ghost" href="mailto:hi@oddproof.ai?subject=Caret%20action%20request">Request an action →</a></div>
      <ProductShot file="08-action-library.png" alt="Caret Settings showing the supplied action library and configuration options" caption="Refresh from library in Caret Settings." />
    </div>
  </div></section>;
}
Object.assign(window, { ActionLibrary });