"use client";

import { useState, FormEvent } from "react";
import { useAuth } from "@/lib/auth";

export default function LoginPage() {
  const { login } = useAuth();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      await login(email, password);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Login failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="login-page">
      <div className="login-card">
        {/* Brand */}
        <div className="login-brand">
          <span className="eyebrow">Royal Horizon</span>
          <h1>Strategic Stock Movement Tracker</h1>
          <p>Sign in to your account to continue</p>
        </div>

        {/* Error */}
        {error && (
          <div className="snackbar snackbar-error">
            <span>⚠ {error}</span>
            <button onClick={() => setError(null)} className="snackbar-close">✕</button>
          </div>
        )}

        {/* Form */}
        <form onSubmit={handleSubmit} className="stack">
          <div className="form-field">
            <label htmlFor="email" className="form-label">Email</label>
            <input
              id="email"
              type="email"
              required
              autoComplete="email"
              placeholder="you@silal.ae"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="form-input"
            />
          </div>

          <div className="form-field">
            <label htmlFor="password" className="form-label">Password</label>
            <input
              id="password"
              type="password"
              required
              autoComplete="current-password"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="form-input"
            />
          </div>

          <button
            type="submit"
            className="button"
            disabled={loading}
            style={{ marginTop: 4 }}
          >
            {loading ? "Signing in…" : "Sign In"}
          </button>
        </form>

        {/* Role hint */}
        <div className="login-hint">
          <p>Default accounts for testing:</p>
          <div className="login-hint-grid">
            <span>Store Keeper</span><span>keeper@silal.ae / keeper123</span>
            <span>Store Manager</span><span>manager@silal.ae / manager123</span>
            <span>Super Admin</span><span>admin@silal.ae / admin123</span>
          </div>
        </div>
      </div>
    </div>
  );
}