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

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

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

  // 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);
  const [draggedStepId, setDraggedStepId] = useState<string | null>(null);
  const [dragOverStepId, setDragOverStepId] = useState<string | null>(null);
  const [reorderingSteps, setReorderingSteps] = useState(false);
  const [runModalOpen, setRunModalOpen] = useState(false);
  const [running, setRunning] = useState(false);
  const [saveSessionFlag, setSaveSessionFlag] = useState(false);
  const [envs, setEnvs] = useState<Environment[]>([]);
  const [selectedEnvId, setSelectedEnvId] = useState('');
  const envInitRef = useRef(false);
  const [pendingDelete, setPendingDelete] = useState<
    { type: 'scenario' } | { type: 'step'; id: string } | { type: 'credential'; id: string } | null
  >(null);
  const [deleting, setDeleting] = useState(false);

  // Export modal state
  const [exportModalOpen, setExportModalOpen] = useState(false);
  const [includeEnvironment, setIncludeEnvironment] = useState(true);
  const [includedCredentialIds, setIncludedCredentialIds] = useState<Set<string>>(new Set());
  const [isExporting, setIsExporting] = useState(false);

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

  // Default selected env to scenario's linked environment (or first env) once both are loaded
  useEffect(() => {
    if (envInitRef.current || envs.length === 0) return;
    envInitRef.current = true;
    const preferred = scenario?.environmentId ?? null;
    const exists = preferred ? envs.some((e) => e.id === preferred) : false;
    setSelectedEnvId(exists ? preferred! : envs[0].id);
  }, [scenario, envs]);

  const reloadScenario = async () => {
    if (!id) return;
    const s = await scenarios.get(id);
    setScenario(s);
    setScenarioCreds(s.scenarioCredentials ?? []);
  };

  const handleRun = async () => {
    if (!scenario) return;
    if (!selectedEnvId) {
      toast.error(t('scenarios.run_modal_env_required'));
      return;
    }
    setRunning(true);
    try {
      const run = await scenarios.run(scenario.id, selectedEnvId, saveSessionFlag);
      toast.success(t('scenarios.run_started'));
      navigate(`/scenarios/${id}/runs/${run.id}`);
      setRunModalOpen(false);
      setSaveSessionFlag(false);
    } catch (err) {
      toast.error((err as Error).message);
    } finally {
      setRunning(false);
    }
  };

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

  const handleOpenExportModal = () => {
    if (!scenario) return;
    // Initialise all credential checkboxes to checked
    setIncludedCredentialIds(new Set(scenarioCreds.map((sc) => sc.credentialId)));
    setIncludeEnvironment(true);
    setExportModalOpen(true);
  };

  const handleExport = async () => {
    if (!scenario) return;
    setIsExporting(true);
    try {
      const credIds = Array.from(includedCredentialIds);
      const yamlContent = await scenarios.exportScenario(scenario.id, {
        includeEnvironment,
        credentialIds: credIds,
      });
      const blob = new Blob([yamlContent], { 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);
      setExportModalOpen(false);
    } catch (err) {
      toast.error((err as Error).message);
    } finally {
      setIsExporting(false);
    }
  };

  const handleDeleteStep = async (stepId: string) => {
    await steps.remove(id!, stepId);
    await reloadScenario();
  };

  const handleMoveStep = async (fromStepId: string, toStepId: string) => {
    if (!scenario || reorderingSteps) return;
    setReorderingSteps(true);
    try {
      const orderedSteps = [...scenario.steps].sort((a, b) => a.order - b.order);
      const toIndex = orderedSteps.findIndex((step) => step.id === toStepId);
      if (toIndex < 0) return;
      await steps.update(id!, fromStepId, { order: toIndex });
      await reloadScenario();
    } finally {
      setReorderingSteps(false);
    }
  };

  const handleAddCredential = async (e: SubmitEvent<HTMLFormElement>) => {
    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 confirmDelete = async () => {
    if (!pendingDelete) return;
    setDeleting(true);
    try {
      if (pendingDelete.type === 'scenario') {
        await handleDelete();
        return;
      }
      if (pendingDelete.type === 'step') {
        await handleDeleteStep(pendingDelete.id);
      }
      if (pendingDelete.type === 'credential') {
        await handleRemoveCredential(pendingDelete.id);
      }
      setPendingDelete(null);
    } finally {
      setDeleting(false);
    }
  };

  const stepColumns: TableColumn<ScenarioStep>[] = [
    {
      key: 'drag',
      header: '',
      width: 44,
      align: 'center',
      render: (s) => (
        <span
          role="button"
          tabIndex={0}
          aria-label="Drag to reorder step"
          className={[styles.dragHandle, reorderingSteps ? styles.dragHandleDisabled : '']
            .filter(Boolean)
            .join(' ')}
          draggable={!reorderingSteps}
          onClick={(e) => e.stopPropagation()}
          onDragStart={(e) => {
            if (reorderingSteps) {
              e.preventDefault();
              return;
            }
            setDraggedStepId(s.id);
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/plain', s.id);
          }}
          onDragEnd={() => {
            setDraggedStepId(null);
            setDragOverStepId(null);
          }}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
            }
          }}
        >
          <GripVertical size={14} />
        </span>
      ),
    },
    { key: 'order', header: t('scenarios.step_order'), render: (s) => s.order, width: 60 },
    {
      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();
              setPendingDelete({ type: 'step', id: 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();
            setPendingDelete({ type: 'credential', id: sc.id });
          }}
        >
          <Trash2 size={14} />
        </Button>
      ),
    },
  ];

  return (
    <div>
      <div className={styles.pageToolbar}>
        <Breadcrumbs
          items={[
            {
              label: t('scenarios.title'),
              icon: <ClipboardList size={14} />,
              onClick: () => navigate('/scenarios'),
            },
            { label: scenario?.name ?? `#${id}` },
          ]}
        />
        {scenario && (
          <div className={styles.toolbarActions}>
            <Button size="sm" onClick={() => setRunModalOpen(true)}>
              <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={handleOpenExportModal}>
              <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={() => setPendingDelete({ type: 'scenario' })}
            >
              <Trash2 size={14} />
              {t('scenarios.action_delete')}
            </Button>
          </div>
        )}
      </div>

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

      {scenario && (
        <>
          <Card>
            <DescriptionList
              layout="grid"
              items={[
                { term: t('scenarios.field_id'), detail: <UuidBadge id={scenario.id} /> },
                { term: t('scenarios.field_name'), detail: scenario.name },
                ...(scenario.environment
                  ? [{
                      term: t('scenarios.field_environment'),
                      detail: (
                        <a
                          href={`/environments/${scenario.environment.id}`}
                          onClick={(e) => { e.preventDefault(); navigate(`/environments/${scenario.environment!.id}`); }}
                        >
                          {scenario.environment.name}
                        </a>
                      ),
                    }]
                  : []),
                {
                  term: t('scenarios.field_created'),
                  detail: <Timestamp value={scenario.createdAt} />,
                },
                {
                  term: t('scenarios.field_updated'),
                  detail: <Timestamp value={scenario.updatedAt} />,
                },
              ]}
            />
          </Card>

          {scenario.description && (
            <div className={styles.stepsSection}>
              <div className={styles.sectionHeadingRow}>
                <h2 className={styles.sectionHeading}>{t('scenarios.field_description')}</h2>
              </div>
              <Card>
                <MarkdownContent content={scenario.description} />
              </Card>
            </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>
              <Table
                columns={stepColumns}
                data={scenario.steps}
                rowKey={(s) => s.id}
                loading={false}
                emptyMessage=""
                getRowProps={(s) => ({
                  className: dragOverStepId === s.id ? styles.dragOverRow : undefined,
                  onDragOver: (e) => {
                    if (reorderingSteps) return;
                    e.preventDefault();
                    if (draggedStepId && draggedStepId !== s.id) {
                      setDragOverStepId(s.id);
                    }
                  },
                  onDragLeave: () => {
                    if (dragOverStepId === s.id) {
                      setDragOverStepId(null);
                    }
                  },
                  onDrop: async (e) => {
                    if (reorderingSteps) return;
                    e.preventDefault();
                    const fromId = draggedStepId ?? e.dataTransfer.getData('text/plain');
                    setDragOverStepId(null);
                    setDraggedStepId(null);
                    if (!fromId || fromId === s.id) return;
                    await handleMoveStep(fromId, s.id);
                  },
                })}
              />
            </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>
        </>
      )}

      <Modal
        open={pendingDelete != null}
        title={
          pendingDelete?.type === 'step'
            ? t('steps.action_delete')
            : pendingDelete?.type === 'credential'
              ? t('scenarios.cred_action_remove')
              : t('scenarios.action_delete')
        }
        onClose={() => !deleting && setPendingDelete(null)}
        footer={
          <>
            <Button variant="secondary" onClick={() => setPendingDelete(null)} disabled={deleting}>
              {t('common.button_cancel')}
            </Button>
            <Button variant="danger" onClick={confirmDelete} disabled={deleting}>
              {t('common.button_confirm')}
            </Button>
          </>
        }
      >
        {pendingDelete?.type === 'step' && t('common.confirm_delete_step')}
        {pendingDelete?.type === 'credential' && t('common.confirm_remove_credential')}
        {pendingDelete?.type === 'scenario' && t('common.confirm_delete_scenario')}
      </Modal>

      <Modal
        open={runModalOpen}
        title={t('scenarios.run_modal_title')}
        onClose={() => !running && setRunModalOpen(false)}
        footer={
          <>
            <Button variant="secondary" onClick={() => setRunModalOpen(false)} disabled={running}>
              {t('common.button_cancel')}
            </Button>
            <Button variant="primary" onClick={handleRun} disabled={running || !selectedEnvId}>
              {t('scenarios.action_run')}
            </Button>
          </>
        }
      >
        {envs.length === 0 ? (
          <p>{t('scenarios.run_modal_no_env')}</p>
        ) : (
          <>
            <Select
              label={t('scenarios.run_modal_env_label')}
              value={selectedEnvId}
              onChange={(e) => setSelectedEnvId(e.target.value)}
              options={envs.map((env) => ({ value: env.id, label: env.name }))}
            />
            <label
              style={{ display: 'flex', alignItems: 'center', marginTop: '1rem', gap: '0.5rem' }}
            >
              <input
                type="checkbox"
                checked={saveSessionFlag}
                onChange={(e) => setSaveSessionFlag(e.target.checked)}
              />
              <span>{t('common.save_session')}</span>
            </label>
          </>
        )}
      </Modal>

      <ExportScenarioModal
        open={exportModalOpen}
        scenario={scenario}
        scenarioCredentials={scenarioCreds}
        environment={
          scenario?.environment ?? envs.find((e) => e.id === scenario?.environmentId) ?? null
        }
        includeEnvironment={includeEnvironment}
        onIncludeEnvironmentChange={setIncludeEnvironment}
        includedCredentialIds={includedCredentialIds}
        onCredentialToggle={(credId, checked) => {
          setIncludedCredentialIds((prev) => {
            const next = new Set(prev);
            if (checked) next.add(credId);
            else next.delete(credId);
            return next;
          });
        }}
        onClose={() => setExportModalOpen(false)}
        onExport={handleExport}
        isExporting={isExporting}
      />
    </div>
  );
}