import React, { useState, FormEvent } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { useNavigate, Link, Navigate } from 'react-router-dom';
import { LoadingSpinner } from '../../components/ui/LoadingSpinner';
import { Lock, Mail, Eye, EyeOff, ArrowLeft } from 'lucide-react';
export function LoginPage() {
const { login, isAuthenticated, isLoading } = useAuth();
const navigate = useNavigate();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [submitting, setSubmitting] = useState(false);
const [showPassword, setShowPassword] = useState(false);
if (isLoading) {
return (
<div className="flex min-h-screen items-center justify-center">
<LoadingSpinner size="lg" />
</div>
);
}
if (isAuthenticated) {
return <Navigate to="/app" replace />;
}
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
setError('');
setSubmitting(true);
try {
await login(email, password);
navigate('/app');
} catch (err: any) {
setError(err.response?.data?.error || 'Login failed. Please check your credentials.');
} finally {
setSubmitting(false);
}
};
return (
<div className="flex min-h-screen bg-surface-50">
{/* Left: branding */}
<div className="hidden flex-1 flex-col items-center justify-center bg-brand-600 p-8 sm:flex sm:p-12">
<Link
to="/"
className="self-start flex items-center gap-2 rounded-lg px-3 py-2 text-white/70 hover:text-white hover:bg-white/10 transition-colors mb-8 min-h-[44px]"
>
<ArrowLeft size={16} />
<span className="text-sm font-medium">Back to home</span>
</Link>
<div className="max-w-md text-white">
<div className="mb-8 flex h-12 w-12 items-center justify-center rounded-xl bg-white/10 text-xl font-bold">
CS
</div>
<h1 className="text-4xl font-bold leading-tight">
Command Center for Home Services Leaders
</h1>
<p className="mt-4 text-lg text-brand-200">
Revenue intelligence and portfolio management for multi-location operators and their partners.
</p>
<div className="mt-12 grid grid-cols-2 gap-6">
{[
{ label: 'Revenue Forecasting', value: 'AI-Powered' },
{ label: 'Portfolio View', value: 'Multi-Market' },
{ label: 'Partner Network', value: 'Commission Tracked' },
{ label: 'Goal Alignment', value: 'Real-Time' },
].map((item) => (
<div key={item.label}>
<p className="text-sm font-medium text-brand-200">{item.label}</p>
<p className="text-lg font-semibold">{item.value}</p>
</div>
))}
</div>
</div>
</div>
{/* Right panel - login form */}
<div className="flex w-full items-center justify-center bg-white p-8 lg:w-1/2">
<div className="w-full max-w-md">
<Link
to="/"
className="flex items-center gap-2 rounded-lg px-3 py-2 text-surface-400 hover:text-surface-600 hover:bg-surface-50 transition-colors mb-8 min-h-[44px]"
>
<ArrowLeft size={16} />
<span className="text-sm font-medium">Back to home</span>
</Link>
<div className="mb-8">
<h2 className="text-2xl font-bold text-surface-900">Sign in to Command Center</h2>
<p className="mt-2 text-surface-500">
Enter your credentials to access your account
</p>
</div>
{error && (
<div className="mb-6 rounded-lg bg-error/10 p-4 text-sm text-error">
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label htmlFor="email" className="mb-1.5 block text-sm font-medium text-surface-700">
Email
</label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-500" />
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full rounded-lg border border-gray-300 bg-white py-3 pl-10 pr-4 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
placeholder="you@company.com"
required
autoFocus
/>
</div>
</div>
<div>
<label htmlFor="password" className="mb-1.5 block text-sm font-medium text-surface-700">
Password
</label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-500" />
<input
id="password"
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full rounded-lg border border-gray-300 bg-white py-3 pl-10 pr-10 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
placeholder="••••••••"
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600 p-1.5 rounded min-w-[44px] min-h-[44px] flex items-center justify-center"
>
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</button>
</div>
</div>
<button
type="submit"
disabled={submitting}
className="w-full rounded-lg bg-brand-600 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-50"
>
{submitting ? <LoadingSpinner size="sm" /> : 'Sign In'}
</button>
<p className="text-center text-sm">
<Link to="/auth/forgot-password" className="font-medium text-brand-600 hover:text-brand-700">
Forgot your password?
</Link>
</p>
</form>
<p className="mt-6 text-center text-sm text-surface-500">
Don't have an account?{' '}
<Link to="/auth/signup" className="font-medium text-brand-600 hover:text-brand-700">
Create one
</Link>
</p>
<div className="mt-8 rounded-xl border border-surface-200 bg-gradient-to-br from-brand-50 to-surface-50 p-5">
<p className="text-xs font-semibold text-surface-700 tracking-wide uppercase">Demo Account</p>
<p className="mt-2 text-sm text-surface-600 font-mono bg-white/60 rounded-lg px-3 py-2 border border-surface-200">
demo@commandcenter.com / CmdSov-Demo-Xh1F_yVwAhs4
</p>
</div>
</div>
</div>
</div>
);
}