import { useEffect, useState, SubmitEvent } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { X, Save, ClipboardList } from 'lucide-react';
import { scenarios, steps } from '../../api';
import type { Scenario, ScenarioStep } from '../../api';
import { Breadcrumbs, Button, Card, Input, CodeEditor, useToast } from '../../ui';
import styles from '../Page.module.css';

export function EditStepPage() {
  const { t } = useTranslation();
  const { id, stepId } = useParams<{ id: string; stepId: string }>();
  const navigate = useNavigate();
  const toast = useToast();

  const [scenario, setScenario] = useState<Scenario | null>(null);
  const [step, setStep] = useState<ScenarioStep | null>(null);
  const [title, setTitle] = useState('');
  const [execCode, setExecCode] = useState('');
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!id || !stepId) return;
    Promise.all([scenarios.get(id), steps.get(id, stepId)])
      .then(([sc, st]) => {
        setScenario(sc);
        setStep(st);
        setTitle(st.title ?? '');
        setExecCode(st.execCode ?? '');
      })
      .finally(() => setLoading(false));
  }, [id, stepId]);

  const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSaving(true);
    try {
      await steps.update(id!, stepId!, {
        title: title.trim() || undefined,
        execCode: execCode.trim() || undefined,
      });
      toast.success(t('steps.updated'));
      navigate(`/scenarios/${id}`);
    } catch (err) {
      const message = (err as Error).message;
      toast.error(message);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <div className={styles.pageToolbar}>
        <Breadcrumbs
          items={[
            {
              label: t('scenarios.title'),
              icon: <ClipboardList size={14} />,
              onClick: () => navigate('/scenarios'),
            },
            {
              label: scenario?.name ?? `#${id}`,
              onClick: () => navigate(`/scenarios/${id}`),
            },
            { label: t('steps.edit_title', { order: step ? step.order + 1 : stepId }) },
          ]}
        />
      </div>

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

      {!loading && step && (
        <form onSubmit={handleSubmit} noValidate>
          <Card className={styles.formCardFull}>
            <div className={styles.formFields}>
              <Input
                label={t('steps.form_title')}
                placeholder={t('steps.form_title_placeholder')}
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />
              <div className={styles.formField}>
                <label className={styles.fieldLabel}>{t('steps.form_exec_code')}</label>
                <CodeEditor value={execCode} onChange={setExecCode} rows={6} />
              </div>
            </div>

            <div className={styles.formActions}>
              <Button
                type="button"
                variant="secondary"
                onClick={() => navigate(`/scenarios/${id}`)}
              >
                <X size={14} />
                {t('steps.action_cancel')}
              </Button>
              <Button type="submit" loading={saving}>
                <Save size={14} />
                {t('steps.action_update')}
              </Button>
            </div>
          </Card>
        </form>
      )}
    </div>
  );
}