import { createFileRoute, useNavigate, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { ensureGuardAuth } from "@/lib/guard-auth.functions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { toast } from "sonner";
import { Toaster } from "@/components/ui/sonner";
import { ShieldCheck } from "lucide-react";

export const Route = createFileRoute("/guard-login")({
  head: () => ({
    meta: [
      { title: "Guard Login — GuardForce Pro" },
      { name: "description", content: "Sign in as a security guard to mark attendance and view duty." },
    ],
  }),
  component: GuardLoginPage,
});

function GuardLoginPage() {
  const navigate = useNavigate();
  const [employeeId, setEmployeeId] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    supabase.auth.getSession().then(async ({ data }) => {
      if (!data.session) return;
      const { data: isGuard } = await supabase.rpc("has_role", {
        _user_id: data.session.user.id,
        _role: "guard",
      });
      if (isGuard) navigate({ to: "/attendance" });
    });
  }, [navigate]);

  const handleSignIn = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    const code = employeeId.trim();
    try {
      const { email, password } = await ensureGuardAuth({ data: { employee_id: code } });
      const { error } = await supabase.auth.signInWithPassword({ email, password });
      if (error) throw new Error(error.message);
      toast.success("Welcome back!");
      navigate({ to: "/attendance" });
    } catch (err) {
      const msg = err instanceof Error ? err.message : "Sign in failed";
      toast.error(msg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-hero p-4">
      <Toaster />
      <div className="w-full max-w-md">
        <Link to="/" className="flex items-center justify-center gap-2 mb-6">
          <div className="h-10 w-10 rounded-xl bg-gradient-primary grid place-items-center shadow-elegant">
            <ShieldCheck className="h-5 w-5 text-primary-foreground" />
          </div>
          <span className="text-2xl font-bold tracking-tight">Guard Portal</span>
        </Link>
        <Card className="shadow-elegant border-border/60 backdrop-blur bg-card/80">
          <CardHeader>
            <CardTitle>Guard Sign In</CardTitle>
            <CardDescription>
              Sign in with your guard account to mark attendance and view your duty roster.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSignIn} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="g-empid">Guard ID</Label>
                <Input
                  id="g-empid"
                  type="text"
                  inputMode="text"
                  placeholder="e.g. G-1024"
                  value={employeeId}
                  onChange={(e) => setEmployeeId(e.target.value)}
                  required
                  autoFocus
                />
              </div>
              <Button type="submit" className="w-full bg-gradient-primary shadow-elegant hover:opacity-95" disabled={loading}>
                {loading ? "Signing in..." : "Sign in as Guard"}
              </Button>
            </form>
            <div className="mt-4 text-center text-sm text-muted-foreground">
              Admin or supervisor?{" "}
              <Link to="/auth" className="text-primary underline">
                Use the main login
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}