'use client';
import { Suspense, useState, type FormEvent } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { demoAccountsFor, isDemoModeEnabled } from '@navi/config';

const DEMO_ACCOUNTS = demoAccountsFor('dashboard');
const IS_DEMO_MODE = isDemoModeEnabled({
  demoMode: process.env.NEXT_PUBLIC_DEMO_MODE,
  nodeEnv: process.env.NODE_ENV,
  naviEnv: process.env.NEXT_PUBLIC_NAVI_ENV,
});

export default function Login() {
  return (
    <Suspense fallback={null}>
      <LoginForm />
    </Suspense>
  );
}

function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const next = safeNextPath(searchParams.get('next'));
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    await loginWith(email, password);
  }

  async function loginWith(loginEmail: string, loginPassword: string) {
    setErr(null);
    if (!loginEmail || !loginPassword) {
      setErr('Email and password are required.');
      return;
    }
    setSubmitting(true);
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: loginEmail, password: loginPassword }),
      });
      if (!res.ok) {
        const txt = await res.text();
        setErr(res.status === 401 ? 'Invalid credentials.' : txt || 'Could not sign you in.');
        return;
      }
      router.push(next);
      router.refresh();
    } catch {
      setErr('Could not reach the server.');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <main style={{ display: 'grid', placeItems: 'center', minHeight: '100vh' }}>
      <form onSubmit={onSubmit} className="card" style={{ width: 360, display: 'grid', gap: 12 }}>
        <h1 style={{ margin: 0, color: 'var(--navi-blue-600)' }}>Navi Dashboard</h1>
        <p style={{ margin: 0, color: 'var(--navi-ink-500)' }}>Sign in with your admin or partner account.</p>
        <label>
          <div style={{ fontSize: 13, marginBottom: 4 }}>Email</div>
          <input className="input" value={email} onChange={(e) => setEmail(e.target.value)} type="email" autoComplete="email" />
        </label>
        <label>
          <div style={{ fontSize: 13, marginBottom: 4 }}>Password</div>
          <input className="input" value={password} onChange={(e) => setPassword(e.target.value)} type="password" autoComplete="current-password" />
        </label>
        {err ? <div style={{ color: 'var(--navi-danger)' }}>{err}</div> : null}
        <button className="btn-primary" type="submit" disabled={submitting}>
          {submitting ? 'Signing in…' : 'Sign in'}
        </button>
        {IS_DEMO_MODE ? (
          <section
            aria-label="Demo accounts"
            style={{
              borderTop: '1px solid var(--navi-border)',
              display: 'grid',
              gap: 8,
              marginTop: 8,
              paddingTop: 12,
            }}
          >
            <div style={{ color: 'var(--navi-ink-700)', fontSize: 13, fontWeight: 700 }}>
              Demo only: sign in as
            </div>
            {!process.env.NEXT_PUBLIC_DEMO_PASSWORD ? (
              <div style={{ color: 'var(--navi-danger)', fontSize: 13 }}>
                Set NEXT_PUBLIC_DEMO_PASSWORD to enable demo role login.
              </div>
            ) : null}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {DEMO_ACCOUNTS.map((account) => (
                <button
                  key={account.email}
                  type="button"
                  className="btn-secondary"
                  disabled={submitting || !process.env.NEXT_PUBLIC_DEMO_PASSWORD}
                  onClick={() => {
                    setEmail(account.email);
                    setPassword(process.env.NEXT_PUBLIC_DEMO_PASSWORD ?? '');
                    void loginWith(account.email, process.env.NEXT_PUBLIC_DEMO_PASSWORD ?? '');
                  }}
                  style={{ fontSize: 12, padding: '8px 10px' }}
                >
                  {account.label}
                </button>
              ))}
            </div>
          </section>
        ) : null}
      </form>
    </main>
  );
}

function safeNextPath(value: string | null): string {
  if (!value || !value.startsWith('/') || value.startsWith('//')) return '/overview';
  return value;
}