import * as React from 'react';
import { ApprovalRouteApi } from '../../services/api';
import { ApiClientError } from '../../services/httpClient';
import { PortalDictionaryClient } from '../../services/portalDictionary';
import { Company, Department, RequestType, routeTypeLabels, RouteType, TemplateRoute } from '../../models';
import {
  ActionsCell,
  Alert,
  Badge,
  Breadcrumbs,
  Button,
  Checkbox,
  ConfirmDialog,
  DataTable,
  Field,
  FormGrid,
  IconButton,
  Modal,
  PageHeader,
  PrimaryCell,
  SearchableSelect,
  Select
} from '../ui';

export interface IRoutesScreenProps {
  api: ApprovalRouteApi;
  dictionary?: PortalDictionaryClient;
  onOpenSteps: (route: TemplateRoute) => void;
}

interface IFormState {
  requestTypeId: string;
  routeType: RouteType;
  companyId: string;
  departmentId: string;
  byProject: boolean;
  requiresControl: boolean;
}

const EMPTY_FORM: IFormState = {
  requestTypeId: '',
  routeType: RouteType.Sequential,
  companyId: '',
  departmentId: '',
  byProject: false,
  requiresControl: false
};

const ROUTE_TYPE_OPTIONS = Object.values(RouteType)
  .filter(v => v !== RouteType.None)
  .map(v => ({ value: v, label: routeTypeLabels[v] }));

