import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { setToken } from '../utils/api'
import * as setupApi from '../api/setupApi'

interface Props {
  onComplete: () => void
}

export default function SetupWizard({ onComplete }: Readonly<Props>) {
  const { t } = useTranslation()
  const [step, setStep] = useState(1)
  const [email, setEmail] = useState('')
  const [displayName, setDisplayName] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [smtpHost, setSmtpHost] = useState('')
  const [smtpPort, setSmtpPort] = useState('587')
  const [smtpUser, setSmtpUser] = useState('')
  const [smtpPass, setSmtpPass] = useState('')
  const [smtpFrom, setSmtpFrom] = useState('')
  const [smtpSecure, setSmtpSecure] = useState('auto')
  const [appUrl, setAppUrl] = useState(window.location.origin)
  const [error, setError] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)

  const validateStep1 = () => {
    if (!email.trim() || !email.includes('@')) {
      setError(t('setup.validEmailRequired'))
      return false
    }
    if (!displayName.trim()) {
      setError(t('setup.displayNameRequired'))
      return false
    }
    if (password.length < 8) {
      setError(t('setup.passwordMinLength'))
      return false
    }
    if (password !== confirmPassword) {
      setError(t('setup.passwordsDoNotMatch'))
      return false
    }
    return true
  }

  const handleNext = () => {
    setError(null)
    if (validateStep1()) setStep(2)
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    setSubmitting(true)
    try {
      const data = await setupApi.completeSetup({
        email,
        password,
        displayName: displayName.trim(),
        smtpHost,
        smtpPort,
        smtpUser,
        smtpPass,
        smtpFrom: smtpFrom || 'BrainWave <noreply@brainwave.local>',
        smtpSecure,
        appUrl,
      })
      setToken(data.token)
      onComplete()
    } catch (err) {
      setError(
        err instanceof Error ? err.message : t('setup.setupFailed'),
      )
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="setup-page">
      <div className="setup-card">
        <div className="brand-mark" style={{ margin: '0 auto 16px' }} />
        <h1 className="setup-title">{t('setup.welcome')}</h1>
        <p className="setup-subtitle">
          {t('setup.subtitle')}
        </p>

        <div className="setup-steps">
          <div className={`setup-step ${step >= 1 ? 'active' : ''}`}>
            <span className="setup-step-num">1</span>
            <span className="setup-step-label">{t('setup.adminAccount')}</span>
          </div>
          <div className="setup-step-line" />
          <div className={`setup-step ${step >= 2 ? 'active' : ''}`}>
            <span className="setup-step-num">2</span>
            <span className="setup-step-label">{t('setup.emailSettings')}</span>
          </div>
        </div>

        {error && <div className="auth-error">{error}</div>}

        {step === 1 && (
          <>
            <div className="auth-field">
              <label className="auth-label" htmlFor="setup-email">
                {t('setup.email')}
              </label>
              <input
                id="setup-email"
                className="input"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="admin@example.com"
                required
                autoComplete="email"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="setup-name">
                {t('setup.displayName')}
              </label>
              <input
                id="setup-name"
                className="input"
                type="text"
                value={displayName}
                onChange={(e) => setDisplayName(e.target.value)}
                placeholder="Your name"
                required
                autoComplete="name"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="setup-password">
                {t('setup.password')}
              </label>
              <input
                id="setup-password"
                className="input"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Min. 8 characters"
                required
                minLength={8}
                autoComplete="new-password"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="setup-confirm">
                {t('setup.confirmPassword')}
              </label>
              <input
                id="setup-confirm"
                className="input"
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                placeholder="••••••••"
                required
                minLength={8}
                autoComplete="new-password"
              />
            </div>
            <button
              className="btn btn-primary auth-submit"
              onClick={handleNext}
              style={{ marginTop: 8 }}
            >
              {t('setup.continue')}
            </button>
          </>
        )}

        {step === 2 && (
          <form onSubmit={(e) => void handleSubmit(e)}>
            <p className="setup-hint">
              {t('setup.setupHint1')}
            </p>
            <p className="setup-hint">
              {t('setup.setupHint2')}
            </p>

            <div className="auth-field">
              <label className="auth-label" htmlFor="smtp-host">
                {t('setup.smtpHost')}
              </label>
              <input
                id="smtp-host"
                className="input"
                type="text"
                value={smtpHost}
                onChange={(e) => setSmtpHost(e.target.value)}
                placeholder="smtp.example.com"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="smtp-port">
                {t('setup.smtpPort')}
              </label>
              <input
                id="smtp-port"
                className="input"
                type="number"
                value={smtpPort}
                onChange={(e) => setSmtpPort(e.target.value)}
                placeholder="587"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="smtp-user">
                {t('setup.smtpUsername')}
              </label>
              <input
                id="smtp-user"
                className="input"
                type="text"
                value={smtpUser}
                onChange={(e) => setSmtpUser(e.target.value)}
                placeholder="user@example.com"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="smtp-pass">
                {t('setup.smtpPassword')}
              </label>
              <input
                id="smtp-pass"
                className="input"
                type="password"
                value={smtpPass}
                onChange={(e) => setSmtpPass(e.target.value)}
                placeholder="••••••••"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="smtp-from">
                {t('setup.fromAddress')}
              </label>
              <input
                id="smtp-from"
                className="input"
                type="text"
                value={smtpFrom}
                onChange={(e) => setSmtpFrom(e.target.value)}
                placeholder="BrainWave <noreply@brainwave.local>"
              />
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="smtp-secure">
                {t('setup.security')}
              </label>
              <select
                id="smtp-secure"
                className="input"
                value={smtpSecure}
                onChange={(e) => setSmtpSecure(e.target.value)}
              >
                <option value="auto">{t('setup.autoSsl')}</option>
                <option value="true">{t('setup.sslTls')}</option>
                <option value="false">{t('setup.noneStarttls')}</option>
              </select>
            </div>
            <div className="auth-field">
              <label className="auth-label" htmlFor="app-url">
                {t('setup.appUrl')}
              </label>
              <input
                id="app-url"
                className="input"
                type="url"
                value={appUrl}
                onChange={(e) => setAppUrl(e.target.value)}
                placeholder="https://brainwave.example.com"
              />
            </div>

            <div className="setup-actions">
              <button
                type="button"
                className="btn btn-ghost"
                onClick={() => setStep(1)}
              >
                {t('setup.back')}
              </button>
              <button
                className="btn btn-primary auth-submit"
                type="submit"
                disabled={submitting}
              >
                {submitting ? t('setup.settingUp') : t('setup.completeSetup')}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  )
}