liqa/client/src/pages/credential/CredentialDetailPage.tsx

import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { usePageTitle } from '../../hooks/usePageTitle';
import { Upload, Pencil, Trash2, KeyRound } from 'lucide-react';
import { CodeBlock } from '../../ui';
import { stringify as yamlStringify } from 'yaml';
import { credentials } from '../../api';
import type { Credential } from '../../api';
import { Breadcrumbs, Button, Card, DescriptionList, Timestamp, UuidBadge } from '../../ui';
import { DeleteConfirmationModal } from '../../components/modals';
import styles from '../Page.module.css';

export function CredentialDetailPage() {
  const { t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [credential, setCredential] = useState<Credential | null>(null);
  const [loading, setLoading] = useState(true);
  usePageTitle(credential?.name ?? null);
  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    if (!id) return;
    credentials
      .get(id)
      .then(setCredential)
      .finally(() => setLoading(false));
  }, [id]);

  const handleDelete = async () => {
    if (!credential) return;
    setDeleting(true);
    try {
      await credentials.remove(credential.id);
      navigate('/credentials');
    } finally {
      setDeleting(false);
      setConfirmDeleteOpen(false);
    }
  };

  const handleExport = async () => {
    if (!credential) return;
    const data = await credentials.exportCredential(credential.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 = `credential-${credential.name}.yaml`;
    a.click();
    URL.revokeObjectURL(url);
  };

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

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

      {credential && (
        <>
          <Card>
            <DescriptionList
              layout="grid"
              items={[
                { term: t('credentials.field_id'), detail: <UuidBadge id={credential.id} /> },
                {
                  term: t('credentials.field_last_used'),
                  detail: credential.lastUsedAt ? <Timestamp value={credential.lastUsedAt} /> : '—',
                },
                {
                  term: t('credentials.field_created'),
                  detail: <Timestamp value={credential.createdAt} />,
                },
                {
                  term: t('credentials.field_updated'),
                  detail: <Timestamp value={credential.updatedAt} />,
                },
              ]}
            />
          </Card>

          {credential.data && (
            <div className={styles.stepsSection}>
              <h2 className={styles.sectionHeading}>{t('credentials.section_data')}</h2>
              <Card>
                <CodeBlock
                  language="json"
                  code={(() => {
                    try {
                      return JSON.stringify(JSON.parse(credential.data), null, 2);
                    } catch {
                      return credential.data;
                    }
                  })()}
                />
              </Card>
            </div>
          )}
        </>
      )}

      <DeleteConfirmationModal
        open={confirmDeleteOpen}
        title={t('credentials.action_delete')}
        message={t('common.confirm_delete_credential')}
        onClose={() => setConfirmDeleteOpen(false)}
        onConfirm={handleDelete}
        isDeleting={deleting}
      />
    </div>
  );
}