import * as React from 'react';
import { useState } from 'react';
import type { WebPartContext } from '@microsoft/sp-webpart-base';
import styles from './SubmitFeature.module.scss';
import { Icon } from '../../shared/ui/Icon/Icon';
import { CategoryTabs } from '../../components/CategoryTabs/CategoryTabs';
import { RequestGrid } from '../../components/RequestGrid/RequestGrid';
import { CATEGORIES, DEFAULT_CATEGORY_ID } from '../../data/categories';
import { getRequestsByCategory } from '../../data/requests';
import { getFormComponent } from '../../forms/registry';
import { IRequestType } from '../../models/types';

export interface ISubmitFeatureProps {
  context: WebPartContext;
}

// Фича «Подать заявку»: категории → плитки → беспоук-форма.
// Владелец: автор портала. Живёт целиком в features/submit/**.
const SubmitFeature: React.FC<ISubmitFeatureProps> = ({ context }) => {
  const [activeCategoryId, setActiveCategoryId] = useState<string>(DEFAULT_CATEGORY_ID);
  const [selectedRequest, setSelectedRequest] = useState<IRequestType | null>(null);

  const requests = getRequestsByCategory(activeCategoryId);

  const handleCategoryChange = (categoryId: string): void => {
    setActiveCategoryId(categoryId);
    setSelectedRequest(null); // при смене категории возвращаемся к списку плиток
  };

  const handleBack = (): void => setSelectedRequest(null);

  const renderSelected = (request: IRequestType): React.ReactNode => {
    const FormComponent = getFormComponent(request.id);

    // Форма ещё не реализована — показываем заглушку.
    if (!FormComponent) {
      return (
        <div className={styles.formPlaceholder}>
          <button type="button" className={styles.backButton} onClick={handleBack}>
            <Icon name="arrow-left" size="sm" />
            <span>К списку заявок</span>
          </button>
          <p className={styles.placeholderText}>Форма «{request.title}» ещё в разработке.</p>
        </div>
      );
    }

    // Ленивый рендер формы: её код подтягивается только сейчас, при открытии.
    return (
      <React.Suspense fallback={<div className={styles.loading}>Загрузка формы…</div>}>
        <FormComponent requestType={request} context={context} onCancel={handleBack} />
      </React.Suspense>
    );
  };

  return (
    <div className={styles.content}>
      <CategoryTabs
        categories={CATEGORIES}
        activeId={activeCategoryId}
        onChange={handleCategoryChange}
      />

      {selectedRequest ? (
        renderSelected(selectedRequest)
      ) : (
        <RequestGrid requests={requests} onSelect={setSelectedRequest} />
      )}
    </div>
  );
};

export default SubmitFeature;