import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { scenarios, steps } from '../../api';
import type { Scenario, ScenarioStep, StepType } from '../../api';
import { Breadcrumbs, Button, Card, Input, Select } from '../../ui';
import styles from '../Page.module.css';

const STEP_TYPES: StepType[] = ['login', 'exec', 'sign'];

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

  const [scenario, setScenario] = useState<Scenario | null>(null);
  const [step, setStep] = useState<ScenarioStep | null>(null);
  const [order, setOrder] = useState('');
  const [title, setTitle] = useState('');
  const [type, setType] = useState<StepType>('exec');
  const [sessionName, setSessionName] = useState('');
  const [execCode, setExecCode] = useState('');
  const [validateCode, setValidateCode] = useState('');
  const [sessionError, setSessionError] = useState('');
  const [orderError, setOrderError] = useState('');
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!id || !stepId) return;
    Promise.all([scenarios.get(Number(id)), steps.get(Number(id), Number(stepId))])
      .then(([sc, st]) => {
        setScenario(sc);
        setStep(st);
        setOrder(String(st.order));
        setTitle(st.title ?? '');
        setType(st.type);
        setSessionName(st.sessionName);
        setExecCode(st.execCode ?? '');
        setValidateCode(st.validateCode ?? '');
      })
      .catch((err: Error) => setError(err.message))
      .finally(() => setLoading(false));
  }, [id, stepId]);

  const validate = (): boolean => {
    let valid = true;
    if (!sessionName.trim()) {
      setSessionError(t('steps.form_session_required'));
      valid = false;
    }
    if (isNaN(Number(order)) || Number(order) < 0) {
      setOrderError(t('steps.form_order_invalid'));
      valid = false;
    }
    return valid;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;
    setSaving(true);
    setError(null);
    try {
      await steps.update(Number(id), Number(stepId), {
        order: Number(order),
        title: title.trim() || undefined,
        type,
        sessionName: sessionName.trim(),
        execCode: execCode.trim() || undefined,
        validateCode: validateCode.trim() || undefined,
      });
      navigate(`/scenarios/${id}`);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setSaving(false);
    }
  };

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

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

      {!loading && step && (
        <form onSubmit={handleSubmit} noValidate>
          <Card className={styles.formCard}>
            <div className={styles.formFields}>
              <Input
                label={t('steps.form_order')}
                type="number"
                min={0}
                value={order}
                onChange={(e) => {
                  setOrder(e.target.value);
                  setOrderError('');
                }}
                error={orderError || undefined}
              />
              <Input
                label={t('steps.form_title')}
                placeholder={t('steps.form_title_placeholder')}
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />
              <Select
                label={t('steps.form_type')}
                value={type}
                onChange={(e) => setType(e.target.value as StepType)}
                options={STEP_TYPES.map((v) => ({ value: v, label: v }))}
              />
              <Input
                label={t('steps.form_session')}
                placeholder={t('steps.form_session_placeholder')}
                value={sessionName}
                onChange={(e) => {
                  setSessionName(e.target.value);
                  setSessionError('');
                }}
                error={sessionError || undefined}
                required
              />
              <div className={styles.formField}>
                <label className={styles.fieldLabel}>{t('steps.form_exec_code')}</label>
                <textarea
                  className={styles.textarea}
                  rows={6}
                  value={execCode}
                  onChange={(e) => setExecCode(e.target.value)}
                  placeholder={t('steps.form_exec_code_placeholder')}
                  spellCheck={false}
                />
              </div>
              <div className={styles.formField}>
                <label className={styles.fieldLabel}>{t('steps.form_validate_code')}</label>
                <textarea
                  className={styles.textarea}
                  rows={6}
                  value={validateCode}
                  onChange={(e) => setValidateCode(e.target.value)}
                  placeholder={t('steps.form_validate_code_placeholder')}
                  spellCheck={false}
                />
              </div>
            </div>

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