import React from "react";

export default function ImportAccountsModal({
  open,
  onClose,
  manualLoginOpen,
  setManualLoginOpen,
  hasSelectedTask,
  loginForm,
  setLoginForm,
  startLogin,
  completeLogin,
  loginStatus,
  tdataForm,
  setTdataForm,
  importTdata,
  tdataLoading,
  tdataResult,
  explainTdataError
}) {
  if (!open) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal large" onClick={(event) => event.stopPropagation()}>
        <div className="row-header">
          <h3>Импорт аккаунтов</h3>
          <button className="ghost" type="button" onClick={onClose}>Закрыть</button>
        </div>
        <div className="login-box">
          <div className="row-header">
            <h4>Добавить аккаунт по коду</h4>
            <button className="ghost" type="button" onClick={() => setManualLoginOpen(!manualLoginOpen)}>
              {manualLoginOpen ? "Свернуть" : "Развернуть"}
            </button>
          </div>
          {manualLoginOpen && (
            <div className="collapsible">
              {!hasSelectedTask && (
                <div className="status-text compact">Выберите задачу, чтобы добавить аккаунт.</div>
              )}
              <div className="row">
                <label>
                  <span className="label-line">API ID <span className="required">*</span></span>
                  <input
                    type="text"
                    value={loginForm.apiId}
                    onChange={(event) => setLoginForm({ ...loginForm, apiId: event.target.value })}
                  />
                </label>
                <label>
                  <span className="label-line">API Hash <span className="required">*</span></span>
                  <input
                    type="text"
                    value={loginForm.apiHash}
                    onChange={(event) => setLoginForm({ ...loginForm, apiHash: event.target.value })}
                  />
                </label>
              </div>
              <label>
                <span className="label-line">Телефон <span className="required">*</span></span>
                <input
                  type="text"
                  value={loginForm.phone}
                  onChange={(event) => setLoginForm({ ...loginForm, phone: event.target.value })}
                />
              </label>
              <div className="row">
                <label>
                  <span className="label-line">Код <span className="required">*</span></span>
                  <input
                    type="text"
                    value={loginForm.code}
                    onChange={(event) => setLoginForm({ ...loginForm, code: event.target.value })}
                  />
                </label>
                <label>
                  <span className="label-line">2FA пароль <span className="optional">необязательно</span></span>
                  <input
                    type="password"
                    value={loginForm.password}
                    onChange={(event) => setLoginForm({ ...loginForm, password: event.target.value })}
                  />
                </label>
              </div>
              <div className="row actions">
                <button className="secondary" onClick={startLogin} disabled={!hasSelectedTask}>Отправить код</button>
                <button className="primary" onClick={completeLogin} disabled={!hasSelectedTask}>Подтвердить</button>
              </div>
              {loginStatus && <div className="status-text">{loginStatus}</div>}
            </div>
          )}
        </div>

        <div className="login-box">
          <h4>Импорт из tdata</h4>
          <div className="status-text compact">
            Можно выбрать сразу несколько папок. Значения по умолчанию — API Telegram Desktop.
          </div>
          <div className="row">
            <label>
              <span className="label-line">API ID</span>
              <input
                type="text"
                value={tdataForm.apiId}
                onChange={(event) => setTdataForm({ ...tdataForm, apiId: event.target.value })}
              />
            </label>
            <label>
              <span className="label-line">API Hash</span>
              <input
                type="text"
                value={tdataForm.apiHash}
                onChange={(event) => setTdataForm({ ...tdataForm, apiHash: event.target.value })}
              />
            </label>
          </div>
          <button className="primary" onClick={importTdata} disabled={tdataLoading}>
            {tdataLoading ? "Импортируем..." : "Импортировать tdata"}
          </button>
          {tdataLoading && <div className="status-text">Идет импорт, это может занять несколько секунд.</div>}
          {tdataResult && (
            <div className="tdata-report">
              <div>Импортировано: {(tdataResult.imported || []).length}</div>
              <div>Пропущено: {(tdataResult.skipped || []).length}</div>
              <div>Ошибок: {(tdataResult.failed || []).length}</div>
              {(tdataResult.failed || []).length > 0 && (
                <div className="tdata-errors">
                  {tdataResult.failed.map((item, index) => (
                    <div key={`${item.path}-${index}`} className="tdata-error-row">
                      <div className="tdata-error-path">{item.path}</div>
                      <div className="tdata-error-text">{item.error}</div>
                      {explainTdataError(item.error) && (
                        <div className="tdata-error-hint">{explainTdataError(item.error)}</div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
