liqa/client/src/pages/snippet/SnippetsPage.tsx

import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { usePageTitle } from '../../hooks/usePageTitle';
import { Settings, Pencil, Trash2, Plus, Download, Braces } from 'lucide-react';
import { parse as yamlParse } from 'yaml';
import { snippets } from '../../api';
import type { Snippet } from '../../api';
import {
  Breadcrumbs,
  Button,
  Card,
  ContextMenu,
  MarkdownContent,
  Modal,
  Timestamp,
  UuidBadge,
} from '../../ui';
import styles from '../Page.module.css';

function firstParagraphBlocks(
  markdown: string,
  limit = 2,
): { preview: string; truncated: boolean } {
  const blocks = markdown
    .split(/\n\s*\n/g)
    .map((block) => block.trim())
    .filter(Boolean);

  const sliced = blocks.slice(0, limit);
  return {
    preview: sliced.join('\n\n'),
    truncated: blocks.length > limit,
  };
}

function SnippetCard({ snippet, onDelete }: { snippet: Snippet; onDelete: (id: string) => void }) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const header = (
    <div className={styles.envCardHeader}>
      <span className={styles.envCardName}>{snippet.title}</span>
      <div onClick={(e) => e.stopPropagation()}>
        <ContextMenu
          align="right"
          trigger={
            <Button variant="ghost" size="sm" aria-label={t('snippets.menu_label')}>
              <Settings size={14} />
            </Button>
          }
          items={[
            {
              label: t('snippets.action_edit'),
              icon: <Pencil size={14} />,
              onClick: () => navigate(`/snippets/${snippet.id}/edit`),
            },
            {
              label: t('snippets.action_delete'),
              icon: <Trash2 size={14} />,
              variant: 'danger',
              onClick: () => onDelete(snippet.id),
            },
          ]}
        />
      </div>
    </div>
  );

  const footer = (
    <div className={styles.envCardFooter}>
      <UuidBadge id={snippet.id} />
      <Timestamp value={snippet.updatedAt} />
    </div>
  );

  return (
    <Card
      className={styles.envCard}
      header={header}
      headerVariant="primary"
      footer={footer}
      onClick={() => navigate(`/snippets/${snippet.id}`)}
    >
      <p className={styles.muted}>
        {t('snippets.field_alias')}: <code className={styles.codeInline}>{snippet.alias}</code>
      </p>
      {snippet.description &&
        (() => {
          const { preview, truncated } = firstParagraphBlocks(snippet.description, 2);
          if (!preview) return null;
          return (
            <>
              <MarkdownContent content={preview} />
              {truncated && <p className={styles.muted}>...</p>}
            </>
          );
        })()}
    </Card>
  );
}

function AddSnippetCard() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  return (
    <div className={styles.envCardAdd}>
      <Button variant="ghost" onClick={() => navigate('/snippets/new')}>
        <Plus size={16} />
        {t('snippets.action_add')}
      </Button>
    </div>
  );
}

export function SnippetsPage() {
  const { t } = useTranslation();
  usePageTitle(t('snippets.title'));
  const navigate = useNavigate();
  const [items, setItems] = useState<Snippet[]>([]);
  const [loading, setLoading] = useState(true);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [deleting, setDeleting] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const load = () => {
    snippets
      .list()
      .then((res) => setItems(res.data))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    load();
  }, []);

  const requestDelete = (id: string) => {
    setDeleteId(id);
  };

  const handleDelete = async () => {
    if (!deleteId) return;
    setDeleting(true);
    try {
      await snippets.remove(deleteId);
      load();
      setDeleteId(null);
    } finally {
      setDeleting(false);
    }
  };

  const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = '';
    try {
      const text = await file.text();
      const payload = yamlParse(text) as unknown;
      const imported = await snippets.importSnippet(payload);
      navigate(`/snippets/${imported.id}`);
    } catch {
      // Import errors are silently ignored
    }
  };

  return (
    <div>
      <div className={styles.pageToolbar}>
        <Breadcrumbs items={[{ label: t('snippets.title'), icon: <Braces size={14} /> }]} />
        <div className={styles.toolbarActions}>
          <input
            ref={fileInputRef}
            type="file"
            accept=".yaml,.yml,.json"
            style={{ display: 'none' }}
            onChange={handleImport}
          />
          <Button variant="secondary" size="sm" onClick={() => fileInputRef.current?.click()}>
            <Download size={14} />
            {t('snippets.action_import')}
          </Button>
        </div>
      </div>

      {loading && <p className={styles.muted}>{t('snippets.loading')}</p>}

      {!loading && (
        <div className={styles.envGrid}>
          {items.map((s) => (
            <SnippetCard key={s.id} snippet={s} onDelete={requestDelete} />
          ))}
          {items.length === 0 && <p className={styles.muted}>{t('snippets.empty')}</p>}
          <AddSnippetCard />
        </div>
      )}

      <Modal
        open={deleteId != null}
        title={t('snippets.action_delete')}
        onClose={() => !deleting && setDeleteId(null)}
        footer={
          <>
            <Button variant="secondary" onClick={() => setDeleteId(null)} disabled={deleting}>
              {t('common.button_cancel')}
            </Button>
            <Button variant="danger" onClick={handleDelete} disabled={deleting}>
              {t('snippets.action_delete')}
            </Button>
          </>
        }
      >
        {t('common.confirm_delete_snippet')}
      </Modal>
    </div>
  );
}