import { useState } from "react";
import { Link } from "react-router-dom";
import { api, AuthResponse, User } from "../lib/api";
import GadgetGrid from "../components/GadgetGrid";

interface SignInProps {
  onSuccess: (user: User, token: string) => void;
}

export default function SignIn({ onSuccess }: SignInProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
      const response = await api.post<AuthResponse>("/api/v1/auth/sign-in", {
        email,
        password,
      });
      onSuccess(response.user, response.token);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Invalid credentials");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="relative flex-1 flex bg-bg-primary overflow-hidden">
      <div className="absolute inset-0">
        <GadgetGrid />
      </div>
      <div className="relative z-10 flex items-center justify-center p-8">
        <div className="w-full max-w-md">
          <div className="border-2 border-border-default p-6 rounded bg-bg-secondary">
            <div className="font-mono text-text-secondary text-sm">
              <div className="mb-1 text-text-muted">
                // AUTHENTICATION REQUIRED
              </div>
              <div className="mb-6 text-text-primary">SYSTEM ACCESS</div>

              <div className="text-text-muted mb-6">
                Accounts are administered. Contact your administrator for
                access.
              </div>

              {error && (
                <div className="mb-4 p-3 border border-red-800 rounded bg-red-950/50">
                  <div className="text-red-400 font-mono text-sm">
                    <span className="text-text-muted">// ERROR: </span>
                    {error}
                  </div>
                </div>
              )}

              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <label
                    htmlFor="email"
                    className="block text-sm text-text-muted mb-1 font-mono"
                  >
                    email_address
                  </label>
                  <input
                    id="email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary font-mono focus:outline-none focus:border-border-highlight"
                    required
                    autoComplete="email"
                  />
                </div>
                <div>
                  <label
                    htmlFor="password"
                    className="block text-sm text-text-muted mb-1 font-mono"
                  >
                    password
                  </label>
                  <input
                    id="password"
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary font-mono focus:outline-none focus:border-border-highlight"
                    required
                    autoComplete="current-password"
                  />
                </div>
                <div className="flex gap-4 pt-4">
                  <Link
                    to="/"
                    className="flex-1 px-4 py-2 text-center border border-border-highlight text-text-primary hover:bg-bg-tertiary rounded transition-colors font-mono text-sm"
                  >
                    CANCEL
                  </Link>
                  <button
                    type="submit"
                    disabled={loading}
                    className="flex-1 px-4 py-2 bg-brand hover:bg-red-700 text-white rounded transition-colors disabled:opacity-50 font-mono text-sm"
                  >
                    {loading ? "VERIFYING..." : "AUTHENTICATE"}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
