"use client";

import { useState } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
import { useAuth } from "./AuthProvider";

export function LoginForm() {
  const { login, register } = useAuth();
  const [nickname, setNickname] = useState("");
  const [password, setPassword] = useState("");
  const [isRegister, setIsRegister] = useState(false);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    const fn = isRegister ? register : login;
    const err = await fn(nickname, password);
    if (err) setError(err);
    setLoading(false);
  };

  return (
    <Card className="w-full max-w-md mx-auto border-cyan-700/30 shadow-2xl shadow-cyan-900/20">
      <CardHeader className="text-center">
        <div className="text-4xl mb-2">🤡💥</div>
        <CardTitle className="text-2xl font-mono text-cyan-300 tracking-wider uppercase">
          BaraBingo
        </CardTitle>
        <CardDescription className="text-slate-500 font-mono text-xs">
          {isRegister ? "SUB CREW REGISTRATION" : "SUB NETWORK LOGIN"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <label className="text-xs font-mono text-slate-500 uppercase tracking-wider">Nickname</label>
            <Input
              placeholder="e.g. DrunkEngineer69"
              value={nickname}
              onChange={e => setNickname(e.target.value)}
              required
              minLength={2}
              maxLength={20}
              className="font-mono"
            />
          </div>
          <div className="space-y-2">
            <label className="text-xs font-mono text-slate-500 uppercase tracking-wider">Password</label>
            <Input
              type="password"
              placeholder="••••••"
              value={password}
              onChange={e => setPassword(e.target.value)}
              required
              minLength={4}
              className="font-mono"
            />
          </div>
          {error && (
            <div className="text-red-400 text-xs font-mono bg-red-950/30 border border-red-800/30 rounded-md p-2">
              ⚠ {error}
            </div>
          )}
          <Button type="submit" className="w-full font-mono" disabled={loading}>
            {loading ? "Connecting..." : isRegister ? "▶ REGISTER" : "▶ LOGIN"}
          </Button>
          <button
            type="button"
            onClick={() => { setIsRegister(!isRegister); setError(""); }}
            className="w-full text-center text-xs text-slate-600 hover:text-cyan-400 transition-colors font-mono cursor-pointer"
          >
            {isRegister ? "Already have clearance? Login" : "Need a badge? Register"}
          </button>
        </form>
      </CardContent>
    </Card>
  );
}