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

import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Download, Pencil, Trash2 } from 'lucide-react';
import { stringify as yamlStringify } from 'yaml';
import { snippets } from '../../api';
import type { Snippet } from '../../api';
import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp, UuidBadge } from '../../ui';
import styles from '../Page.module.css';

export function SnippetDetailPage() {
  const { t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [snippet, setSnippet] = useState<Snippet | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!id) return;
    snippets
      .get(id)
      .then(setSnippet)
      .catch((err: Error) => setError(err.message))
      .finally(() => setLoading(false));
  }, [id]);

  const handleDelete = async () => {
    if (!snippet) return;
    await snippets.remove(snippet.id);
    navigate('/snippets');
  };

  const handleExport = async () => {
    if (!snippet) return;
    const data = await snippets.exportSnippet(snippet.id);
    const blob = new Blob([yamlStringify(data)], { type: 'application/yaml' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `snippet-${snippet.name}.yaml`;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <div className={styles.pageToolbar}>
        <Breadcrumbs
          items={[
            { label: t('snippets.title'), onClick: () => navigate('/snippets') },
            { label: snippet?.name ?? `#${id}` },
          ]}
        />
        {snippet && (
          <div className={styles.toolbarActions}>
            <Button variant="secondary" size="sm" onClick={handleExport}>
              <Download size={14} />
              {t('snippets.action_export')}
            </Button>
            <Button
              variant="secondary"
              size="sm"
              onClick={() => navigate(`/snippets/${snippet.id}/edit`)}
            >
              <Pencil size={14} />
              {t('snippets.action_edit')}
            </Button>
            <Button variant="danger" size="sm" onClick={handleDelete}>
              <Trash2 size={14} />
              {t('snippets.action_delete')}
            </Button>
          </div>
        )}
      </div>

      {error && (
        <Notification
          variant="error"
          title={error.startsWith('404') ? t('errors.not_found') : undefined}
        >
          {error.startsWith('404') ? t('errors.not_found_snippet', { id }) : error}
        </Notification>
      )}

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

      {snippet && (
        <>
          <div className={styles.detailMeta}>
            <DescriptionList
              layout="comfortable"
              items={[
                { term: t('snippets.field_id'), detail: <UuidBadge id={snippet.id} /> },
                { term: t('snippets.field_name'), detail: snippet.name },
                {
                  term: t('snippets.field_description'),
                  detail: snippet.description ?? '—',
                },
                {
                  term: t('snippets.field_created'),
                  detail: <Timestamp value={snippet.createdAt} />,
                },
                {
                  term: t('snippets.field_updated'),
                  detail: <Timestamp value={snippet.updatedAt} />,
                },
              ]}
            />
          </div>

          <div className={styles.stepsSection}>
            <div className={styles.sectionHeader}>
              <h2 className={styles.sectionHeading}>{t('snippets.section_code')}</h2>
            </div>
            <Card>
              <pre className={styles.codeBlock}>{snippet.code}</pre>
            </Card>
          </div>
        </>
      )}
    </div>
  );
}