import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { X, Save, ClipboardList } from 'lucide-react';
import { scenarios } from '../../api';
import { Breadcrumbs, Button, Card, Input } from '../../ui';
import styles from '../Page.module.css';

export function CreateScenarioPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const [name, setName] = useState('');
  const [nameError, setNameError] = useState('');
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) {
      setNameError(t('scenarios.form_name_required'));
      return;
    }
    setSaving(true);
    setError(null);
    try {
      const scenario = await scenarios.create(name.trim());
      navigate(`/scenarios/${scenario.id}`);
    } catch (err) {
      setError((err as 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: t('scenarios.create_title') },
          ]}
        />
      </div>

      {error && <p className={styles.error}>{error}</p>}

      <form onSubmit={handleSubmit} noValidate>
        <Card className={styles.formCard}>
          <div className={styles.formFields}>
            <Input
              label={t('scenarios.form_name')}
              placeholder={t('scenarios.form_name_placeholder')}
              value={name}
              onChange={(e) => {
                setName(e.target.value);
                setNameError('');
              }}
              error={nameError || undefined}
              required
              autoFocus
            />
          </div>

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