import { zodResolver } from '@hookform/resolvers/zod';
import { CreatePageInput, PageView, createPageInputSchema } from '@dorfteich/shared';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import { Field, FormError } from '../components/forms';
import { apiPost } from '../lib/api';

interface NewPageFormProps {
  pondId: string;
  pondSlug: string;
  /** Parent for the new page (issue #108): the currently open page, so new
   * pages nest under where the user is; `null` creates at the root. */
  parentId?: string | null;
  parentTitle?: string;
  onCreated: () => void;
  onCancel: () => void;
}

/** Inline "new page" prompt: title → create → editor opens (issue #26). */
export function NewPageForm({
  pondId,
  pondSlug,
  parentId = null,
  parentTitle,
  onCreated,
  onCancel,
}: NewPageFormProps): React.JSX.Element {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [error, setError] = useState<unknown>(null);
  const form = useForm<CreatePageInput>({ resolver: zodResolver(createPageInputSchema) });

  const onSubmit = form.handleSubmit(async (input) => {
    setError(null);
    try {
      const page = await apiPost<PageView>(`/ponds/${pondId}/pages`, { ...input, parentId });
      onCreated();
      navigate(`/p/${pondSlug}/${page.slug}`);
    } catch (err) {
      setError(err);
    }
  });

  return (
    <form className="sidebar__new-page-form" onSubmit={(event) => void onSubmit(event)} noValidate>
      <FormError error={error} />
      <Field label={t('layout.sidebar.newPageTitle')} error={form.formState.errors.title?.message}>
        <input
          type="text"
          autoFocus
          {...form.register('title')}
          onKeyDown={(event) => {
            if (event.key === 'Escape') onCancel();
          }}
        />
      </Field>
      {parentId && parentTitle && (
        <p className="sidebar__new-page-parent">
          {t('layout.sidebar.newPageUnder', { title: parentTitle })}
        </p>
      )}
      <div className="sidebar__new-page-actions">
        <button type="submit" className="button" disabled={form.formState.isSubmitting}>
          {t('layout.sidebar.create')}
        </button>
        <button type="button" className="linklike" onClick={onCancel}>
          {t('layout.sidebar.cancel')}
        </button>
      </div>
    </form>
  );
}