liqa/client/src/pages/scenario/ScenarioDetailPage.tsx

import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Play, Pencil, Plus, History, Trash2, Upload } from 'lucide-react';
import { stringify as yamlStringify } from 'yaml';
import { scenarios, steps, scenarioCredentials, credentials as credentialsApi } from '../../api';
import type { Scenario, ScenarioStep, ScenarioCredential, Credential } from '../../api';
import {
  Badge,
  Breadcrumbs,
  Button,
  Card,
  DescriptionList,
  Input,
  Notification,
  Select,
  Table,
  Timestamp,
  UuidBadge,
  type TableColumn,
} from '../../ui';
import styles from '../Page.module.css';

const STEP_TYPE_VARIANT: Record<string, 'info' | 'warning' | 'success'> = {
  login: 'success',
  exec: 'info',
  sign: 'warning',
};

export function ScenarioDetailPage() {
  const { t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [scenario, setScenario] = useState<(Scenario & { steps: ScenarioStep[] }) | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Credentials state
  const [scenarioCreds, setScenarioCreds] = useState<ScenarioCredential[]>([]);
  const [allCredentials, setAllCredentials] = useState<Credential[]>([]);
  const [addCredOpen, setAddCredOpen] = useState(false);
  const [addCredId, setAddCredId] = useState('');
  const [addAlias, setAddAlias] = useState('');
  const [addCredError, setAddCredError] = useState('');
  const [addAliasError, setAddAliasError] = useState('');
  const [addCredSaving, setAddCredSaving] = useState(false);

  useEffect(() => {
    if (!id) return;
    scenarios
      .get(id)
      .then((s) => {
        setScenario(s);
        setScenarioCreds(s.scenarioCredentials ?? []);
      })
      .catch((err: Error) => setError(err.message))
      .finally(() => setLoading(false));
    credentialsApi
      .list(1, 200)
      .then((r) => setAllCredentials(r.data))
      .catch(() => {});
  }, [id]);

  const handleRun = async () => {
    if (!scenario) return;
    const run = await scenarios.run(scenario.id);
    navigate(`/scenarios/${id}/runs/${run.id}`);
  };

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

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

  const handleDeleteStep = async (stepId: string) => {
    await steps.remove(id!, stepId);
    setScenario((prev) =>
      prev ? { ...prev, steps: prev.steps.filter((s) => s.id !== stepId) } : prev,
    );
  };

  const handleAddCredential = async (e: React.FormEvent) => {
    e.preventDefault();
    let valid = true;
    if (!addCredId) { setAddCredError(t('scenarios.cred_form_cred_required')); valid = false; }
    if (!addAlias.trim()) { setAddAliasError(t('scenarios.cred_form_alias_required')); valid = false; }
    if (!valid) return;
    setAddCredSaving(true);
    try {
      const sc = await scenarioCredentials.add(id!, addCredId, addAlias.trim());
      // Re-fetch the credential object since the response may not include it
      const full = await scenarioCredentials.list(id!);
      setScenarioCreds(full);
      void sc;
      setAddCredOpen(false);
      setAddCredId('');
      setAddAlias('');
    } catch (err) {
      setAddCredError((err as Error).message);
    } finally {
      setAddCredSaving(false);
    }
  };

  const handleRemoveCredential = async (scCredId: string) => {
    await scenarioCredentials.remove(id!, scCredId);
    setScenarioCreds((prev) => prev.filter((sc) => sc.id !== scCredId));
  };

  const stepColumns: TableColumn<ScenarioStep>[] = [
    { key: 'order', header: t('scenarios.step_order'), render: (s) => s.order, width: 60 },
    {
      key: 'type',
      header: t('scenarios.step_type'),
      width: 90,
      render: (s) => <Badge variant={STEP_TYPE_VARIANT[s.type] ?? 'neutral'}>{s.type}</Badge>,
    },
    {
      key: 'title',
      header: t('scenarios.step_title'),
      render: (s) => s.title ?? <span style={{ color: 'var(--color-text-muted)', fontStyle: 'italic' }}>{'—'}</span>,
    },
    {
      key: 'updated',
      header: t('scenarios.step_updated'),
      width: 140,
      render: (s) => <Timestamp value={s.updatedAt} />,
    },
    {
      key: 'actions',
      header: '',
      width: 80,
      align: 'right',
      render: (s) => (
        <span style={{ display: 'inline-flex', gap: 6 }}>
          <Button
            size="sm"
            variant="secondary"
            title={t('steps.action_edit')}
            onClick={(e) => {
              e.stopPropagation();
              navigate(`/scenarios/${id}/steps/${s.id}/edit`);
            }}
          >
            <Pencil size={14} />
          </Button>
          <Button
            size="sm"
            variant="danger"
            title={t('steps.action_delete')}
            onClick={(e) => {
              e.stopPropagation();
              handleDeleteStep(s.id);
            }}
          >
            <Trash2 size={14} />
          </Button>
        </span>
      ),
    },
  ];

  const credColumns: TableColumn<ScenarioCredential>[] = [
    { key: 'alias', header: t('scenarios.cred_col_alias'), render: (sc) => sc.alias },
    {
      key: 'name',
      header: t('scenarios.cred_col_name'),
      render: (sc) => sc.credential?.name ?? `#${sc.credentialId}`,
    },
    {
      key: 'added',
      header: t('scenarios.cred_col_added'),
      width: 140,
      render: (sc) => <Timestamp value={sc.createdAt} />,
    },
    {
      key: 'actions',
      header: '',
      width: 60,
      align: 'right',
      render: (sc) => (
        <Button
          size="sm"
          variant="danger"
          title={t('scenarios.cred_action_remove')}
          onClick={(e) => {
            e.stopPropagation();
            handleRemoveCredential(sc.id);
          }}
        >
          <Trash2 size={14} />
        </Button>
      ),
    },
  ];

  return (
    <div>
      <div className={styles.pageToolbar}>
        <Breadcrumbs
          items={[
            { label: t('scenarios.title'), onClick: () => navigate('/scenarios') },
            { label: scenario?.name ?? `#${id}` },
          ]}
        />
        {scenario && (
          <div className={styles.toolbarActions}>
            <Button size="sm" onClick={handleRun}>
              <Play size={14} />
              {t('scenarios.action_run')}
            </Button>
            <Button variant="secondary" size="sm" onClick={() => navigate(`/scenarios/${id}/runs`)}>
              <History size={14} />
              {t('scenarios.action_runs')}
            </Button>
            <Button variant="secondary" size="sm" onClick={handleExport}>
              <Upload size={14} />
              {t('scenarios.action_export')}
            </Button>
            <Button variant="secondary" size="sm" onClick={() => navigate(`/scenarios/${id}/edit`)}>
              <Pencil size={14} />
              {t('scenarios.action_edit')}
            </Button>
            <Button variant="danger" size="sm" onClick={handleDelete}>
              <Trash2 size={14} />
              {t('scenarios.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_scenario', { id }) : error}
        </Notification>
      )}
      {loading && <p className={styles.muted}>{t('scenarios.loading')}</p>}

      {scenario && (
        <>
          <Card>
            <DescriptionList
              layout="comfortable"
              items={[
                { term: t('scenarios.field_id'), detail: <UuidBadge id={scenario.id} /> },
                { term: t('scenarios.field_name'), detail: scenario.name },
                { term: t('scenarios.field_steps'), detail: scenario.steps.length },
                {
                  term: t('scenarios.field_created'),
                  detail: <Timestamp value={scenario.createdAt} />,
                },
                {
                  term: t('scenarios.field_updated'),
                  detail: <Timestamp value={scenario.updatedAt} />,
                },
              ]}
            />
          </Card>

          {scenario.steps.length > 0 && (
            <div className={styles.stepsSection}>
              <div className={styles.sectionToolbar}>
                <h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
                <Button size="sm" onClick={() => navigate(`/scenarios/${id}/steps/new`)}>
                  <Plus size={14} />
                  {t('steps.action_add')}
                </Button>
              </div>
              <Table
                columns={stepColumns}
                data={scenario.steps}
                rowKey={(s) => s.id}
                loading={false}
                emptyMessage=""
              />
            </div>
          )}
          {scenario.steps.length === 0 && (
            <div className={styles.stepsSection}>
              <div className={styles.sectionToolbar}>
                <h2 className={styles.sectionHeading}>{t('scenarios.steps_heading')}</h2>
                <Button size="sm" onClick={() => navigate(`/scenarios/${id}/steps/new`)}>
                  <Plus size={14} />
                  {t('steps.action_add')}
                </Button>
              </div>
            </div>
          )}

          {/* ── Credentials section ──────────────────────────────────── */}
          <div className={styles.stepsSection}>
            <div className={styles.sectionToolbar}>
              <h2 className={styles.sectionHeading}>{t('scenarios.credentials_heading')}</h2>
              <Button size="sm" onClick={() => setAddCredOpen((v) => !v)}>
                <Plus size={14} />
                {t('scenarios.cred_action_add')}
              </Button>
            </div>

            {addCredOpen && (
              <div style={{ marginBottom: 'var(--space-4)' }}>
              <Card className={styles.formCard}>
                <form onSubmit={handleAddCredential} noValidate>
                  <div className={styles.formFields}>
                    <Select
                      label={t('scenarios.cred_form_cred')}
                      value={addCredId}
                      onChange={(e) => { setAddCredId(e.target.value); setAddCredError(''); }}
                      error={addCredError || undefined}
                      options={[
                        { value: '', label: t('scenarios.cred_form_cred_placeholder') },
                        ...allCredentials.map((c) => ({ value: String(c.id), label: c.name })),
                      ]}
                    />
                    <Input
                      label={t('scenarios.cred_form_alias')}
                      placeholder={t('scenarios.cred_form_alias_placeholder')}
                      value={addAlias}
                      onChange={(e) => { setAddAlias(e.target.value); setAddAliasError(''); }}
                      error={addAliasError || undefined}
                    />
                  </div>
                  <div className={styles.formActions}>
                    <Button
                      type="button"
                      variant="secondary"
                      size="sm"
                      onClick={() => { setAddCredOpen(false); setAddCredId(''); setAddAlias(''); }}
                    >
                      {t('scenarios.cred_action_cancel')}
                    </Button>
                    <Button type="submit" size="sm" loading={addCredSaving}>
                      {t('scenarios.cred_action_save')}
                    </Button>
                  </div>
                </form>
              </Card>
              </div>
            )}

            {scenarioCreds.length > 0 ? (
              <Table
                columns={credColumns}
                data={scenarioCreds}
                rowKey={(sc) => sc.id}
                loading={false}
                emptyMessage=""
              />
            ) : (
              <p className={styles.muted}>{t('scenarios.cred_empty')}</p>
            )}
          </div>
        </>
      )}
    </div>
  );
}