export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, dictionary, onOpenSteps }) => {
  const [requestTypes, setRequestTypes] = React.useState<RequestType[]>([]);
  const [companies, setCompanies] = React.useState<Company[]>([]);
  const [departments, setDepartments] = React.useState<Department[]>([]);
  const [dictLoading, setDictLoading] = React.useState(true);
  const [dictError, setDictError] = React.useState<string | undefined>();
  const [items, setItems] = React.useState<TemplateRoute[]>([]);
  const [filterRequestTypeId, setFilterRequestTypeId] = React.useState<string>('');
  const [loading, setLoading] = React.useState(true);
  const [loadError, setLoadError] = React.useState<string | undefined>();

  const [editing, setEditing] = React.useState<TemplateRoute | undefined>();
  const [showForm, setShowForm] = React.useState(false);
  const [form, setForm] = React.useState<IFormState>(EMPTY_FORM);
  const [formError, setFormError] = React.useState<string | undefined>();
  const [saving, setSaving] = React.useState(false);

  const [deleting, setDeleting] = React.useState<TemplateRoute | undefined>();
  const [deleteError, setDeleteError] = React.useState<string | undefined>();
  const [deleteBusy, setDeleteBusy] = React.useState(false);

  React.useEffect(() => {
    api.requestTypes.list().then(setRequestTypes).catch(() => { /* показывается в общей ошибке ниже */ });
  }, [api]);

  // Справочники 1С грузим один раз на экран: они статичны, а отделов ~700 —
  // поиск делаем на клиенте, без запроса на каждый символ.
  React.useEffect(() => {
    if (!dictionary) return;

    setDictLoading(true);
    setDictError(undefined);
    Promise.all([dictionary.companies(), dictionary.departments()])
      .then(([loadedCompanies, loadedDepartments]) => {
        setCompanies(loadedCompanies);
        setDepartments(loadedDepartments);
      })
      .catch((e: ApiClientError) => setDictError(e.message))
      .finally(() => setDictLoading(false));
  }, [dictionary]);

  const load = React.useCallback(() => {
    setLoading(true);
    setLoadError(undefined);
    const requestTypeId = filterRequestTypeId ? Number(filterRequestTypeId) : undefined;
    api.templateRoutes
      .list(requestTypeId)
      .then(setItems)
      .catch((e: ApiClientError) => setLoadError(e.message))
      .finally(() => setLoading(false));
  }, [api, filterRequestTypeId]);

  React.useEffect(() => { load(); }, [load]);

  const requestTypeName = (id: number): string => requestTypes.find(rt => rt.id === id)?.name ?? `#${id}`;

  // Пока справочник не загрузился (или маршрут ссылается на удалённую запись),
  // показываем усечённый Guid — чтобы строка таблицы не выглядела пустой.
  const companyName = (id: string): string => companies.find(c => c.id === id)?.name ?? shortGuid(id);

  const departmentName = (id: string): string => departments.find(d => d.id === id)?.name ?? shortGuid(id);

  // Отдел принадлежит компании, поэтому список сужаем под выбранную:
  // иначе пользователь листает ~700 позиций из всех юрлиц сразу.
  const departmentsForSelectedCompany = React.useMemo(
    () => (form.companyId ? departments.filter(d => d.companyId === form.companyId) : []),
    [departments, form.companyId]
  );

  const openCreate = (): void => {
    setEditing(undefined);
    setForm({ ...EMPTY_FORM, requestTypeId: filterRequestTypeId });
    setFormError(undefined);
    setShowForm(true);
  };

  const openEdit = (item: TemplateRoute): void => {
    setEditing(item);
    setForm({
      requestTypeId: String(item.requestTypeId),
      routeType: item.routeType,
      companyId: item.companyId,
      departmentId: item.departmentId ?? '',
      byProject: item.byProject,
      requiresControl: item.requiresControl
    });
    setFormError(undefined);
    setShowForm(true);
  };

  const submit = (): void => {
    if (!editing && !form.requestTypeId) {
      setFormError('Выберите тип заявки.');
      return;
    }
    if (!form.companyId.trim()) {
      setFormError('Компания обязательна (Guid из справочника api.tnsu.kz).');
      return;
    }

    setSaving(true);
    setFormError(undefined);

    const departmentId = form.departmentId.trim() ? form.departmentId.trim() : null;
    const request = editing
      ? api.templateRoutes.update(editing.id, {
          routeType: form.routeType,
          companyId: form.companyId.trim(),
          departmentId,
          byProject: form.byProject,
          requiresControl: form.requiresControl
        })
      : api.templateRoutes.create({
          routeType: form.routeType,
          requestTypeId: Number(form.requestTypeId),
          companyId: form.companyId.trim(),
          departmentId,
          byProject: form.byProject,
          requiresControl: form.requiresControl
        });

    request
      .then(() => {
        setShowForm(false);
        load();
      })
      .catch((e: ApiClientError) => setFormError(e.message))
      .finally(() => setSaving(false));
  };

  const confirmDelete = (): void => {
    if (!deleting) return;
    setDeleteBusy(true);
    setDeleteError(undefined);
    api.templateRoutes
      .remove(deleting.id)
      .then(() => {
        setDeleting(undefined);
        load();
      })
      .catch((e: ApiClientError) => setDeleteError(e.message))
      .finally(() => setDeleteBusy(false));
  };

  return (
    <div>
      <Breadcrumbs items={[{ label: 'Главная' }, { label: 'Маршруты согласования' }]} />
      <PageHeader
        icon="route"
        subtitle="Настройка согласований"
        title="Маршруты согласования"
        actions={<Button variant="accent" icon="plus" onClick={openCreate}>Добавить маршрут</Button>}
      />

      <div style={{ marginBottom: 18, maxWidth: 320 }}>
        <Field label="Фильтр по типу заявки">
          <Select
            options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
            placeholder="Все типы заявок"
            value={filterRequestTypeId}
            onChange={e => setFilterRequestTypeId(e.target.value)}
          />
        </Field>
      </div>

      {dictError && <Alert kind="warn">Справочник компаний и отделов недоступен: {dictError}</Alert>}
      {loadError && <Alert kind="err">{loadError}</Alert>}
      {deleteError && <Alert kind="err">{deleteError}</Alert>}

      <DataTable
        columns={[
          {
            key: 'requestType',
            header: 'Тип заявки',
            render: r => <PrimaryCell>{requestTypeName(r.requestTypeId)}</PrimaryCell>
          },
          {
            key: 'routeType',
            header: 'Тип маршрута',
            render: r => <Badge variant={r.routeType === RouteType.Parallel ? 'blue' : 'gold'}>{routeTypeLabels[r.routeType]}</Badge>
          },
          { key: 'company', header: 'Компания', render: r => companyName(r.companyId) },
          { key: 'department', header: 'Отдел', render: r => (r.departmentId ? departmentName(r.departmentId) : '—') },
          {
            key: 'byProject',
            header: 'По проекту',
            align: 'center',
            render: r => (r.byProject ? <Badge variant="ok">Да</Badge> : <Badge variant="neutral">Нет</Badge>)
          },
          {
            key: 'control',
            header: 'Контроль',
            align: 'center',
            render: r => (r.requiresControl ? <Badge variant="gold">Требуется</Badge> : <Badge variant="neutral">Нет</Badge>)
          },
          {
            key: 'actions',
            header: '',
            width: '160px',
            align: 'right',
            sticky: true,
            render: r => (
              <ActionsCell>
                <Button size="sm" variant="secondary" icon="clipboard" onClick={() => onOpenSteps(r)}>Шаги</Button>
                <IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />
                <IconButton icon="trash" label="Удалить" danger onClick={() => { setDeleteError(undefined); setDeleting(r); }} />
              </ActionsCell>
            )
          }
        ]}
        rows={items}
        keyOf={r => r.id}
        emptyMessage={loading ? 'Загрузка...' : 'Маршрутов пока нет.'}
      />

      {showForm && (
        <Modal
          title={editing ? `Маршрут #${editing.id}` : 'Новый маршрут'}
          onClose={() => setShowForm(false)}
          footer={
            <>
              <Button variant="secondary" onClick={() => setShowForm(false)} disabled={saving}>Отмена</Button>
              <Button variant="accent" icon="check" onClick={submit} disabled={saving}>
                {saving ? 'Сохранение...' : 'Сохранить'}
              </Button>
            </>
          }
        >
          {formError && <Alert kind="err">{formError}</Alert>}
          <FormGrid>
            <Field label="Тип заявки" required full>
              <Select
                options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
                placeholder="Выберите тип заявки"
                value={form.requestTypeId}
                disabled={!!editing}
                onChange={e => setForm({ ...form, requestTypeId: e.target.value })}
              />
            </Field>
            <Field label="Тип маршрута" required full>
              <Select
                options={ROUTE_TYPE_OPTIONS}
                value={form.routeType}
                onChange={e => setForm({ ...form, routeType: e.target.value as RouteType })}
              />
            </Field>
            <Field label="Компания" required full hint="Справочник 1С (api.tnsu.kz).">
              <SearchableSelect
                options={companies.map(c => ({ value: c.id, label: c.name }))}
                value={form.companyId}
                loading={dictLoading}
                placeholder="Выберите компанию"
                searchPlaceholder="Поиск по названию компании..."
                onChange={companyId =>
                  // Смена компании обнуляет отдел: прежний принадлежал другой
                  // компании, и бэкенд не нашёл бы такой маршрут при resolve.
                  setForm({ ...form, companyId, departmentId: '' })
                }
              />
            </Field>
            <Field
              label="Отдел"
              full
              hint={
                form.companyId
                  ? 'Необязательно — пусто означает маршрут «по умолчанию» для всей компании.'
                  : 'Сначала выберите компанию.'
              }
            >
              <SearchableSelect
                options={departmentsForSelectedCompany.map(d => ({ value: d.id, label: d.name }))}
                value={form.departmentId}
                loading={dictLoading}
                disabled={!form.companyId}
                allowClear
                clearLabel="Без отдела (маршрут по умолчанию)"
                placeholder="Без отдела (маршрут по умолчанию)"
                searchPlaceholder="Поиск по названию отдела..."
                emptyMessage="У выбранной компании нет отделов в справочнике"
                onChange={departmentId => setForm({ ...form, departmentId })}
              />
            </Field>
            <Field label="По проекту">
              <Checkbox
                label="Маршрут учитывает конкретный проект"
                checked={form.byProject}
                onChange={v => setForm({ ...form, byProject: v })}
              />
            </Field>
            <Field label="Контроль">
              <Checkbox
                label="Требуется отдельный контроль исполнения"
                checked={form.requiresControl}
                onChange={v => setForm({ ...form, requiresControl: v })}
              />
            </Field>
          </FormGrid>
        </Modal>
      )}

      {deleting && (
        <ConfirmDialog
          title="Удалить маршрут?"
          text={`Маршрут #${deleting.id} и все его шаги будут удалены безвозвратно.`}
          confirmLabel="Удалить"
          busy={deleteBusy}
          onCancel={() => setDeleting(undefined)}
          onConfirm={confirmDelete}
        />
      )}
    </div>
  );
};

function shortGuid(guid: string): string {
  return guid.length > 8 ? `${guid.slice(0, 8)}…` : guid;
}