dashboards/apps/business/src/pages/LoginPage.tsx

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Eye, EyeOff, Smartphone, Lock, KeyRound, ArrowLeft, User } from 'lucide-react'
import { useAuth, BUSINESS_ACCESS_MESSAGE } from '../context/AuthContext'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { ApiError } from '../lib/api'
import { toE164CellNumber } from '../lib/cellNumber'
import { getBusinessDomain } from '../lib/config'
import { setActiveBusiness } from '../lib/businessContext'
import {
  logout as logoutRequest,
  register,
  sendOtp,
  verifyOtp,
} from '../services/authService'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './LoginPage.module.css'

type AuthView = 'login' | 'signup' | 'forgot' | 'otp'
type SmsStep = 'phone' | 'code'

export function LoginPage() {
  const navigate = useNavigate()
  const { login } = useAuth()
  const { businessName, logoUrl } = useTenantBranding()
  const businessDomain = getBusinessDomain()

  const [view, setView] = useState<AuthView>('login')
  const [smsStep, setSmsStep] = useState<SmsStep>('phone')
  const [showPassword, setShowPassword] = useState(false)
  const [phone, setPhone] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')
  const [smsCode, setSmsCode] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [codeSent, setCodeSent] = useState(false)
  const [countdown, setCountdown] = useState(0)
  const [error, setError] = useState('')
  const [info, setInfo] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)

  function clearMessages() {
    setError('')
    setInfo('')
  }

  function resetForm() {
    setPhone('')
    setPassword('')
    setConfirmPassword('')
    setFirstName('')
    setLastName('')
    setSmsCode('')
    setNewPassword('')
    setSmsStep('phone')
    setCodeSent(false)
    setShowPassword(false)
    clearMessages()
  }

  function switchView(next: AuthView) {
    resetForm()
    setView(next)
  }

  function startCountdown() {
    setCountdown(60)
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer)
          return 0
        }
        return prev - 1
      })
    }, 1000)
  }

  function handleApiError(err: unknown, fallback: string) {
    if (err instanceof ApiError) {
      setError(err.message)
    } else {
      setError(fallback)
    }
  }

  async function handleSendCode() {
    clearMessages()
    setIsSubmitting(true)

    try {
      const cellNumber = toE164CellNumber(phone)
      const result = await sendOtp(cellNumber)

      if (!result.enabled) {
        setInfo(result.message)
      }

      setCodeSent(true)
      setSmsStep('code')
      startCountdown()
    } catch (err) {
      handleApiError(err, 'Unable to send verification code.')
    } finally {
      setIsSubmitting(false)
    }
  }

  async function handleLogin(e: React.FormEvent) {
    e.preventDefault()
    clearMessages()
    setIsSubmitting(true)

    try {
      const cellNumber = toE164CellNumber(phone)
      await login(cellNumber, password)
      navigate('/')
    } catch (err) {
      handleApiError(err, 'Unable to sign in. Check your connection and try again.')
    } finally {
      setIsSubmitting(false)
    }
  }

  async function handleSignup(e: React.FormEvent) {
    e.preventDefault()
    clearMessages()

    if (password !== confirmPassword) {
      setError('Passwords do not match.')
      return
    }

    if (password.length < 8) {
      setError('Password must be at least 8 characters.')
      return
    }

    setIsSubmitting(true)

    try {
      const cellNumber = toE164CellNumber(phone)
      const data = await register({
        cellNumber,
        password,
        firstName: firstName.trim(),
        lastName: lastName.trim(),
        domain: businessDomain,
      })

      if (data.user.dashboard !== 'business' || data.user.businesses.length === 0) {
        logoutRequest()
        setError(
          `${BUSINESS_ACCESS_MESSAGE} Customer registration on ${businessDomain} does not grant dashboard access.`,
        )
        return
      }

      setActiveBusiness(data.user)
      navigate('/')
    } catch (err) {
      handleApiError(err, 'Unable to create account.')
    } finally {
      setIsSubmitting(false)
    }
  }

  async function handleResetPassword(e: React.FormEvent) {
    e.preventDefault()
    clearMessages()

    if (newPassword.length < 8) {
      setError('Password must be at least 8 characters.')
      return
    }

    setIsSubmitting(true)

    try {
      const cellNumber = toE164CellNumber(phone)
      await verifyOtp(cellNumber, smsCode)
      setInfo(
        'Phone number verified. Full password reset via SMS is not available yet — please contact your administrator or sign in if you remember your password.',
      )
      setTimeout(() => switchView('login'), 2500)
    } catch (err) {
      handleApiError(err, 'Unable to verify code.')
    } finally {
      setIsSubmitting(false)
    }
  }

  async function handleOtpLogin(e: React.FormEvent) {
    e.preventDefault()
    clearMessages()
    setIsSubmitting(true)

    try {
      const cellNumber = toE164CellNumber(phone)
      await verifyOtp(cellNumber, smsCode)

      if (!password) {
        setError('Enter your account password to complete sign-in after SMS verification.')
        return
      }

      await login(cellNumber, password)
      navigate('/')
    } catch (err) {
      handleApiError(err, 'Unable to sign in with SMS verification.')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className={styles.page}>
      <div className={styles.card}>
        <div className={styles.brand}>
          <img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
          <div className={styles.brandText}>
            <span className={styles.businessName}>{businessName || businessDomain}</span>
            <span className={styles.appName}>powered by Meshkee.app</span>
          </div>
        </div>

        {view === 'login' && (
          <>
            <h1 className={styles.title}>Welcome back</h1>
            <p className={styles.subtitle}>Sign in with your mobile number</p>

            <form className={styles.form} onSubmit={handleLogin}>
              {error && (
                <div className={styles.error} role="alert">
                  {error}
                </div>
              )}
              {info && <div className={styles.info}>{info}</div>}

              <div className={styles.field}>
                <label htmlFor="login-phone">Mobile number</label>
                <div className={styles.inputWrap}>
                  <Smartphone size={18} className={styles.inputIcon} />
                  <input
                    id="login-phone"
                    type="tel"
                    inputMode="tel"
                    placeholder="09122222222"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    required
                    disabled={isSubmitting}
                  />
                </div>
              </div>

              <div className={styles.field}>
                <label htmlFor="login-password">Password</label>
                <div className={styles.inputWrap}>
                  <Lock size={18} className={styles.inputIcon} />
                  <input
                    id="login-password"
                    type={showPassword ? 'text' : 'password'}
                    placeholder="Enter your password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                    minLength={8}
                    disabled={isSubmitting}
                  />
                  <button
                    type="button"
                    className={styles.togglePassword}
                    onClick={() => setShowPassword((v) => !v)}
                    aria-label={showPassword ? 'Hide password' : 'Show password'}
                    disabled={isSubmitting}
                  >
                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                  </button>
                </div>
              </div>

              <div className={styles.formActions}>
                <button
                  type="button"
                  className={styles.linkBtn}
                  onClick={() => switchView('forgot')}
                  disabled={isSubmitting}
                >
                  Forgot password?
                </button>
              </div>

              <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
                {isSubmitting ? 'Signing in...' : 'Sign in'}
              </button>
            </form>

            <div className={styles.divider}>
              <span>or</span>
            </div>

            <button
              type="button"
              className={styles.secondaryBtn}
              onClick={() => switchView('otp')}
              disabled={isSubmitting}
            >
              <KeyRound size={18} />
              One-time login with SMS
            </button>

            <p className={styles.footerText}>
              Don&apos;t have an account?{' '}
              <button
                type="button"
                className={styles.linkBtn}
                onClick={() => switchView('signup')}
                disabled={isSubmitting}
              >
                Sign up
              </button>
            </p>
          </>
        )}

        {view === 'signup' && (
          <>
            <h1 className={styles.title}>Create account</h1>
            <p className={styles.subtitle}>Staff accounts are invited by the business owner</p>

            <form className={styles.form} onSubmit={handleSignup}>
              {error && (
                <div className={styles.error} role="alert">
                  {error}
                </div>
              )}

              <div className={styles.fieldRow}>
                <div className={styles.field}>
                  <label htmlFor="signup-first">First name</label>
                  <div className={styles.inputWrap}>
                    <User size={18} className={styles.inputIcon} />
                    <input
                      id="signup-first"
                      type="text"
                      placeholder="First name"
                      value={firstName}
                      onChange={(e) => setFirstName(e.target.value)}
                      required
                      minLength={2}
                      disabled={isSubmitting}
                    />
                  </div>
                </div>
                <div className={styles.field}>
                  <label htmlFor="signup-last">Last name</label>
                  <div className={styles.inputWrap}>
                    <User size={18} className={styles.inputIcon} />
                    <input
                      id="signup-last"
                      type="text"
                      placeholder="Last name"
                      value={lastName}
                      onChange={(e) => setLastName(e.target.value)}
                      required
                      minLength={2}
                      disabled={isSubmitting}
                    />
                  </div>
                </div>
              </div>

              <div className={styles.field}>
                <label htmlFor="signup-phone">Mobile number</label>
                <div className={styles.inputWrap}>
                  <Smartphone size={18} className={styles.inputIcon} />
                  <input
                    id="signup-phone"
                    type="tel"
                    inputMode="tel"
                    placeholder="09123456789"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    required
                    disabled={isSubmitting}
                  />
                </div>
              </div>

              <div className={styles.field}>
                <label htmlFor="signup-password">Password</label>
                <div className={styles.inputWrap}>
                  <Lock size={18} className={styles.inputIcon} />
                  <input
                    id="signup-password"
                    type={showPassword ? 'text' : 'password'}
                    placeholder="Choose a password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                    minLength={8}
                    disabled={isSubmitting}
                  />
                  <button
                    type="button"
                    className={styles.togglePassword}
                    onClick={() => setShowPassword((v) => !v)}
                    aria-label={showPassword ? 'Hide password' : 'Show password'}
                    disabled={isSubmitting}
                  >
                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                  </button>
                </div>
              </div>

              <div className={styles.field}>
                <label htmlFor="signup-confirm">Confirm password</label>
                <div className={styles.inputWrap}>
                  <Lock size={18} className={styles.inputIcon} />
                  <input
                    id="signup-confirm"
                    type={showPassword ? 'text' : 'password'}
                    placeholder="Repeat your password"
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    required
                    minLength={8}
                    disabled={isSubmitting}
                  />
                </div>
              </div>

              <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
                {isSubmitting ? 'Creating account...' : 'Create account'}
              </button>
            </form>

            <p className={styles.footerText}>
              Already have an account?{' '}
              <button
                type="button"
                className={styles.linkBtn}
                onClick={() => switchView('login')}
                disabled={isSubmitting}
              >
                Sign in
              </button>
            </p>
          </>
        )}

        {view === 'forgot' && (
          <>
            <button
              type="button"
              className={styles.backBtn}
              onClick={() => switchView('login')}
              disabled={isSubmitting}
            >
              <ArrowLeft size={18} />
              Back to sign in
            </button>

            <h1 className={styles.title}>Forgot password</h1>
            <p className={styles.subtitle}>
              {smsStep === 'phone'
                ? 'We will send a verification code via SMS'
                : 'Enter the code and your new password'}
            </p>

            <form className={styles.form} onSubmit={handleResetPassword}>
              {error && (
                <div className={styles.error} role="alert">
                  {error}
                </div>
              )}
              {info && <div className={styles.info}>{info}</div>}

              {smsStep === 'phone' ? (
                <>
                  <div className={styles.field}>
                    <label htmlFor="forgot-phone">Mobile number</label>
                    <div className={styles.inputWrap}>
                      <Smartphone size={18} className={styles.inputIcon} />
                      <input
                        id="forgot-phone"
                        type="tel"
                        inputMode="tel"
                        placeholder="09122222222"
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                        required
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>

                  <button
                    type="button"
                    className={styles.submitBtn}
                    onClick={() => void handleSendCode()}
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? 'Sending...' : 'Send SMS code'}
                  </button>
                </>
              ) : (
                <>
                  {codeSent && (
                    <p className={styles.codeHint}>
                      Verification code sent to <strong>{phone}</strong>
                    </p>
                  )}

                  <div className={styles.field}>
                    <label htmlFor="forgot-code">SMS verification code</label>
                    <div className={styles.inputWrap}>
                      <KeyRound size={18} className={styles.inputIcon} />
                      <input
                        id="forgot-code"
                        type="text"
                        inputMode="numeric"
                        placeholder="123456"
                        maxLength={6}
                        value={smsCode}
                        onChange={(e) => setSmsCode(e.target.value.replace(/\D/g, ''))}
                        required
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>

                  <div className={styles.field}>
                    <label htmlFor="forgot-new-password">New password</label>
                    <div className={styles.inputWrap}>
                      <Lock size={18} className={styles.inputIcon} />
                      <input
                        id="forgot-new-password"
                        type={showPassword ? 'text' : 'password'}
                        placeholder="Enter new password"
                        value={newPassword}
                        onChange={(e) => setNewPassword(e.target.value)}
                        required
                        minLength={8}
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>

                  <div className={styles.resendRow}>
                    {countdown > 0 ? (
                      <span className={styles.countdown}>Resend code in {countdown}s</span>
                    ) : (
                      <button
                        type="button"
                        className={styles.linkBtn}
                        onClick={() => void handleSendCode()}
                        disabled={isSubmitting}
                      >
                        Resend SMS code
                      </button>
                    )}
                  </div>

                  <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
                    {isSubmitting ? 'Verifying...' : 'Reset password'}
                  </button>
                </>
              )}
            </form>
          </>
        )}

        {view === 'otp' && (
          <>
            <button
              type="button"
              className={styles.backBtn}
              onClick={() => switchView('login')}
              disabled={isSubmitting}
            >
              <ArrowLeft size={18} />
              Back to sign in
            </button>

            <h1 className={styles.title}>One-time login</h1>
            <p className={styles.subtitle}>
              {smsStep === 'phone'
                ? 'Sign in with a one-time SMS code'
                : 'Enter the SMS code and your password'}
            </p>

            <form className={styles.form} onSubmit={handleOtpLogin}>
              {error && (
                <div className={styles.error} role="alert">
                  {error}
                </div>
              )}

              {smsStep === 'phone' ? (
                <>
                  <div className={styles.field}>
                    <label htmlFor="otp-phone">Mobile number</label>
                    <div className={styles.inputWrap}>
                      <Smartphone size={18} className={styles.inputIcon} />
                      <input
                        id="otp-phone"
                        type="tel"
                        inputMode="tel"
                        placeholder="09122222222"
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                        required
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>

                  <button
                    type="button"
                    className={styles.submitBtn}
                    onClick={() => void handleSendCode()}
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? 'Sending...' : 'Send SMS code'}
                  </button>
                </>
              ) : (
                <>
                  {codeSent && (
                    <p className={styles.codeHint}>
                      Verification code sent to <strong>{phone}</strong>
                    </p>
                  )}

                  <div className={styles.field}>
                    <label htmlFor="otp-code">SMS verification code</label>
                    <div className={styles.inputWrap}>
                      <KeyRound size={18} className={styles.inputIcon} />
                      <input
                        id="otp-code"
                        type="text"
                        inputMode="numeric"
                        placeholder="123456"
                        maxLength={6}
                        value={smsCode}
                        onChange={(e) => setSmsCode(e.target.value.replace(/\D/g, ''))}
                        required
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>

                  <div className={styles.field}>
                    <label htmlFor="otp-password">Password</label>
                    <div className={styles.inputWrap}>
                      <Lock size={18} className={styles.inputIcon} />
                      <input
                        id="otp-password"
                        type={showPassword ? 'text' : 'password'}
                        placeholder="Your account password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                        minLength={8}
                        disabled={isSubmitting}
                      />
                    </div>
                  </div>

                  <div className={styles.resendRow}>
                    {countdown > 0 ? (
                      <span className={styles.countdown}>Resend code in {countdown}s</span>
                    ) : (
                      <button
                        type="button"
                        className={styles.linkBtn}
                        onClick={() => void handleSendCode()}
                        disabled={isSubmitting}
                      >
                        Resend SMS code
                      </button>
                    )}
                  </div>

                  <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
                    {isSubmitting ? 'Signing in...' : 'Sign in'}
                  </button>
                </>
              )}
            </form>
          </>
        )}
      </div>
    </div>
  )
}